Refactor: use invalidateQueries instead of passing refetch function f…

…or CollectionPagesSection
isomerpages · Apr 28, 2021 · 71823a4 · 71823a4
1 parent 1c0a347
commit 71823a4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/components/CollectionPagesSection.jsx b/src/components/CollectionPagesSection.jsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { useQuery, useMutation } from 'react-query';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import {
     PAGE_CONTENT_KEY,
     FOLDERS_CONTENT_KEY,
     DIR_CONTENT_KEY,
+    RESOURCE_CATEGORY_CONTENT_KEY,
 } from '../constants'
 
 import { getEditPageData, deletePageData, getAllCategories, moveFile, getDirectoryFile } from '../api'
@@ -31,8 +32,8 @@ import contentStyles from '../styles/isomer-cms/pages/Content.module.scss';
 axios.defaults.withCredentials = true
 
 // Clean up note: Should be renamed, only used for resource pages and unlinked pages sections
-const CollectionPagesSection = ({ collectionName, pages, siteName, isResource, refetchPages }) => {
-
+const CollectionPagesSection = ({ collectionName, pages, siteName, isResource }) => {
+    const queryClient = useQueryClient()
     const initialMoveDropdownQueryState = {
         folderName: '',
         subfolderName: '',
@@ -114,7 +115,12 @@ const CollectionPagesSection = ({ collectionName, pages, siteName, isResource, r
         async () => await deletePageData({ siteName, fileName: selectedFile, resourceName: collectionName }, pageData.pageSha),
         {
           onError: () => errorToast(`Your file could not be deleted successfully. ${DEFAULT_RETRY_MSG}`),
-          onSuccess: () => {successToast('Successfully deleted file'); refetchPages();},
+          onSuccess: () => {
+              setSelectedFile('')
+              if (isResource) queryClient.invalidateQueries([RESOURCE_CATEGORY_CONTENT_KEY, siteName, collectionName, true])
+              else queryClient.invalidateQueries([PAGE_CONTENT_KEY, { siteName }])
+              successToast('Successfully deleted file')
+            },
           onSettled: () => setCanShowDeleteWarningModal((prevState) => !prevState),
         }
     )
@@ -128,8 +134,10 @@ const CollectionPagesSection = ({ collectionName, pages, siteName, isResource, r
           onError: () => errorToast(`Your file could not be moved successfully. ${DEFAULT_RETRY_MSG}`),
           onSuccess: (samePage) => {
             if (samePage) return successToast('Page is already in this folder')   
+            setSelectedFile('')
+            if (isResource) queryClient.invalidateQueries([RESOURCE_CATEGORY_CONTENT_KEY, siteName, collectionName, true])
+            else queryClient.invalidateQueries([PAGE_CONTENT_KEY, { siteName }])
             successToast('Successfully moved file')
-            refetchPages()
           },
           onSettled: () => setCanShowMoveModal(prevState => !prevState),
         }
@@ -246,5 +254,4 @@ CollectionPagesSection.propTypes = {
     ),
     siteName: PropTypes.string.isRequired,
     isResource: PropTypes.bool,
-    refetchPages: PropTypes.func.isRequired,
 };
diff --git a/src/layouts/CategoryPages.jsx b/src/layouts/CategoryPages.jsx
@@ -43,7 +43,7 @@ const CategoryPages = ({ match, location, isResource }) => {
 
   const [categoryPages, setCategoryPages] = useState()
 
-  const { data: resourcePagesResp, refetch: refetchPages } = useQuery(
+  const { data: resourcePagesResp } = useQuery(
     [RESOURCE_CATEGORY_CONTENT_KEY, siteName, collectionName, isResource],
     () => getResourcePages(siteName, collectionName),
     {
@@ -123,7 +123,6 @@ const CategoryPages = ({ match, location, isResource }) => {
                   pages={categoryPages}
                   siteName={siteName}
                   isResource={isResource}
-                  refetchPages={refetchPages}
               />
           </div>
           {/* main section ends here */}

diff --git a/src/layouts/Workspace.jsx b/src/layouts/Workspace.jsx
@@ -209,7 +209,6 @@ const Workspace = ({ match, location }) => {
               <CollectionPagesSection
                 pages={unlinkedPages}
                 siteName={siteName}
-                refetchPages={refetchPages}
               />
             </div>
             {/* main section ends here */}