Files
twenty_crm/front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
2023-10-27 11:48:38 +02:00

133 lines
4.0 KiB
TypeScript

import { useEffect, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { turnFilterIntoWhereClause } from '@/ui/data/filter/utils/turnFilterIntoWhereClause';
import { useBoardActionBarEntries } from '@/ui/layout/board/hooks/useBoardActionBarEntries';
import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardContextMenuEntries';
import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
import { useView } from '@/views/hooks/useView';
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
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';
export const HooksCompanyBoardEffect = () => {
const {
setAvailableFilters,
setAvailableSorts,
setEntityCountInCurrentView,
setCurrentViewId,
} = useView();
const { currentViewFilters } = useViewInternalStates();
useEffect(() => {
setAvailableFilters(opportunitiesBoardOptions.filters);
setAvailableSorts?.(opportunitiesBoardOptions.sorts);
}, [setAvailableFilters, setAvailableSorts]);
const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);
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 whereFilters = useMemo(() => {
return {
AND: [
{ pipelineStageId: { in: pipelineStageIds } },
...(currentViewFilters?.map(turnFilterIntoWhereClause) || []),
],
};
}, [currentViewFilters, pipelineStageIds]) as any;
const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIds();
const { data: pipelineProgressData, loading: loadingGetPipelineProgress } =
useGetPipelineProgressQuery({
variables: {
where: whereFilters,
},
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 [searchParams] = useSearchParams();
const loading =
loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
const { setActionBarEntries } = useBoardActionBarEntries();
const { setContextMenuEntries } = useBoardContextMenuEntries();
useEffect(() => {
if (!loading && pipeline && pipelineProgresses && companiesData) {
const viewId = searchParams.get('view');
if (viewId) {
//setCurrentViewId(viewId);
}
setActionBarEntries();
setContextMenuEntries();
updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);
setEntityCountInCurrentView(companiesData.companies.length);
}
}, [
loading,
pipeline,
pipelineProgresses,
companiesData,
updateCompanyBoard,
setActionBarEntries,
setContextMenuEntries,
searchParams,
setEntityCountInCurrentView,
setCurrentViewId,
]);
return <></>;
};