Apply filter hook to subpage sidebar filters (#5995)

* Apply filterHook to sidebar filters on subpages
* Hide studio filter in studio subpage

ui/v2.5/src/components/List/Filters/LabeledIdFilter.tsx

@@ -321,18 +321,24 @@ export function useCriterion(
   return { criterion, setCriterion };
 }
 
+export interface IUseQueryHookProps {
+  q: string;
+  filter?: ListFilterModel;
+  filterHook?: (filter: ListFilterModel) => ListFilterModel;
+  skip: boolean;
+}
+
 export function useQueryState(
-  useQuery: (
+  useQuery: (props: IUseQueryHookProps) => ILoadResults<ILabeledId[]>,
-    q: string,
-    filter: ListFilterModel,
-    skip: boolean
-  ) => ILoadResults<ILabeledId[]>,
   filter: ListFilterModel,
-  skip: boolean
+  skip: boolean,
+  options?: {
+    filterHook?: (filter: ListFilterModel) => ListFilterModel;
+  }
 ) {
   const [query, setQuery] = useState("");
   const { results: queryResults } = useCacheResults(
-    useQuery(query, filter, skip)
+    useQuery({ q: query, filter, filterHook: options?.filterHook, skip })
   );
 
   return { query, setQuery, queryResults };
@@ -431,11 +437,8 @@ export function useLabeledIdFilterState(props: {
   option: CriterionOption;
   filter: ListFilterModel;
   setFilter: (f: ListFilterModel) => void;
-  useQuery: (
+  filterHook?: (filter: ListFilterModel) => ListFilterModel;
-    q: string,
+  useQuery: (props: IUseQueryHookProps) => ILoadResults<ILabeledId[]>;
-    filter: ListFilterModel,
-    skip: boolean
-  ) => ILoadResults<ILabeledId[]>;
   singleValue?: boolean;
   hierarchical?: boolean;
   includeSubMessageID?: string;
@@ -444,6 +447,7 @@ export function useLabeledIdFilterState(props: {
     option,
     filter,
     setFilter,
+    filterHook,
     useQuery,
     singleValue = false,
     hierarchical = false,
@@ -456,7 +460,8 @@ export function useLabeledIdFilterState(props: {
   const { query, setQuery, queryResults } = useQueryState(
     useQuery,
     filter,
-    skip
+    skip,
+    { filterHook }
   );
 
   const { criterion, setCriterion } = useCriterion(option, filter, setFilter);

ui/v2.5/src/components/List/Filters/PerformersFilter.tsx

@@ -12,6 +12,7 @@ import { sortByRelevance } from "src/utils/query";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { CriterionOption } from "src/models/list-filter/criteria/criterion";
 import {
+  IUseQueryHookProps,
   makeQueryVariables,
   setObjectFilter,
   useLabeledIdFilterState,
@@ -69,13 +70,12 @@ function sortResults(
   });
 }
 
-function usePerformerQueryFilter(
+function usePerformerQueryFilter(props: IUseQueryHookProps) {
-  query: string,
+  const { q: query, filter: f, skip, filterHook } = props;
-  f?: ListFilterModel,
+  const appliedFilter = filterHook && f ? filterHook(f.clone()) : f;
-  skip?: boolean
+
-) {
   const { data, loading } = useFindPerformersForSelectQuery({
-    variables: queryVariables(query, f),
+    variables: queryVariables(query, appliedFilter),
     skip,
   });
 
@@ -88,7 +88,7 @@ function usePerformerQueryFilter(
 }
 
 function usePerformerQuery(query: string, skip?: boolean) {
-  return usePerformerQueryFilter(query, undefined, skip);
+  return usePerformerQueryFilter({ q: query, skip: !!skip });
 }
 
 const PerformersFilter: React.FC<IPerformersFilter> = ({
@@ -109,10 +109,12 @@ export const SidebarPerformersFilter: React.FC<{
   option: CriterionOption;
   filter: ListFilterModel;
   setFilter: (f: ListFilterModel) => void;
-}> = ({ title, option, filter, setFilter }) => {
+  filterHook?: (f: ListFilterModel) => ListFilterModel;
+}> = ({ title, option, filter, setFilter, filterHook }) => {
   const state = useLabeledIdFilterState({
     filter,
     setFilter,
+    filterHook,
     option,
     useQuery: usePerformerQueryFilter,
   });

ui/v2.5/src/components/List/Filters/StudiosFilter.tsx

@@ -10,6 +10,7 @@ import { sortByRelevance } from "src/utils/query";
 import { CriterionOption } from "src/models/list-filter/criteria/criterion";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import {
+  IUseQueryHookProps,
   makeQueryVariables,
   setObjectFilter,
   useLabeledIdFilterState,
@@ -56,13 +57,12 @@ function sortResults(
   });
 }
 
-function useStudioQueryFilter(
+function useStudioQueryFilter(props: IUseQueryHookProps) {
-  query: string,
+  const { q: query, filter: f, skip, filterHook } = props;
-  filter?: ListFilterModel,
+  const appliedFilter = filterHook && f ? filterHook(f.clone()) : f;
-  skip?: boolean
+
-) {
   const { data, loading } = useFindStudiosForSelectQuery({
-    variables: queryVariables(query, filter),
+    variables: queryVariables(query, appliedFilter),
     skip,
   });
 
@@ -75,7 +75,7 @@ function useStudioQueryFilter(
 }
 
 function useStudioQuery(query: string, skip?: boolean) {
-  return useStudioQueryFilter(query, undefined, skip);
+  return useStudioQueryFilter({ q: query, skip: !!skip });
 }
 
 const StudiosFilter: React.FC<IStudiosFilter> = ({
@@ -97,10 +97,12 @@ export const SidebarStudiosFilter: React.FC<{
   option: CriterionOption;
   filter: ListFilterModel;
   setFilter: (f: ListFilterModel) => void;
-}> = ({ title, option, filter, setFilter }) => {
+  filterHook?: (f: ListFilterModel) => ListFilterModel;
+}> = ({ title, option, filter, setFilter, filterHook }) => {
   const state = useLabeledIdFilterState({
     filter,
     setFilter,
+    filterHook,
     option,
     useQuery: useStudioQueryFilter,
     singleValue: true,

ui/v2.5/src/components/List/Filters/TagsFilter.tsx

@@ -10,6 +10,7 @@ import { sortByRelevance } from "src/utils/query";
 import { CriterionOption } from "src/models/list-filter/criteria/criterion";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import {
+  IUseQueryHookProps,
   makeQueryVariables,
   setObjectFilter,
   useLabeledIdFilterState,
@@ -65,13 +66,12 @@ function sortResults(
   });
 }
 
-function useTagQueryFilter(
+function useTagQueryFilter(props: IUseQueryHookProps) {
-  query: string,
+  const { q: query, filter: f, skip, filterHook } = props;
-  filter?: ListFilterModel,
+  const appliedFilter = filterHook && f ? filterHook(f.clone()) : f;
-  skip?: boolean
+
-) {
   const { data, loading } = useFindTagsForSelectQuery({
-    variables: queryVariables(query, filter),
+    variables: queryVariables(query, appliedFilter),
     skip,
   });
 
@@ -84,7 +84,7 @@ function useTagQueryFilter(
 }
 
 function useTagQuery(query: string, skip?: boolean) {
-  return useTagQueryFilter(query, undefined, skip);
+  return useTagQueryFilter({ q: query, skip: !!skip });
 }
 
 const TagsFilter: React.FC<ITagsFilter> = ({ criterion, setCriterion }) => {
@@ -102,10 +102,12 @@ export const SidebarTagsFilter: React.FC<{
   option: CriterionOption;
   filter: ListFilterModel;
   setFilter: (f: ListFilterModel) => void;
-}> = ({ title, option, filter, setFilter }) => {
+  filterHook?: (f: ListFilterModel) => ListFilterModel;
+}> = ({ title, option, filter, setFilter, filterHook }) => {
   const state = useLabeledIdFilterState({
     filter,
     setFilter,
+    filterHook,
     option,
     useQuery: useTagQueryFilter,
     hierarchical: true,

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -235,6 +235,7 @@ const ScenesFilterSidebarSections = PatchContainerComponent(
 const SidebarContent: React.FC<{
   filter: ListFilterModel;
   setFilter: (filter: ListFilterModel) => void;
+  filterHook?: (filter: ListFilterModel) => ListFilterModel;
   view?: View;
   sidebarOpen: boolean;
   onClose?: () => void;
@@ -243,6 +244,7 @@ const SidebarContent: React.FC<{
 }> = ({
   filter,
   setFilter,
+  filterHook,
   view,
   showEditFilter,
   sidebarOpen,
@@ -252,6 +254,8 @@ const SidebarContent: React.FC<{
   const showResultsId =
     count !== undefined ? "actions.show_count_results" : "actions.show_results";
 
+  const hideStudios = view === View.StudioScenes;
+
   return (
     <>
       <FilteredSidebarHeader
@@ -263,19 +267,23 @@ const SidebarContent: React.FC<{
       />
 
       <ScenesFilterSidebarSections>
-        <SidebarStudiosFilter
+        {!hideStudios && (
-          title={<FormattedMessage id="studios" />}
+          <SidebarStudiosFilter
-          data-type={StudiosCriterionOption.type}
+            title={<FormattedMessage id="studios" />}
-          option={StudiosCriterionOption}
+            data-type={StudiosCriterionOption.type}
-          filter={filter}
+            option={StudiosCriterionOption}
-          setFilter={setFilter}
+            filter={filter}
-        />
+            setFilter={setFilter}
+            filterHook={filterHook}
+          />
+        )}
         <SidebarPerformersFilter
           title={<FormattedMessage id="performers" />}
           data-type={PerformersCriterionOption.type}
           option={PerformersCriterionOption}
           filter={filter}
           setFilter={setFilter}
+          filterHook={filterHook}
         />
         <SidebarTagsFilter
           title={<FormattedMessage id="tags" />}
@@ -283,6 +291,7 @@ const SidebarContent: React.FC<{
           option={TagsCriterionOption}
           filter={filter}
           setFilter={setFilter}
+          filterHook={filterHook}
         />
         <SidebarRatingFilter
           title={<FormattedMessage id="rating" />}
@@ -759,6 +768,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
             <SidebarContent
               filter={filter}
               setFilter={setFilter}
+              filterHook={filterHook}
               showEditFilter={showEditFilter}
               view={view}
               sidebarOpen={showSidebar}