Fix react hook order errors (#3081)

* Fix react hook order error on tag page
* Make all filter hooks actual hooks

ui/v2.5/src/components/Performers/PerformerDetails/PerformerGalleriesPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GalleryList } from "src/components/Galleries/GalleryList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerGalleriesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <GalleryList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <GalleryList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { ImageList } from "src/components/Images/ImageList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerImagesPanel {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerImagesPanel {
 export const PerformerImagesPanel: React.FC<IPerformerImagesPanel> = ({
   performer,
 }) => {
-  return <ImageList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <ImageList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Performers/PerformerDetails/PerformerMoviesPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { MovieList } from "src/components/Movies/MovieList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerMoviesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <MovieList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <MovieList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Performers/PerformerDetails/PerformerScenesPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerScenesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <SceneList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <SceneList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Studios/StudioDetails/StudioGalleriesPanel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GalleryList } from "src/components/Galleries/GalleryList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioGalleriesPanel {
   studio: GQL.StudioDataFragment;
@@ -10,5 +10,6 @@ interface IStudioGalleriesPanel {
 export const StudioGalleriesPanel: React.FC<IStudioGalleriesPanel> = ({
   studio,
 }) => {
-  return <GalleryList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <GalleryList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Studios/StudioDetails/StudioImagesPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 import { ImageList } from "src/components/Images/ImageList";
 
 interface IStudioImagesPanel {
@@ -8,5 +8,6 @@ interface IStudioImagesPanel {
 }
 
 export const StudioImagesPanel: React.FC<IStudioImagesPanel> = ({ studio }) => {
-  return <ImageList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <ImageList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Studios/StudioDetails/StudioMoviesPanel.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { MovieList } from "src/components/Movies/MovieList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioMoviesPanel {
   studio: GQL.StudioDataFragment;
 }
 
 export const StudioMoviesPanel: React.FC<IStudioMoviesPanel> = ({ studio }) => {
-  return <MovieList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <MovieList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Studios/StudioDetails/StudioPerformersPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 import { PerformerList } from "src/components/Performers/PerformerList";
 import { StudiosCriterion } from "src/models/list-filter/criteria/studios";
 
@@ -24,10 +24,9 @@ export const StudioPerformersPanel: React.FC<IStudioPerformersPanel> = ({
     movies: [studioCriterion],
   };
 
+  const filterHook = useStudioFilterHook(studio);
+
   return (
-    <PerformerList
-      filterHook={studioFilterHook(studio)}
-      extraCriteria={extraCriteria}
-    />
+    <PerformerList filterHook={filterHook} extraCriteria={extraCriteria} />
   );
 };

ui/v2.5/src/components/Studios/StudioDetails/StudioScenesPanel.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioScenesPanel {
   studio: GQL.StudioDataFragment;
 }
 
 export const StudioScenesPanel: React.FC<IStudioScenesPanel> = ({ studio }) => {
-  return <SceneList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <SceneList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Tags/TagDetails/TagGalleriesPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { GalleryList } from "src/components/Galleries/GalleryList";
 
 interface ITagGalleriesPanel {
@@ -8,5 +8,6 @@ interface ITagGalleriesPanel {
 }
 
 export const TagGalleriesPanel: React.FC<ITagGalleriesPanel> = ({ tag }) => {
-  return <GalleryList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <GalleryList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Tags/TagDetails/TagImagesPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { ImageList } from "src/components/Images/ImageList";
 
 interface ITagImagesPanel {
@@ -8,5 +8,6 @@ interface ITagImagesPanel {
 }
 
 export const TagImagesPanel: React.FC<ITagImagesPanel> = ({ tag }) => {
-  return <ImageList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <ImageList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Tags/TagDetails/TagPerformersPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { PerformerList } from "src/components/Performers/PerformerList";
 
 interface ITagPerformersPanel {
@@ -8,5 +8,6 @@ interface ITagPerformersPanel {
 }
 
 export const TagPerformersPanel: React.FC<ITagPerformersPanel> = ({ tag }) => {
-  return <PerformerList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <PerformerList filterHook={filterHook} />;
 };

ui/v2.5/src/components/Tags/TagDetails/TagScenesPanel.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 
 interface ITagScenesPanel {
   tag: GQL.TagDataFragment;
 }
 
 export const TagScenesPanel: React.FC<ITagScenesPanel> = ({ tag }) => {
-  return <SceneList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <SceneList filterHook={filterHook} />;
 };

ui/v2.5/src/core/performers.ts

@@ -2,7 +2,9 @@ import { PerformersCriterion } from "src/models/list-filter/criteria/performers"
 import * as GQL from "src/core/generated-graphql";
 import { ListFilterModel } from "src/models/list-filter/filter";
 
-export const performerFilterHook = (performer: GQL.PerformerDataFragment) => {
+export const usePerformerFilterHook = (
+  performer: GQL.PerformerDataFragment
+) => {
   return (filter: ListFilterModel) => {
     const performerValue = {
       id: performer.id,

ui/v2.5/src/core/studios.ts

@@ -5,10 +5,10 @@ import React from "react";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "./config";
 
-export const studioFilterHook = (studio: GQL.StudioDataFragment) => {
+export const useStudioFilterHook = (studio: GQL.StudioDataFragment) => {
+  const config = React.useContext(ConfigurationContext);
   return (filter: ListFilterModel) => {
     const studioValue = { id: studio.id, label: studio.name };
-    const config = React.useContext(ConfigurationContext);
     // if studio is already present, then we modify it, otherwise add
     let studioCriterion = filter.criteria.find((c) => {
       return c.criterionOption.type === "studios";

ui/v2.5/src/core/tags.ts

@@ -10,9 +10,9 @@ import React from "react";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "./config";
 
-export const tagFilterHook = (tag: GQL.TagDataFragment) => {
+export const useTagFilterHook = (tag: GQL.TagDataFragment) => {
+  const config = React.useContext(ConfigurationContext);
   return (filter: ListFilterModel) => {
-    const config = React.useContext(ConfigurationContext);
     const tagValue = { id: tag.id, label: tag.name };
     // if tag is already present, then we modify it, otherwise add
     let tagCriterion = filter.criteria.find((c) => {