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/utilities/animation/components/AnimatedEaseIn.tsx

@@ -7,11 +7,11 @@ type Props = Omit<
   duration?: number;
 };
 
-export function AnimatedEaseIn({
+export const AnimatedEaseIn = ({
   children,
   duration = 0.3,
   ...restProps
-}: Props) {
+}: Props) => {
   const initial = { opacity: 0 };
   const animate = { opacity: 1 };
   const transition = { ease: 'linear', duration };
@@ -26,4 +26,4 @@ export function AnimatedEaseIn({
       {children}
     </motion.div>
   );
-}
+};

front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx

@@ -44,7 +44,7 @@ const childAnimation = {
   },
 };
 
-export function AnimatedTextWord({ text = '', ...restProps }: Props) {
+export const AnimatedTextWord = ({ text = '', ...restProps }: Props) => {
   const words = useMemo(() => {
     const words = text.split(' ');
 
@@ -67,4 +67,4 @@ export function AnimatedTextWord({ text = '', ...restProps }: Props) {
       ))}
     </StyledContainer>
   );
-}
+};

front/src/modules/ui/utilities/debug/components/TimingProfiler.tsx

@@ -6,8 +6,8 @@ type OwnProps = {
   children: React.ReactNode;
 };
 
-export function TimingProfiler({ id, children }: OwnProps) {
-  function handleRender(
+export const TimingProfiler = ({ id, children }: OwnProps) => {
+  const handleRender = (
     id: string,
     phase: 'mount' | 'update',
     actualDuration: number,
@@ -15,7 +15,7 @@ export function TimingProfiler({ id, children }: OwnProps) {
     startTime: number,
     commitTime: number,
     interactions: Set<Interaction>,
-  ) {
+  ) => {
     console.debug(
       'TimingProfiler',
       JSON.stringify(
@@ -32,11 +32,11 @@ export function TimingProfiler({ id, children }: OwnProps) {
         2,
       ),
     );
-  }
+  };
 
   return (
     <Profiler id={id} onRender={handleRender}>
       {children}
     </Profiler>
   );
-}
+};

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -12,11 +12,11 @@ type OwnProps = {
   onDragSelectionStart?: () => void;
 };
 
-export function DragSelect({
+export const DragSelect = ({
   dragSelectable,
   onDragSelectionChange,
   onDragSelectionStart,
-}: OwnProps) {
+}: OwnProps) => {
   const { isDragSelectionStartEnabled } = useDragSelect();
   const { DragSelection } = useSelectionContainer({
     shouldStartSelecting: (target) => {
@@ -65,4 +65,4 @@ export function DragSelect({
   });
 
   return <DragSelection />;
-}
+};

front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts

@@ -2,14 +2,14 @@ import { useRecoilCallback, useRecoilState } from 'recoil';
 
 import { isDragSelectionStartEnabledState } from '../states/internal/isDragSelectionStartEnabledState';
 
-export function useDragSelect() {
+export const useDragSelect = () => {
   const [, setIsDragSelectionStartEnabled] = useRecoilState(
     isDragSelectionStartEnabledState,
   );
 
-  function setDragSelectionStartEnabled(isEnabled: boolean) {
+  const setDragSelectionStartEnabled = (isEnabled: boolean) => {
     setIsDragSelectionStartEnabled(isEnabled);
-  }
+  };
 
   const isDragSelectionStartEnabled = useRecoilCallback(
     ({ snapshot }) =>
@@ -25,4 +25,4 @@ export function useDragSelect() {
     isDragSelectionStartEnabled,
     setDragSelectionStartEnabled,
   };
-}
+};

front/src/modules/ui/utilities/hotkey/components/HotkeyEffect.tsx

@@ -10,10 +10,10 @@ type OwnProps = {
   onHotkeyTriggered: () => void;
 };
 
-export function HotkeyEffect({ hotkey, onHotkeyTriggered }: OwnProps) {
+export const HotkeyEffect = ({ hotkey, onHotkeyTriggered }: OwnProps) => {
   useScopedHotkeys(hotkey.key, () => onHotkeyTriggered(), hotkey.scope, [
     onHotkeyTriggered,
   ]);
 
   return <></>;
-}
+};

front/src/modules/ui/utilities/hotkey/hooks/useGoToHotkeys.ts

@@ -5,7 +5,7 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 
 import { useSequenceHotkeys } from './useSequenceScopedHotkeys';
 
-export function useGoToHotkeys(key: Keys, location: string) {
+export const useGoToHotkeys = (key: Keys, location: string) => {
   const navigate = useNavigate();
 
   useSequenceHotkeys(
@@ -22,4 +22,4 @@ export function useGoToHotkeys(key: Keys, location: string) {
     },
     [navigate],
   );
-}
+};

front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts

@@ -6,7 +6,7 @@ import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
 
 import { useSetHotkeyScope } from './useSetHotkeyScope';
 
-export function usePreviousHotkeyScope() {
+export const usePreviousHotkeyScope = () => {
   const setHotkeyScope = useSetHotkeyScope();
 
   const goBackToPreviousHotkeyScope = useRecoilCallback(
@@ -47,4 +47,4 @@ export function usePreviousHotkeyScope() {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
   };
-}
+};

front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts

@@ -5,8 +5,8 @@ import { internalHotkeysEnabledScopesState } from '../states/internal/internalHo
 
 const DEBUG_HOTKEY_SCOPE = true;
 
-export function useScopedHotkeyCallback() {
-  return useRecoilCallback(
+export const useScopedHotkeyCallback = () =>
+  useRecoilCallback(
     ({ snapshot }) =>
       ({
         callback,
@@ -61,4 +61,3 @@ export function useScopedHotkeyCallback() {
       },
     [],
   );
-}

front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts

@@ -11,7 +11,7 @@ import { pendingHotkeyState } from '../states/internal/pendingHotkeysState';
 
 import { useScopedHotkeyCallback } from './useScopedHotkeyCallback';
 
-export function useScopedHotkeys(
+export const useScopedHotkeys = (
   keys: Keys,
   callback: HotkeyCallback,
   scope: string,
@@ -21,7 +21,7 @@ export function useScopedHotkeys(
     enableOnFormTags: true,
     preventDefault: true,
   },
-) {
+) => {
   const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
 
   const callScopedHotkeyCallback = useScopedHotkeyCallback();
@@ -49,4 +49,4 @@ export function useScopedHotkeys(
     },
     dependencies,
   );
-}
+};

front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts

@@ -6,7 +6,7 @@ import { pendingHotkeyState } from '../states/internal/pendingHotkeysState';
 
 import { useScopedHotkeyCallback } from './useScopedHotkeyCallback';
 
-export function useSequenceHotkeys(
+export const useSequenceHotkeys = (
   firstKey: Keys,
   secondKey: Keys,
   sequenceCallback: () => void,
@@ -17,7 +17,7 @@ export function useSequenceHotkeys(
     preventDefault: true,
   },
   deps: any[] = [],
-) {
+) => {
   const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
 
   const callScopedHotkeyCallback = useScopedHotkeyCallback();
@@ -73,4 +73,4 @@ export function useSequenceHotkeys(
     },
     [pendingHotkey, setPendingHotkey, scope, ...deps],
   );
-}
+};

front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts

@@ -9,18 +9,18 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope';
 import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
 import { HotkeyScope } from '../types/HotkeyScope';
 
-function isCustomScopesEqual(
+const isCustomScopesEqual = (
   customScopesA: CustomHotkeyScopes | undefined,
   customScopesB: CustomHotkeyScopes | undefined,
-) {
+) => {
   return (
     customScopesA?.commandMenu === customScopesB?.commandMenu &&
     customScopesA?.goto === customScopesB?.goto
   );
-}
+};
 
-export function useSetHotkeyScope() {
-  return useRecoilCallback(
+export const useSetHotkeyScope = () =>
+  useRecoilCallback(
     ({ snapshot, set }) =>
       async (hotkeyScopeToSet: string, customScopes?: CustomHotkeyScopes) => {
         const currentHotkeyScope = await snapshot.getPromise(
@@ -72,4 +72,3 @@ export function useSetHotkeyScope() {
       },
     [],
   );
-}

front/src/modules/ui/utilities/hotkey/utils/isNonTextWritingKey.ts

@@ -1,4 +1,4 @@
-export function isNonTextWritingKey(key: string) {
+export const isNonTextWritingKey = (key: string) => {
   const nonTextWritingKeys = [
     'Enter',
     'Tab',
@@ -54,4 +54,4 @@ export function isNonTextWritingKey(key: string) {
   ];
 
   return nonTextWritingKeys.includes(key);
-}
+};

front/src/modules/ui/utilities/page-title/PageTitle.tsx

@@ -4,10 +4,8 @@ type OwnProps = {
   title: string;
 };
 
-export function PageTitle({ title }: OwnProps) {
-  return (
-    <Helmet>
-      <title>{title}</title>
-    </Helmet>
-  );
-}
+export const PageTitle = ({ title }: OwnProps) => (
+  <Helmet>
+    <title>{title}</title>
+  </Helmet>
+);

front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx

@@ -5,7 +5,7 @@ import { useListenClickOutside } from '../useListenClickOutside';
 
 const onOutsideClick = jest.fn();
 
-function TestComponentDomMode() {
+const TestComponentDomMode = () => {
   const buttonRef = useRef(null);
   const buttonRef2 = useRef(null);
   useListenClickOutside({
@@ -20,7 +20,7 @@ function TestComponentDomMode() {
       <button ref={buttonRef2}>Inside 2</button>
     </div>
   );
-}
+};
 
 test('useListenClickOutside hook works in dom mode', async () => {
   const { getByText } = render(<TestComponentDomMode />);

front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -5,7 +5,7 @@ export enum ClickOutsideMode {
   dom = 'dom',
 }
 
-export function useListenClickOutside<T extends Element>({
+export const useListenClickOutside = <T extends Element>({
   refs,
   callback,
   mode = ClickOutsideMode.dom,
@@ -15,9 +15,9 @@ export function useListenClickOutside<T extends Element>({
   callback: (event: MouseEvent | TouchEvent) => void;
   mode?: ClickOutsideMode;
   enabled?: boolean;
-}) {
+}) => {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent | TouchEvent) {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
       if (mode === ClickOutsideMode.dom) {
         const clickedOnAtLeastOneRef = refs
           .filter((ref) => !!ref.current)
@@ -61,7 +61,7 @@ export function useListenClickOutside<T extends Element>({
           callback(event);
         }
       }
-    }
+    };
 
     if (enabled) {
       document.addEventListener('click', handleClickOutside, { capture: true });
@@ -79,7 +79,7 @@ export function useListenClickOutside<T extends Element>({
       };
     }
   }, [refs, callback, mode, enabled]);
-}
+};
 export const useListenClickOutsideByClassName = ({
   classNames,
   excludeClassNames,

front/src/modules/ui/utilities/pointer-event/hooks/useTrackPointer.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 
 type MouseListener = (positionX: number, positionY: number) => void;
 
-export function useTrackPointer({
+export const useTrackPointer = ({
   shouldTrackPointer = true,
   onMouseMove,
   onMouseDown,
@@ -12,7 +12,7 @@ export function useTrackPointer({
   onMouseMove?: MouseListener;
   onMouseDown?: MouseListener;
   onMouseUp?: MouseListener;
-}) {
+}) => {
   const extractPosition = useCallback((event: MouseEvent | TouchEvent) => {
     const clientX =
       'clientX' in event ? event.clientX : event.changedTouches[0].clientX;
@@ -64,4 +64,4 @@ export function useTrackPointer({
     onInternalMouseDown,
     onInternalMouseUp,
   ]);
-}
+};

front/src/modules/ui/utilities/recoil-scope/components/RecoilScope.tsx

@@ -5,7 +5,7 @@ import { type RecoilScopeContext as RecoilScopeContextType } from '@/types/Recoi
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
-export function RecoilScope({
+export const RecoilScope = ({
   children,
   scopeId,
   CustomRecoilScopeContext,
@@ -13,7 +13,7 @@ export function RecoilScope({
   children: React.ReactNode;
   scopeId?: string;
   CustomRecoilScopeContext?: RecoilScopeContextType;
-}) {
+}) => {
   const currentScopeId = useRef(scopeId ?? v4());
 
   return CustomRecoilScopeContext ? (
@@ -25,4 +25,4 @@ export function RecoilScope({
       {children}
     </RecoilScopeContext.Provider>
   );
-}
+};

front/src/modules/ui/utilities/recoil-scope/hooks/useContextScopeId.ts

@@ -0,0 +1,12 @@
+import { Context, useContext } from 'react';
+
+export const useContextScopeId = (SpecificContext: Context<string | null>) => {
+  const recoilScopeId = useContext(SpecificContext);
+
+  if (!recoilScopeId)
+    throw new Error(
+      `Using useContextScopedId outside of the specified context : ${SpecificContext.displayName}, verify that you are using a RecoilScope with the specific context you want to use.`,
+    );
+
+  return recoilScopeId;
+};

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopeId.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 
-export function useRecoilScopeId(RecoilScopeContext: RecoilScopeContext) {
+export const useRecoilScopeId = (RecoilScopeContext: RecoilScopeContext) => {
   const recoilScopeId = useContext(RecoilScopeContext);
 
   if (!recoilScopeId)
@@ -11,4 +11,4 @@ export function useRecoilScopeId(RecoilScopeContext: RecoilScopeContext) {
     );
 
   return recoilScopeId;
-}
+};

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts

@@ -3,11 +3,11 @@ import { RecoilState, useRecoilState } from 'recoil';
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
-export function useRecoilScopedFamilyState<StateType>(
+export const useRecoilScopedFamilyState = <StateType>(
   recoilState: (familyUniqueId: string) => RecoilState<StateType>,
   uniqueIdInRecoilScope: string,
   CustomRecoilScopeContext?: Context<string | null>,
-) {
+) => {
   const recoilScopeId = useContext(
     CustomRecoilScopeContext ?? RecoilScopeContext,
   );
@@ -22,4 +22,4 @@ export function useRecoilScopedFamilyState<StateType>(
   const familyUniqueId = recoilScopeId + uniqueIdInRecoilScope;
 
   return useRecoilState<StateType>(recoilState(familyUniqueId));
-}
+};

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts

@@ -3,10 +3,10 @@ import { RecoilState, useRecoilState } from 'recoil';
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
-export function useRecoilScopedState<StateType>(
+export const useRecoilScopedState = <StateType>(
   recoilState: (param: string) => RecoilState<StateType>,
   CustomRecoilScopeContext?: Context<string | null>,
-) {
+) => {
   const recoilScopeId = useContext(
     CustomRecoilScopeContext ?? RecoilScopeContext,
   );
@@ -19,4 +19,4 @@ export function useRecoilScopedState<StateType>(
     );
 
   return useRecoilState<StateType>(recoilState(recoilScopeId));
-}
+};

front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts

@@ -3,10 +3,10 @@ import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil';
 
 import { RecoilScopeContext } from '../states/RecoilScopeContext';
 
-export function useRecoilScopedValue<T>(
+export const useRecoilScopedValue = <T>(
   recoilState: (param: string) => RecoilState<T> | RecoilValueReadOnly<T>,
   CustomRecoilScopeContext?: Context<string | null>,
-) {
+) => {
   const recoilScopeId = useContext(
     CustomRecoilScopeContext ?? RecoilScopeContext,
   );
@@ -19,4 +19,4 @@ export function useRecoilScopedValue<T>(
     );
 
   return useRecoilValue<T>(recoilState(recoilScopeId));
-}
+};

front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts

@@ -2,6 +2,5 @@ import { useMediaQuery } from 'react-responsive';
 
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
-export function useIsMobile() {
-  return useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` });
-}
+export const useIsMobile = () =>
+  useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` });

front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -24,7 +24,7 @@ export type ScrollWrapperProps = {
   className?: string;
 };
 
-export function ScrollWrapper({ children, className }: ScrollWrapperProps) {
+export const ScrollWrapper = ({ children, className }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
 
   useListenScroll({
@@ -38,4 +38,4 @@ export function ScrollWrapper({ children, className }: ScrollWrapperProps) {
       </StyledScrollWrapper>
     </ScrollWrapperContext.Provider>
   );
-}
+};

front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts

@@ -4,11 +4,11 @@ import { useRecoilCallback } from 'recoil';
 
 import { isScrollingState } from '../states/isScrollingState';
 
-export function useListenScroll<T extends Element>({
+export const useListenScroll = <T extends Element>({
   scrollableRef,
 }: {
   scrollableRef: React.RefObject<T>;
-}) {
+}) => {
   const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
     const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
     if (!isScrolling) {
@@ -42,4 +42,4 @@ export function useListenScroll<T extends Element>({
     handleScrollEnd,
     scrollableRef,
   ]);
-}
+};

front/src/modules/ui/utilities/scroll/hooks/useScrollWrapperScopedRef.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { ScrollWrapperContext } from '../components/ScrollWrapper';
 
-export function useScrollWrapperScopedRef() {
+export const useScrollWrapperScopedRef = () => {
   const scrollWrapperRef = useContext(ScrollWrapperContext);
 
   if (!scrollWrapperRef)
@@ -11,4 +11,4 @@ export function useScrollWrapperScopedRef() {
     );
 
   return scrollWrapperRef;
-}
+};