Fix: Deleted Content Item is Appearing in the Multi Page Content Table (#2513)

* Fix: Deleted Content Item is Appearing in the Multi Page Content Table

* clean up PR

* Ref: useDispatch hook instead directly using store

Author: jomarmontuya

src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/DeleteItemDialog.tsx

@@ -7,7 +7,7 @@ import {
 } from "@mui/material";
 import { DeleteRounded } from "@mui/icons-material";
 import { useHistory, useParams } from "react-router";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { AppState } from "../../../../../../../../shell/store/types";
 import { ContentItem } from "../../../../../../../../shell/services/types";
 import {
@@ -22,6 +22,7 @@ type DuplicateItemProps = {
 };
 
 export const DeleteItemDialog = ({ onClose }: DuplicateItemProps) => {
+  const dispatch = useDispatch();
   const { modelZUID, itemZUID } = useParams<{
     modelZUID: string;
     itemZUID: string;
@@ -68,12 +69,21 @@ export const DeleteItemDialog = ({ onClose }: DuplicateItemProps) => {
           data-cy="DeleteContentItemConfirmButton"
           variant="contained"
           color="error"
-          onClick={() =>
+          onClick={() => {
             deleteContentItem({
               modelZUID: modelZUID,
               itemZUID: itemZUID,
-            }).then(() => history.push(`/content/${modelZUID}`))
-          }
+            }).then(() => {
+              /**
+               * Remove the item from the store before redirecting
+               */
+              dispatch({
+                type: "REMOVE_ITEM",
+                itemZUID,
+              });
+              history.push(`/content/${modelZUID}`);
+            });
+          }}
           loading={isLoading}
         >
           Delete Item

src/apps/content-editor/src/app/views/ItemList/ItemList.js

@@ -209,6 +209,7 @@ export default connect((state, props) => {
           })
         ),
       ]);
+
       if (_isMounted.current) {
         // render 1st page of results
         setShouldRunFilters(true);
@@ -220,6 +221,7 @@ export default connect((state, props) => {
           // re-render after all pages fetched
           setShouldRunFilters(true);
         }
+
         setBackgroundLoading(false);
       }
     } catch (err) {

src/shell/store/content.js

@@ -259,7 +259,6 @@ export function fetchItem(modelZUID, itemZUID) {
             itemZUID,
           });
         }
-
         return res;
       },
     });
@@ -408,7 +407,7 @@ export function saveItem(itemZUID, action = "") {
       item.web.metaDescription = item.web.metaDescription.slice(0, 160);
     }
 
-    /* 
+    /*
       Nav item will not be found if item does exist in the nav such is the case
       when the item is in a dataset
     */