From 82ae95062ad2b93cb98d589bcc627d29e564f2b9 Mon Sep 17 00:00:00 2001
From: Frompaje <yanedwards11@gmail.com>
Date: Tue, 27 Aug 2024 19:07:52 -0300
Subject: [PATCH] refactor: preview receives values from inputs

---
 src/components/Preview/Preview.tsx            | 10 +++++++--
 .../PreviewModeSelector.spec.tsx              | 22 ++++++++++++-------
 .../PreviewModeSelector.stories.tsx           |  7 +++++-
 .../PreviewModeSelector.tsx                   |  4 +---
 .../PreviewModeSelector.types.ts              |  1 +
 src/components/Tabber/utils.ts                |  7 ------
 6 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/Preview/Preview.tsx b/src/components/Preview/Preview.tsx
index 4255cd026..400bf7532 100644
--- a/src/components/Preview/Preview.tsx
+++ b/src/components/Preview/Preview.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 
 import { IconsType } from '~components/Icon/Icon.types';
 import { PreviewModeSelector } from '~components/Tabber/PreviewModeSelector/PreviewModeSelector';
@@ -25,11 +25,17 @@ const previewModeMockList = [
   },
 ];
 
+const getTargetValue = (e: ChangeEvent<HTMLInputElement>): string =>
+  e.target.value;
+
 function Preview(props: PreviewProps): ReactNode {
   return (
     <div className={scss.container}>
       <div className={scss.previewContent}>
-        <PreviewModeSelector list={previewModeMockList} />
+        <PreviewModeSelector
+          changeDevice={getTargetValue}
+          list={previewModeMockList}
+        />
       </div>
       <div>{props.children}</div>
     </div>
diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx
index a09f49652..ded9fe2ce 100644
--- a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx
+++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx
@@ -1,8 +1,8 @@
+import { ChangeEvent } from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { changeDevice } from '../utils';
-
 import { IconsType } from '~components/Icon/Icon.types';
 
 import { PreviewMode } from './PreviewModeSelector.components';
@@ -13,18 +13,24 @@ describe('PreviewModeSelector', () => {
     id: 'some-id',
     name: 'some-name',
   };
+  let getTargetValue: (e: ChangeEvent<HTMLInputElement>) => string;
+
+  beforeEach(() => {
+    getTargetValue = (e: ChangeEvent<HTMLInputElement>): string =>
+      e.target.value;
+  });
 
   describe('PreviewMode', () => {
-    it('[Icon] should render the icons', () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('render the icons when passed', () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const icon = screen.getByRole('img');
 
       expect(icon).toBeInTheDocument();
     });
 
-    it('[Icon] When clicked, it should change to checked', async () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('When clicked, it  change to checked', async () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const inputElement = screen.getByRole('radio', { name: 'some-name' });
 
@@ -33,8 +39,8 @@ describe('PreviewModeSelector', () => {
       expect(inputElement).toBeChecked();
     });
 
-    it('[Icon] When clicked, it should change to background', async () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('changes the background when clicked', async () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const inputElement = screen.getByRole('radio', { name: 'some-name' });
 
diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx
index bbd54061c..89d2af6a0 100644
--- a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx
+++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx
@@ -1,3 +1,5 @@
+import { ChangeEvent } from 'react';
+
 import { Story } from '@ladle/react';
 
 import { IconsType } from '~components/Icon/Icon.types';
@@ -23,5 +25,8 @@ const previewModes = [
 ];
 
 export const PreviewModeSelectorStories: Story = () => (
-  <PreviewModeSelector list={previewModes} />
+  <PreviewModeSelector
+    changeDevice={(e: ChangeEvent<HTMLInputElement>) => e.target.value}
+    list={previewModes}
+  />
 );
diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx
index 0b56f80bd..c35cfe62c 100644
--- a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx
+++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { changeDevice } from '../utils';
-
 import scss from './PreviewModeSelector.module.scss';
 
 import { PreviewMode } from './PreviewModeSelector.components';
@@ -13,7 +11,7 @@ export function PreviewModeSelector(
   return (
     <div className={scss.containerPreview}>
       {props.list.map((item) => (
-        <PreviewMode item={item} key={item.id} onSelect={changeDevice} />
+        <PreviewMode item={item} key={item.id} onSelect={props.changeDevice} />
       ))}
     </div>
   );
diff --git a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts
index f7cb2409a..99db61990 100644
--- a/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts
+++ b/src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts
@@ -14,5 +14,6 @@ export type PreviewModeProps = {
 };
 
 export type PreviewModeSelectorProps = {
+  changeDevice: (e: ChangeEvent<HTMLInputElement>) => string;
   list: PreviewMode[];
 };
diff --git a/src/components/Tabber/utils.ts b/src/components/Tabber/utils.ts
index f417f4f9f..8c7fdd091 100644
--- a/src/components/Tabber/utils.ts
+++ b/src/components/Tabber/utils.ts
@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 // @ts-nocheck
-import { ChangeEvent } from 'react';
-
 import { Account } from '~services/api/accounts/accounts.types';
 import { SocialMedia } from '~services/api/social-media/social-media.types';
 import { AccountPost } from '~stores/useAccountStore';
@@ -24,11 +22,6 @@ export const createTabId = (account: Account): TabId => {
   return `${account.id}-${account.socialMediaId}`;
 };
 
-export const changeDevice = (e: ChangeEvent<HTMLInputElement>): string => {
-  const targetValuePreview = e.target.value;
-  return targetValuePreview;
-};
-
 export const accountsToTabs = (
   accounts: AccountPost[],
   socialMedias: SocialMediaState['socialMedias']