Do not unnecessarily fetch stories/taxonomies (#12653)

GoogleForCreators · Nov 23, 2022 · 97c28be · 97c28be
1 parent 80a4714
commit 97c28be
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 72 deletions.
diff --git a/packages/dashboard/src/app/views/exploreTemplates/filters/useTemplateFilters.js b/packages/dashboard/src/app/views/exploreTemplates/filters/useTemplateFilters.js
@@ -23,6 +23,6 @@ import { identity, useContextSelector } from '@googleforcreators/react';
  */
 import { filterContext } from './TemplateFiltersProvider';
 
-export default function useStoryFilters(selector = identity) {
+export default function useTemplateFilters(selector = identity) {
   return useContextSelector(filterContext, selector);
 }
diff --git a/packages/dashboard/src/app/views/exploreTemplates/index.js b/packages/dashboard/src/app/views/exploreTemplates/index.js
@@ -44,8 +44,9 @@ import useTemplateFilters from './filters/useTemplateFilters';
 import Content from './content';
 import Header from './header';
 import TemplateDetailsModal from './modal';
+import TemplateFiltersProvider from './filters/TemplateFiltersProvider';
 
-function ExploreTemplates() {
+function ExploreTemplatesView() {
   const speak = useLiveRegion();
   const [isDetailsViewOpen, setIsDetailsViewOpen] = useState(false);
   const [activeTemplate, setActiveTemplate] = useState(null);
@@ -289,4 +290,10 @@ function ExploreTemplates() {
   );
 }
 
-export default ExploreTemplates;
+export default function ExploreTemplates() {
+  return (
+    <TemplateFiltersProvider>
+      <ExploreTemplatesView />
+    </TemplateFiltersProvider>
+  );
+}
diff --git a/packages/dashboard/src/app/views/filters/provider.js b/packages/dashboard/src/app/views/filters/provider.js
diff --git a/packages/dashboard/src/app/views/filters/reducer.js b/packages/dashboard/src/app/views/filters/reducer.js
@@ -21,18 +21,23 @@ import { STORY_SORT_KEYS } from '../../../constants/stories';
 import { TEMPLATE_SORT_KEYS } from '../../../constants/templates';
 import * as types from './types';
 
+/**
+ * @typedef {Object} Payload
+ * @property {string} key Key for associated filter.
+ * @property {Object} value Value to set on the filter.
+ */
+
 /**
  * Update the filters state
  *
  * TODO: May need updating to handle all filter types within the dashboard.
  *
  * @param {Object} state Current state
- * @param {Object} payload Action payload
- * @param {string} payload.key Key for associated filter.
- * @param {Object} payload.value Value to set on the filter.
+ * @param {Object} args Arguments
+ * @param {Object} args.type type Action type.
+ * @param {Payload} args.payload Action payload
  * @return {Object} New state
  */
-
 const reducer = (state, { type, payload = {} }) => {
   switch (type) {
     case types.UPDATE_FILTER: {

diff --git a/packages/dashboard/src/app/views/myStories/index.js b/packages/dashboard/src/app/views/myStories/index.js
@@ -29,8 +29,9 @@ import useApi from '../../api/useApi';
 import useStoryFilters from './filters/useStoryFilters';
 import Content from './content';
 import Header from './header';
+import StoryFiltersProvider from './filters/StoryFiltersProvider';
 
-function MyStories() {
+function MyStoriesView() {
   const {
     duplicateStory,
     fetchStories,
@@ -144,4 +145,10 @@ function MyStories() {
   );
 }
 
-export default MyStories;
+export default function MyStories() {
+  return (
+    <StoryFiltersProvider>
+      <MyStoriesView />
+    </StoryFiltersProvider>
+  );
+}
diff --git a/packages/dashboard/src/components/interfaceSkeleton/index.js b/packages/dashboard/src/components/interfaceSkeleton/index.js
@@ -35,7 +35,6 @@ import { APP_ROUTES, ROUTE_TITLES } from '../../constants';
 import { Route, useRouteHistory } from '../../app/router';
 import { AppFrame, LeftRail, PageContent } from '../pageStructure';
 import useApiAlerts from '../../app/api/useApiAlerts';
-import FiltersProvider from '../../app/views/filters/provider';
 import useApi from '../../app/api/useApi';
 import { useConfig } from '../../app/config';
 
@@ -146,26 +145,28 @@ const InterfaceSkeleton = ({ additionalRoutes }) => {
     <>
       <AppFrame>
         <LeftRail />
-        <FiltersProvider>
-          <PageContent>
-            <Route
-              exact
-              isDefault
-              path={APP_ROUTES.DASHBOARD}
-              component={<MyStoriesView />}
-            />
-            {canViewDefaultTemplates && (
+        <PageContent>
+          {availableRoutes.length > 0 && (
+            <>
               <Route
-                path={APP_ROUTES.TEMPLATES_GALLERY}
-                component={<ExploreTemplatesView />}
+                exact
+                isDefault
+                path={APP_ROUTES.DASHBOARD}
+                component={<MyStoriesView />}
               />
-            )}
-            {additionalRoutes &&
-              additionalRoutes.map((routeProps) => (
-                <Route key={routeProps.path} {...routeProps} />
-              ))}
-          </PageContent>
-        </FiltersProvider>
+              {canViewDefaultTemplates && (
+                <Route
+                  path={APP_ROUTES.TEMPLATES_GALLERY}
+                  component={<ExploreTemplatesView />}
+                />
+              )}
+              {additionalRoutes &&
+                additionalRoutes.map((routeProps) => (
+                  <Route key={routeProps.path} {...routeProps} />
+                ))}
+            </>
+          )}
+        </PageContent>
       </AppFrame>
       <Snackbar.Container
         notifications={currentSnacks}

diff --git a/packages/dashboard/src/karma/apiProviderFixture.js b/packages/dashboard/src/karma/apiProviderFixture.js
@@ -143,7 +143,7 @@ function getStoriesState() {
   };
 }
 
-function fetchStories({ sort, filters }, currentState) {
+function fetchStories({ sort = {}, filters = {} }, currentState) {
   const storiesState = currentState ? { ...currentState } : getStoriesState();
   const {
     author,

diff --git a/packages/wp-dashboard/src/components/telemetryBanner/index.js b/packages/wp-dashboard/src/components/telemetryBanner/index.js
@@ -222,22 +222,29 @@ export function TelemetryBannerContainer(props) {
 }
 
 export default function TelemetryBanner() {
-  const { currentPath } = useRouteHistory(({ state }) => ({
+  const { currentPath, hasAvailableRoutes } = useRouteHistory(({ state }) => ({
     currentPath: state.currentPath,
+    hasAvailableRoutes: state.availableRoutes.length > 0,
   }));
   const headerEl = useRef(null);
   const [, forceUpdate] = useState(false);
 
   useEffect(() => {
+    if (!hasAvailableRoutes) {
+      return;
+    }
+
     if (
       [APP_ROUTES.DASHBOARD, APP_ROUTES.TEMPLATES_GALLERY].includes(currentPath)
     ) {
       headerEl.current = document.getElementById('body-view-options-header');
       forceUpdate((value) => !value);
     }
-  }, [currentPath, forceUpdate]);
+  }, [currentPath, hasAvailableRoutes]);
+
+  if (!headerEl.current) {
+    return null;
+  }
 
-  return headerEl.current
-    ? createPortal(<TelemetryBannerContainer />, headerEl.current)
-    : null;
+  return createPortal(<TelemetryBannerContainer />, headerEl.current);
 }