Feat/sidecar components (#1578)

* Added a new eslint plugin in TypeScript for Effect components

* Fixed edge cases

* Fixed lint

* Fix eslint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/companies/components/HooksCompanyBoardEffect.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries';
+import { useBoardContextMenuEntries } from '@/ui/board/hooks/useBoardContextMenuEntries';
+import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
+import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
+import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhereClause';
+import {
+  Pipeline,
+  PipelineProgressableType,
+  useGetCompaniesQuery,
+  useGetPipelineProgressQuery,
+  useGetPipelinesQuery,
+} from '~/generated/graphql';
+import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
+
+import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
+import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
+import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
+
+export function HooksCompanyBoardEffect() {
+  const [, setAvailableFilters] = useRecoilScopedState(
+    availableFiltersScopedState,
+    CompanyBoardRecoilScopeContext,
+  );
+
+  const [, setAvailableSorts] = useRecoilScopedState(
+    availableSortsScopedState,
+    CompanyBoardRecoilScopeContext,
+  );
+
+  useEffect(() => {
+    setAvailableFilters(opportunitiesBoardOptions.filters);
+    setAvailableSorts(opportunitiesBoardOptions.sorts);
+  });
+
+  const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);
+
+  const filters = useRecoilScopedValue(
+    filtersScopedState,
+    CompanyBoardRecoilScopeContext,
+  );
+
+  const updateCompanyBoard = useUpdateCompanyBoard();
+
+  const { data: pipelineData, loading: loadingGetPipelines } =
+    useGetPipelinesQuery({
+      variables: {
+        where: {
+          pipelineProgressableType: {
+            equals: PipelineProgressableType.Company,
+          },
+        },
+      },
+    });
+
+  const pipeline = pipelineData?.findManyPipeline[0] as Pipeline | undefined;
+
+  const pipelineStageIds = pipeline?.pipelineStages
+    ?.map((pipelineStage) => pipelineStage.id)
+    .flat();
+
+  const sortsOrderBy = useRecoilScopedValue(
+    sortsOrderByScopedSelector,
+    CompanyBoardRecoilScopeContext,
+  );
+  const whereFilters = useMemo(() => {
+    return {
+      AND: [
+        { pipelineStageId: { in: pipelineStageIds } },
+        ...filters.map(turnFilterIntoWhereClause),
+      ],
+    };
+  }, [filters, pipelineStageIds]) as any;
+
+  const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIds();
+
+  const { data: pipelineProgressData, loading: loadingGetPipelineProgress } =
+    useGetPipelineProgressQuery({
+      variables: {
+        where: whereFilters,
+        orderBy: sortsOrderBy,
+      },
+      onCompleted: (data) => {
+        const pipelineProgresses = data?.findManyPipelineProgress || [];
+
+        updateCompanyBoardCardIds(pipelineProgresses);
+
+        setIsBoardLoaded(true);
+      },
+    });
+
+  const pipelineProgresses = useMemo(() => {
+    return pipelineProgressData?.findManyPipelineProgress || [];
+  }, [pipelineProgressData]);
+
+  const { data: companiesData, loading: loadingGetCompanies } =
+    useGetCompaniesQuery({
+      variables: {
+        where: {
+          id: {
+            in: pipelineProgresses.map((item) => item.companyId || ''),
+          },
+        },
+      },
+    });
+
+  const loading =
+    loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
+
+  const { setActionBarEntries } = useBoardActionBarEntries();
+  const { setContextMenuEntries } = useBoardContextMenuEntries();
+
+  useEffect(() => {
+    if (!loading && pipeline && pipelineProgresses && companiesData) {
+      setActionBarEntries();
+      setContextMenuEntries();
+      updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);
+    }
+  }, [
+    loading,
+    pipeline,
+    pipelineProgresses,
+    companiesData,
+    updateCompanyBoard,
+    setActionBarEntries,
+    setContextMenuEntries,
+  ]);
+
+  return <></>;
+}