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/auth/components/Logo.tsx

@@ -47,7 +47,7 @@ const StyledMainLogo = styled.div<StyledMainLogoProps>`
   width: 100%;
 `;
 
-export function Logo({ workspaceLogo, ...props }: Props) {
+export const Logo = ({ workspaceLogo, ...props }: Props) => {
   if (!workspaceLogo) {
     return (
       <StyledContainer {...props}>
@@ -64,4 +64,4 @@ export function Logo({ workspaceLogo, ...props }: Props) {
       </StyledTwentyLogoContainer>
     </StyledContainer>
   );
-}
+};

front/src/modules/auth/components/Modal.tsx

@@ -10,10 +10,8 @@ const StyledContent = styled(UIModal.Content)`
 
 type Props = React.ComponentProps<'div'>;
 
-export function AuthModal({ children, ...restProps }: Props) {
-  return (
-    <UIModal isOpen={true} {...restProps}>
-      <StyledContent>{children}</StyledContent>
-    </UIModal>
-  );
-}
+export const AuthModal = ({ children, ...restProps }: Props) => (
+  <UIModal isOpen={true} {...restProps}>
+    <StyledContent>{children}</StyledContent>
+  </UIModal>
+);

front/src/modules/auth/components/SubTitle.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { JSX, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 const StyledSubTitle = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
 `;
 
-export function SubTitle({ children }: OwnProps): JSX.Element {
-  return <StyledSubTitle>{children}</StyledSubTitle>;
-}
+export const SubTitle = ({ children }: OwnProps): JSX.Element => (
+  <StyledSubTitle>{children}</StyledSubTitle>
+);

front/src/modules/auth/components/Title.tsx

@@ -15,7 +15,7 @@ const StyledTitle = styled.div`
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
-export function Title({ children, animate = false }: Props) {
+export const Title = ({ children, animate = false }: Props) => {
   if (animate) {
     return (
       <StyledTitle>
@@ -25,4 +25,4 @@ export function Title({ children, animate = false }: Props) {
   }
 
   return <StyledTitle>{children}</StyledTitle>;
-}
+};

front/src/modules/auth/hooks/useAuth.ts

@@ -12,7 +12,7 @@ import {
 import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
-export function useAuth() {
+export const useAuth = () => {
   const [, setTokenPair] = useRecoilState(tokenPairState);
   const [, setCurrentUser] = useRecoilState(currentUserState);
 
@@ -148,4 +148,4 @@ export function useAuth() {
     signInWithCredentials: handleCrendentialsSignIn,
     signInWithGoogle: handleGoogleLogin,
   };
-}
+};

front/src/modules/auth/hooks/useIsLogged.ts

@@ -2,8 +2,8 @@ import { useRecoilState } from 'recoil';
 
 import { tokenPairState } from '../states/tokenPairState';
 
-export function useIsLogged(): boolean {
+export const useIsLogged = (): boolean => {
   const [tokenPair] = useRecoilState(tokenPairState);
 
   return !!tokenPair;
-}
+};

front/src/modules/auth/hooks/useOnboardingStatus.ts

@@ -7,9 +7,9 @@ import {
   OnboardingStatus,
 } from '../utils/getOnboardingStatus';
 
-export function useOnboardingStatus(): OnboardingStatus | undefined {
+export const useOnboardingStatus = (): OnboardingStatus | undefined => {
   const [currentUser] = useRecoilState(currentUserState);
   const isLoggedIn = useIsLogged();
 
   return getOnboardingStatus(isLoggedIn, currentUser);
-}
+};

front/src/modules/auth/sign-in-up/components/FooterNote.tsx

@@ -11,6 +11,4 @@ const StyledContainer = styled.div`
   text-align: center;
 `;
 
-export function FooterNote(props: Props) {
-  return <StyledContainer {...props} />;
-}
+export const FooterNote = (props: Props) => <StyledContainer {...props} />;

front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import styled from '@emotion/styled';
 
 const StyledSeparator = styled.div`
@@ -8,6 +9,4 @@ const StyledSeparator = styled.div`
   width: 100%;
 `;
 
-export function HorizontalSeparator(): JSX.Element {
-  return <StyledSeparator />;
-}
+export const HorizontalSeparator = (): JSX.Element => <StyledSeparator />;

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -41,7 +41,7 @@ const StyledInputContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
-export function SignInUpForm() {
+export const SignInUpForm = () => {
   const {
     authProviders,
     signInWithGoogle,
@@ -220,4 +220,4 @@ export function SignInUpForm() {
       </StyledFooterNote>
     </>
   );
-}
+};

front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -42,7 +42,7 @@ const validationSchema = Yup.object()
 
 type Form = Yup.InferType<typeof validationSchema>;
 
-export function useSignInUp() {
+export const useSignInUp = () => {
   const navigate = useNavigate();
   const { enqueueSnackBar } = useSnackBar();
   const isMatchingLocation = useIsMatchingLocation();
@@ -183,4 +183,4 @@ export function useSignInUp() {
     form,
     workspace: workspace?.findWorkspaceFromInviteHash,
   };
-}
+};

front/src/modules/auth/utils/getOnboardingStatus.ts

@@ -7,10 +7,10 @@ export enum OnboardingStatus {
   Completed = 'completed',
 }
 
-export function getOnboardingStatus(
+export const getOnboardingStatus = (
   isLoggedIn: boolean,
   currentUser: CurrentUser | null,
-) {
+) => {
   if (!isLoggedIn) {
     return OnboardingStatus.OngoingUserCreation;
   }
@@ -28,4 +28,4 @@ export function getOnboardingStatus(
   }
 
   return OnboardingStatus.Completed;
-}
+};