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/layout/components/DefaultLayout.tsx

@@ -54,7 +54,7 @@ type OwnProps = {
   children: React.ReactNode;
 };
 
-export function DefaultLayout({ children }: OwnProps) {
+export const DefaultLayout = ({ children }: OwnProps) => {
   const onboardingStatus = useOnboardingStatus();
 
   return (
@@ -79,4 +79,4 @@ export function DefaultLayout({ children }: OwnProps) {
       </StyledMainContainer>
     </StyledLayout>
   );
-}
+};

front/src/modules/ui/layout/components/PageAddButton.tsx

@@ -5,15 +5,13 @@ type OwnProps = {
   onClick: () => void;
 };
 
-export function PageAddButton({ onClick }: OwnProps) {
-  return (
-    <IconButton
-      Icon={IconPlus}
-      size="medium"
-      variant="secondary"
-      data-testid="add-button"
-      accent="default"
-      onClick={onClick}
-    />
-  );
-}
+export const PageAddButton = ({ onClick }: OwnProps) => (
+  <IconButton
+    Icon={IconPlus}
+    size="medium"
+    variant="secondary"
+    data-testid="add-button"
+    accent="default"
+    onClick={onClick}
+  />
+);

front/src/modules/ui/layout/components/PageBody.tsx

@@ -5,10 +5,8 @@ type OwnProps = {
   children: JSX.Element | JSX.Element[];
 };
 
-export function PageBody({ children }: OwnProps) {
-  return (
-    <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
-      {children}
-    </RightDrawerContainer>
-  );
-}
+export const PageBody = ({ children }: OwnProps) => (
+  <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
+    {children}
+  </RightDrawerContainer>
+);

front/src/modules/ui/layout/components/PageContainer.tsx

@@ -10,6 +10,6 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-export function PageContainer({ children }: OwnProps) {
-  return <StyledContainer>{children}</StyledContainer>;
-}
+export const PageContainer = ({ children }: OwnProps) => (
+  <StyledContainer>{children}</StyledContainer>
+);

front/src/modules/ui/layout/components/PageFavoriteButton.tsx

@@ -6,15 +6,13 @@ type OwnProps = {
   onClick: () => void;
 };
 
-export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
-  return (
-    <IconButton
-      Icon={IconHeart}
-      size="medium"
-      variant="secondary"
-      data-testid="add-button"
-      accent={isFavorite ? 'danger' : 'default'}
-      onClick={onClick}
-    />
-  );
-}
+export const PageFavoriteButton = ({ isFavorite, onClick }: OwnProps) => (
+  <IconButton
+    Icon={IconHeart}
+    size="medium"
+    variant="secondary"
+    data-testid="add-button"
+    accent={isFavorite ? 'danger' : 'default'}
+    onClick={onClick}
+  />
+);

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -76,13 +76,13 @@ type PageHeaderProps = ComponentProps<'div'> & {
   children?: JSX.Element | JSX.Element[];
 };
 
-export function PageHeader({
+export const PageHeader = ({
   title,
   hasBackButton,
   Icon,
   children,
   ...props
-}: PageHeaderProps) {
+}: PageHeaderProps) => {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
 
@@ -119,4 +119,4 @@ export function PageHeader({
       <StyledPageActionContainer>{children}</StyledPageActionContainer>
     </StyledTopBarContainer>
   );
-}
+};

front/src/modules/ui/layout/components/PageHotkeysEffect.tsx

@@ -5,10 +5,10 @@ type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function PageHotkeysEffect({ onAddButtonClick }: OwnProps) {
+export const PageHotkeysEffect = ({ onAddButtonClick }: OwnProps) => {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);
 
   return <></>;
-}
+};

front/src/modules/ui/layout/components/PagePanel.tsx

@@ -11,6 +11,6 @@ const StyledPanel = styled.div`
   width: 100%;
 `;
 
-export function PagePanel({ children }: { children: React.ReactNode }) {
-  return <StyledPanel>{children}</StyledPanel>;
-}
+export const PagePanel = ({ children }: { children: React.ReactNode }) => (
+  <StyledPanel>{children}</StyledPanel>
+);

front/src/modules/ui/layout/components/RightDrawerContainer.tsx

@@ -33,13 +33,11 @@ const StyledLeftContainer = styled.div<LeftContainerProps>`
   width: 100%;
 `;
 
-export function RightDrawerContainer({ children, topMargin }: OwnProps) {
-  return (
-    <StyledMainContainer topMargin={topMargin ?? 0}>
-      <StyledLeftContainer>
-        <PagePanel>{children}</PagePanel>
-      </StyledLeftContainer>
-      <RightDrawer />
-    </StyledMainContainer>
-  );
-}
+export const RightDrawerContainer = ({ children, topMargin }: OwnProps) => (
+  <StyledMainContainer topMargin={topMargin ?? 0}>
+    <StyledLeftContainer>
+      <PagePanel>{children}</PagePanel>
+    </StyledLeftContainer>
+    <RightDrawer />
+  </StyledMainContainer>
+);

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -28,7 +28,7 @@ export type ShowPageContainerProps = {
   children: ReactElement[];
 };
 
-export function ShowPageContainer({ children }: ShowPageContainerProps) {
+export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
   const isMobile = useIsMobile();
   return isMobile ? (
     <StyledOuterContainer>
@@ -41,4 +41,4 @@ export function ShowPageContainer({ children }: ShowPageContainerProps) {
       <StyledInnerContainer>{children}</StyledInnerContainer>
     </StyledOuterContainer>
   );
-}
+};

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -20,11 +20,11 @@ const StyledContainer = styled.div<{ isMobile: boolean }>`
   width: 100%;
 `;
 
-export function SubMenuTopBarContainer({
+export const SubMenuTopBarContainer = ({
   children,
   title,
   Icon,
-}: SubMenuTopBarContainerProps) {
+}: SubMenuTopBarContainerProps) => {
   const isMobile = useIsMobile();
 
   return (
@@ -33,4 +33,4 @@ export function SubMenuTopBarContainer({
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );
-}
+};

front/src/modules/ui/layout/hooks/useIsSubMenuNavbarDisplayed.ts

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 
-export function useIsSubMenuNavbarDisplayed() {
+export const useIsSubMenuNavbarDisplayed = () => {
   const currentPath = useLocation().pathname;
   return currentPath.match(/\/settings\//g) !== null;
-}
+};

front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -16,20 +16,20 @@ const StyledContainer = styled.div`
   z-index: 1;
 `;
 
-export function ShowPageAddButton({
+export const ShowPageAddButton = ({
   entity,
 }: {
   entity: ActivityTargetableEntity;
-}) {
+}) => {
   const { closeDropdownButton, toggleDropdownButton } = useDropdownButton({
     dropdownId: 'add-show-page',
   });
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  function handleSelect(type: ActivityType) {
+  const handleSelect = (type: ActivityType) => {
     openCreateActivity({ type, targetableEntities: [entity] });
     closeDropdownButton();
-  }
+  };
 
   return (
     <StyledContainer>
@@ -71,4 +71,4 @@ export function ShowPageAddButton({
       />
     </StyledContainer>
   );
-}
+};

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -35,9 +35,9 @@ export type ShowPageLeftContainerProps = {
   children: ReactElement[];
 };
 
-export function ShowPageLeftContainer({
+export const ShowPageLeftContainer = ({
   children,
-}: ShowPageLeftContainerProps) {
+}: ShowPageLeftContainerProps) => {
   const isMobile = useIsMobile();
   return isMobile ? (
     <StyledOuterContainer>
@@ -50,4 +50,4 @@ export function ShowPageLeftContainer({
       </ScrollWrapper>
     </StyledOuterContainer>
   );
-}
+};

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -43,13 +43,13 @@ type OwnProps = {
   emails?: boolean;
 };
 
-export function ShowPageRightContainer({
+export const ShowPageRightContainer = ({
   entity,
   timeline,
   tasks,
   notes,
   emails,
-}: OwnProps) {
+}: OwnProps) => {
   const TASK_TABS = [
     {
       id: 'timeline',
@@ -93,4 +93,4 @@ export function ShowPageRightContainer({
       {activeTabId === 'notes' && <Notes entity={entity} />}
     </StyledShowPageRightContainer>
   );
-}
+};

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -72,14 +72,14 @@ const StyledFileInput = styled.input`
   display: none;
 `;
 
-export function ShowPageSummaryCard({
+export const ShowPageSummaryCard = ({
   id,
   logoOrAvatar,
   title,
   date,
   renderTitleEditComponent,
   onUploadPicture,
-}: OwnProps) {
+}: OwnProps) => {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
   const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
@@ -129,4 +129,4 @@ export function ShowPageSummaryCard({
       </StyledInfoContainer>
     </StyledShowPageSummaryCard>
   );
-}
+};