Default Filter for Links & Details

ui/v2.5/src/components/Galleries/Galleries.tsx

@@ -2,16 +2,16 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { useTitleProps } from "src/hooks/title";
-import { PersistanceLevel } from "../List/ItemList";
 import Gallery from "./GalleryDetails/Gallery";
 import GalleryCreate from "./GalleryDetails/GalleryCreate";
 import { GalleryList } from "./GalleryList";
 import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
+import { View } from "../List/views";
 
 const Galleries: React.FC = () => {
   useScrollToTopOnMount();
 
-  return <GalleryList persistState={PersistanceLevel.ALL} />;
+  return <GalleryList view={View.Galleries} />;
 };
 
 const GalleryRoutes: React.FC = () => {

ui/v2.5/src/components/Galleries/GalleryDetails/GalleryImagesPanel.tsx

@@ -4,14 +4,12 @@ import { GalleriesCriterion } from "src/models/list-filter/criteria/galleries";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { ImageList } from "src/components/Images/ImageList";
 import { mutateRemoveGalleryImages } from "src/core/StashService";
-import {
-  showWhenSelected,
-  PersistanceLevel,
-} from "src/components/List/ItemList";
+import { showWhenSelected } from "src/components/List/ItemList";
 import { useToast } from "src/hooks/Toast";
 import { useIntl } from "react-intl";
 import { faMinus } from "@fortawesome/free-solid-svg-icons";
 import { galleryTitle } from "src/core/galleries";
+import { View } from "src/components/List/views";
 
 interface IGalleryDetailsProps {
   active: boolean;
@@ -102,8 +100,7 @@ export const GalleryImagesPanel: React.FC<IGalleryDetailsProps> = ({
       filterHook={filterHook}
       alterQuery={active}
       extraOperations={otherOperations}
-      persistState={PersistanceLevel.VIEW}
-      persistanceKey="galleryimages"
+      view={View.GalleryImages}
       chapters={gallery.chapters}
     />
   );

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -5,11 +5,7 @@ import { Table } from "react-bootstrap";
 import { Link, useHistory } from "react-router-dom";
 import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
-import {
-  makeItemList,
-  PersistanceLevel,
-  showWhenSelected,
-} from "../List/ItemList";
+import { makeItemList, showWhenSelected } from "../List/ItemList";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { queryFindGalleries, useFindGalleries } from "src/core/StashService";
@@ -19,6 +15,7 @@ import { EditGalleriesDialog } from "./EditGalleriesDialog";
 import { DeleteGalleriesDialog } from "./DeleteGalleriesDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { galleryTitle } from "src/core/galleries";
+import { View } from "../List/views";
 
 const GalleryItemList = makeItemList({
   filterMode: GQL.FilterMode.Galleries,
@@ -33,13 +30,13 @@ const GalleryItemList = makeItemList({
 
 interface IGalleryList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
-  persistState?: PersistanceLevel;
+  view?: View;
   alterQuery?: boolean;
 }
 
 export const GalleryList: React.FC<IGalleryList> = ({
   filterHook,
-  persistState,
+  view,
   alterQuery,
 }) => {
   const intl = useIntl();
@@ -230,7 +227,7 @@ export const GalleryList: React.FC<IGalleryList> = ({
       zoomable
       selectable
       filterHook={filterHook}
-      persistState={persistState}
+      view={view}
       alterQuery={alterQuery}
       otherOperations={otherOperations}
       addKeybinds={addKeybinds}

ui/v2.5/src/components/Images/ImageList.tsx

@@ -14,7 +14,6 @@ import { queryFindImages, useFindImages } from "src/core/StashService";
 import {
   makeItemList,
   IItemListOperation,
-  PersistanceLevel,
   showWhenSelected,
 } from "../List/ItemList";
 import { useLightbox } from "src/hooks/Lightbox/hooks";
@@ -32,6 +31,7 @@ import { objectTitle } from "src/core/files";
 import TextUtils from "src/utils/text";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "src/core/config";
+import { View } from "../List/views";
 
 interface IImageWallProps {
   images: GQL.SlimImageDataFragment[];
@@ -291,17 +291,15 @@ const ImageItemList = makeItemList({
 
 interface IImageList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
-  persistState?: PersistanceLevel;
-  persistanceKey?: string;
+  view?: View;
   alterQuery?: boolean;
   extraOperations?: IItemListOperation<GQL.FindImagesQueryResult>[];
   chapters?: GQL.GalleryChapterDataFragment[];
 }
 
 export const ImageList: React.FC<IImageList> = ({
   filterHook,
-  persistState,
-  persistanceKey,
+  view,
   alterQuery,
   extraOperations,
   chapters = [],
@@ -442,8 +440,7 @@ export const ImageList: React.FC<IImageList> = ({
       zoomable
       selectable
       filterHook={filterHook}
-      persistState={persistState}
-      persistanceKey={persistanceKey}
+      view={view}
       alterQuery={alterQuery}
       otherOperations={otherOperations}
       addKeybinds={addKeybinds}

ui/v2.5/src/components/Images/Images.tsx

@@ -2,15 +2,15 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { useTitleProps } from "src/hooks/title";
-import { PersistanceLevel } from "../List/ItemList";
 import Image from "./ImageDetails/Image";
 import { ImageList } from "./ImageList";
 import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
+import { View } from "../List/views";
 
 const Images: React.FC = () => {
   useScrollToTopOnMount();
 
-  return <ImageList persistState={PersistanceLevel.ALL} />;
+  return <ImageList view={View.Images} />;
 };
 
 const ImageRoutes: React.FC = () => {

ui/v2.5/src/components/List/ItemList.tsx

@@ -17,13 +17,14 @@ import {
   Criterion,
   CriterionValue,
 } from "src/models/list-filter/criteria/criterion";
-import { ListFilterModel } from "src/models/list-filter/filter";
+import {
+  ListFilterModel,
+  useDefaultFilter,
+} from "src/models/list-filter/filter";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { useInterfaceLocalForage } from "src/hooks/LocalForage";
 import { useHistory, useLocation } from "react-router-dom";
 import { ConfigurationContext } from "src/hooks/Config";
 import { getFilterOptions } from "src/models/list-filter/factory";
-import { useFindDefaultFilter } from "src/core/StashService";
 import { Pagination, PaginationIndex } from "./Pagination";
 import { EditFilterDialog } from "src/components/List/EditFilterDialog";
 import { ListFilter } from "./ListFilter";
@@ -33,15 +34,7 @@ import { ListOperationButtons } from "./ListOperationButtons";
 import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { DisplayMode } from "src/models/list-filter/types";
 import { ButtonToolbar } from "react-bootstrap";
-
-export enum PersistanceLevel {
-  // do not load default query or persist display mode
-  NONE,
-  // load default query, don't load or persist display mode
-  ALL,
-  // load and persist display mode only
-  VIEW,
-}
+import { View } from "./views";
 
 interface IDataItem {
   id: string;
@@ -79,8 +72,7 @@ interface IRenderListProps {
 }
 
 interface IItemListProps<T extends QueryResult, E extends IDataItem> {
-  persistState?: PersistanceLevel;
-  persistanceKey?: string;
+  view?: View;
   defaultSort?: string;
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
   filterDialog?: (
@@ -139,14 +131,15 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
     filter,
     onChangePage: _onChangePage,
     updateFilter,
-    persistState,
+    view,
     zoomable,
     selectable,
     otherOperations,
     renderContent,
     renderEditDialog,
     renderDeleteDialog,
     addKeybinds,
+    filterHook,
   }) => {
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -471,7 +464,8 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
             filter={filter}
             filterOptions={filterOptions}
             openFilterDialog={() => setShowEditFilter(true)}
-            persistState={persistState}
+            view={view}
+            filterHook={filterHook}
           />
           <ListOperationButtons
             onSelectAll={selectable ? onSelectAll : undefined}
@@ -522,8 +516,7 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
 
   const ItemList: React.FC<IItemListProps<T, E>> = (props) => {
     const {
-      persistState,
-      persistanceKey = filterMode,
+      view,
       defaultSort = filterOptions.defaultSortBy,
       filterHook,
       defaultZoomIndex,
@@ -532,7 +525,6 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
 
     const history = useHistory();
     const location = useLocation();
-    const [interfaceState, setInterfaceState] = useInterfaceLocalForage();
     const [filterInitialised, setFilterInitialised] = useState(false);
     const { configuration: config } = useContext(ConfigurationContext);
 
@@ -542,40 +534,16 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       () => new ListFilterModel(filterMode)
     );
 
-    const updateSavedFilter = useCallback(
-      (updatedFilter: ListFilterModel) => {
-        setInterfaceState((prevState) => {
-          if (!prevState.queryConfig) {
-            prevState.queryConfig = {};
-          }
-
-          const oldFilter = prevState.queryConfig[persistanceKey]?.filter ?? "";
-          const newFilter = new URLSearchParams(oldFilter);
-          newFilter.set("disp", String(updatedFilter.displayMode));
-
-          return {
-            ...prevState,
-            queryConfig: {
-              ...prevState.queryConfig,
-              [persistanceKey]: {
-                ...prevState.queryConfig[persistanceKey],
-                filter: newFilter.toString(),
-              },
-            },
-          };
-        });
-      },
-      [persistanceKey, setInterfaceState]
+    const { defaultFilter, loading: defaultFilterLoading } = useDefaultFilter(
+      filterMode,
+      view
     );
 
-    const { data: defaultFilter, loading: defaultFilterLoading } =
-      useFindDefaultFilter(filterMode);
-
     const updateQueryParams = useCallback(
       (newFilter: ListFilterModel) => {
         if (!alterQuery) return;
 
-        const newParams = newFilter.makeQueryParameters();
+        const newParams = newFilter.makeQueryParameters(false);
         history.replace({ ...history.location, search: newParams });
       },
       [alterQuery, history]
@@ -585,11 +553,8 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       (newFilter: ListFilterModel) => {
         setFilter(newFilter);
         updateQueryParams(newFilter);
-        if (persistState === PersistanceLevel.VIEW) {
-          updateSavedFilter(newFilter);
-        }
       },
-      [persistState, updateSavedFilter, updateQueryParams]
+      [updateQueryParams]
     );
 
     // 'Startup' hook, initialises the filters
@@ -607,43 +572,24 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       let loadDefault = true;
       if (alterQuery && location.search) {
         loadDefault = false;
-        newFilter.configureFromQueryString(location.search);
+        newFilter.configureFromQueryString(location.search, defaultFilter);
       }
 
-      if (persistState === PersistanceLevel.ALL) {
+      if (view) {
         // only set default filter if uninitialised
         if (loadDefault) {
           // wait until default filter is loaded
           if (defaultFilterLoading) return;
 
-          if (defaultFilter?.findDefaultFilter) {
-            newFilter.currentPage = 1;
-            try {
-              newFilter.configureFromSavedFilter(
-                defaultFilter.findDefaultFilter
-              );
-            } catch (err) {
-              console.log(err);
-              // ignore
-            }
+          if (defaultFilter) {
+            newFilter = defaultFilter.clone();
+
             // #1507 - reset random seed when loaded
             newFilter.randomSeed = -1;
           }
         }
-      } else if (persistState === PersistanceLevel.VIEW) {
-        // wait until forage is initialised
-        if (interfaceState.loading) return;
-
-        const storedQuery = interfaceState.data?.queryConfig?.[persistanceKey];
-        if (persistState === PersistanceLevel.VIEW && storedQuery) {
-          const displayMode = new URLSearchParams(storedQuery.filter).get(
-            "disp"
-          );
-          if (displayMode) {
-            newFilter.displayMode = Number.parseInt(displayMode, 10);
-          }
-        }
       }
+
       setFilter(newFilter);
       updateQueryParams(newFilter);
 
@@ -656,12 +602,10 @@ export function makeItemList<T extends QueryResult, E extends IDataItem>({
       defaultDisplayMode,
       defaultZoomIndex,
       alterQuery,
-      persistState,
+      view,
       updateQueryParams,
       defaultFilter,
       defaultFilterLoading,
-      interfaceState,
-      persistanceKey,
     ]);
 
     // This hook runs on every page location change (ie navigation),