diff --git a/ui/v2.5/.eslintrc.json b/ui/v2.5/.eslintrc.json index bc17306f9..c99b31cc3 100644 --- a/ui/v2.5/.eslintrc.json +++ b/ui/v2.5/.eslintrc.json @@ -16,6 +16,7 @@ "airbnb-typescript", "airbnb/hooks", "prettier", + "prettier/prettier", "prettier/react", "prettier/@typescript-eslint" ], diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index 8118ec6a4..048b55846 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -25,80 +25,80 @@ "not op_mini all" ], "dependencies": { - "@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", + "@apollo/client": "^3.3.7", + "@formatjs/intl-numberformat": "^6.1.3", + "@fortawesome/fontawesome-svg-core": "^1.2.34", + "@fortawesome/free-regular-svg-icons": "^5.15.2", + "@fortawesome/free-solid-svg-icons": "^5.15.2", + "@fortawesome/react-fontawesome": "^0.1.14", + "@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-select": "^3.1.0", + "react-router-hash-link": "^2.3.1", + "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/cli": "^1.19.0", - "@graphql-codegen/time": "^2.0.1", - "@graphql-codegen/typescript": "^1.17.11", - "@graphql-codegen/typescript-operations": "^1.17.8", - "@graphql-codegen/typescript-react-apollo": "^2.0.7", + "@graphql-codegen/add": "^2.0.2", + "@graphql-codegen/cli": "^1.20.0", + "@graphql-codegen/time": "^2.0.2", + "@graphql-codegen/typescript": "^1.20.00", + "@graphql-codegen/typescript-operations": "^1.17.13", + "@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/mousetrap": "^1.6.4", - "@types/node": "14.14.6", - "@types/react": "16.9.55", - "@types/react-dom": "^16.9.8", + "@types/lodash": "^4.14.168", + "@types/mousetrap": "^1.6.5", + "@types/node": "14.14.22", + "@types/react": "17.0.0", + "@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.6.0", - "@typescript-eslint/parser": "^4.6.0", - "eslint": "^7.12.1", + "@typescript-eslint/eslint-plugin": "^4.14.0", + "@typescript-eslint/parser": "^4.14.0", + "eslint": "^7.18.0", "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": "^4.0.2", - "prettier": "2.1.2", - "react-scripts": "^4.0.0", - "stylelint": "^13.7.2", + "postcss-safe-parser": "^5.0.2", + "prettier": "2.2.1", + "react-scripts": "^4.0.1", + "stylelint": "^13.9.0", "stylelint-config-prettier": "^8.0.2", "stylelint-order": "^4.1.0", - "typescript": "^4.0.5" + "typescript": "~4.0.5" } } diff --git a/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx b/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx index c61acd5ff..f54668ca9 100644 --- a/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx +++ b/ui/v2.5/src/components/Galleries/EditGalleriesDialog.tsx @@ -20,9 +20,10 @@ export const EditGalleriesDialog: React.FC = ( const Toast = useToast(); const [rating, setRating] = useState(); const [studioId, setStudioId] = useState(); - const [performerMode, setPerformerMode] = React.useState< - GQL.BulkUpdateIdMode - >(GQL.BulkUpdateIdMode.Add); + const [ + performerMode, + setPerformerMode, + ] = React.useState(GQL.BulkUpdateIdMode.Add); const [performerIds, setPerformerIds] = useState(); const [tagMode, setTagMode] = React.useState( GQL.BulkUpdateIdMode.Add diff --git a/ui/v2.5/src/components/Images/EditImagesDialog.tsx b/ui/v2.5/src/components/Images/EditImagesDialog.tsx index 4c542d35a..4d9d2e6f5 100644 --- a/ui/v2.5/src/components/Images/EditImagesDialog.tsx +++ b/ui/v2.5/src/components/Images/EditImagesDialog.tsx @@ -20,9 +20,10 @@ export const EditImagesDialog: React.FC = ( const Toast = useToast(); const [rating, setRating] = useState(); const [studioId, setStudioId] = useState(); - const [performerMode, setPerformerMode] = React.useState< - GQL.BulkUpdateIdMode - >(GQL.BulkUpdateIdMode.Add); + const [ + performerMode, + setPerformerMode, + ] = React.useState(GQL.BulkUpdateIdMode.Add); const [performerIds, setPerformerIds] = useState(); const [tagMode, setTagMode] = React.useState( GQL.BulkUpdateIdMode.Add diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx index c31bc17c1..ff207f034 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -56,12 +56,14 @@ export const PerformerDetailsPanel: React.FC = ({ const Toast = useToast(); // Editing state - const [isDisplayingScraperDialog, setIsDisplayingScraperDialog] = useState< - GQL.Scraper - >(); - const [scrapePerformerDetails, setScrapePerformerDetails] = useState< - GQL.ScrapedPerformerDataFragment - >(); + const [ + isDisplayingScraperDialog, + setIsDisplayingScraperDialog, + ] = useState(); + const [ + scrapePerformerDetails, + setScrapePerformerDetails, + ] = useState(); const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false); // Editing performer state diff --git a/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx b/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx index 3ab34f1f2..89a97309f 100644 --- a/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx +++ b/ui/v2.5/src/components/Scenes/EditScenesDialog.tsx @@ -20,9 +20,10 @@ export const EditScenesDialog: React.FC = ( const Toast = useToast(); const [rating, setRating] = useState(); const [studioId, setStudioId] = useState(); - const [performerMode, setPerformerMode] = React.useState< - GQL.BulkUpdateIdMode - >(GQL.BulkUpdateIdMode.Add); + const [ + performerMode, + setPerformerMode, + ] = React.useState(GQL.BulkUpdateIdMode.Add); const [performerIds, setPerformerIds] = useState(); const [tagMode, setTagMode] = React.useState( GQL.BulkUpdateIdMode.Add diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index a2051f131..c28e2e40f 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx @@ -51,9 +51,10 @@ export const SceneEditPanel: React.FC = (props: IProps) => { const [studioId, setStudioId] = useState(); const [performerIds, setPerformerIds] = useState(); const [movieIds, setMovieIds] = useState(undefined); - const [movieSceneIndexes, setMovieSceneIndexes] = useState< - MovieSceneIndexMap - >(new Map()); + const [ + movieSceneIndexes, + setMovieSceneIndexes, + ] = useState(new Map()); const [tagIds, setTagIds] = useState(); const [coverImage, setCoverImage] = useState(); const [stashIDs, setStashIDs] = useState([]); diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx index cf88a261b..eb0b3c40a 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx @@ -16,9 +16,10 @@ export const SceneMarkersPanel: React.FC = ( props: ISceneMarkersPanelProps ) => { const [isEditorOpen, setIsEditorOpen] = useState(false); - const [editingMarker, setEditingMarker] = useState< - GQL.SceneMarkerDataFragment - >(); + const [ + editingMarker, + setEditingMarker, + ] = useState(); // set up hotkeys useEffect(() => { diff --git a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx b/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx index 4daaff39c..92f1067b6 100644 --- a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx +++ b/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< - boolean - >(false); + const [ + createGalleriesFromFolders, + setCreateGalleriesFromFolders, + ] = useState(false); const [excludes, setExcludes] = useState([]); const [imageExcludes, setImageExcludes] = useState([]); diff --git a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx b/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx index a8d7bd5de..435c274c2 100644 --- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx @@ -41,9 +41,10 @@ export const SettingsTasksPanel: React.FC = () => { const [scanGenerateSprites, setScanGenerateSprites] = useState( false ); - const [scanGenerateImagePreviews, setScanGenerateImagePreviews] = useState< - boolean - >(false); + const [ + scanGenerateImagePreviews, + setScanGenerateImagePreviews, + ] = useState(false); const [status, setStatus] = useState(""); const [progress, setProgress] = useState(0); diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx index cc4b71f40..200f2e565 100644 --- a/ui/v2.5/src/components/Shared/Select.tsx +++ b/ui/v2.5/src/components/Shared/Select.tsx @@ -1,5 +1,5 @@ -import React, { useState, CSSProperties } from "react"; -import Select, { ValueType, Props } from "react-select"; +import React, { useState } from "react"; +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 { className?: string; items: Option[]; - selectedOptions?: Option[]; + selectedOptions?: ValueType; creatable?: boolean; onCreateOption?: (value: string) => void; isLoading: boolean; isDisabled?: boolean; - onChange: (item: ValueType