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>
   );
-}
+};