Update javascript libraries (#1075)

ui/v2.5/.eslintrc.json

@@ -16,6 +16,7 @@
       "airbnb-typescript",
       "airbnb/hooks",
       "prettier",
+      "prettier/prettier",
       "prettier/react",
       "prettier/@typescript-eslint"
   ],

ui/v2.5/package.json

@@ -25,80 +25,80 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@apollo/client": "^3.2.5",
+    "@apollo/client": "^3.3.7",
-    "@formatjs/intl-numberformat": "^5.7.1",
+    "@formatjs/intl-numberformat": "^6.1.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.12",
+    "@fortawesome/react-fontawesome": "^0.1.14",
-    "apollo-upload-client": "^14.1.2",
+    "@types/react-select": "^3.1.2",
+    "apollo-upload-client": "^14.1.3",
     "axios": "0.21.1",
     "base64-blob": "^1.4.1",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^4.6.0",
     "classnames": "^2.2.6",
     "flag-icon-css": "^3.5.0",
     "flexbin": "^0.2.0",
-    "formik": "^2.2.1",
+    "formik": "^2.2.6",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
-    "i18n-iso-countries": "^6.0.0",
+    "i18n-iso-countries": "^6.4.0",
     "jimp": "^0.16.1",
     "localforage": "1.9.0",
     "lodash": "^4.17.20",
     "mousetrap": "^1.6.5",
     "mousetrap-pause": "^1.0.0",
-    "query-string": "6.13.6",
+    "query-string": "6.13.8",
     "react": "17.0.1",
-    "react-bootstrap": "1.4.0",
+    "react-bootstrap": "1.4.3",
     "react-dom": "17.0.1",
-    "react-intl": "^5.8.8",
+    "react-intl": "^5.10.16",
     "react-jw-player": "1.19.1",
-    "react-markdown": "^5.0.2",
+    "react-markdown": "^5.0.3",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
-    "react-router-hash-link": "^2.2.2",
+    "react-router-hash-link": "^2.3.1",
-    "react-select": "^3.1.0",
+    "react-select": "^4.0.2",
     "remark-gfm": "^1.0.0",
-    "string.prototype.replaceall": "^1.0.3",
+    "sass": "^1.32.5",
+    "string.prototype.replaceall": "^1.0.4",
     "subscriptions-transport-ws": "^0.9.18",
     "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "^2.0.1",
+    "@graphql-codegen/add": "^2.0.2",
-    "@graphql-codegen/cli": "^1.19.0",
+    "@graphql-codegen/cli": "^1.20.0",
-    "@graphql-codegen/time": "^2.0.1",
+    "@graphql-codegen/time": "^2.0.2",
-    "@graphql-codegen/typescript": "^1.17.11",
+    "@graphql-codegen/typescript": "^1.20.00",
-    "@graphql-codegen/typescript-operations": "^1.17.8",
+    "@graphql-codegen/typescript-operations": "^1.17.13",
-    "@graphql-codegen/typescript-react-apollo": "^2.0.7",
+    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
     "@types/apollo-upload-client": "^14.1.0",
     "@types/classnames": "^2.2.11",
     "@types/fslightbox-react": "^1.4.0",
-    "@types/lodash": "^4.14.164",
+    "@types/lodash": "^4.14.168",
-    "@types/mousetrap": "^1.6.4",
+    "@types/mousetrap": "^1.6.5",
-    "@types/node": "14.14.6",
+    "@types/node": "14.14.22",
-    "@types/react": "16.9.55",
+    "@types/react": "17.0.0",
-    "@types/react-dom": "^16.9.8",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-bootstrap": "^0.24.5",
-    "@types/react-router-dom": "5.1.6",
+    "@types/react-router-dom": "5.1.7",
     "@types/react-router-hash-link": "^1.2.1",
-    "@types/react-select": "3.0.23",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/eslint-plugin": "^4.6.0",
+    "@typescript-eslint/parser": "^4.14.0",
-    "@typescript-eslint/parser": "^4.6.0",
+    "eslint": "^7.18.0",
-    "eslint": "^7.12.1",
     "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "extract-react-intl-messages": "^4.1.1",
-    "node-sass": "4.14.1",
+    "postcss-safe-parser": "^5.0.2",
-    "postcss-safe-parser": "^4.0.2",
+    "prettier": "2.2.1",
-    "prettier": "2.1.2",
+    "react-scripts": "^4.0.1",
-    "react-scripts": "^4.0.0",
+    "stylelint": "^13.9.0",
-    "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-order": "^4.1.0",
-    "typescript": "^4.0.5"
+    "typescript": "~4.0.5"
   }
 }

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

@@ -20,9 +20,10 @@ export const EditGalleriesDialog: React.FC<IListOperationProps> = (
   const Toast = useToast();
   const [rating, setRating] = useState<number>();
   const [studioId, setStudioId] = useState<string>();
-  const [performerMode, setPerformerMode] = React.useState<
+  const [
-    GQL.BulkUpdateIdMode
+    performerMode,
-  >(GQL.BulkUpdateIdMode.Add);
+    setPerformerMode,
+  ] = React.useState<GQL.BulkUpdateIdMode>(GQL.BulkUpdateIdMode.Add);
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [tagMode, setTagMode] = React.useState<GQL.BulkUpdateIdMode>(
     GQL.BulkUpdateIdMode.Add

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

@@ -20,9 +20,10 @@ export const EditImagesDialog: React.FC<IListOperationProps> = (
   const Toast = useToast();
   const [rating, setRating] = useState<number>();
   const [studioId, setStudioId] = useState<string>();
-  const [performerMode, setPerformerMode] = React.useState<
+  const [
-    GQL.BulkUpdateIdMode
+    performerMode,
-  >(GQL.BulkUpdateIdMode.Add);
+    setPerformerMode,
+  ] = React.useState<GQL.BulkUpdateIdMode>(GQL.BulkUpdateIdMode.Add);
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [tagMode, setTagMode] = React.useState<GQL.BulkUpdateIdMode>(
     GQL.BulkUpdateIdMode.Add

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

@@ -56,12 +56,14 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
   const Toast = useToast();
 
   // Editing state
-  const [isDisplayingScraperDialog, setIsDisplayingScraperDialog] = useState<
+  const [
-    GQL.Scraper
+    isDisplayingScraperDialog,
-  >();
+    setIsDisplayingScraperDialog,
-  const [scrapePerformerDetails, setScrapePerformerDetails] = useState<
+  ] = useState<GQL.Scraper>();
-    GQL.ScrapedPerformerDataFragment
+  const [
-  >();
+    scrapePerformerDetails,
+    setScrapePerformerDetails,
+  ] = useState<GQL.ScrapedPerformerDataFragment>();
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
 
   // Editing performer state

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

@@ -20,9 +20,10 @@ export const EditScenesDialog: React.FC<IListOperationProps> = (
   const Toast = useToast();
   const [rating, setRating] = useState<number>();
   const [studioId, setStudioId] = useState<string>();
-  const [performerMode, setPerformerMode] = React.useState<
+  const [
-    GQL.BulkUpdateIdMode
+    performerMode,
-  >(GQL.BulkUpdateIdMode.Add);
+    setPerformerMode,
+  ] = React.useState<GQL.BulkUpdateIdMode>(GQL.BulkUpdateIdMode.Add);
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [tagMode, setTagMode] = React.useState<GQL.BulkUpdateIdMode>(
     GQL.BulkUpdateIdMode.Add

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

@@ -51,9 +51,10 @@ export const SceneEditPanel: React.FC<IProps> = (props: IProps) => {
   const [studioId, setStudioId] = useState<string>();
   const [performerIds, setPerformerIds] = useState<string[]>();
   const [movieIds, setMovieIds] = useState<string[] | undefined>(undefined);
-  const [movieSceneIndexes, setMovieSceneIndexes] = useState<
+  const [
-    MovieSceneIndexMap
+    movieSceneIndexes,
-  >(new Map());
+    setMovieSceneIndexes,
+  ] = useState<MovieSceneIndexMap>(new Map());
   const [tagIds, setTagIds] = useState<string[]>();
   const [coverImage, setCoverImage] = useState<string>();
   const [stashIDs, setStashIDs] = useState<GQL.StashIdInput[]>([]);

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

@@ -16,9 +16,10 @@ export const SceneMarkersPanel: React.FC<ISceneMarkersPanelProps> = (
   props: ISceneMarkersPanelProps
 ) => {
   const [isEditorOpen, setIsEditorOpen] = useState<boolean>(false);
-  const [editingMarker, setEditingMarker] = useState<
+  const [
-    GQL.SceneMarkerDataFragment
+    editingMarker,
-  >();
+    setEditingMarker,
+  ] = useState<GQL.SceneMarkerDataFragment>();
 
   // set up hotkeys
   useEffect(() => {

ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx

@@ -112,9 +112,10 @@ export const SettingsConfigurationPanel: React.FC = () => {
   const [galleryExtensions, setGalleryExtensions] = useState<
     string | undefined
   >();
-  const [createGalleriesFromFolders, setCreateGalleriesFromFolders] = useState<
+  const [
-    boolean
+    createGalleriesFromFolders,
-  >(false);
+    setCreateGalleriesFromFolders,
+  ] = useState<boolean>(false);
 
   const [excludes, setExcludes] = useState<string[]>([]);
   const [imageExcludes, setImageExcludes] = useState<string[]>([]);

ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx

@@ -41,9 +41,10 @@ export const SettingsTasksPanel: React.FC = () => {
   const [scanGenerateSprites, setScanGenerateSprites] = useState<boolean>(
     false
   );
-  const [scanGenerateImagePreviews, setScanGenerateImagePreviews] = useState<
+  const [
-    boolean
+    scanGenerateImagePreviews,
-  >(false);
+    setScanGenerateImagePreviews,
+  ] = useState<boolean>(false);
 
   const [status, setStatus] = useState<string>("");
   const [progress, setProgress] = useState<number>(0);

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

@@ -1,5 +1,5 @@
-import React, { useState, CSSProperties } from "react";
+import React, { useState } from "react";
-import Select, { ValueType, Props } from "react-select";
+import Select, { ValueType, Styles } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { debounce } from "lodash";
 
@@ -46,17 +46,17 @@ interface IFilterProps {
   isClearable?: boolean;
   isDisabled?: boolean;
 }
-interface ISelectProps {
+interface ISelectProps<T extends boolean> {
   className?: string;
   items: Option[];
-  selectedOptions?: Option[];
+  selectedOptions?: ValueType<Option, T>;
   creatable?: boolean;
   onCreateOption?: (value: string) => void;
   isLoading: boolean;
   isDisabled?: boolean;
-  onChange: (item: ValueType<Option>) => void;
+  onChange: (item: ValueType<Option, T>) => void;
   initialIds?: string[];
-  isMulti?: boolean;
+  isMulti: T;
   isClearable?: boolean;
   onInputChange?: (input: string) => void;
   placeholder?: string;
@@ -69,8 +69,8 @@ interface IFilterComponentProps extends IFilterProps {
   items: Array<ValidTypes>;
   onCreate?: (name: string) => Promise<{ item: ValidTypes; message: string }>;
 }
-interface IFilterSelectProps
+interface IFilterSelectProps<T extends boolean>
-  extends Omit<ISelectProps, "onChange" | "items" | "onCreateOption"> {}
+  extends Omit<ISelectProps<T>, "onChange" | "items" | "onCreateOption"> {}
 
 interface ISceneGallerySelect {
   gallery?: Pick<GQL.Gallery, "title" | "path" | "id">;
@@ -82,14 +82,14 @@ interface ISceneGallerySelect {
   ) => void;
 }
 
-const getSelectedValues = (selectedItems: ValueType<Option>) =>
+const getSelectedValues = (selectedItems: ValueType<Option, boolean>) =>
   selectedItems
     ? (Array.isArray(selectedItems) ? selectedItems : [selectedItems]).map(
         (item) => item.value
       )
     : [];
 
-const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
+const SelectComponent = <T extends boolean>({
   type,
   initialIds,
   onChange,
@@ -101,16 +101,16 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
   onCreateOption,
   isClearable = true,
   creatable = false,
-  isMulti = false,
+  isMulti,
   onInputChange,
   placeholder,
   showDropdown = true,
   groupHeader,
   closeMenuOnSelect = true,
   noOptionsMessage = type !== "tags" ? "None" : null,
-}) => {
+}: ISelectProps<T> & ITypeProps) => {
-  const defaultValue =
+  const values = items.filter((item) => initialIds?.indexOf(item.value) !== -1);
-    items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
+  const defaultValue = (isMulti ? values : values[0]) as ValueType<Option, T>;
 
   const options = groupHeader
     ? [
@@ -121,18 +121,18 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
       ]
     : items;
 
-  const styles = {
+  const styles: Partial<Styles<Option, T>> = {
-    option: (base: CSSProperties) => ({
+    option: (base) => ({
       ...base,
       color: "#000",
     }),
-    container: (base: CSSProperties, props: Props) => ({
+    container: (base, props) => ({
       ...base,
-      zIndex: props.isFocused ? 10 : base.zIndex,
+      zIndex: props.selectProps.isFocused ? 10 : base.zIndex,
     }),
-    multiValueRemove: (base: CSSProperties, props: Props) => ({
+    multiValueRemove: (base, props) => ({
       ...base,
-      color: props.isFocused ? base.color : "#333333",
+      color: props.selectProps.isFocused ? base.color : "#333333",
     }),
   };
 
@@ -144,14 +144,13 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
     onChange,
     isMulti,
     isClearable,
-    defaultValue,
+    defaultValue: defaultValue ?? undefined,
     noOptionsMessage: () => noOptionsMessage,
     placeholder: isDisabled ? "" : placeholder,
     onInputChange,
     isDisabled,
     isLoading,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    styles,
-    styles: styles as any, // TODO: Typing error, remove at some point
     closeMenuOnSelect,
     components: {
       IndicatorSeparator: () => null,
@@ -171,25 +170,30 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
   );
 };
 
-const FilterSelectComponent: React.FC<
+const FilterSelectComponent = <T extends boolean>(
-  IFilterComponentProps & ITypeProps & IFilterSelectProps
+  props: IFilterComponentProps & ITypeProps & IFilterSelectProps<T>
-> = (props) => {
+) => {
+  const { items, ids, isMulti, onSelect } = props;
   const [loading, setLoading] = useState(false);
-  const selectedIds = props.ids ?? [];
+  const selectedIds = ids ?? [];
   const Toast = useToast();
 
-  const { items } = props;
   const options = items.map((i) => ({
     value: i.id,
     label: i.name ?? "",
   }));
-  const selectedOptions = options.filter((option) =>
+
+  const selected = options.filter((option) =>
     selectedIds.includes(option.value)
   );
+  const selectedOptions = (isMulti ? selected : selected[0]) as ValueType<
+    Option,
+    T
+  >;
 
-  const onChange = (selectedItems: ValueType<Option>) => {
+  const onChange = (selectedItems: ValueType<Option, boolean>) => {
     const selectedValues = getSelectedValues(selectedItems);
-    props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
+    onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
   };
 
   const onCreate = async (name: string) => {
@@ -214,9 +218,8 @@ const FilterSelectComponent: React.FC<
   };
 
   return (
-    <SelectComponent
+    <SelectComponent<T>
-      {...(props as ITypeProps)}
+      {...props}
-      {...(props as IFilterSelectProps)}
       isLoading={props.isLoading || loading}
       onChange={onChange}
       items={options}
@@ -247,32 +250,32 @@ export const SceneGallerySelect: React.FC<ISceneGallerySelect> = (props) => {
     setQuery(input);
   }, 500);
 
-  const onChange = (selectedItems: ValueType<Option>) => {
+  const onChange = (selectedItem: ValueType<Option, false>) => {
-    const selectedItem = getSelectedValues(selectedItems)[0];
+    setSelectedOption(selectedItem ?? undefined);
-    setSelectedOption(
-      Array.isArray(selectedItems) ? selectedItems[0] : selectedItems
-    );
     props.onSelect(
-      selectedItem ? galleries.find((g) => g.id === selectedItem) : undefined
+      selectedItem
+        ? galleries.find((g) => g.id === selectedItem.value)
+        : undefined
     );
   };
 
-  const selectedOptions: Option[] = [];
+  const option =
-  if (selectedOption !== undefined) selectedOptions.push(selectedOption);
+    selectedOption ??
-  else if (props.gallery) {
+    (props.gallery
-    selectedOptions.push({
+      ? {
           value: props.gallery.id,
           label: props.gallery.title ?? props.gallery.path ?? "Unknown",
-    });
         }
+      : undefined);
 
   return (
     <SelectComponent
+      isMulti={false}
       onChange={onChange}
       onInputChange={onInputChange}
       isLoading={loading}
       items={items}
-      selectedOptions={selectedOptions}
+      selectedOptions={option}
     />
   );
 };
@@ -298,14 +301,14 @@ export const ScrapePerformerSuggest: React.FC<IScrapePerformerSuggestProps> = (
     setQuery(input);
   }, 500);
 
-  const onChange = (selectedItems: ValueType<Option>) => {
+  const onChange = (name: ValueType<Option, false>) => {
-    const name = getSelectedValues(selectedItems)[0];
     const performer = performers.find((p) => p.name === name);
     if (performer) props.onSelectPerformer(performer);
   };
 
   return (
     <SelectComponent
+      isMulti={false}
       onChange={onChange}
       onInputChange={onInputChange}
       isLoading={loading}
@@ -327,8 +330,8 @@ export const MarkerTitleSuggest: React.FC<IMarkerSuggestProps> = (props) => {
   const { data, loading } = useMarkerStrings();
   const suggestions = data?.markerStrings ?? [];
 
-  const onChange = (selectedItems: ValueType<Option>) =>
+  const onChange = (selectedItem: ValueType<Option, false>) =>
-    props.onChange(getSelectedValues(selectedItems)[0]);
+    props.onChange(selectedItem?.value ?? "");
 
   const items = suggestions.map((item) => ({
     label: item?.title ?? "",
@@ -337,6 +340,7 @@ export const MarkerTitleSuggest: React.FC<IMarkerSuggestProps> = (props) => {
   const initialIds = props.initialMarkerTitle ? [props.initialMarkerTitle] : [];
   return (
     <SelectComponent
+      isMulti={false}
       creatable
       onChange={onChange}
       isLoading={loading}
@@ -369,6 +373,7 @@ export const PerformerSelect: React.FC<IFilterProps> = (props) => {
   return (
     <FilterSelectComponent
       {...props}
+      isMulti={props.isMulti ?? false}
       creatable
       onCreate={onCreate}
       type="performers"
@@ -398,6 +403,7 @@ export const StudioSelect: React.FC<
   return (
     <FilterSelectComponent
       {...props}
+      isMulti={props.isMulti ?? false}
       type="studios"
       isLoading={loading}
       items={studios}
@@ -415,6 +421,7 @@ export const MovieSelect: React.FC<IFilterProps> = (props) => {
   return (
     <FilterSelectComponent
       {...props}
+      isMulti={props.isMulti ?? false}
       type="movies"
       isLoading={loading}
       items={items}
@@ -440,6 +447,7 @@ export const TagSelect: React.FC<IFilterProps> = (props) => {
   return (
     <FilterSelectComponent
       {...props}
+      isMulti={props.isMulti ?? false}
       items={tags}
       creatable
       type="tags"

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

@@ -27,9 +27,10 @@ interface ITagList {
 
 export const TagList: React.FC<ITagList> = ({ filterHook }) => {
   const Toast = useToast();
-  const [deletingTag, setDeletingTag] = useState<Partial<
+  const [
-    GQL.TagDataFragment
+    deletingTag,
-  > | null>(null);
+    setDeletingTag,
+  ] = useState<Partial<GQL.TagDataFragment> | null>(null);
 
   const [deleteTag] = useTagDestroy(getDeleteTagInput() as GQL.TagDestroyInput);