Improve Board performances (#2626)

Improve app performances

front/src/modules/ui/input/hooks/useLazyLoadIcons.ts

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { iconsState } from '@/ui/input/states/iconsState';
 
 export const useLazyLoadIcons = () => {
-  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
+  const [icons, setIcons] = useRecoilState(iconsState);
   const [isLoadingIcons, setIsLoadingIcons] = useState(true);
 
   useEffect(() => {
@@ -11,7 +12,7 @@ export const useLazyLoadIcons = () => {
       setIcons(lazyLoadedIcons);
       setIsLoadingIcons(false);
     });
-  }, []);
+  }, [setIcons]);
 
   return { icons, isLoadingIcons };
 };

front/src/modules/ui/input/states/iconsState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const iconsState = atom<Record<string, IconComponent>>({
+  key: 'iconsState',
+  default: {},
+});

front/src/modules/ui/layout/board/components/EntityBoard.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useRef } from 'react';
-import { useApolloClient } from '@apollo/client';
 import styled from '@emotion/styled';
 import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 import { useRecoilValue } from 'recoil';
@@ -9,6 +8,9 @@ import { Opportunity } from '@/pipeline/types/Opportunity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { StyledBoard } from '@/ui/layout/board/components/StyledBoard';
 import { BoardColumnContext } from '@/ui/layout/board/contexts/BoardColumnContext';
+import { useSetCardSelected } from '@/ui/layout/board/hooks/useSetCardSelected';
+import { useUpdateBoardCardIds } from '@/ui/layout/board/hooks/useUpdateBoardCardIds';
+import { boardColumnsState } from '@/ui/layout/board/states/boardColumnsState';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -16,10 +18,6 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { logError } from '~/utils/logError';
 
-import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
-import { useSetCardSelected } from '../hooks/useSetCardSelected';
-import { useUpdateBoardCardIds } from '../hooks/useUpdateBoardCardIds';
-import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptions } from '../types/BoardOptions';
@@ -53,16 +51,13 @@ export const EntityBoard = ({
   onEditColumnTitle,
 }: EntityBoardProps) => {
   const boardColumns = useRecoilValue(boardColumnsState);
-  const setCardSelected = useSetCardSelected();
 
   const { updateOneObject: updateOneOpportunity } =
     useUpdateOneObjectRecord<Opportunity>({
       objectNameSingular: 'opportunity',
     });
 
-  const apolloClient = useApolloClient();
-
-  const { unselectAllActiveCards } = useCurrentCardSelected();
+  const { unselectAllActiveCards, setCardSelected } = useSetCardSelected();
 
   const updatePipelineProgressStageInDB = useCallback(
     async (pipelineProgressId: string, pipelineStepId: string) => {
@@ -72,19 +67,8 @@ export const EntityBoard = ({
           pipelineStepId: pipelineStepId,
         },
       });
-
-      const cache = apolloClient.cache;
-      cache.modify({
-        id: cache.identify({
-          id: pipelineProgressId,
-          __typename: 'PipelineProgress',
-        }),
-        fields: {
-          pipelineStepId: () => pipelineStepId,
-        },
-      });
     },
-    [apolloClient.cache, updateOneOpportunity],
+    [updateOneOpportunity],
   );
 
   useListenClickOutsideByClassName({
@@ -135,7 +119,7 @@ export const EntityBoard = ({
     PageHotkeyScope.OpportunitiesPage,
   );
 
-  return (boardColumns?.length ?? 0) > 0 ? (
+  return (
     <StyledWrapper>
       <StyledBoardHeader />
       <ScrollWrapper>
@@ -172,7 +156,5 @@ export const EntityBoard = ({
         onDragSelectionChange={setCardSelected}
       />
     </StyledWrapper>
-  ) : (
-    <></>
   );
 };

front/src/modules/ui/layout/board/hooks/useCurrentCardSelected.ts

@@ -1,16 +1,16 @@
 import { useContext } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { activeCardIdsState } from '@/ui/layout/board/states/activeCardIdsState';
 import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
 
 import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
-import { activeCardIdsState } from '../states/activeCardIdsState';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
 export const useCurrentCardSelected = () => {
   const currentCardId = useContext(BoardCardIdContext);
 
-  const isCardSelected = useRecoilValue(
+  const isCurrentCardSelected = useRecoilValue(
     isCardSelectedFamilyState(currentCardId ?? ''),
   );
 
@@ -38,24 +38,8 @@ export const useCurrentCardSelected = () => {
     [currentCardId, setActiveCardIds],
   );
 
-  const unselectAllActiveCards = useRecoilCallback(
-    ({ set, snapshot }) =>
-      () => {
-        const activeCardIds = snapshot.getLoadable(activeCardIdsState).contents;
-
-        activeCardIds.forEach((cardId: string) => {
-          set(isCardSelectedFamilyState(cardId), false);
-        });
-
-        set(activeCardIdsState, []);
-        set(actionBarOpenState, false);
-      },
-    [],
-  );
-
   return {
-    currentCardSelected: isCardSelected,
+    isCurrentCardSelected,
     setCurrentCardSelected,
-    unselectAllActiveCards,
   };
 };

front/src/modules/ui/layout/board/hooks/useSetCardSelected.ts

@@ -1,4 +1,4 @@
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
 import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
 
@@ -6,15 +6,13 @@ import { activeCardIdsState } from '../states/activeCardIdsState';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
 export const useSetCardSelected = () => {
-  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
-
-  return useRecoilCallback(
+  const setCardSelected = useRecoilCallback(
     ({ set, snapshot }) =>
       (cardId: string, selected: boolean) => {
         const activeCardIds = snapshot.getLoadable(activeCardIdsState).contents;
 
         set(isCardSelectedFamilyState(cardId), selected);
-        setActionBarOpenState(selected || activeCardIds.length > 0);
+        set(actionBarOpenState, selected || activeCardIds.length > 0);
 
         if (selected) {
           set(activeCardIdsState, [...activeCardIds, cardId]);
@@ -26,4 +24,24 @@ export const useSetCardSelected = () => {
         }
       },
   );
+
+  const unselectAllActiveCards = useRecoilCallback(
+    ({ set, snapshot }) =>
+      () => {
+        const activeCardIds = snapshot.getLoadable(activeCardIdsState).contents;
+
+        activeCardIds.forEach((cardId: string) => {
+          set(isCardSelectedFamilyState(cardId), false);
+        });
+
+        set(activeCardIdsState, []);
+        set(actionBarOpenState, false);
+      },
+    [],
+  );
+
+  return {
+    setCardSelected,
+    unselectAllActiveCards,
+  };
 };