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/board/components/BoardColumn.tsx

@@ -64,7 +64,7 @@ export type BoardColumnProps = {
   stageId: string;
 };
 
-export function BoardColumn({
+export const BoardColumn = ({
   color,
   title,
   onDelete,
@@ -74,7 +74,7 @@ export function BoardColumn({
   isFirstColumn,
   numChildren,
   stageId,
-}: BoardColumnProps) {
+}: BoardColumnProps) => {
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
     React.useState(false);
 
@@ -83,17 +83,17 @@ export function BoardColumn({
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  function handleTitleClick() {
+  const handleTitleClick = () => {
     setIsBoardColumnMenuOpen(true);
     setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
       goto: false,
     });
-  }
+  };
 
-  function handleClose() {
+  const handleClose = () => {
     goBackToPreviousHotkeyScope();
     setIsBoardColumnMenuOpen(false);
-  }
+  };
 
   return (
     <StyledColumn isFirstColumn={isFirstColumn}>
@@ -115,4 +115,4 @@ export function BoardColumn({
       {children}
     </StyledColumn>
   );
-}
+};

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -54,12 +54,12 @@ export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
   { name: 'Gray', id: 'gray' },
 ];
 
-export function BoardColumnEditTitleMenu({
+export const BoardColumnEditTitleMenu = ({
   onClose,
   onTitleEdit,
   title,
   color,
-}: BoardColumnEditTitleMenuProps) {
+}: BoardColumnEditTitleMenuProps) => {
   const [internalValue, setInternalValue] = useState(title);
   const debouncedOnUpdateTitle = debounce(
     (newTitle) => onTitleEdit(newTitle, color),
@@ -94,4 +94,4 @@ export function BoardColumnEditTitleMenu({
       ))}
     </StyledDropdownMenuItemsContainer>
   );
-}
+};

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -42,14 +42,14 @@ type OwnProps = {
 
 type Menu = 'actions' | 'add' | 'title';
 
-export function BoardColumnMenu({
+export const BoardColumnMenu = ({
   color,
   onClose,
   onDelete,
   onTitleEdit,
   stageId,
   title,
-}: OwnProps) {
+}: OwnProps) => {
   const [currentMenu, setCurrentMenu] = useState('actions');
 
   const [, setBoardColumns] = useRecoilState(boardColumnsState);
@@ -59,9 +59,9 @@ export function BoardColumnMenu({
   const { enqueueSnackBar } = useSnackBar();
   const createCompanyProgress = useCreateCompanyProgress();
 
-  function handleCompanySelected(
+  const handleCompanySelected = (
     selectedCompany: EntityForSelect | null | undefined,
-  ) {
+  ) => {
     if (!selectedCompany?.id) {
       enqueueSnackBar(
         'There was a problem with the company selection, please retry.',
@@ -78,7 +78,7 @@ export function BoardColumnMenu({
 
     createCompanyProgress(selectedCompany.id, stageId);
     closeMenu();
-  }
+  };
 
   const {
     setHotkeyScopeAndMemorizePreviousScope,
@@ -98,14 +98,14 @@ export function BoardColumnMenu({
     closeMenu();
   }, [closeMenu, onDelete, setBoardColumns, stageId]);
 
-  function setMenu(menu: Menu) {
+  const setMenu = (menu: Menu) => {
     if (menu === 'add') {
       setHotkeyScopeAndMemorizePreviousScope(
         RelationPickerHotkeyScope.RelationPicker,
       );
     }
     setCurrentMenu(menu);
-  }
+  };
   const [relationPickerSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
@@ -168,4 +168,4 @@ export function BoardColumnMenu({
       </StyledDropdownMenu>
     </StyledMenuContainer>
   );
-}
+};

front/src/modules/ui/board/components/BoardHeader.tsx

@@ -25,7 +25,7 @@ export type BoardHeaderProps = {
   onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
 };
 
-export function BoardHeader({ className, onStageAdd }: BoardHeaderProps) {
+export const BoardHeader = ({ className, onStageAdd }: BoardHeaderProps) => {
   const { onCurrentViewSubmit, ...viewBarContextProps } =
     useContext(ViewBarContext);
 
@@ -103,4 +103,4 @@ export function BoardHeader({ className, onStageAdd }: BoardHeaderProps) {
       </ViewBarContext.Provider>
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/board/components/BoardOptionsDropdown.tsx

@@ -13,10 +13,10 @@ type BoardOptionsDropdownProps = Pick<
   'customHotkeyScope' | 'onStageAdd'
 >;
 
-export function BoardOptionsDropdown({
+export const BoardOptionsDropdown = ({
   customHotkeyScope,
   onStageAdd,
-}: BoardOptionsDropdownProps) {
+}: BoardOptionsDropdownProps) => {
   return (
     <DropdownButton
       buttonComponents={<BoardOptionsDropdownButton />}
@@ -30,4 +30,4 @@ export function BoardOptionsDropdown({
       dropdownId={BoardOptionsDropdownKey}
     />
   );
-}
+};

front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx

@@ -3,14 +3,14 @@ import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 
 import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
-export function BoardOptionsDropdownButton() {
+export const BoardOptionsDropdownButton = () => {
   const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
     dropdownId: BoardOptionsDropdownKey,
   });
 
-  function handleClick() {
+  const handleClick = () => {
     toggleDropdownButton();
-  }
+  };
 
   return (
     <StyledHeaderDropdownButton
@@ -20,4 +20,4 @@ export function BoardOptionsDropdownButton() {
       Options
     </StyledHeaderDropdownButton>
   );
-}
+};

front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx

@@ -58,10 +58,10 @@ type ColumnForCreate = {
   title: string;
 };
 
-export function BoardOptionsDropdownContent({
+export const BoardOptionsDropdownContent = ({
   customHotkeyScope,
   onStageAdd,
-}: BoardOptionsDropdownContentProps) {
+}: BoardOptionsDropdownContentProps) => {
   const theme = useTheme();
 
   const BoardRecoilScopeContext =
@@ -250,4 +250,4 @@ export function BoardOptionsDropdownContent({
       )}
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -48,12 +48,12 @@ const StyledBoardHeader = styled(BoardHeader)`
   z-index: 1;
 ` as typeof BoardHeader;
 
-export function EntityBoard({
+export const EntityBoard = ({
   boardOptions,
   onColumnAdd,
   onColumnDelete,
   onEditColumnTitle,
-}: EntityBoardProps) {
+}: EntityBoardProps) => {
   const [boardColumns] = useRecoilState(boardColumnsState);
   const setCardSelected = useSetCardSelected();
 
@@ -158,4 +158,4 @@ export function EntityBoard({
   ) : (
     <></>
   );
-}
+};

front/src/modules/ui/board/components/EntityBoardActionBar.tsx

@@ -5,7 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
 
 import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
 
-export function EntityBoardActionBar() {
+export const EntityBoardActionBar = () => {
   const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
   return <ActionBar selectedIds={selectedCardIds}></ActionBar>;
-}
+};

front/src/modules/ui/board/components/EntityBoardCard.tsx

@@ -7,7 +7,7 @@ import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPo
 import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
 import { BoardOptions } from '../types/BoardOptions';
 
-export function EntityBoardCard({
+export const EntityBoardCard = ({
   boardOptions,
   cardId,
   index,
@@ -15,13 +15,13 @@ export function EntityBoardCard({
   boardOptions: BoardOptions;
   cardId: string;
   index: number;
-}) {
+}) => {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
 
   const { setCurrentCardSelected } = useCurrentCardSelected();
 
-  function handleContextMenu(event: React.MouseEvent) {
+  const handleContextMenu = (event: React.MouseEvent) => {
     event.preventDefault();
     setCurrentCardSelected(true);
     setContextMenuPosition({
@@ -29,7 +29,7 @@ export function EntityBoardCard({
       y: event.clientY,
     });
     setContextMenuOpenState(true);
-  }
+  };
 
   return (
     <Draggable key={cardId} draggableId={cardId} index={index}>
@@ -48,4 +48,4 @@ export function EntityBoardCard({
       )}
     </Draggable>
   );
-}
+};

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -47,7 +47,7 @@ const BoardColumnCardsContainer = ({
   );
 };
 
-export function EntityBoardColumn({
+export const EntityBoardColumn = ({
   boardOptions,
   column,
   onDelete,
@@ -57,7 +57,7 @@ export function EntityBoardColumn({
   column: BoardColumnDefinition;
   onDelete?: (columnId: string) => void;
   onTitleEdit: (columnId: string, title: string, color: string) => void;
-}) {
+}) => {
   const boardColumnId = useContext(BoardColumnIdContext) ?? '';
 
   const boardColumnTotal = useRecoilValue(
@@ -68,9 +68,9 @@ export function EntityBoardColumn({
     boardCardIdsByColumnIdFamilyState(boardColumnId ?? ''),
   );
 
-  function handleTitleEdit(title: string, color: string) {
+  const handleTitleEdit = (title: string, color: string) => {
     onTitleEdit(boardColumnId, title, color);
-  }
+  };
 
   return (
     <Droppable droppableId={column.id}>
@@ -116,4 +116,4 @@ export function EntityBoardColumn({
       )}
     </Droppable>
   );
-}
+};

front/src/modules/ui/board/components/EntityBoardContextMenu.tsx

@@ -5,7 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
 
 import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
 
-export function EntityBoardContextMenu() {
+export const EntityBoardContextMenu = () => {
   const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
   return <ContextMenu selectedIds={selectedCardIds}></ContextMenu>;
-}
+};

front/src/modules/ui/board/components/NewButton.tsx

@@ -24,7 +24,7 @@ type OwnProps = {
   onClick: () => void;
 };
 
-export function NewButton({ onClick }: OwnProps) {
+export const NewButton = ({ onClick }: OwnProps) => {
   const theme = useTheme();
 
   return (
@@ -33,4 +33,4 @@ export function NewButton({ onClick }: OwnProps) {
       New
     </StyledButton>
   );
-}
+};

front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx

@@ -5,7 +5,7 @@ import { IconTrash } from '@/ui/icon';
 
 import { useDeleteSelectedBoardCards } from './useDeleteSelectedBoardCards';
 
-export function useBoardActionBarEntries() {
+export const useBoardActionBarEntries = () => {
   const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
 
   const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
@@ -21,4 +21,4 @@ export function useBoardActionBarEntries() {
         },
       ]),
   };
-}
+};

front/src/modules/ui/board/hooks/useBoardContextMenuEntries.tsx

@@ -5,7 +5,7 @@ import { IconTrash } from '@/ui/icon';
 
 import { useDeleteSelectedBoardCards } from './useDeleteSelectedBoardCards';
 
-export function useBoardContextMenuEntries() {
+export const useBoardContextMenuEntries = () => {
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
 
   const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
@@ -21,4 +21,4 @@ export function useBoardContextMenuEntries() {
         },
       ]),
   };
-}
+};

front/src/modules/ui/board/hooks/useCurrentCardSelected.ts

@@ -7,7 +7,7 @@ import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
 import { activeCardIdsState } from '../states/activeCardIdsState';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
-export function useCurrentCardSelected() {
+export const useCurrentCardSelected = () => {
   const currentCardId = useContext(BoardCardIdContext);
 
   const isCardSelected = useRecoilValue(
@@ -58,4 +58,4 @@ export function useCurrentCardSelected() {
     setCurrentCardSelected,
     unselectAllActiveCards,
   };
-}
+};

front/src/modules/ui/board/hooks/useDeleteSelectedBoardCards.ts

@@ -8,7 +8,7 @@ import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSele
 
 import { useRemoveCardIds } from './useRemoveCardIds';
 
-export function useDeleteSelectedBoardCards() {
+export const useDeleteSelectedBoardCards = () => {
   const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
   const removeCardIds = useRemoveCardIds();
 
@@ -16,7 +16,7 @@ export function useDeleteSelectedBoardCards() {
     refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
   });
 
-  async function deleteSelectedBoardCards() {
+  const deleteSelectedBoardCards = async () => {
     await deletePipelineProgress({
       variables: {
         ids: selectedCardIds,
@@ -34,7 +34,7 @@ export function useDeleteSelectedBoardCards() {
         });
       },
     });
-  }
+  };
 
   return deleteSelectedBoardCards;
-}
+};

front/src/modules/ui/board/hooks/useRemoveCardIds.ts

@@ -4,8 +4,8 @@ import { useRecoilCallback } from 'recoil';
 import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
 import { boardColumnsState } from '../states/boardColumnsState';
 
-export function useRemoveCardIds() {
-  return useRecoilCallback(
+export const useRemoveCardIds = () =>
+  useRecoilCallback(
     ({ snapshot, set }) =>
       (cardIdToRemove: string[]) => {
         const boardColumns = snapshot
@@ -24,4 +24,3 @@ export function useRemoveCardIds() {
       },
     [],
   );
-}

front/src/modules/ui/board/hooks/useSetCardSelected.ts

@@ -5,7 +5,7 @@ import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'
 import { activeCardIdsState } from '../states/activeCardIdsState';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
-export function useSetCardSelected() {
+export const useSetCardSelected = () => {
   const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
 
   return useRecoilCallback(
@@ -26,4 +26,4 @@ export function useSetCardSelected() {
         }
       },
   );
-}
+};

front/src/modules/ui/board/hooks/useUpdateBoardCardIds.ts

@@ -5,8 +5,8 @@ import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColum
 import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 
-export function useUpdateBoardCardIds() {
-  return useRecoilCallback(
+export const useUpdateBoardCardIds = () =>
+  useRecoilCallback(
     ({ snapshot, set }) =>
       (result: DropResult) => {
         const currentBoardColumns = snapshot
@@ -83,4 +83,3 @@ export function useUpdateBoardCardIds() {
       },
     [],
   );
-}