From df2d2c2d095ac9a194625ad91f7ca0390c984a9d Mon Sep 17 00:00:00 2001 From: InfiniteTF Date: Fri, 8 May 2020 04:06:07 +0200 Subject: [PATCH] Upgrade javascript libraries (#516) * Bump react-bootstrap * Bump library versions and clean up hooks * Bump intl libraries * Fix image pasting --- ui/v2.5/package.json | 100 +- ui/v2.5/src/App.tsx | 4 +- ui/v2.5/src/components/Galleries/Gallery.tsx | 4 +- ui/v2.5/src/components/List/ListFilter.tsx | 21 +- ui/v2.5/src/components/MainNavbar.tsx | 76 +- .../components/Movies/MovieDetails/Movie.tsx | 25 +- .../Performers/PerformerDetails/Performer.tsx | 118 +- .../PerformerDetailsPanel.tsx | 52 +- .../PerformerOperationsPanel.tsx | 4 +- .../components/Performers/PerformerList.tsx | 4 +- .../SceneFilenameParser/ParserInput.tsx | 9 +- .../SceneFilenameParser.tsx | 9 +- .../SceneFilenameParser/SceneParserRow.tsx | 4 +- .../components/ScenePlayer/ScenePlayer.tsx | 4 +- ui/v2.5/src/components/Scenes/SceneCard.tsx | 14 +- .../components/Scenes/SceneDetails/Scene.tsx | 15 +- .../Scenes/SceneDetails/SceneEditPanel.tsx | 27 +- .../Scenes/SceneDetails/SceneMarkerForm.tsx | 12 +- .../Scenes/SceneDetails/SceneMovieTable.tsx | 6 +- .../SceneDetails/SceneOperationsPanel.tsx | 4 +- ui/v2.5/src/components/Scenes/SceneList.tsx | 4 +- .../src/components/Scenes/SceneMarkerList.tsx | 4 +- .../Scenes/SceneSelectedOptions.tsx | 6 +- .../Settings/SettingsAboutPanel.tsx | 6 +- .../Settings/SettingsConfigurationPanel.tsx | 20 +- .../Settings/SettingsInterfacePanel.tsx | 12 +- .../components/Settings/SettingsLogsPanel.tsx | 6 +- .../SettingsTasksPanel/GenerateButton.tsx | 4 +- .../SettingsTasksPanel/SettingsTasksPanel.tsx | 29 +- .../src/components/Shared/DurationInput.tsx | 2 +- .../Shared/FolderSelect/FolderSelect.tsx | 8 +- ui/v2.5/src/components/Shared/ImageInput.tsx | 2 +- ui/v2.5/src/components/Shared/Select.tsx | 44 +- ui/v2.5/src/components/Stats.tsx | 4 +- .../Studios/StudioDetails/Studio.tsx | 20 +- ui/v2.5/src/components/Tags/TagList.tsx | 26 +- ui/v2.5/src/components/Wall/WallItem.tsx | 18 +- ui/v2.5/src/core/StashService.ts | 1233 +++--- ui/v2.5/src/core/createClient.ts | 82 + ui/v2.5/src/hooks/ListHook.tsx | 21 +- ui/v2.5/src/hooks/VideoHover.ts | 114 +- ui/v2.5/src/hooks/index.ts | 2 +- ui/v2.5/src/index.tsx | 11 +- ui/v2.5/src/locale/de.json | 25 +- ui/v2.5/src/locale/en.json | 25 +- .../src/models/list-filter/criteria/gender.ts | 4 +- ui/v2.5/src/models/list-filter/filter.ts | 4 +- ui/v2.5/src/utils/editabletext.tsx | 8 +- ui/v2.5/src/utils/image.tsx | 11 +- ui/v2.5/yarn.lock | 3722 ++++++++++------- 50 files changed, 3192 insertions(+), 2797 deletions(-) create mode 100644 ui/v2.5/src/core/createClient.ts diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index ab9f6ac16..c611c3f85 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -25,79 +25,77 @@ "not op_mini all" ], "dependencies": { - "@apollo/react-hooks": "^3.1.3", - "@fortawesome/fontawesome-svg-core": "^1.2.26", - "@fortawesome/free-solid-svg-icons": "^5.12.0", - "@fortawesome/react-fontawesome": "^0.1.8", + "@apollo/react-hooks": "^3.1.5", + "@fortawesome/fontawesome-svg-core": "^1.2.28", + "@fortawesome/free-solid-svg-icons": "^5.13.0", + "@fortawesome/react-fontawesome": "^0.1.9", "apollo-cache": "^1.3.4", "apollo-cache-inmemory": "^1.6.5", "apollo-client": "^2.6.8", - "apollo-link": "^1.2.13", - "apollo-link-http": "^1.5.16", - "apollo-link-ws": "^1.0.19", + "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.18.1", + "axios": "0.19.2", "bootstrap": "^4.4.1", "classnames": "^2.2.6", "flag-icon-css": "^3.4.6", - "formik": "^2.1.2", + "formik": "^2.1.4", "graphql": "^14.5.8", - "graphql-tag": "^2.10.1", + "graphql-tag": "^2.10.3", "i18n-iso-countries": "^5.2.0", "localforage": "1.7.3", "lodash": "^4.17.15", - "query-string": "6.10.1", - "react": "~16.12.0", - "react-apollo": "^3.1.3", - "react-bootstrap": "^1.0.0-beta.16", - "react-dom": "16.12.0", + "query-string": "6.12.1", + "react": "16.13.1", + "react-apollo": "^3.1.5", + "react-bootstrap": "1.0.1", + "react-dom": "16.13.1", "react-images": "0.5.19", - "react-intl": "^3.12.0", - "react-jw-player": "1.19.0", + "react-intl": "^4.5.1", + "react-jw-player": "1.19.1", "react-photo-gallery": "^8.0.0", "react-router-bootstrap": "^0.25.0", "react-router-dom": "^5.1.2", - "react-select": "^3.0.8", + "react-select": "^3.1.0", "subscriptions-transport-ws": "^0.9.16", - "universal-cookie": "^4.0.3", - "video.js": "^7.6.0" + "universal-cookie": "^4.0.3" }, "devDependencies": { - "@graphql-codegen/add": "^1.11.2", - "@graphql-codegen/cli": "^1.11.2", - "@graphql-codegen/time": "^1.11.2", - "@graphql-codegen/typescript": "^1.11.2", - "@graphql-codegen/typescript-compatibility": "^1.11.2", - "@graphql-codegen/typescript-operations": "^1.11.2", - "@graphql-codegen/typescript-react-apollo": "^1.11.2", - "@types/classnames": "^2.2.9", - "@types/jest": "24.0.13", - "@types/lodash": "^4.14.149", - "@types/node": "13.1.8", - "@types/react": "16.9.19", - "@types/react-dom": "^16.9.5", + "@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", + "@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/react-router-bootstrap": "^0.24.5", - "@types/react-router-dom": "5.1.3", - "@types/react-select": "^3.0.8", - "@types/video.js": "^7.2.11", - "@typescript-eslint/eslint-plugin": "^2.16.0", - "@typescript-eslint/parser": "^2.16.0", - "eslint": "^6.7.2", - "eslint-config-airbnb-typescript": "^6.3.1", - "eslint-config-prettier": "^6.10.1", - "eslint-plugin-import": "^2.20.0", + "@types/react-router-dom": "5.1.5", + "@types/react-select": "^3.0.12", + "@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.18.0", - "eslint-plugin-react-hooks": "^1.7.0", - "extract-react-intl-messages": "^2.3.5", - "node-sass": "4.13.1", - "postcss-safe-parser": "^4.0.1", - "prettier": "2.0.2", - "react-scripts": "^3.3.1", - "stylelint": "^13.0.0", + "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", + "postcss-safe-parser": "^4.0.2", + "prettier": "2.0.5", + "react-scripts": "^3.4.1", + "stylelint": "^13.3.3", "stylelint-config-prettier": "^8.0.1", "stylelint-order": "^4.0.0", - "typescript": "^3.7.5" + "typescript": "^3.8.3" } } diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index e8b1447b9..ed8037878 100755 --- a/ui/v2.5/src/App.tsx +++ b/ui/v2.5/src/App.tsx @@ -6,7 +6,7 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { fas } from "@fortawesome/free-solid-svg-icons"; import locales from "src/locale"; -import { StashService } from "src/core/StashService"; +import { useConfiguration } from "src/core/StashService"; import { flattenMessages } from "src/utils"; import { ErrorBoundary } from "./components/ErrorBoundary"; import Galleries from "./components/Galleries/Galleries"; @@ -25,7 +25,7 @@ import Movies from "./components/Movies/Movies"; library.add(fas); export const App: React.FC = () => { - const config = StashService.useConfiguration(); + const config = useConfiguration(); const language = config.data?.configuration?.interface?.language ?? "en-US"; const messageLanguage = language.slice(0, 2); // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/ui/v2.5/src/components/Galleries/Gallery.tsx b/ui/v2.5/src/components/Galleries/Gallery.tsx index 887ae206b..f58a591ae 100644 --- a/ui/v2.5/src/components/Galleries/Gallery.tsx +++ b/ui/v2.5/src/components/Galleries/Gallery.tsx @@ -1,13 +1,13 @@ import React from "react"; import { useParams } from "react-router-dom"; -import { StashService } from "src/core/StashService"; +import { useFindGallery } from "src/core/StashService"; import { LoadingIndicator } from "src/components/Shared"; import { GalleryViewer } from "./GalleryViewer"; export const Gallery: React.FC = () => { const { id = "" } = useParams(); - const { data, error, loading } = StashService.useFindGallery(id); + const { data, error, loading } = useFindGallery(id); const gallery = data?.findGallery; if (loading || !gallery) return ; diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx index c878c3141..08db969c4 100644 --- a/ui/v2.5/src/components/List/ListFilter.tsx +++ b/ui/v2.5/src/components/List/ListFilter.tsx @@ -1,5 +1,5 @@ import { debounce } from "lodash"; -import React, { useCallback, useState } from "react"; +import React, { useState } from "react"; import { SortDirectionEnum } from "src/core/generated-graphql"; import { Badge, @@ -9,7 +9,7 @@ import { Form, OverlayTrigger, Tooltip, - SafeAnchor, + SafeAnchorProps, } from "react-bootstrap"; import { Icon } from "src/components/Shared"; @@ -45,18 +45,15 @@ const PAGE_SIZE_OPTIONS = ["20", "40", "60", "120"]; export const ListFilter: React.FC = ( props: IListFilterProps ) => { - const searchCallback = useCallback( - debounce((value: string) => { - props.onChangeQuery(value); - }, 500), - [props.onChangeQuery] - ); + const searchCallback = debounce((value: string) => { + props.onChangeQuery(value); + }, 500); const [editingCriterion, setEditingCriterion] = useState< Criterion | undefined >(undefined); - function onChangePageSize(event: React.FormEvent) { + function onChangePageSize(event: React.ChangeEvent) { const val = event.currentTarget.value; props.onChangePageSize(parseInt(val, 10)); } @@ -73,8 +70,8 @@ export const ListFilter: React.FC = ( } } - function onChangeSortBy(event: React.MouseEvent) { - const target = (event.currentTarget as unknown) as HTMLAnchorElement; + function onChangeSortBy(event: React.MouseEvent) { + const target = event.currentTarget as HTMLAnchorElement; props.onChangeSortBy(target.text); } @@ -266,7 +263,7 @@ export const ListFilter: React.FC = ( min={0} max={3} defaultValue={1} - onChange={(e: React.FormEvent) => + onChange={(e: React.ChangeEvent) => onChangeZoom(Number.parseInt(e.currentTarget.value, 10)) } /> diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx index b5f964077..851230c7c 100644 --- a/ui/v2.5/src/components/MainNavbar.tsx +++ b/ui/v2.5/src/components/MainNavbar.tsx @@ -1,54 +1,90 @@ import React, { useEffect, useRef, useState } from "react"; -import { FormattedMessage } from "react-intl"; +import { + defineMessages, + FormattedMessage, + MessageDescriptor, + useIntl, +} from "react-intl"; import { Nav, Navbar, Button } from "react-bootstrap"; import { IconName } from "@fortawesome/fontawesome-svg-core"; import { LinkContainer } from "react-router-bootstrap"; -import { Link, useLocation } from "react-router-dom"; +import { Link, NavLink, useLocation } from "react-router-dom"; import { SessionUtils } from "src/utils"; import { Icon } from "src/components/Shared"; interface IMenuItem { - messageID: string; + message: MessageDescriptor; href: string; icon: IconName; } +const messages = defineMessages({ + scenes: { + id: "scenes", + defaultMessage: "Scenes", + }, + movies: { + id: "movies", + defaultMessage: "Movies", + }, + markers: { + id: "markers", + defaultMessage: "Markers", + }, + performers: { + id: "performers", + defaultMessage: "Performers", + }, + studios: { + id: "studios", + defaultMessage: "Studios", + }, + tags: { + id: "tags", + defaultMessage: "Tags", + }, + galleries: { + id: "galleries", + defaultMessage: "Galleries", + }, +}); + const menuItems: IMenuItem[] = [ { icon: "play-circle", - messageID: "scenes", + message: messages.scenes, href: "/scenes", }, { href: "/movies", icon: "film", - messageID: "movies", + message: messages.movies, }, { href: "/scenes/markers", icon: "map-marker-alt", - messageID: "markers", + message: messages.markers, }, { href: "/galleries", icon: "image", - messageID: "galleries", + message: messages.galleries, }, { href: "/performers", icon: "user", - messageID: "performers", + message: messages.performers, }, { href: "/studios", icon: "video", - messageID: "studios", + message: messages.studios, }, { href: "/tags", icon: "tag", - messageID: "tags", + message: messages.tags, }, ]; @@ -58,6 +94,7 @@ export const MainNavbar: React.FC = () => { // react-bootstrap typing bug // eslint-disable-next-line @typescript-eslint/no-explicit-any const navbarRef = useRef(); + const intl = useIntl(); const maybeCollapse = (event: Event) => { if ( @@ -92,11 +129,11 @@ export const MainNavbar: React.FC = () => { path === null ? ( "" ) : ( - + - + ); function maybeRenderLogout() { @@ -140,17 +177,10 @@ export const MainNavbar: React.FC = () => {