From 794ea00d378ce21f35f821cba04aeac15d12c497 Mon Sep 17 00:00:00 2001 From: InfiniteTF Date: Wed, 25 Nov 2020 03:20:48 +0100 Subject: [PATCH] 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 | 1 + ui/v2.5/package.json | 91 +- .../GalleryDetails/GalleryEditPanel.tsx | 1 + .../src/components/Galleries/GalleryList.tsx | 1 + .../Images/ImageDetails/ImageEditPanel.tsx | 1 + ui/v2.5/src/components/Images/ImageList.tsx | 1 + ui/v2.5/src/components/List/AddFilter.tsx | 1 + ui/v2.5/src/components/List/ListFilter.tsx | 1 + ui/v2.5/src/components/MainNavbar.tsx | 3 +- .../components/Movies/MovieDetails/Movie.tsx | 1 + ui/v2.5/src/components/Movies/MovieList.tsx | 1 + .../Performers/PerformerDetails/Performer.tsx | 1 + .../PerformerDetailsPanel.tsx | 1 + .../components/Performers/PerformerList.tsx | 1 + .../Scenes/SceneDetails/SceneEditPanel.tsx | 1 + .../Scenes/SceneDetails/SceneMarkersPanel.tsx | 1 + ui/v2.5/src/components/Scenes/SceneList.tsx | 1 + .../src/components/Scenes/SceneMarkerList.tsx | 1 + ui/v2.5/src/components/Shared/Select.tsx | 286 +- .../Studios/StudioDetails/Studio.tsx | 1 + ui/v2.5/src/components/Studios/StudioList.tsx | 1 + .../src/components/Tags/TagDetails/Tag.tsx | 1 + ui/v2.5/src/components/Tags/TagList.tsx | 1 + ui/v2.5/src/hooks/ListHook.tsx | 1 + ui/v2.5/tsconfig.json | 3 +- ui/v2.5/yarn.lock | 9868 ++++++++--------- 26 files changed, 4812 insertions(+), 5460 deletions(-) diff --git a/ui/v2.5/.eslintrc.json b/ui/v2.5/.eslintrc.json index 07792d77a..bc17306f9 100644 --- a/ui/v2.5/.eslintrc.json +++ b/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", diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index dd744b2a2..0c0b8b3b6 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -25,83 +25,82 @@ "not op_mini all" ], "dependencies": { - "@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/apollo-upload-client": "^14.1.0", - "@types/mousetrap": "^1.6.3", + "@apollo/client": "^3.2.5", + "@formatjs/intl-numberformat": "^5.7.1", + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-regular-svg-icons": "^5.15.1", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@fortawesome/react-fontawesome": "^0.1.12", "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", - "query-string": "6.13.1", - "react": "16.13.1", - "react-bootstrap": "1.3.0", - "react-dom": "16.13.1", + "mousetrap-pause": "^1.0.0", + "query-string": "6.13.6", + "react": "17.0.1", + "react-bootstrap": "1.4.0", + "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", - "@types/classnames": "^2.2.10", + "@graphql-codegen/typescript-react-apollo": "^2.0.7", + "@types/apollo-upload-client": "^14.1.0", + "@types/classnames": "^2.2.11", "@types/fslightbox-react": "^1.4.0", - "@types/lodash": "^4.14.161", - "@types/node": "14.6.4", - "@types/react": "16.9.43", + "@types/lodash": "^4.14.164", + "@types/mousetrap": "^1.6.4", + "@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", - "@typescript-eslint/eslint-plugin": "^2.30.0", - "@typescript-eslint/parser": "^2.30.0", - "eslint": "^6.8.0", - "eslint-config-airbnb-typescript": "^7.2.1", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-import": "^2.20.2", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-react": "^7.19.0", - "eslint-plugin-react-hooks": "^4.0.0", + "@types/react-select": "3.0.23", + "@typescript-eslint/eslint-plugin": "^4.6.0", + "@typescript-eslint/parser": "^4.6.0", + "eslint": "^7.12.1", + "eslint-config-airbnb-typescript": "^12.0.0", + "eslint-config-prettier": "^6.15.0", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.21.5", + "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", - "react-scripts": "^3.4.3", - "stylelint": "^13.3.3", - "stylelint-config-prettier": "^8.0.1", - "stylelint-order": "^4.0.0", - "typescript": "^3.9.7" + "prettier": "2.1.2", + "react-scripts": "^4.0.0", + "stylelint": "^13.7.2", + "stylelint-config-prettier": "^8.0.2", + "stylelint-order": "^4.1.0", + "typescript": "^4.0.5" } } diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx index 77ed30225..18fc373a0 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Galleries/GalleryList.tsx b/ui/v2.5/src/components/Galleries/GalleryList.tsx index 59a545e03..b5d7fe663 100644 --- a/ui/v2.5/src/components/Galleries/GalleryList.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx index f937e9b84..f49e10d2a 100644 --- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx +++ b/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 { diff --git a/ui/v2.5/src/components/Images/ImageList.tsx b/ui/v2.5/src/components/Images/ImageList.tsx index b37794d2f..394b8c03e 100644 --- a/ui/v2.5/src/components/Images/ImageList.tsx +++ b/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, diff --git a/ui/v2.5/src/components/List/AddFilter.tsx b/ui/v2.5/src/components/List/AddFilter.tsx index 1aec305c4..7dc673969 100644 --- a/ui/v2.5/src/components/List/AddFilter.tsx +++ b/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 { diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx index 28dc1e085..28dbe10a4 100644 --- a/ui/v2.5/src/components/List/ListFilter.tsx +++ b/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, diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx index c10e799fc..45d1debc2 100644 --- a/ui/v2.5/src/components/MainNavbar.tsx +++ b/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"; diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx index 49bc6bc52..3b6396fd9 100644 --- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Movies/MovieList.tsx b/ui/v2.5/src/components/Movies/MovieList.tsx index e801bc056..baa2dcc29 100644 --- a/ui/v2.5/src/components/Movies/MovieList.tsx +++ b/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"; diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index e810895ce..d78ce161b 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx index 04b8f2d0c..12dbac8aa 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Performers/PerformerList.tsx b/ui/v2.5/src/components/Performers/PerformerList.tsx index de6f3cf09..6614288a3 100644 --- a/ui/v2.5/src/components/Performers/PerformerList.tsx +++ b/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"; diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index 1d2fff20e..0e6d32617 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx index c8d97a2d8..cf88a261b 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx +++ b/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"; diff --git a/ui/v2.5/src/components/Scenes/SceneList.tsx b/ui/v2.5/src/components/Scenes/SceneList.tsx index e6045a902..ce67bb3f3 100644 --- a/ui/v2.5/src/components/Scenes/SceneList.tsx +++ b/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, diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx index 62d2e664d..4e43d547c 100644 --- a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx +++ b/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"; diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx index 08ca5a61d..36a6b36f2 100644 --- a/ui/v2.5/src/components/Shared/Select.tsx +++ b/ui/v2.5/src/components/Shared/Select.tsx @@ -88,6 +88,142 @@ const getSelectedValues = (selectedItems: ValueType