From c82c5a191e18ce40c2644db968f89122ab62f9cb Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Sat, 16 Sep 2023 22:23:43 -0700
Subject: [PATCH] Introduce useOptimisticEvict (#1629)

---
 .../hooks/useOptimisticEffect.ts              | 13 +++++-----
 .../hooks/useOptimisticEvict.ts               | 24 +++++++++++++++++++
 .../companies/hooks/useDeleteCompanies.ts     |  5 ++++
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEvict.ts

diff --git a/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts b/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
index 22a119844..d1bfaf274 100644
--- a/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
+++ b/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEffect.ts
@@ -18,12 +18,12 @@ export const useOptimisticEffect = () => {
 
   const registerOptimisticEffect = useRecoilCallback(
     ({ snapshot, set }) =>
-      ({
+      <T>({
         variables,
         definition,
       }: {
         variables: OperationVariables;
-        definition: OptimisticEffectDefinition<unknown>;
+        definition: OptimisticEffectDefinition<T>;
       }) => {
         const optimisticEffects = snapshot
           .getLoadable(optimisticEffectState)
@@ -55,8 +55,8 @@ export const useOptimisticEffect = () => {
               variables,
               data: {
                 people: definition.resolver({
-                  currentData: (existingData as GetPeopleQuery).people,
-                  newData,
+                  currentData: (existingData as GetPeopleQuery).people as T[],
+                  newData: newData as T[],
                   variables,
                 }),
               },
@@ -69,8 +69,9 @@ export const useOptimisticEffect = () => {
               variables,
               data: {
                 companies: definition.resolver({
-                  currentData: (existingData as GetCompaniesQuery).companies,
-                  newData,
+                  currentData: (existingData as GetCompaniesQuery)
+                    .companies as T[],
+                  newData: newData as T[],
                   variables,
                 }),
               },
diff --git a/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEvict.ts b/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEvict.ts
new file mode 100644
index 000000000..97759f47a
--- /dev/null
+++ b/front/src/modules/apollo/optimistic-effect/hooks/useOptimisticEvict.ts
@@ -0,0 +1,24 @@
+import { useApolloClient } from '@apollo/client';
+
+export const useOptimisticEvict = () => {
+  const cache = useApolloClient().cache;
+
+  const performOptimisticEvict = (
+    typename: string,
+    fieldName: string,
+    fieldValue: string,
+  ) => {
+    const serializedCache = cache.extract();
+
+    Object.values(serializedCache)
+      .filter((item) => item.__typename === typename)
+      .forEach((item) => {
+        if (item[fieldName] === fieldValue) {
+          cache.evict({ id: cache.identify(item) });
+        }
+      });
+  };
+  return {
+    performOptimisticEvict,
+  };
+};
diff --git a/front/src/modules/companies/hooks/useDeleteCompanies.ts b/front/src/modules/companies/hooks/useDeleteCompanies.ts
index 201b28e8b..d894a2df9 100644
--- a/front/src/modules/companies/hooks/useDeleteCompanies.ts
+++ b/front/src/modules/companies/hooks/useDeleteCompanies.ts
@@ -1,6 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
 import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
@@ -15,6 +16,7 @@ export const useDeleteSelectedComapnies = () => {
   const [deleteCompanies] = useDeleteManyCompaniesMutation({
     refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
   });
+  const { performOptimisticEvict } = useOptimisticEvict();
 
   const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
@@ -42,6 +44,9 @@ export const useDeleteSelectedComapnies = () => {
           cache.evict({
             id: cache.identify({ __typename: 'Company', id: companyId }),
           });
+
+          performOptimisticEvict('PipelineProgress', 'companyId', companyId);
+
           cache.gc();
         });
       },