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/editable-field/components/EditableField.tsx

@@ -85,7 +85,7 @@ type OwnProps = {
   disableHoverEffect?: boolean;
 };
 
-export function EditableField({
+export const EditableField = ({
   IconLabel,
   label,
   labelFixedWidth,
@@ -97,24 +97,24 @@ export function EditableField({
   displayModeContentOnly,
   isDisplayModeFixHeight,
   disableHoverEffect,
-}: OwnProps) {
+}: OwnProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
-  function handleContainerMouseEnter() {
+  const handleContainerMouseEnter = () => {
     setIsHovered(true);
-  }
+  };
 
-  function handleContainerMouseLeave() {
+  const handleContainerMouseLeave = () => {
     setIsHovered(false);
-  }
+  };
 
   const { isFieldInEditMode, openEditableField } = useEditableField();
 
-  function handleDisplayModeClick() {
+  const handleDisplayModeClick = () => {
     if (!displayModeContentOnly) {
       openEditableField(customEditHotkeyScope);
     }
-  }
+  };
 
   const showEditButton =
     !isFieldInEditMode && isHovered && useEditButton && !displayModeContentOnly;
@@ -163,4 +163,4 @@ export function EditableField({
       </StyledValueContainer>
     </StyledEditableFieldBaseContainer>
   );
-}
+};

front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx

@@ -57,27 +57,25 @@ type OwnProps = {
   isHovered?: boolean;
 };
 
-export function EditableFieldDisplayMode({
+export const EditableFieldDisplayMode = ({
   children,
   isDisplayModeContentEmpty,
   disableHoverEffect,
   isDisplayModeFixHeight,
   isHovered,
-}: React.PropsWithChildren<OwnProps>) {
-  return (
-    <StyledEditableFieldNormalModeOuterContainer
-      isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-      disableHoverEffect={disableHoverEffect}
-      isDisplayModeFixHeight={isDisplayModeFixHeight}
-      isHovered={isHovered}
-    >
-      <StyledEditableFieldNormalModeInnerContainer>
-        {isDisplayModeContentEmpty || !children ? (
-          <StyledEmptyField>{'Empty'}</StyledEmptyField>
-        ) : (
-          children
-        )}
-      </StyledEditableFieldNormalModeInnerContainer>
-    </StyledEditableFieldNormalModeOuterContainer>
-  );
-}
+}: React.PropsWithChildren<OwnProps>) => (
+  <StyledEditableFieldNormalModeOuterContainer
+    isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+    disableHoverEffect={disableHoverEffect}
+    isDisplayModeFixHeight={isDisplayModeFixHeight}
+    isHovered={isHovered}
+  >
+    <StyledEditableFieldNormalModeInnerContainer>
+      {isDisplayModeContentEmpty || !children ? (
+        <StyledEmptyField>{'Empty'}</StyledEmptyField>
+      ) : (
+        children
+      )}
+    </StyledEditableFieldNormalModeInnerContainer>
+  </StyledEditableFieldNormalModeOuterContainer>
+);

front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx

@@ -3,12 +3,12 @@ import { IconPencil } from '@/ui/icon';
 
 import { useEditableField } from '../hooks/useEditableField';
 
-export function EditableFieldEditButton() {
+export const EditableFieldEditButton = () => {
   const { openEditableField } = useEditableField();
 
-  function handleClick() {
+  const handleClick = () => {
     openEditableField();
-  }
+  };
 
   return (
     <FloatingIconButton
@@ -18,4 +18,4 @@ export function EditableFieldEditButton() {
       data-testid="editable-field-edit-mode-container"
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx

@@ -30,10 +30,8 @@ type OwnProps = {
   children: React.ReactNode;
 };
 
-export function EditableFieldEditMode({ children }: OwnProps) {
-  return (
-    <StyledEditableFieldEditModeContainer data-testid="editable-field-edit-mode-container">
-      <StyledEditableFieldInput>{children}</StyledEditableFieldInput>
-    </StyledEditableFieldEditModeContainer>
-  );
-}
+export const EditableFieldEditMode = ({ children }: OwnProps) => (
+  <StyledEditableFieldEditModeContainer data-testid="editable-field-edit-mode-container">
+    <StyledEditableFieldInput>{children}</StyledEditableFieldInput>
+  </StyledEditableFieldEditModeContainer>
+);

front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx

@@ -10,7 +10,7 @@ import { FieldBooleanMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditableBooleanFieldDisplayMode } from './GenericEditableBooleanFieldDisplayMode';
 
-export function GenericEditableBooleanField() {
+export const GenericEditableBooleanField = () => {
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
   ) as FieldDefinition<FieldBooleanMetadata>;
@@ -24,4 +24,4 @@ export function GenericEditableBooleanField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx

@@ -10,7 +10,7 @@ import { genericEntityFieldFamilySelector } from '../states/selectors/genericEnt
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldBooleanMetadata } from '../types/FieldMetadata';
 
-export function GenericEditableBooleanFieldDisplayMode() {
+export const GenericEditableBooleanFieldDisplayMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -27,7 +27,7 @@ export function GenericEditableBooleanFieldDisplayMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newValue: boolean) {
+  const handleSubmit = (newValue: boolean) => {
     if (currentEditableFieldEntityId && updateField) {
       updateField(
         currentEditableFieldEntityId,
@@ -38,7 +38,7 @@ export function GenericEditableBooleanFieldDisplayMode() {
       // TODO: use optimistic effect instead, but needs generic refactor
       setFieldValue(newValue);
     }
-  }
+  };
 
   return <BooleanInput value={fieldValue} onToggle={handleSubmit} />;
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx

@@ -14,7 +14,7 @@ import { FieldDateMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
 
-export function GenericEditableDateField() {
+export const GenericEditableDateField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -39,4 +39,4 @@ export function GenericEditableDateField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx

@@ -13,7 +13,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldDateMetadata } from '../types/FieldMetadata';
 
-export function GenericEditableDateFieldEditMode() {
+export const GenericEditableDateFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -31,7 +31,7 @@ export function GenericEditableDateFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newDate: Nullable<Date>) {
+  const handleSubmit = (newDate: Nullable<Date>) => {
     if (!newDate) {
       setFieldValue('');
 
@@ -57,7 +57,7 @@ export function GenericEditableDateFieldEditMode() {
         newDateISO,
       );
     }
-  }
+  };
 
   const { handleEnter, handleEscape, handleClickOutside } =
     useFieldInputEventHandlers({
@@ -73,4 +73,4 @@ export function GenericEditableDateFieldEditMode() {
       value={fieldValue ? new Date(fieldValue) : null}
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableField.tsx

@@ -19,7 +19,7 @@ import { GenericEditableTextField } from './GenericEditableTextField';
 import { GenericEditableURLField } from './GenericEditableURLField';
 import { ProbabilityEditableField } from './ProbabilityEditableField';
 
-export function GenericEditableField() {
+export const GenericEditableField = () => {
   const fieldDefinition = useContext(EditableFieldDefinitionContext);
 
   if (isFieldRelation(fieldDefinition)) {
@@ -44,4 +44,4 @@ export function GenericEditableField() {
     );
     return <></>;
   }
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx

@@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
 
-export function GenericEditableNumberField() {
+export const GenericEditableNumberField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -39,4 +39,4 @@ export function GenericEditableNumberField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx

@@ -16,7 +16,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldNumberMetadata } from '../types/FieldMetadata';
 
-export function GenericEditableNumberFieldEditMode() {
+export const GenericEditableNumberFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -34,7 +34,7 @@ export function GenericEditableNumberFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newValue: string) {
+  const handleSubmit = (newValue: string) => {
     if (!canBeCastAsIntegerOrNull(newValue)) {
       return;
     }
@@ -52,7 +52,7 @@ export function GenericEditableNumberFieldEditMode() {
         castedValue,
       );
     }
-  }
+  };
 
   const { handleEnter, handleEscape, handleClickOutside } =
     useFieldInputEventHandlers({
@@ -70,4 +70,4 @@ export function GenericEditableNumberFieldEditMode() {
       onEscape={handleEscape}
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx

@@ -14,7 +14,7 @@ import { FieldPhoneMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditablePhoneFieldEditMode } from './GenericEditablePhoneFieldEditMode';
 
-export function GenericEditablePhoneField() {
+export const GenericEditablePhoneField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -40,4 +40,4 @@ export function GenericEditablePhoneField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditablePhoneFieldEditMode.tsx

@@ -13,7 +13,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldPhoneMetadata } from '../types/FieldMetadata';
 
-export function GenericEditablePhoneFieldEditMode() {
+export const GenericEditablePhoneFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -31,7 +31,7 @@ export function GenericEditablePhoneFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newValue: string) {
+  const handleSubmit = (newValue: string) => {
     if (!isPossiblePhoneNumber(newValue)) return;
 
     setFieldValue(newValue);
@@ -43,7 +43,7 @@ export function GenericEditablePhoneFieldEditMode() {
         newValue,
       );
     }
-  }
+  };
 
   const { handleEnter, handleEscape, handleClickOutside } =
     useFieldInputEventHandlers({
@@ -59,4 +59,4 @@ export function GenericEditablePhoneFieldEditMode() {
       hotkeyScope={EditableFieldHotkeyScope.EditableField}
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx

@@ -15,7 +15,7 @@ import { EditableField } from './EditableField';
 import { GenericEditableRelationFieldDisplayMode } from './GenericEditableRelationFieldDisplayMode';
 import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
 
-export function GenericEditableRelationField() {
+export const GenericEditableRelationField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -47,4 +47,4 @@ export function GenericEditableRelationField() {
       </RecoilScope>
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx

@@ -13,7 +13,7 @@ import { genericEntityFieldFamilySelector } from '../states/selectors/genericEnt
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldRelationMetadata } from '../types/FieldMetadata';
 
-export function GenericEditableRelationFieldDisplayMode() {
+export const GenericEditableRelationFieldDisplayMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -67,4 +67,4 @@ export function GenericEditableRelationFieldDisplayMode() {
       );
       return <> </>;
   }
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -26,7 +26,7 @@ const StyledRelationPickerContainer = styled.div`
   top: -8px;
 `;
 
-function RelationPicker({
+const RelationPicker = ({
   fieldDefinition,
   fieldValue,
   handleEntitySubmit,
@@ -36,7 +36,7 @@ function RelationPicker({
   fieldValue: FieldRelationValue & { companyId?: string };
   handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
   handleCancel: () => void;
-}) {
+}) => {
   switch (fieldDefinition.metadata.relationType) {
     case Entity.Person: {
       return (
@@ -72,9 +72,9 @@ function RelationPicker({
       );
       return <></>;
   }
-}
+};
 
-export function GenericEditableRelationFieldEditMode() {
+export const GenericEditableRelationFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -98,7 +98,7 @@ export function GenericEditableRelationFieldEditMode() {
   const updateField = useUpdateGenericEntityField();
   const { closeEditableField } = useEditableField();
 
-  function handleSubmit(newRelation: EntityForSelect | null) {
+  const handleSubmit = (newRelation: EntityForSelect | null) => {
     if (newRelation?.id === fieldValue?.id) return;
 
     setFieldValue({
@@ -116,11 +116,11 @@ export function GenericEditableRelationFieldEditMode() {
     }
 
     closeEditableField();
-  }
+  };
 
-  function handleCancel() {
+  const handleCancel = () => {
     closeEditableField();
-  }
+  };
 
   return (
     <StyledRelationPickerContainer>
@@ -132,4 +132,4 @@ export function GenericEditableRelationFieldEditMode() {
       />
     </StyledRelationPickerContainer>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableTextField.tsx

@@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditableTextFieldEditMode } from './GenericEditableTextFieldEditMode';
 
-export function GenericEditableTextField() {
+export const GenericEditableTextField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -39,4 +39,4 @@ export function GenericEditableTextField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx

@@ -12,7 +12,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldTextMetadata } from '../types/FieldMetadata';
 
-export function GenericEditableTextFieldEditMode() {
+export const GenericEditableTextFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -30,7 +30,7 @@ export function GenericEditableTextFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newValue: string) {
+  const handleSubmit = (newValue: string) => {
     if (currentEditableFieldEntityId && updateField) {
       updateField(
         currentEditableFieldEntityId,
@@ -41,7 +41,7 @@ export function GenericEditableTextFieldEditMode() {
       // TODO: use optimistic effect instead, but needs generic refactor
       setFieldValue(newValue);
     }
-  }
+  };
 
   const { handleEnter, handleEscape, handleClickOutside } =
     useFieldInputEventHandlers({
@@ -59,4 +59,4 @@ export function GenericEditableTextFieldEditMode() {
       hotkeyScope={EditableFieldHotkeyScope.EditableField}
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx

@@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
 import { EditableField } from './EditableField';
 import { GenericEditableURLFieldEditMode } from './GenericEditableURLFieldEditMode';
 
-export function GenericEditableURLField() {
+export const GenericEditableURLField = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -41,4 +41,4 @@ export function GenericEditableURLField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/GenericEditableURLFieldEditMode.tsx

@@ -14,7 +14,7 @@ import { FieldURLMetadata } from '../types/FieldMetadata';
 
 // This one is very similar to GenericEditableTextFieldEditMode
 // We could probably merge them since FieldURLMetadata is basically a FieldTextMetadata
-export function GenericEditableURLFieldEditMode() {
+export const GenericEditableURLFieldEditMode = () => {
   const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
@@ -32,7 +32,7 @@ export function GenericEditableURLFieldEditMode() {
 
   const updateField = useUpdateGenericEntityField();
 
-  function handleSubmit(newValue: string) {
+  const handleSubmit = (newValue: string) => {
     setFieldValue(newValue);
 
     if (currentEditableFieldEntityId && updateField) {
@@ -42,7 +42,7 @@ export function GenericEditableURLFieldEditMode() {
         newValue,
       );
     }
-  }
+  };
 
   const { handleEnter, handleEscape, handleClickOutside } =
     useFieldInputEventHandlers({
@@ -60,4 +60,4 @@ export function GenericEditableURLFieldEditMode() {
       hotkeyScope={EditableFieldHotkeyScope.EditableField}
     />
   );
-}
+};

front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx

@@ -10,7 +10,7 @@ import { FieldProbabilityMetadata } from '../types/FieldMetadata';
 
 import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
 
-export function ProbabilityEditableField() {
+export const ProbabilityEditableField = () => {
   const currentEditableFieldDefinition = useContext(
     EditableFieldDefinitionContext,
   ) as FieldDefinition<FieldProbabilityMetadata>;
@@ -25,4 +25,4 @@ export function ProbabilityEditableField() {
       />
     </RecoilScope>
   );
-}
+};

front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx

@@ -67,7 +67,7 @@ const PROBABILITY_VALUES = [
   { label: '100%', value: 100 },
 ];
 
-export function ProbabilityEditableFieldEditMode() {
+export const ProbabilityEditableFieldEditMode = () => {
   const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
     number | null
   >(null);
@@ -91,7 +91,7 @@ export function ProbabilityEditableFieldEditMode() {
 
   const probabilityIndex = Math.ceil(fieldValue / 25);
 
-  function handleChange(newValue: number) {
+  const handleChange = (newValue: number) => {
     setFieldValue(newValue);
     if (currentEditableFieldEntityId && updateField) {
       updateField(
@@ -101,7 +101,7 @@ export function ProbabilityEditableFieldEditMode() {
       );
     }
     closeEditableField();
-  }
+  };
 
   return (
     <StyledContainer>
@@ -137,4 +137,4 @@ export function ProbabilityEditableFieldEditMode() {
       </StyledProgressBarContainer>
     </StyledContainer>
   );
-}
+};