Library updates (#792)

* Upgrade Typescript to 4.0 * Update i18n-iso-countries to 6.0 * Update react-intl to 5.8.0 * Update jimp to 0.16.1 * Update apollo and graphql libraries * Update various libraries and fix linting/type errors * Refactor cache invalidation * Codegen refetch queries
stashapp · Sep 11, 2020 · 5cd7dca · 5cd7dca
1 parent 5ba11e0
commit 5cd7dca
Show file tree

Hide file tree

Showing 27 changed files with 2,079 additions and 1,884 deletions.
diff --git a/ui/v2.5/.eslintrc.json b/ui/v2.5/.eslintrc.json
@@ -1,4 +1,10 @@
 {
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "Mousetrap": "readonly"
+  },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json"
@@ -16,11 +22,18 @@
   "rules": {
       "@typescript-eslint/explicit-function-return-type": "off",
       "@typescript-eslint/no-explicit-any": 2,
-      "lines-between-class-members": "off",
-      "@typescript-eslint/interface-name-prefix": [
-        "warn",
-        { "prefixWithI": "always" }
+      "@typescript-eslint/naming-convention": [
+        "error",
+        {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "custom": {
+          "regex": "^I[A-Z]",
+          "match": true
+         }
+        }
       ],
+      "lines-between-class-members": "off",
       "import/extensions": [
         "error",
         "ignorePackages",
@@ -46,6 +59,7 @@
       "@typescript-eslint/indent": "off",
       "react/prop-types": "off",
       "react/destructuring-assignment": "off",
+      "react/require-default-props": "off",
       "react/jsx-props-no-spreading": "off",
       "react/style-prop-object": ["error", {
         "allow": ["FormattedNumber"]

diff --git a/ui/v2.5/codegen.yml b/ui/v2.5/codegen.yml
@@ -3,13 +3,12 @@ schema: "../../graphql/schema/**/*.graphql"
 documents: "../../graphql/documents/**/*.graphql"
 generates:
   src/core/generated-graphql.tsx:
-    config:
-      withHooks: true
-      withHOC: false
-      withComponents: false
     plugins:
-      - add: "/* eslint-disable */"
+      - add:
+          content: "/* eslint-disable */"
       - time
       - typescript
       - typescript-operations
       - typescript-react-apollo
+    config:
+            withRefetchFn: true
diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json
@@ -25,66 +25,56 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
-    "@formatjs/intl-numberformat": "^4.2.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@apollo/client": "^3.1.4",
+    "@formatjs/intl-numberformat": "^5.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-regular-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@types/mousetrap": "^1.6.3",
-    "apollo-cache": "^1.3.4",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.20",
-    "apollo-utilities": "^1.3.3",
-    "axios": "0.19.2",
-    "bootstrap": "^4.4.1",
+    "axios": "0.20.0",
+    "bootstrap": "^4.5.2",
     "classnames": "^2.2.6",
-    "flag-icon-css": "^3.4.6",
-    "formik": "^2.1.4",
-    "graphql": "^14.5.8",
-    "graphql-tag": "^2.10.3",
-    "i18n-iso-countries": "^5.2.0",
-    "jimp": "^0.12.1",
-    "localforage": "1.7.3",
-    "lodash": "^4.17.15",
+    "flag-icon-css": "^3.5.0",
+    "formik": "^2.1.5",
+    "graphql": "^15.3.0",
+    "graphql-tag": "^2.11.0",
+    "i18n-iso-countries": "^6.0.0",
+    "jimp": "^0.16.1",
+    "localforage": "1.9.0",
+    "lodash": "^4.17.20",
     "mousetrap": "^1.6.5",
-    "query-string": "6.12.1",
+    "query-string": "6.13.1",
     "react": "16.13.1",
-    "react-apollo": "^3.1.5",
-    "react-bootstrap": "1.0.1",
+    "react-bootstrap": "1.3.0",
     "react-dom": "16.13.1",
     "react-images": "0.5.19",
-    "react-intl": "^4.5.1",
+    "react-intl": "^5.8.0",
     "react-jw-player": "1.19.1",
     "react-markdown": "^4.3.1",
     "react-photo-gallery": "^8.0.0",
     "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "subscriptions-transport-ws": "^0.9.16",
+    "subscriptions-transport-ws": "^0.9.18",
     "universal-cookie": "^4.0.3"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "^1.13.5",
-    "@graphql-codegen/cli": "^1.13.5",
-    "@graphql-codegen/time": "^1.13.5",
-    "@graphql-codegen/typescript": "^1.13.5",
-    "@graphql-codegen/typescript-compatibility": "^1.13.5",
-    "@graphql-codegen/typescript-operations": "^1.13.5",
-    "@graphql-codegen/typescript-react-apollo": "^1.13.5",
+    "@graphql-codegen/add": "^2.0.1",
+    "@graphql-codegen/cli": "^1.17.8",
+    "@graphql-codegen/time": "^2.0.1",
+    "@graphql-codegen/typescript": "^1.17.9",
+    "@graphql-codegen/typescript-operations": "^1.17.8",
+    "@graphql-codegen/typescript-react-apollo": "^2.0.6",
     "@types/classnames": "^2.2.10",
-    "@types/lodash": "^4.14.150",
-    "@types/node": "13.13.4",
-    "@types/react": "16.9.34",
-    "@types/react-dom": "^16.9.7",
-    "@types/react-images": "^0.5.1",
+    "@types/lodash": "^4.14.161",
+    "@types/node": "14.6.4",
+    "@types/react": "16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-images": "^0.5.3",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-dom": "5.1.5",
-    "@types/react-select": "^3.0.12",
+    "@types/react-select": "3.0.19",
     "@typescript-eslint/eslint-plugin": "^2.30.0",
     "@typescript-eslint/parser": "^2.30.0",
     "eslint": "^6.8.0",
@@ -95,13 +85,13 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "extract-react-intl-messages": "^4.1.1",
-    "node-sass": "4.14.0",
+    "node-sass": "4.14.1",
     "postcss-safe-parser": "^4.0.2",
-    "prettier": "2.0.5",
-    "react-scripts": "^3.4.1",
+    "prettier": "2.1.1",
+    "react-scripts": "^3.4.3",
     "stylelint": "^13.3.3",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-order": "^4.0.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7"
   }
 }
diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx
@@ -5,8 +5,8 @@ import { ToastProvider } from "src/hooks/Toast";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import "@formatjs/intl-numberformat/polyfill";
-import "@formatjs/intl-numberformat/dist/locale-data/en";
-import "@formatjs/intl-numberformat/dist/locale-data/en-GB";
+import "@formatjs/intl-numberformat/locale-data/en";
+import "@formatjs/intl-numberformat/locale-data/en-GB";
 
 import locales from "src/locale";
 import { useConfiguration } from "src/core/StashService";

diff --git a/ui/v2.5/src/components/Galleries/Gallery.tsx b/ui/v2.5/src/components/Galleries/Gallery.tsx
@@ -4,8 +4,12 @@ import { useFindGallery } from "src/core/StashService";
 import { LoadingIndicator } from "src/components/Shared";
 import { GalleryViewer } from "./GalleryViewer";
 
+interface IGalleryParams {
+  id: string;
+}
+
 export const Gallery: React.FC = () => {
-  const { id = "" } = useParams();
+  const { id } = useParams<IGalleryParams>();
 
   const { data, error, loading } = useFindGallery(id);
   const gallery = data?.findGallery;

diff --git a/ui/v2.5/src/components/Help/Manual.tsx b/ui/v2.5/src/components/Help/Manual.tsx
@@ -124,7 +124,7 @@ export const Manual: React.FC<IManualProps> = ({ show, onClose }) => {
         <Container className="manual-container">
           <Tab.Container
             activeKey={activeTab}
-            onSelect={(k) => setActiveTab(k)}
+            onSelect={(k) => k && setActiveTab(k)}
             id="manual-tabs"
           >
             <Row>

diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx
@@ -9,7 +9,6 @@ import {
   Form,
   OverlayTrigger,
   Tooltip,
-  SafeAnchorProps,
   InputGroup,
   FormControl,
   ButtonToolbar,
@@ -160,11 +159,9 @@ export const ListFilter: React.FC<IListFilterProps> = (
     props.onFilterUpdate(newFilter);
   }
 
-  function onChangeSortBy(event: React.MouseEvent<SafeAnchorProps>) {
-    const target = event.currentTarget as HTMLAnchorElement;
-
+  function onChangeSortBy(event: React.MouseEvent<HTMLAnchorElement>) {
     const newFilter = _.cloneDeep(props.filter);
-    newFilter.sortBy = target.text;
+    newFilter.sortBy = event.currentTarget.text;
     newFilter.currentPage = 1;
     props.onFilterUpdate(newFilter);
   }

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -30,10 +30,14 @@ import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { MovieScenesPanel } from "./MovieScenesPanel";
 import { MovieScrapeDialog } from "./MovieScrapeDialog";
 
+interface IMovieParams {
+  id?: string;
+}
+
 export const Movie: React.FC = () => {
   const history = useHistory();
   const Toast = useToast();
-  const { id = "new" } = useParams();
+  const { id = "new" } = useParams<IMovieParams>();
   const isNew = id === "new";
 
   // Editing state

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -17,10 +17,15 @@ import { PerformerDetailsPanel } from "./PerformerDetailsPanel";
 import { PerformerOperationsPanel } from "./PerformerOperationsPanel";
 import { PerformerScenesPanel } from "./PerformerScenesPanel";
 
+interface IPerformerParams {
+  id?: string;
+  tab?: string;
+}
+
 export const Performer: React.FC = () => {
   const Toast = useToast();
   const history = useHistory();
-  const { tab = "details", id = "new" } = useParams();
+  const { tab = "details", id = "new" } = useParams<IPerformerParams>();
   const isNew = id === "new";
 
   // Performer state
@@ -51,7 +56,7 @@ export const Performer: React.FC = () => {
     tab === "scenes" || tab === "edit" || tab === "operations"
       ? tab
       : "details";
-  const setActiveTabKey = (newTab: string) => {
+  const setActiveTabKey = (newTab: string | null) => {
     if (tab !== newTab) {
       const tabParam = newTab === "details" ? "" : `/${newTab}`;
       history.replace(`/performers/${id}${tabParam}`);

diff --git a/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx b/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx
@@ -129,7 +129,7 @@ export const SceneFilenameParser: React.FC = () => {
 
     queryParseSceneFilenames(parserFilter, parserInputData)
       .then((response) => {
-        const result = response.data.parseSceneFilenames;
+        const result = response?.data?.parseSceneFilenames;
         if (result) {
           parseResults(result.results);
           setTotalItems(result.count);

diff --git a/ui/v2.5/src/components/SceneFilenameParser/SceneParserRow.tsx b/ui/v2.5/src/components/SceneFilenameParser/SceneParserRow.tsx
@@ -101,7 +101,6 @@ export class SceneParserResult {
 interface ISceneParserFieldProps<T> {
   parserResult: ParserResult<T>;
   className?: string;
-  fieldName: string;
   onSetChanged: (isSet: boolean) => void;
   onValueChanged: (value: T) => void;
   originalParserResult?: ParserResult<T>;
@@ -372,7 +371,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Title") && (
         <SceneParserStringField
           key="title"
-          fieldName="Title"
           className="parser-field-title input-control text-input"
           parserResult={props.scene.title}
           onSetChanged={(isSet) =>
@@ -386,7 +384,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Date") && (
         <SceneParserStringField
           key="date"
-          fieldName="Date"
           className="parser-field-date input-control text-input"
           parserResult={props.scene.date}
           onSetChanged={(isSet) =>
@@ -400,7 +397,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Rating") && (
         <SceneParserRatingField
           key="rating"
-          fieldName="Rating"
           className="parser-field-rating input-control text-input"
           parserResult={props.scene.rating}
           onSetChanged={(isSet) =>
@@ -414,7 +410,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Performers") && (
         <SceneParserPerformerField
           key="performers"
-          fieldName="Performers"
           className="parser-field-performers input-control text-input"
           parserResult={props.scene.performers}
           originalParserResult={props.scene.performers}
@@ -429,7 +424,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Tags") && (
         <SceneParserTagField
           key="tags"
-          fieldName="Tags"
           className="parser-field-tags input-control text-input"
           parserResult={props.scene.tags}
           originalParserResult={props.scene.tags}
@@ -444,7 +438,6 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
       {props.showFields.get("Studio") && (
         <SceneParserStudioField
           key="studio"
-          fieldName="Studio"
           className="parser-field-studio input-control text-input"
           parserResult={props.scene.studio}
           originalParserResult={props.scene.studio}

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -26,8 +26,12 @@ import { SceneMoviePanel } from "./SceneMoviePanel";
 import { DeleteScenesDialog } from "../DeleteScenesDialog";
 import { SceneGenerateDialog } from "../SceneGenerateDialog";
 
+interface ISceneParams {
+  id?: string;
+}
+
 export const Scene: React.FC = () => {
-  const { id = "new" } = useParams();
+  const { id = "new" } = useParams<ISceneParams>();
   const location = useLocation();
   const history = useHistory();
   const Toast = useToast();
@@ -210,7 +214,7 @@ export const Scene: React.FC = () => {
     return (
       <Tab.Container
         activeKey={activeTabKey}
-        onSelect={(k) => setActiveTabKey(k)}
+        onSelect={(k) => k && setActiveTabKey(k)}
       >
         <div>
           <Nav variant="tabs" className="mr-auto">

diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -26,15 +26,14 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       </Link>
     ));
 
-  const renderMovies = (movies: Partial<GQL.SceneMovie>[]) => {
-    return movies.map((sceneMovie) =>
+  const renderMovies = (scene: GQL.SlimSceneDataFragment) =>
+    scene.movies.map((sceneMovie) =>
       !sceneMovie.movie ? undefined : (
         <Link to={NavUtils.makeMovieScenesUrl(sceneMovie.movie)}>
           <h6>{sceneMovie.movie.name}</h6>
         </Link>
       )
     );
-  };
 
   const renderSceneRow = (scene: GQL.SlimSceneDataFragment) => (
     <tr key={scene.id}>
@@ -68,7 +67,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
           </Link>
         )}
       </td>
-      <td>{renderMovies(scene.movies)}</td>
+      <td>{renderMovies(scene)}</td>
     </tr>
   );
 

diff --git a/ui/v2.5/src/components/Settings/Settings.tsx b/ui/v2.5/src/components/Settings/Settings.tsx
@@ -21,7 +21,7 @@ export const Settings: React.FC = () => {
       <Tab.Container
         defaultActiveKey={defaultTab}
         id="configuration-tabs"
-        onSelect={onSelect}
+        onSelect={(tab) => tab && onSelect(tab)}
       >
         <Row>
           <Col sm={3} md={2}>