Change to using arrow functions (#1603)

* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -22,7 +22,7 @@ export type EntitiesForMultipleEntitySelect<
   loading: boolean;
 };
 
-export function MultipleEntitySelect<
+export const MultipleEntitySelect = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   entities,
@@ -39,15 +39,15 @@ export function MultipleEntitySelect<
   onCancel?: () => void;
   onSubmit?: () => void;
   value: Record<string, boolean>;
-}) {
+}) => {
   const debouncedSetSearchFilter = debounce(onSearchFilterChange, 100, {
     leading: true,
   });
 
-  function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>) {
+  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     debouncedSetSearchFilter(event.currentTarget.value);
     onSearchFilterChange(event.currentTarget.value);
-  }
+  };
 
   let entitiesInDropdown = [
     ...(entities.filteredSelectedEntities ?? []),
@@ -103,4 +103,4 @@ export function MultipleEntitySelect<
       </StyledDropdownMenuItemsContainer>
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -34,7 +34,7 @@ export type SingleEntitySelectProps<
   | 'selectedEntity'
 >;
 
-export function SingleEntitySelect<
+export const SingleEntitySelect = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   disableBackgroundBlur = false,
@@ -42,7 +42,7 @@ export function SingleEntitySelect<
   onCreate,
   width,
   ...props
-}: SingleEntitySelectProps<CustomEntityForSelect>) {
+}: SingleEntitySelectProps<CustomEntityForSelect>) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
@@ -82,4 +82,4 @@ export function SingleEntitySelect<
       )}
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -28,7 +28,7 @@ export type SingleEntitySelectBaseProps<
   selectedEntity?: CustomEntityForSelect;
 };
 
-export function SingleEntitySelectBase<
+export const SingleEntitySelectBase = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   EmptyIcon,
@@ -38,7 +38,7 @@ export function SingleEntitySelectBase<
   onCancel,
   onEntitySelected,
   selectedEntity,
-}: SingleEntitySelectBaseProps<CustomEntityForSelect>) {
+}: SingleEntitySelectBaseProps<CustomEntityForSelect>) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const entitiesInDropdown = [selectedEntity, ...entitiesToSelect].filter(
     (entity): entity is CustomEntityForSelect =>
@@ -105,4 +105,4 @@ export function SingleEntitySelectBase<
       )}
     </StyledDropdownMenuItemsContainer>
   );
-}
+};

front/src/modules/ui/input/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -33,7 +33,8 @@ const meta: Meta<typeof SingleEntitySelect> = {
       ),
     },
   },
-  render: function Render(args) {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const searchFilter = useRecoilScopedValue(
       relationPickerSearchFilterScopedState,
     );

front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -13,7 +13,7 @@ const StyledDropdownMenuSkeletonContainer = styled.div`
   width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
-export function DropdownMenuSkeletonItem() {
+export const DropdownMenuSkeletonItem = () => {
   const theme = useTheme();
   return (
     <StyledDropdownMenuSkeletonContainer>
@@ -25,4 +25,4 @@ export function DropdownMenuSkeletonItem() {
       </SkeletonTheme>
     </StyledDropdownMenuSkeletonContainer>
   );
-}
+};

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectScroll.ts

@@ -8,7 +8,7 @@ import { relationPickerHoverIndexScopedState } from '../states/relationPickerHov
 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 
-export function useEntitySelectScroll<
+export const useEntitySelectScroll = <
   CustomEntityForSelect extends EntityForSelect,
 >({
   containerRef,
@@ -16,11 +16,11 @@ export function useEntitySelectScroll<
 }: {
   entities: CustomEntityForSelect[];
   containerRef: React.RefObject<HTMLDivElement>;
-}) {
+}) => {
   const [relationPickerHoverIndex, setRelationPickerHoverIndex] =
     useRecoilScopedState(relationPickerHoverIndexScopedState);
 
-  function resetScroll() {
+  const resetScroll = () => {
     setRelationPickerHoverIndex(0);
 
     const currentHoveredRef = containerRef.current?.children[0] as HTMLElement;
@@ -34,7 +34,7 @@ export function useEntitySelectScroll<
       },
       time: 0,
     });
-  }
+  };
 
   useScopedHotkeys(
     Key.ArrowUp,
@@ -94,4 +94,4 @@ export function useEntitySelectScroll<
     hoveredIndex: relationPickerHoverIndex,
     resetScroll,
   };
-}
+};

front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts

@@ -6,7 +6,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
 import { relationPickerSearchFilterScopedState } from '../states/relationPickerSearchFilterScopedState';
 
-export function useEntitySelectSearch() {
+export const useEntitySelectSearch = () => {
   const [, setRelationPickerHoverIndex] = useRecoilScopedState(
     relationPickerHoverIndexScopedState,
   );
@@ -22,12 +22,12 @@ export function useEntitySelectSearch() {
     },
   );
 
-  function handleSearchFilterChange(
+  const handleSearchFilterChange = (
     event: React.ChangeEvent<HTMLInputElement>,
-  ) {
+  ) => {
     debouncedSetSearchFilter(event.currentTarget.value);
     setRelationPickerHoverIndex(0);
-  }
+  };
 
   useEffect(() => {
     setRelationPickerSearchFilter('');
@@ -37,4 +37,4 @@ export function useEntitySelectSearch() {
     searchFilter: relationPickerSearchFilter,
     handleSearchFilterChange,
   };
-}
+};