refactor(@leav/ui): use apollo cache eviction to make optimistic UI

libs/ui/src/components/Explorer/Explorer.tsx

@@ -29,8 +29,7 @@ export const Explorer: FunctionComponent<IExplorerProps> = ({
 }) => {
     const {data, loading} = useExplorerData(library); // TODO: refresh when go back on page
 
-    // TODO: use apollo cache to deactivate items
-    const {deactivateAction, deactivatedItemIds} = useDeactivateAction(
+    const {deactivateAction} = useDeactivateAction(
         isNotEmpty(defaultActionsForItem) && defaultActionsForItem.includes('deactivate')
     );
 
@@ -44,7 +43,7 @@ export const Explorer: FunctionComponent<IExplorerProps> = ({
                 'Loading...'
             ) : (
                 <DataView
-                    dataGroupedFilteredSorted={data?.filter(({itemId}) => !deactivatedItemIds.includes(itemId)) ?? []}
+                    dataGroupedFilteredSorted={data ?? []}
                     attributesToDisplay={['itemId', 'whoAmI']}
                     itemActions={[editAction, deactivateAction, ...itemActions].filter(Boolean)}
                 />

libs/ui/src/components/Explorer/useDeactivateAction.tsx

@@ -1,47 +1,48 @@
 // Copyright LEAV Solutions 2017
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {useState} from 'react';
 import {FaTrash} from 'react-icons/fa';
 import {KitModal} from 'aristid-ds';
 import {useDeactivateRecordsMutation} from '_ui/_gqlTypes';
-import {ItemActions} from '_ui/components/Explorer/types';
 import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
+import {DataGroupedFilteredSorted, ItemActions} from './types';
 
 export const useDeactivateAction = (isEnabled: boolean) => {
     const {t} = useSharedTranslation();
 
-    const [deactivatedItemIds, setDeactivatedItemIds] = useState<string[]>([]);
+    const [deactivateRecordsMutation] = useDeactivateRecordsMutation({
+        update(cache, deactivatedRecords) {
+            deactivatedRecords.data?.deactivateRecords.forEach(record => {
+                cache.evict({
+                    id: cache.identify(record)
+                });
+            });
+            cache.gc(); // used to delete RecordIdentity too
+        }
+    });
 
-    const [deactivateRecords] = useDeactivateRecordsMutation();
-    const _deactivateItem = async ({itemId, libraryId}) => {
-        await deactivateRecords({
-            variables: {
-                libraryId,
-                recordsIds: [itemId]
-            }
-        });
-
-        setDeactivatedItemIds([...deactivatedItemIds, itemId]);
-    };
-
-    const _deactivateAction: ItemActions<any>[number] = {
+    const _deactivateAction: ItemActions<DataGroupedFilteredSorted<'whoAmI'>[number]>[number] = {
         label: t('explorer.deactivateItem'),
         icon: <FaTrash />,
         isDanger: true,
-        callback: item =>
+        callback: ({itemId, libraryId}) =>
             KitModal.confirm({
                 type: 'confirm',
                 dangerConfirm: true,
                 content: t('records_deactivation.confirm_one') ?? undefined,
                 okText: t('global.submit') ?? undefined,
                 cancelText: t('global.cancel') ?? undefined,
-                onOk: () => _deactivateItem(item)
+                onOk: () =>
+                    deactivateRecordsMutation({
+                        variables: {
+                            libraryId,
+                            recordsIds: [itemId]
+                        }
+                    })
             })
     };
 
     return {
-        deactivateAction: isEnabled ? _deactivateAction : null,
-        deactivatedItemIds
+        deactivateAction: isEnabled ? _deactivateAction : null
     };
 };