Dashboard: Load Spinner and Failure to load resource

packages/dashboard/src/app/views/myStories/index.js

@@ -90,15 +90,17 @@ function MyStories() {
   }, []);
 
   const {
-    filter,
+    filter: statusFilter,
+    filters: dropDownFilters,
     page,
     search,
     sort,
     view,
     showStoriesWhileLoading,
     initialPageReady,
   } = useStoryView({
-    filters: STORY_STATUSES,
+    statusFilters: STORY_STATUSES,
+    filtersObject,
     isLoading,
     totalPages,
   });
@@ -109,18 +111,18 @@ function MyStories() {
       searchTerm: search.keyword,
       sortDirection: sort.direction,
       sortOption: sort.value,
-      status: filter.value,
-      filters: filtersObject,
+      status: statusFilter.value,
+      filters: dropDownFilters.value,
     });
   }, [
     fetchStories,
-    filter.value,
+    statusFilter.value,
+    dropDownFilters.value,
     page.value,
     search.keyword,
     sort.direction,
     sort.value,
     apiCallbacks,
-    filtersObject,
   ]);
 
   const orderedStories = useMemo(() => {
@@ -133,7 +135,7 @@ function MyStories() {
     <Layout.Provider>
       <Header
         initialPageReady={initialPageReady}
-        filter={filter}
+        filter={statusFilter}
         filters={filters}
         search={search}
         sort={sort}
@@ -145,7 +147,7 @@ function MyStories() {
       <Content
         allPagesFetched={allPagesFetched}
         canViewDefaultTemplates={canViewDefaultTemplates}
-        filter={filter}
+        filter={statusFilter}
         loading={{
           isLoading: isLoading,
           showStoriesWhileLoading,

packages/dashboard/src/utils/test/useStoryView.js

@@ -33,7 +33,7 @@ import {
 describe('useStoryView()', function () {
   it('should have the default options initially selected', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 1 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 1 }),
       {}
     );
 
@@ -45,7 +45,7 @@ describe('useStoryView()', function () {
 
   it('should set the new filter when passed and reset the page.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -63,7 +63,7 @@ describe('useStoryView()', function () {
 
   it('should set the new sort when passed and reset the page.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -79,9 +79,29 @@ describe('useStoryView()', function () {
     expect(result.current.page.value).toBe(1);
   });
 
+  it('should set the new filters when passed and reset the page.', function () {
+    const { result } = renderHook(
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
+      {}
+    );
+
+    act(() => {
+      result.current.page.requestNextPage();
+    });
+    expect(result.current.page.value).toBe(2);
+
+    act(() => {
+      result.current.filters.set({ web_story_category: 45 });
+    });
+    expect(result.current.filters.value).toMatchObject({
+      web_story_category: 45,
+    });
+    expect(result.current.page.value).toBe(1);
+  });
+
   it('should set the new search keyword when typed and reset the page.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -99,7 +119,7 @@ describe('useStoryView()', function () {
 
   it('should set the new view style when toggled.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -113,7 +133,7 @@ describe('useStoryView()', function () {
 
   it('should set the sort direction to ASC when a NAME sort is selected and the view toggles to LIST.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -134,7 +154,7 @@ describe('useStoryView()', function () {
 
   it('should request the next page when called.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -147,7 +167,7 @@ describe('useStoryView()', function () {
 
   it('should request the next page when called and not exceed maximum pages.', function () {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -166,7 +186,7 @@ describe('useStoryView()', function () {
 
   it('should not show stories while loading by default', () => {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -175,7 +195,7 @@ describe('useStoryView()', function () {
 
   it('should set showStoriesWhileLoading to true when next page is called', () => {
     const { result } = renderHook(
-      () => useStoryView({ filters: STORY_STATUSES, totalPages: 2 }),
+      () => useStoryView({ statusFilters: STORY_STATUSES, totalPages: 2 }),
       {}
     );
 
@@ -191,7 +211,7 @@ describe('useStoryView()', function () {
     const { result, rerender } = renderHook(
       () =>
         useStoryView({
-          filters: STORY_STATUSES,
+          statusFilters: STORY_STATUSES,
           isLoading,
           totalPages: 2,
         }),

packages/dashboard/src/utils/useStoryView.js

@@ -36,14 +36,16 @@ import { PageSizePropType } from '../types';
 import usePagePreviewSize from './usePagePreviewSize';
 
 export default function useStoryView({
-  filters,
+  statusFilters,
+  filtersObject,
   isLoading = false,
   totalPages,
 }) {
   const [viewStyle, setViewStyle] = useState(VIEW_STYLE.GRID);
   const [sort, _setSort] = useState(STORY_SORT_OPTIONS.LAST_MODIFIED);
+  const [filters, _setFilters] = useState(filtersObject);
   const [filter, _setFilter] = useState(
-    filters.length > 0 ? filters[0].value : null
+    statusFilters.length > 0 ? statusFilters[0].value : null
   );
   const [sortDirection, _setSortDirection] = useState(SORT_DIRECTION.DESC);
   const [page, setPage] = useState(1);
@@ -74,6 +76,14 @@ export default function useStoryView({
     [setPageClamped]
   );
 
+  const setFilters = useCallback(
+    (newFilters) => {
+      _setFilters(newFilters);
+      setPageClamped(1);
+    },
+    [setPageClamped]
+  );
+
   const setFilter = useCallback(
     (newFilter) => {
       _setFilter(newFilter);
@@ -152,6 +162,12 @@ export default function useStoryView({
     }
   }, [totalPages, initialPageReady]);
 
+  useEffect(() => {
+    if (initialPageReady) {
+      setFilters(filtersObject);
+    }
+  }, [setFilters, initialPageReady, filtersObject]);
+
   return useMemo(
     () => ({
       view: {
@@ -169,6 +185,10 @@ export default function useStoryView({
         value: filter,
         set: setFilter,
       },
+      filters: {
+        value: filters,
+        set: setFilters,
+      },
       page: {
         value: page,
         set: setPage,
@@ -196,6 +216,8 @@ export default function useStoryView({
       sortDirection,
       setSortDirection,
       filter,
+      setFilters,
+      filters,
       initialPageReady,
       setFilter,
       page,