Upgrade create-react-app and assorted libraries (#914)

* Update create-react-app, react, typescript and eslint versions
* Various library updates

ui/v2.5/.eslintrc.json

@@ -34,6 +34,7 @@
         }
       ],
       "lines-between-class-members": "off",
+      "@typescript-eslint/lines-between-class-members": "off",
       "import/extensions": [
         "error",
         "ignorePackages",

ui/v2.5/package.json

@@ -25,83 +25,82 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@apollo/client": "^3.1.4",
+    "@apollo/client": "^3.2.5",
-    "@formatjs/intl-numberformat": "^5.6.0",
+    "@formatjs/intl-numberformat": "^5.7.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.14.0",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@fortawesome/react-fontawesome": "^0.1.12",
-    "@types/apollo-upload-client": "^14.1.0",
-    "@types/mousetrap": "^1.6.3",
     "apollo-upload-client": "^14.1.2",
-    "axios": "0.20.0",
+    "axios": "0.21.0",
     "base64-blob": "^1.4.1",
-    "bootstrap": "^4.5.2",
+    "bootstrap": "^4.5.3",
     "classnames": "^2.2.6",
     "flag-icon-css": "^3.5.0",
     "flexbin": "^0.2.0",
-    "formik": "^2.1.5",
+    "formik": "^2.2.1",
     "fslightbox-react": "^1.5.0",
-    "graphql": "^15.3.0",
+    "graphql": "^15.4.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",
-    "mousetrap-pause": "^1.0.0",
+    "mousetrap-pause": "^1.0.0",    
-    "query-string": "6.13.1",
+    "query-string": "6.13.6",
-    "react": "16.13.1",
+    "react": "17.0.1",
-    "react-bootstrap": "1.3.0",
+    "react-bootstrap": "1.4.0",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.1",
     "react-images": "0.5.19",
-    "react-intl": "^5.8.0",
+    "react-intl": "^5.8.8",
     "react-jw-player": "1.19.1",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^5.0.2",
     "react-photo-gallery": "^8.0.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.1.0",
+    "react-router-hash-link": "^2.2.2",
     "react-select": "^3.1.0",
     "string.prototype.replaceall": "^1.0.3",
     "subscriptions-transport-ws": "^0.9.18",
-    "universal-cookie": "^4.0.3"
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
     "@graphql-codegen/add": "^2.0.1",
-    "@graphql-codegen/cli": "^1.17.8",
+    "@graphql-codegen/cli": "^1.19.0",
     "@graphql-codegen/time": "^2.0.1",
-    "@graphql-codegen/typescript": "^1.17.9",
+    "@graphql-codegen/typescript": "^1.17.11",
     "@graphql-codegen/typescript-operations": "^1.17.8",
-    "@graphql-codegen/typescript-react-apollo": "^2.0.6",
+    "@graphql-codegen/typescript-react-apollo": "^2.0.7",
-    "@types/classnames": "^2.2.10",
+    "@types/apollo-upload-client": "^14.1.0",
+    "@types/classnames": "^2.2.11",
     "@types/fslightbox-react": "^1.4.0",
-    "@types/lodash": "^4.14.161",
+    "@types/lodash": "^4.14.164",
-    "@types/node": "14.6.4",
+    "@types/mousetrap": "^1.6.4",
-    "@types/react": "16.9.43",
+    "@types/node": "14.14.6",
+    "@types/react": "16.9.55",
     "@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-router-dom": "5.1.6",
     "@types/react-router-hash-link": "^1.2.1",
-    "@types/react-select": "3.0.19",
+    "@types/react-select": "3.0.23",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/eslint-plugin": "^4.6.0",
-    "@typescript-eslint/parser": "^2.30.0",
+    "@typescript-eslint/parser": "^4.6.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.12.1",
-    "eslint-config-airbnb-typescript": "^7.2.1",
+    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "extract-react-intl-messages": "^4.1.1",
     "node-sass": "4.14.1",
     "postcss-safe-parser": "^4.0.2",
-    "prettier": "2.1.1",
+    "prettier": "2.1.2",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.0",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.7.2",
-    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^4.1.0",
-    "typescript": "^3.9.7"
+    "typescript": "^4.0.5"
   }
 }

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { Button, Form, Col, Row } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   queryScrapeGalleryURL,

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import _ from "lodash";
 import { Table } from "react-bootstrap";
 import { Link, useHistory } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import {
   FindGalleriesQueryResult,
   GallerySlimDataFragment,

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button, Form, Col, Row } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import { useImageUpdate } from "src/core/StashService";
 import {

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

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import _ from "lodash";
 import { useHistory } from "react-router-dom";
 import FsLightbox from "fslightbox-react";
+import Mousetrap from "mousetrap";
 import {
   FindImagesQueryResult,
   SlimImageDataFragment,

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

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Form, Modal, OverlayTrigger, Tooltip } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import { Icon, FilterSelect, DurationInput } from "src/components/Shared";
 import { CriterionModifier } from "src/core/generated-graphql";
 import {

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

@@ -1,5 +1,6 @@
 import _, { debounce } from "lodash";
 import React, { useState, useEffect } from "react";
+import Mousetrap from "mousetrap";
 import { SortDirectionEnum } from "src/core/generated-graphql";
 import {
   Badge,

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

@@ -9,8 +9,9 @@ import { Nav, Navbar, Button } from "react-bootstrap";
 import { IconName } from "@fortawesome/fontawesome-svg-core";
 import { LinkContainer } from "react-router-bootstrap";
 import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
-import { SessionUtils } from "src/utils";
+import Mousetrap from "mousetrap";
 
+import { SessionUtils } from "src/utils";
 import { Icon } from "src/components/Shared";
 import { Manual } from "./Help/Manual";
 

ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { useIntl } from "react-intl";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   useFindMovie,

ui/v2.5/src/components/Movies/MovieList.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import _ from "lodash";
+import Mousetrap from "mousetrap";
 import { FindMoviesQueryResult } from "src/core/generated-graphql";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Button, Tabs, Tab } from "react-bootstrap";
 import { useParams, useHistory } from "react-router-dom";
 import cx from "classnames";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   useFindPerformer,

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { Button, Popover, OverlayTrigger, Table } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   getGenderStrings,

ui/v2.5/src/components/Performers/PerformerList.tsx

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import { FindPerformersQueryResult } from "src/core/generated-graphql";
 import { queryFindPerformers } from "src/core/StashService";
 import { usePerformersList } from "src/hooks";

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -7,6 +7,7 @@ import {
   Col,
   Row,
 } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   queryScrapeScene,

ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "react-bootstrap";
+import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import { WallPanel } from "src/components/Wall/WallPanel";
 import { PrimaryTags } from "./PrimaryTags";

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import _ from "lodash";
 import { useHistory } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import {
   FindScenesQueryResult,
   SlimSceneDataFragment,

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

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import React from "react";
 import { useHistory } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import { FindSceneMarkersQueryResult } from "src/core/generated-graphql";
 import { queryFindSceneMarkers } from "src/core/StashService";
 import { NavUtils } from "src/utils";

ui/v2.5/src/components/Shared/Select.tsx

@@ -88,6 +88,142 @@ const getSelectedValues = (selectedItems: ValueType<Option>) =>
       )
     : [];
 
+const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
+  type,
+  initialIds,
+  onChange,
+  className,
+  items,
+  selectedOptions,
+  isLoading,
+  isDisabled = false,
+  onCreateOption,
+  isClearable = true,
+  creatable = false,
+  isMulti = false,
+  onInputChange,
+  placeholder,
+  showDropdown = true,
+  groupHeader,
+  closeMenuOnSelect = true,
+}) => {
+  const defaultValue =
+    items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
+
+  const options = groupHeader
+    ? [
+        {
+          label: groupHeader,
+          options: items,
+        },
+      ]
+    : items;
+
+  const styles = {
+    option: (base: CSSProperties) => ({
+      ...base,
+      color: "#000",
+    }),
+    container: (base: CSSProperties, props: Props) => ({
+      ...base,
+      zIndex: props.isFocused ? 10 : base.zIndex,
+    }),
+    multiValueRemove: (base: CSSProperties, props: Props) => ({
+      ...base,
+      color: props.isFocused ? base.color : "#333333",
+    }),
+  };
+
+  const props = {
+    options,
+    value: selectedOptions,
+    className,
+    classNamePrefix: "react-select",
+    onChange,
+    isMulti,
+    isClearable,
+    defaultValue,
+    noOptionsMessage: () => (type !== "tags" ? "None" : null),
+    placeholder: isDisabled ? "" : placeholder,
+    onInputChange,
+    isDisabled,
+    isLoading,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    styles: styles as any, // TODO: Typing error, remove at some point
+    closeMenuOnSelect,
+    components: {
+      IndicatorSeparator: () => null,
+      ...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
+      ...(isDisabled && { MultiValueRemove: () => null }),
+    },
+  };
+
+  return creatable ? (
+    <CreatableSelect
+      {...props}
+      isDisabled={isLoading || isDisabled}
+      onCreateOption={onCreateOption}
+    />
+  ) : (
+    <Select {...props} />
+  );
+};
+
+const FilterSelectComponent: React.FC<
+  IFilterComponentProps & ITypeProps & IFilterSelectProps
+> = (props) => {
+  const [loading, setLoading] = useState(false);
+  const selectedIds = props.ids ?? [];
+  const Toast = useToast();
+
+  const { items } = props;
+  const options = items.map((i) => ({
+    value: i.id,
+    label: i.name ?? "",
+  }));
+  const selectedOptions = options.filter((option) =>
+    selectedIds.includes(option.value)
+  );
+
+  const onChange = (selectedItems: ValueType<Option>) => {
+    const selectedValues = getSelectedValues(selectedItems);
+    props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
+  };
+
+  const onCreate = async (name: string) => {
+    try {
+      setLoading(true);
+      const { item: newItem, message } = await props.onCreate!(name);
+      props.onSelect?.([
+        ...items.filter((item) => selectedIds.includes(item.id)),
+        newItem,
+      ]);
+      setLoading(false);
+      Toast.success({
+        content: (
+          <span>
+            {message}: <b>{name}</b>
+          </span>
+        ),
+      });
+    } catch (e) {
+      Toast.error(e);
+    }
+  };
+
+  return (
+    <SelectComponent
+      {...(props as ITypeProps)}
+      {...(props as IFilterSelectProps)}
+      isLoading={props.isLoading || loading}
+      onChange={onChange}
+      items={options}
+      selectedOptions={selectedOptions}
+      onCreateOption={props.creatable ? onCreate : undefined}
+    />
+  );
+};
+
 export const SceneGallerySelect: React.FC<ISceneGallerySelect> = (props) => {
   const [query, setQuery] = React.useState<string>("");
   const { data, loading } = useFindGalleries(getFilter());
@@ -201,16 +337,6 @@ export const MarkerTitleSuggest: React.FC<IMarkerSuggestProps> = (props) => {
     />
   );
 };
-export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
-  props.type === "performers" ? (
-    <PerformerSelect {...(props as IFilterProps)} />
-  ) : props.type === "studios" || props.type === "parent_studios" ? (
-    <StudioSelect {...(props as IFilterProps)} />
-  ) : props.type === "movies" ? (
-    <MovieSelect {...(props as IFilterProps)} />
-  ) : (
-    <TagSelect {...(props as IFilterProps)} />
-  );
 
 export const PerformerSelect: React.FC<IFilterProps> = (props) => {
   const { data, loading } = useAllPerformersForFilter();
@@ -308,137 +434,13 @@ export const TagSelect: React.FC<IFilterProps> = (props) => {
   );
 };
 
-const FilterSelectComponent: React.FC<
+export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
-  IFilterComponentProps & ITypeProps & IFilterSelectProps
+  props.type === "performers" ? (
-> = (props) => {
+    <PerformerSelect {...(props as IFilterProps)} />
-  const [loading, setLoading] = useState(false);
+  ) : props.type === "studios" || props.type === "parent_studios" ? (
-  const selectedIds = props.ids ?? [];
+    <StudioSelect {...(props as IFilterProps)} />
-  const Toast = useToast();
+  ) : props.type === "movies" ? (
-
+    <MovieSelect {...(props as IFilterProps)} />
-  const { items } = props;
-  const options = items.map((i) => ({
-    value: i.id,
-    label: i.name ?? "",
-  }));
-  const selectedOptions = options.filter((option) =>
-    selectedIds.includes(option.value)
-  );
-
-  const onChange = (selectedItems: ValueType<Option>) => {
-    const selectedValues = getSelectedValues(selectedItems);
-    props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
-  };
-
-  const onCreate = async (name: string) => {
-    try {
-      setLoading(true);
-      const { item: newItem, message } = await props.onCreate!(name);
-      props.onSelect?.([
-        ...items.filter((item) => selectedIds.includes(item.id)),
-        newItem,
-      ]);
-      setLoading(false);
-      Toast.success({
-        content: (
-          <span>
-            {message}: <b>{name}</b>
-          </span>
-        ),
-      });
-    } catch (e) {
-      Toast.error(e);
-    }
-  };
-
-  return (
-    <SelectComponent
-      {...(props as ITypeProps)}
-      {...(props as IFilterSelectProps)}
-      isLoading={props.isLoading || loading}
-      onChange={onChange}
-      items={options}
-      selectedOptions={selectedOptions}
-      onCreateOption={props.creatable ? onCreate : undefined}
-    />
-  );
-};
-
-const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
-  type,
-  initialIds,
-  onChange,
-  className,
-  items,
-  selectedOptions,
-  isLoading,
-  isDisabled = false,
-  onCreateOption,
-  isClearable = true,
-  creatable = false,
-  isMulti = false,
-  onInputChange,
-  placeholder,
-  showDropdown = true,
-  groupHeader,
-  closeMenuOnSelect = true,
-}) => {
-  const defaultValue =
-    items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
-
-  const options = groupHeader
-    ? [
-        {
-          label: groupHeader,
-          options: items,
-        },
-      ]
-    : items;
-
-  const styles = {
-    option: (base: CSSProperties) => ({
-      ...base,
-      color: "#000",
-    }),
-    container: (base: CSSProperties, props: Props) => ({
-      ...base,
-      zIndex: props.isFocused ? 10 : base.zIndex,
-    }),
-    multiValueRemove: (base: CSSProperties, props: Props) => ({
-      ...base,
-      color: props.isFocused ? base.color : "#333333",
-    }),
-  };
-
-  const props = {
-    options,
-    value: selectedOptions,
-    className,
-    classNamePrefix: "react-select",
-    onChange,
-    isMulti,
-    isClearable,
-    defaultValue,
-    noOptionsMessage: () => (type !== "tags" ? "None" : null),
-    placeholder: isDisabled ? "" : placeholder,
-    onInputChange,
-    isDisabled,
-    isLoading,
-    styles,
-    closeMenuOnSelect,
-    components: {
-      IndicatorSeparator: () => null,
-      ...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
-      ...(isDisabled && { MultiValueRemove: () => null }),
-    },
-  };
-
-  return creatable ? (
-    <CreatableSelect
-      {...props}
-      isDisabled={isLoading || isDisabled}
-      onCreateOption={onCreateOption}
-    />
   ) : (
-    <Select {...props} />
+    <TagSelect {...(props as IFilterProps)} />
   );
-};

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

@@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory, Link } from "react-router-dom";
 import cx from "classnames";
+import Mousetrap from "mousetrap";
 
 import * as GQL from "src/core/generated-graphql";
 import {

ui/v2.5/src/components/Studios/StudioList.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import _ from "lodash";
 import { useHistory } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import { FindStudiosQueryResult } from "src/core/generated-graphql";
 import { useStudiosList } from "src/hooks";
 import { showWhenSelected } from "src/hooks/ListHook";

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

@@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import cx from "classnames";
+import Mousetrap from "mousetrap";
 
 import * as GQL from "src/core/generated-graphql";
 import {

ui/v2.5/src/components/Tags/TagList.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import _ from "lodash";
+import Mousetrap from "mousetrap";
 import { FindTagsQueryResult } from "src/core/generated-graphql";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";

ui/v2.5/src/hooks/ListHook.tsx

@@ -3,6 +3,7 @@ import queryString from "query-string";
 import React, { useCallback, useRef, useState, useEffect } from "react";
 import { ApolloError } from "@apollo/client";
 import { useHistory, useLocation } from "react-router-dom";
+import Mousetrap from "mousetrap";
 import {
   SlimSceneDataFragment,
   SceneMarkerDataFragment,

ui/v2.5/tsconfig.json

@@ -24,7 +24,8 @@
     "baseUrl": ".",
     "sourceMap": true,
     "allowJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src/**/*"