feat: disable useQuery if component tracks local state

As per our discussion (refer to meeting minutes here:
https://docs.google.com/document/d/1br6T6wVX0KrcA3nwQEo7OhUrcT4veLnaz0vByEXjVvo/edit#heading=h.hyx8t36v9z3n)
we will be discussing our `useQuery` functions if there are changes
to the local state that are being tracked, to avoid refetching
behavior from overwriting local changes.

src/components/PageSettingsModal.jsx

@@ -55,6 +55,7 @@ const PageSettingsModal = ({
     const [originalPermalink, setOriginalPermalink] = useState('')
     const [sha, setSha] = useState('')
     const [mdBody, setMdBody] = useState('')
+    const [hasChanges, setHasChanges] = useState(false)
     const { setRedirectToPage } = useRedirectHook()
 
     const idToSetterFuncMap = {
@@ -66,7 +67,7 @@ const PageSettingsModal = ({
       [PAGE_SETTINGS_KEY, originalPageName],
       async () => await getPage(pageType, siteName, folderName, originalPageName),
       { 
-        enabled: !isNewPage,
+        enabled: !(isNewPage || hasChanges), // disable if new page or if there are changes
         retry: false,
         onSuccess: ({ content, sha }) => {
           const { frontMatter, mdBody } = frontMatterParser(content)
@@ -81,11 +82,6 @@ const PageSettingsModal = ({
           setIsPageSettingsActive(false)
           errorToast(`The page data could not be retrieved. ${DEFAULT_RETRY_MSG}`)
         },
-        cacheTime: 0,
-        refetchOnWindowFocus: false,
-        refetchOnReconnect: false,
-        refetchInterval: false,
-        refetchIntervalInBackground: false,
       }
     )
 
@@ -124,6 +120,12 @@ const PageSettingsModal = ({
       setHasErrors(_.some(errors, (field) => field.length > 0));
     }, [errors])
 
+    useEffect(() => {
+      if (title && permalink) {
+        setHasChanges(title !== deslugifyPage(originalPageName) || permalink !== originalPermalink)
+      }
+    }, [originalPageName, originalPermalink, title, permalink])
+
     const changeHandler = (event) => {
       const { id, value } = event.target;
       const errorMessage = validatePageSettings(id, value, pagesData)

src/layouts/EditNavBar.jsx

@@ -59,6 +59,8 @@ const EditNavBar =  ({ match }) => {
     sublinks: [],
   })
 
+  const [hasChanges, setHasChanges] = useState(false)
+
   const LinkCollectionSectionConstructor = () => ({
     title: 'Link Title',
     collection: collections[0],
@@ -114,6 +116,7 @@ const EditNavBar =  ({ match }) => {
     [NAVIGATION_CONTENT_KEY, siteName],
     () => getEditNavBarData(siteName),
     {
+      enabled: !hasChanges,
       retry: false,
       cacheTime: 0, // We want to refetch data on every page load because file order may have changed
       onError: (err) => {
@@ -123,10 +126,6 @@ const EditNavBar =  ({ match }) => {
           errorToast(`There was a problem trying to load your data. ${DEFAULT_RETRY_MSG}`)
         }
       },
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
     },
   );
 
@@ -203,6 +202,13 @@ const EditNavBar =  ({ match }) => {
     }
   }, [navigationContents])
 
+  useEffect(() => {
+    setHasChanges(JSON.stringify(originalNav) !== JSON.stringify({
+      ...originalNav,
+      links: links
+    }))
+  }, [originalNav, links])
+
   const onFieldChange = async (event) => {
     try {
       const { id, value } = event.target;
@@ -564,13 +570,6 @@ const EditNavBar =  ({ match }) => {
     }
   }
 
-  const hasChanges = () => {
-    return JSON.stringify(originalNav) !== JSON.stringify({
-      ...originalNav,
-      links: links
-    })
-  }
-
   const hasErrors = () => {
     return !isEmpty(errors.links) || !isEmpty(errors.sublinks)
   }
@@ -589,7 +588,7 @@ const EditNavBar =  ({ match }) => {
       }
       <Header
         title={"Nav Bar"}
-        shouldAllowEditPageBackNav={!hasChanges()}
+        shouldAllowEditPageBackNav={!hasChanges}
         isEditPage="true"
         backButtonText="Back to My Workspace"
         backButtonUrl={`/sites/${siteName}/workspace`}

src/layouts/EditPage.jsx

@@ -124,13 +124,16 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
   const [isCspViolation, setIsCspViolation] = useState(false)
   const [chunk, setChunk] = useState('')
 
+  const [hasChanges, setHasChanges] = useState(false)
+
   const mdeRef = useRef()
 
   // get page data
   const { data: pageData } = useQuery(
     [PAGE_CONTENT_KEY, match.params],
     () => getEditPageData(match.params),
     {
+      enabled: !hasChanges,
       retry: false,
       onError: (err) => {
         if (err.response && err.response.status === 404) {
@@ -139,10 +142,6 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
           errorToast(`There was a problem trying to load your page. ${DEFAULT_RETRY_MSG}`)
         }
       },
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
     },
   );
 
@@ -151,6 +150,7 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
     [DIR_CONTENT_KEY, siteName, folderName, subfolderName],
     () => getDirectoryFile(siteName, folderName),
     {
+      enabled: !hasChanges,
       retry: false,
       onError: (err) => {
         if (err.response && err.response.status === 404) {
@@ -159,10 +159,6 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
           errorToast(`There was a problem trying to load your page. ${DEFAULT_RETRY_MSG}`)
         }
       },
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
     },
   );
 
@@ -171,6 +167,7 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
     [CSP_CONTENT_KEY, siteName],
     () => getCsp(siteName),
     {
+      enabled: !hasChanges,
       retry: false,
       onError: (err) => {
         if (err.response && err.response.status === 404) {
@@ -179,10 +176,6 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
           errorToast(`There was a problem trying to load your page. ${DEFAULT_RETRY_MSG}`)
         }
       },
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-      refetchInterval: false,
-      refetchIntervalInBackground: false,
     },
   );
 
@@ -286,6 +279,10 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
     setChunk(processedChunk)
   }, [editorValue])
 
+  useEffect(() => {
+    setHasChanges(originalMdValue === editorValue)
+  }, [originalMdValue, editorValue])
+
   const onEditorChange = (value) => {
     setEditorValue(value);
   }
@@ -365,7 +362,7 @@ const EditPage = ({ match, isResourcePage, isCollectionPage, history, type }) =>
     <>
       <Header
         title={title}
-        shouldAllowEditPageBackNav={originalMdValue === editorValue}
+        shouldAllowEditPageBackNav={hasChanges}
         isEditPage="true"
         backButtonText={backButtonLabel}
         backButtonUrl={backButtonUrl}