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/dropdown/components/DropdownButton.tsx

@@ -22,7 +22,7 @@ type OwnProps = {
   onClickOutside?: () => void;
 };
 
-export function DropdownButton({
+export const DropdownButton = ({
   buttonComponents,
   dropdownComponents,
   dropdownId,
@@ -30,7 +30,7 @@ export function DropdownButton({
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
   onClickOutside,
-}: OwnProps) {
+}: OwnProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
@@ -43,9 +43,9 @@ export function DropdownButton({
     middleware: [flip(), offset()],
   });
 
-  function handleHotkeyTriggered() {
+  const handleHotkeyTriggered = () => {
     toggleDropdownButton();
-  }
+  };
 
   useListenClickOutside({
     refs: [containerRef],
@@ -79,4 +79,4 @@ export function DropdownButton({
       )}
     </div>
   );
-}
+};

front/src/modules/ui/dropdown/components/DropdownMenuContainer.tsx

@@ -22,13 +22,13 @@ export type DropdownMenuContainerProps = {
   width?: `${string}px` | 'auto' | number;
 } & HTMLAttributes<HTMLUListElement>;
 
-export function DropdownMenuContainer({
+export const DropdownMenuContainer = ({
   anchor = 'right',
   children,
   onClose,
   width,
   ...props
-}: DropdownMenuContainerProps) {
+}: DropdownMenuContainerProps) => {
   const dropdownRef = useRef(null);
 
   useListenClickOutside({
@@ -45,4 +45,4 @@ export function DropdownMenuContainer({
       </StyledDropdownMenu>
     </StyledDropdownMenuContainer>
   );
-}
+};

front/src/modules/ui/dropdown/components/DropdownMenuHeader.tsx

@@ -46,12 +46,12 @@ type DropdownMenuHeaderProps = ComponentProps<'li'> & {
   EndIcon?: IconComponent;
 };
 
-export function DropdownMenuHeader({
+export const DropdownMenuHeader = ({
   children,
   StartIcon,
   EndIcon,
   ...props
-}: DropdownMenuHeaderProps) {
+}: DropdownMenuHeaderProps) => {
   const theme = useTheme();
 
   return (
@@ -69,4 +69,4 @@ export function DropdownMenuHeader({
       )}
     </StyledHeader>
   );
-}
+};

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -5,7 +5,7 @@ import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownBu
 import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
-export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
+export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -24,12 +24,12 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
     DropdownRecoilScopeContext,
   );
 
-  function closeDropdownButton() {
+  const closeDropdownButton = () => {
     goBackToPreviousHotkeyScope();
     setIsDropdownButtonOpen(false);
-  }
+  };
 
-  function openDropdownButton() {
+  const openDropdownButton = () => {
     setIsDropdownButtonOpen(true);
 
     if (dropdownButtonHotkeyScope) {
@@ -38,15 +38,15 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
         dropdownButtonHotkeyScope.customScopes,
       );
     }
-  }
+  };
 
-  function toggleDropdownButton() {
+  const toggleDropdownButton = () => {
     if (isDropdownButtonOpen) {
       closeDropdownButton();
     } else {
       openDropdownButton();
     }
-  }
+  };
 
   return {
     isDropdownButtonOpen,
@@ -54,4 +54,4 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
     toggleDropdownButton,
     openDropdownButton,
   };
-}
+};