feat: extract logic to hook

Tivix · Jul 19, 2024 · ebbfd09 · ebbfd09
1 parent 125034c
commit ebbfd09
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 13 deletions.
diff --git a/frontend/src/components/common/Listbox/Listbox.hooks.ts b/frontend/src/components/common/Listbox/Listbox.hooks.ts
@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+import { ListboxProps } from './Listbox.interface';
+
+export const useListBox = (onClear: ListboxProps['onClear']) => {
+  const handleClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    onClear?.();
+  };
+  return { handleClear };
+};
diff --git a/frontend/src/components/common/Listbox/Listbox.interface.ts b/frontend/src/components/common/Listbox/Listbox.interface.ts
@@ -4,5 +4,5 @@ export interface ListboxProps {
   name: string;
   options: Option[];
   placeholder?: string;
-  handleClear?: () => void;
+  onClear?: () => void;
 }
diff --git a/frontend/src/components/common/Listbox/Listbox.tsx b/frontend/src/components/common/Listbox/Listbox.tsx
@@ -6,9 +6,11 @@ import { ListboxProps } from './Listbox.interface';
 import { generateClassNames } from '@app/utils';
 import { ChevronUpIcon } from '@app/static/icons/ChevronUpIcon';
 import { CloseIcon } from '@app/static/icons/CloseIcon';
+import { useListBox } from './Listbox.hooks';
 
-export const Listbox: FC<ListboxProps> = ({ name, options, placeholder, handleClear }) => {
+export const Listbox: FC<ListboxProps> = ({ name, options, placeholder, onClear }) => {
   const { control } = useFormContext();
+  const { handleClear } = useListBox(onClear);
 
   return (
     <Controller
@@ -36,12 +38,7 @@ export const Listbox: FC<ListboxProps> = ({ name, options, placeholder, handleCl
                 <div className="flex flex-1 items-center justify-between">
                   {!value && placeholder ? placeholder : value?.name}
                   {selected ? (
-                    <div
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleClear?.();
-                      }}
-                    >
+                    <div onClick={handleClear}>
                       <CloseIcon />
                     </div>
                   ) : (

diff --git a/frontend/src/components/common/Tabs/Tabs.hooks.ts b/frontend/src/components/common/Tabs/Tabs.hooks.ts
@@ -0,0 +1,10 @@
+import { ChangeEvent } from 'react';
+import { TabsProps } from './Tabs.interface';
+
+export const useTabs = (tabs: TabsProps['tabs'], onTabChange: TabsProps['onTabChange']) => {
+  const handleSelectTab = (e: ChangeEvent<HTMLSelectElement>) => {
+    const tab = tabs.find((tab) => tab.name === e.target.value);
+    if (tab) onTabChange(tab);
+  };
+  return { handleSelectTab };
+};
diff --git a/frontend/src/components/common/Tabs/Tabs.tsx b/frontend/src/components/common/Tabs/Tabs.tsx
@@ -1,8 +1,10 @@
 import { FC } from 'react';
 import { TabsProps } from './Tabs.interface';
 import { generateClassNames } from '@app/utils';
+import { useTabs } from './Tabs.hooks';
 
 export const Tabs: FC<TabsProps> = ({ tabs, current, onTabChange, className }) => {
+  const { handleSelectTab } = useTabs(tabs, onTabChange);
   return (
     <div>
       <div className="sm:hidden">
@@ -12,10 +14,7 @@ export const Tabs: FC<TabsProps> = ({ tabs, current, onTabChange, className }) =
         <select
           id="tabs"
           name="tabs"
-          onChange={(e) => {
-            const tab = tabs.find((tab) => tab.name === e.target.value);
-            if (tab) onTabChange(tab);
-          }}
+          onChange={handleSelectTab}
           defaultValue={tabs.find((tab) => tab.id === current.id)?.id}
           className="block w-full rounded-md border-navy-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
         >

diff --git a/frontend/src/components/pages/People/People.tsx b/frontend/src/components/pages/People/People.tsx
@@ -35,7 +35,7 @@ export const People = () => {
                 options={bands}
                 name={peopleTableFormName.band}
                 placeholder="Current band"
-                handleClear={handleClearBand}
+                onClear={handleClearBand}
               />
             </div>
           </div>