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/companies/components/AddPersonToCompany.tsx

@@ -38,13 +38,13 @@ const StyledInputContainer = styled.div`
 
 const defaultUsername = { firstName: '', lastName: '' };
 
-export function AddPersonToCompany({
+export const AddPersonToCompany = ({
   companyId,
   peopleIds,
 }: {
   companyId: string;
   peopleIds?: string[];
-}) {
+}) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isCreationDropdownOpen, setIsCreationDropdownOpen] = useState(false);
   const [username, setUsername] = useState(defaultUsername);
@@ -60,8 +60,8 @@ export function AddPersonToCompany({
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  function handlePersonSelected(companyId: string) {
-    return async (newPerson: PersonForSelect | null) => {
+  const handlePersonSelected =
+    (companyId: string) => async (newPerson: PersonForSelect | null) => {
       if (newPerson) {
         await updatePerson({
           variables: {
@@ -77,30 +77,31 @@ export function AddPersonToCompany({
         handleClosePicker();
       }
     };
-  }
 
-  function handleClosePicker() {
+  const handleClosePicker = () => {
     if (isDropdownOpen) {
       setIsDropdownOpen(false);
       goBackToPreviousHotkeyScope();
     }
-  }
+  };
 
-  function handleOpenPicker() {
+  const handleOpenPicker = () => {
     if (!isDropdownOpen) {
       setIsDropdownOpen(true);
       setHotkeyScopeAndMemorizePreviousScope(
         RelationPickerHotkeyScope.RelationPicker,
       );
     }
-  }
+  };
 
-  function handleUsernameChange(type: 'firstName' | 'lastName') {
-    return (name: string): void =>
+  const handleUsernameChange =
+    (type: 'firstName' | 'lastName') =>
+    (name: string): void =>
       setUsername((prevUserName) => ({ ...prevUserName, [type]: name }));
-  }
 
-  async function handleInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+  const handleInputKeyDown = async (
+    e: React.KeyboardEvent<HTMLInputElement>,
+  ) => {
     if (e.key !== 'Enter' || (!username.firstName && !username.lastName))
       return;
     const newPersonId = v4();
@@ -116,7 +117,7 @@ export function AddPersonToCompany({
     });
     setIsCreationDropdownOpen(false);
     setUsername(defaultUsername);
-  }
+  };
 
   return (
     <RecoilScope>
@@ -161,4 +162,4 @@ export function AddPersonToCompany({
       </StyledContainer>
     </RecoilScope>
   );
-}
+};

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -100,7 +100,7 @@ const StyledFieldContainer = styled.div`
   width: 100%;
 `;
 
-export function CompanyBoardCard() {
+export const CompanyBoardCard = () => {
   const { BoardRecoilScopeContext } = useBoardContext();
 
   const { currentCardSelected, setCurrentCardSelected } =
@@ -122,21 +122,19 @@ export function CompanyBoardCard() {
     return null;
   }
 
-  function PreventSelectOnClickContainer({
+  const PreventSelectOnClickContainer = ({
     children,
   }: {
     children: ReactNode;
-  }) {
-    return (
-      <StyledFieldContainer
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        {children}
-      </StyledFieldContainer>
-    );
-  }
+  }) => (
+    <StyledFieldContainer
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </StyledFieldContainer>
+  );
 
   return (
     <StyledBoardCardWrapper>
@@ -185,4 +183,4 @@ export function CompanyBoardCard() {
       </StyledBoardCard>
     </StyledBoardCardWrapper>
   );
-}
+};

front/src/modules/companies/components/CompanyChip.tsx

@@ -7,20 +7,18 @@ type OwnProps = {
   variant?: EntityChipVariant;
 };
 
-export function CompanyChip({
+export const CompanyChip = ({
   id,
   name,
   pictureUrl,
   variant = EntityChipVariant.Regular,
-}: OwnProps) {
-  return (
-    <EntityChip
-      entityId={id}
-      linkToEntity={`/companies/${id}`}
-      name={name}
-      avatarType="squared"
-      pictureUrl={pictureUrl}
-      variant={variant}
-    />
-  );
-}
+}: OwnProps) => (
+  <EntityChip
+    entityId={id}
+    linkToEntity={`/companies/${id}`}
+    name={name}
+    avatarType="squared"
+    pictureUrl={pictureUrl}
+    variant={variant}
+  />
+);

front/src/modules/companies/components/CompanyPicker.tsx

@@ -13,7 +13,7 @@ export type OwnProps = {
   onCancel?: () => void;
 };
 
-export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
+export const CompanyPicker = ({ companyId, onSubmit, onCancel }: OwnProps) => {
   const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
     useRecoilScopedState(relationPickerSearchFilterScopedState);
 
@@ -22,11 +22,11 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
     selectedIds: companyId ? [companyId] : [],
   });
 
-  async function handleEntitySelected(
+  const handleEntitySelected = async (
     selectedCompany: EntityForSelect | null | undefined,
-  ) {
+  ) => {
     onSubmit(selectedCompany ?? null);
-  }
+  };
 
   useEffect(() => {
     setRelationPickerSearchFilter('');
@@ -41,4 +41,4 @@ export function CompanyPicker({ companyId, onSubmit, onCancel }: OwnProps) {
       selectedEntity={companies.selectedEntities[0]}
     />
   );
-}
+};

front/src/modules/companies/components/CompanyPickerCell.tsx

@@ -23,13 +23,13 @@ export type CompanyPickerSelectedCompany = EntityForSelect & {
   domainName: string;
 };
 
-export function CompanyPickerCell({
+export const CompanyPickerCell = ({
   companyId,
   onSubmit,
   onCancel,
   createModeEnabled,
   width,
-}: OwnProps) {
+}: OwnProps) => {
   const [isCreateMode, setIsCreateMode] = useRecoilScopedState(
     isCreateModeScopedState,
   );
@@ -47,18 +47,18 @@ export function CompanyPickerCell({
     selectedIds: [companyId ?? ''],
   });
 
-  async function handleCompanySelected(
+  const handleCompanySelected = async (
     company: CompanyPickerSelectedCompany | null | undefined,
-  ) {
+  ) => {
     onSubmit(company ?? null);
-  }
+  };
 
-  function handleStartCreation() {
+  const handleStartCreation = () => {
     setIsCreateMode(true);
     setHotkeyScope(TableHotkeyScope.CellDoubleTextInput);
-  }
+  };
 
-  async function handleCreate(firstValue: string, secondValue: string) {
+  const handleCreate = async (firstValue: string, secondValue: string) => {
     const insertCompanyRequest = await insertCompany({
       variables: {
         data: {
@@ -77,7 +77,7 @@ export function CompanyPickerCell({
         domainName: companyCreated.domainName,
       });
     setIsCreateMode(false);
-  }
+  };
   return isCreateMode ? (
     <DoubleTextCellEdit
       firstValue={relationPickerSearchFilter}
@@ -99,4 +99,4 @@ export function CompanyPickerCell({
       width={width}
     />
   );
-}
+};

front/src/modules/companies/components/CompanyProgressPicker.tsx

@@ -25,11 +25,11 @@ export type OwnProps = {
   onCancel?: () => void;
 };
 
-export function CompanyProgressPicker({
+export const CompanyProgressPicker = ({
   companyId,
   onSubmit,
   onCancel,
-}: OwnProps) {
+}: OwnProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { searchFilter, handleSearchFilterChange } = useEntitySelectSearch();
@@ -53,16 +53,16 @@ export function CompanyProgressPicker({
     [currentPipeline],
   );
 
-  function handlePipelineStageChange(newPipelineStageId: string) {
+  const handlePipelineStageChange = (newPipelineStageId: string) => {
     setSelectedPipelineStageId(newPipelineStageId);
     setIsProgressSelectionUnfolded(false);
-  }
+  };
 
-  async function handleEntitySelected(
+  const handleEntitySelected = async (
     selectedCompany: EntityForSelect | null | undefined,
-  ) {
+  ) => {
     onSubmit(selectedCompany ?? null, selectedPipelineStageId);
-  }
+  };
 
   useEffect(() => {
     if (currentPipelineStages?.[0]?.id) {
@@ -125,4 +125,4 @@ export function CompanyProgressPicker({
       )}
     </StyledDropdownMenu>
   );
-}
+};

front/src/modules/companies/components/CompanyTeam.tsx

@@ -42,7 +42,7 @@ const StyledTitle = styled.div`
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
 `;
 
-export function CompanyTeam({ company }: CompanyTeamPropsType) {
+export const CompanyTeam = ({ company }: CompanyTeamPropsType) => {
   const { data } = useGetPeopleQuery({
     variables: {
       orderBy: [],
@@ -77,4 +77,4 @@ export function CompanyTeam({ company }: CompanyTeamPropsType) {
       )}
     </>
   );
-}
+};

front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx

@@ -7,7 +7,7 @@ import { filterDropdownSelectedEntityIdScopedState } from '@/ui/view-bar/states/
 
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 
-export function FilterDropdownCompanySearchSelect() {
+export const FilterDropdownCompanySearchSelect = () => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
 
   const filterDropdownSearchInput = useRecoilScopedValue(
@@ -30,4 +30,4 @@ export function FilterDropdownCompanySearchSelect() {
   return (
     <FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
   );
-}
+};

front/src/modules/companies/components/HooksCompanyBoardEffect.tsx

@@ -24,7 +24,7 @@ import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
-export function HooksCompanyBoardEffect() {
+export const HooksCompanyBoardEffect = () => {
   const [, setAvailableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
     CompanyBoardRecoilScopeContext,
@@ -134,4 +134,4 @@ export function HooksCompanyBoardEffect() {
   ]);
 
   return <></>;
-}
+};

front/src/modules/companies/components/NewCompanyProgressButton.tsx

@@ -12,7 +12,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { useCreateCompanyProgress } from '../hooks/useCreateCompanyProgress';
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
 
-export function NewCompanyProgressButton() {
+export const NewCompanyProgressButton = () => {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
   const pipelineStageId = useContext(BoardColumnIdContext);
 
@@ -25,7 +25,7 @@ export function NewCompanyProgressButton() {
 
   const createCompanyProgress = useCreateCompanyProgress();
 
-  function handleEntitySelect(company: any) {
+  const handleEntitySelect = (company: any) => {
     setIsCreatingCard(false);
     goBackToPreviousHotkeyScope();
 
@@ -38,7 +38,7 @@ export function NewCompanyProgressButton() {
     }
 
     createCompanyProgress(company.id, pipelineStageId);
-  }
+  };
 
   const handleNewClick = useCallback(() => {
     setIsCreatingCard(true);
@@ -47,10 +47,10 @@ export function NewCompanyProgressButton() {
     );
   }, [setIsCreatingCard, setHotkeyScopeAndMemorizePreviousScope]);
 
-  function handleCancel() {
+  const handleCancel = () => {
     goBackToPreviousHotkeyScope();
     setIsCreatingCard(false);
-  }
+  };
 
   const [relationPickerSearchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
@@ -76,4 +76,4 @@ export function NewCompanyProgressButton() {
       )}
     </>
   );
-}
+};

front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -33,7 +33,7 @@ const StyledEditableTitleInput = styled.input<{
   width: calc(100% - ${({ theme }) => theme.spacing(2)});
 `;
 
-export function CompanyNameEditableField({ company }: OwnProps) {
+export const CompanyNameEditableField = ({ company }: OwnProps) => {
   const [internalValue, setInternalValue] = useState(company.name);
 
   const [updateCompany] = useUpdateOneCompanyMutation();
@@ -42,11 +42,11 @@ export function CompanyNameEditableField({ company }: OwnProps) {
     setInternalValue(company.name);
   }, [company.name]);
 
-  async function handleChange(newValue: string) {
+  const handleChange = async (newValue: string) => {
     setInternalValue(newValue);
-  }
+  };
 
-  async function handleSubmit() {
+  const handleSubmit = async () => {
     await updateCompany({
       variables: {
         where: {
@@ -57,7 +57,7 @@ export function CompanyNameEditableField({ company }: OwnProps) {
         },
       },
     });
-  }
+  };
 
   return (
     <RecoilScope CustomRecoilScopeContext={FieldRecoilScopeContext}>
@@ -69,4 +69,4 @@ export function CompanyNameEditableField({ company }: OwnProps) {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/companies/hooks/useCompanyQuery.ts

@@ -3,7 +3,7 @@ import { useSetRecoilState } from 'recoil';
 import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
 import { useGetCompanyQuery } from '~/generated/graphql';
 
-export function useCompanyQuery(id: string) {
+export const useCompanyQuery = (id: string) => {
   const updateCompanyShowPage = useSetRecoilState(
     genericEntitiesFamilyState(id),
   );
@@ -13,4 +13,4 @@ export function useCompanyQuery(id: string) {
       updateCompanyShowPage(data?.findUniqueCompany);
     },
   });
-}
+};

front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx

@@ -8,15 +8,15 @@ import { ActivityType } from '~/generated/graphql';
 
 import { useDeleteSelectedComapnies } from './useDeleteCompanies';
 
-export function useCompanyTableActionBarEntries() {
+export const useCompanyTableActionBarEntries = () => {
   const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
 
   const openCreateActivityRightDrawer =
     useOpenCreateActivityDrawerForSelectedRowIds();
 
-  async function handleActivityClick(type: ActivityType) {
+  const handleActivityClick = async (type: ActivityType) => {
     openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
-  }
+  };
 
   const deleteSelectedCompanies = useDeleteSelectedComapnies();
   return {
@@ -40,4 +40,4 @@ export function useCompanyTableActionBarEntries() {
         },
       ]),
   };
-}
+};

front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx

@@ -8,15 +8,15 @@ import { ActivityType } from '~/generated/graphql';
 
 import { useDeleteSelectedComapnies } from './useDeleteCompanies';
 
-export function useCompanyTableContextMenuEntries() {
+export const useCompanyTableContextMenuEntries = () => {
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
 
   const openCreateActivityRightDrawer =
     useOpenCreateActivityDrawerForSelectedRowIds();
 
-  async function handleButtonClick(type: ActivityType) {
+  const handleButtonClick = async (type: ActivityType) => {
     openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
-  }
+  };
 
   const deleteSelectedCompanies = useDeleteSelectedComapnies();
 
@@ -41,4 +41,4 @@ export function useCompanyTableContextMenuEntries() {
         },
       ]),
   };
-}
+};

front/src/modules/companies/hooks/useCreateCompanyProgress.ts

@@ -8,7 +8,7 @@ import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
 import { useCreateOneCompanyPipelineProgressMutation } from '~/generated/graphql';
 
-export function useCreateCompanyProgress() {
+export const useCreateCompanyProgress = () => {
   const [createOneCompanyPipelineProgress] =
     useCreateOneCompanyPipelineProgressMutation({
       refetchQueries: [
@@ -44,4 +44,4 @@ export function useCreateCompanyProgress() {
       },
     [createOneCompanyPipelineProgress, currentPipeline],
   );
-}
+};

front/src/modules/companies/hooks/useDeleteCompanies.ts

@@ -7,7 +7,7 @@ import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowI
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
 
-export function useDeleteSelectedComapnies() {
+export const useDeleteSelectedComapnies = () => {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   const resetRowSelection = useResetTableRowSelection();
@@ -18,7 +18,7 @@ export function useDeleteSelectedComapnies() {
 
   const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
-  async function deleteSelectedCompanies() {
+  const deleteSelectedCompanies = async () => {
     const rowIdsToDelete = selectedRowIds;
 
     resetRowSelection();
@@ -46,7 +46,7 @@ export function useDeleteSelectedComapnies() {
         });
       },
     });
-  }
+  };
 
   return deleteSelectedCompanies;
-}
+};

front/src/modules/companies/hooks/useFilteredSearchCompanyQuery.ts

@@ -3,7 +3,7 @@ import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEn
 import { useSearchCompanyQuery } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
-export function useFilteredSearchCompanyQuery({
+export const useFilteredSearchCompanyQuery = ({
   searchFilter,
   selectedIds = [],
   limit,
@@ -11,7 +11,7 @@ export function useFilteredSearchCompanyQuery({
   searchFilter: string;
   selectedIds?: string[];
   limit?: number;
-}) {
+}) => {
   return useFilteredSearchEntityQuery({
     queryHook: useSearchCompanyQuery,
     filters: [
@@ -32,4 +32,4 @@ export function useFilteredSearchCompanyQuery({
     selectedIds: selectedIds,
     limit,
   });
-}
+};

front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts

@@ -9,7 +9,7 @@ import { fieldsForCompany } from '../utils/fieldsForCompany';
 
 export type FieldCompanyMapping = (typeof fieldsForCompany)[number]['key'];
 
-export function useSpreadsheetCompanyImport() {
+export const useSpreadsheetCompanyImport = () => {
   const { openSpreadsheetImport } = useSpreadsheetImport<FieldCompanyMapping>();
   const { enqueueSnackBar } = useSnackBar();
 
@@ -23,7 +23,7 @@ export function useSpreadsheetCompanyImport() {
   ) => {
     openSpreadsheetImport({
       ...options,
-      async onSubmit(data) {
+      onSubmit: async (data) => {
         // TODO: Add better type checking in spreadsheet import later
         const createInputs = data.validData.map((company) => ({
           id: uuidv4(),
@@ -56,4 +56,4 @@ export function useSpreadsheetCompanyImport() {
   };
 
   return { openCompanySpreadsheetImport };
-}
+};

front/src/modules/companies/hooks/useUpdateBoardCardIds.ts

@@ -4,8 +4,8 @@ import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardId
 import { boardColumnsState } from '@/ui/board/states/boardColumnsState';
 import { GetPipelineProgressQuery } from '~/generated/graphql';
 
-export function useUpdateCompanyBoardCardIds() {
-  return useRecoilCallback(
+export const useUpdateCompanyBoardCardIds = () =>
+  useRecoilCallback(
     ({ snapshot, set }) =>
       (
         pipelineProgresses: GetPipelineProgressQuery['findManyPipelineProgress'],
@@ -27,4 +27,3 @@ export function useUpdateCompanyBoardCardIds() {
       },
     [],
   );
-}

front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts

@@ -16,8 +16,8 @@ import {
   PipelineProgressForBoard,
 } from '../types/CompanyProgress';
 
-export function useUpdateCompanyBoard() {
-  return useRecoilCallback(
+export const useUpdateCompanyBoard = () =>
+  useRecoilCallback(
     ({ set, snapshot }) =>
       (
         pipeline: Pipeline,
@@ -141,4 +141,3 @@ export function useUpdateCompanyBoard() {
       },
     [],
   );
-}

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -21,7 +21,7 @@ import {
 import { companiesFilters } from '~/pages/companies/companies-filters';
 import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
 
-export function CompanyTable() {
+export const CompanyTable = () => {
   const sortsOrderBy = useRecoilScopedValue(
     sortsOrderByScopedSelector,
     TableRecoilScopeContext,
@@ -46,7 +46,9 @@ export function CompanyTable() {
   const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
   const { setActionBarEntries } = useCompanyTableActionBarEntries();
 
-  async function updateCompany(variables: UpdateOneCompanyMutationVariables) {
+  const updateCompany = async (
+    variables: UpdateOneCompanyMutationVariables,
+  ) => {
     const workspaceMemberAccountOwner = variables.data.accountOwner
       ? (
           await getWorkspaceMember({
@@ -78,7 +80,7 @@ export function CompanyTable() {
         upsertEntityTableItem(data.updateOneCompany);
       },
     });
-  }
+  };
 
   return (
     <>
@@ -116,4 +118,4 @@ export function CompanyTable() {
       </ViewBarContext.Provider>
     </>
   );
-}
+};

front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx

@@ -9,7 +9,7 @@ import { companiesAvailableColumnDefinitions } from '../../constants/companiesAv
 
 import { mockedCompaniesData } from './companies-mock-data';
 
-export function CompanyTableMockDataEffect() {
+export const CompanyTableMockDataEffect = () => {
   const [, setTableColumns] = useRecoilScopedState(
     tableColumnsScopedState,
     TableRecoilScopeContext,
@@ -23,4 +23,4 @@ export function CompanyTableMockDataEffect() {
   }, [setEntityTableData, setTableColumns]);
 
   return <></>;
-}
+};

front/src/modules/companies/table/components/CompanyTableMockMode.tsx

@@ -5,7 +5,7 @@ import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 
 import { CompanyTableMockDataEffect } from './CompanyTableMockDataEffect';
 
-export function CompanyTableMockMode() {
+export const CompanyTableMockMode = () => {
   return (
     <>
       <CompanyTableMockDataEffect />
@@ -19,4 +19,4 @@ export function CompanyTableMockMode() {
       </ViewBarContext.Provider>
     </>
   );
-}
+};