setIsDeleteAlertOpen(true)}
/>
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
index 09ad8d17f..62e80e23e 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
@@ -1,18 +1,15 @@
-import React from "react";
+import React, { useMemo } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useLocation } from "react-router-dom";
import { GalleryEditPanel } from "./GalleryEditPanel";
const GalleryCreate: React.FC = () => {
const intl = useIntl();
-
- function useQuery() {
- const { search } = useLocation();
- return React.useMemo(() => new URLSearchParams(search), [search]);
- }
-
- const query = useQuery();
- const nameQuery = query.get("name");
+ const location = useLocation();
+ const query = useMemo(() => new URLSearchParams(location.search), [location]);
+ const gallery = {
+ title: query.get("q") ?? undefined,
+ };
return (
@@ -23,12 +20,7 @@ const GalleryCreate: React.FC = () => {
values={{ entityType: intl.formatMessage({ id: "gallery" }) }}
/>
- {}}
- />
+ {}} />
);
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
index 6e472412d..ca5e292fd 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
@@ -40,23 +40,16 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
import { ConfigurationContext } from "src/hooks/Config";
interface IProps {
+ gallery: Partial;
isVisible: boolean;
onDelete: () => void;
}
-interface INewProps {
- isNew: true;
- gallery?: Partial;
-}
-
-interface IExistingProps {
- isNew: false;
- gallery: GQL.GalleryDataFragment;
-}
-
-export const GalleryEditPanel: React.FC<
- IProps & (INewProps | IExistingProps)
-> = ({ gallery, isNew, isVisible, onDelete }) => {
+export const GalleryEditPanel: React.FC = ({
+ gallery,
+ isVisible,
+ onDelete,
+}) => {
const intl = useIntl();
const Toast = useToast();
const history = useHistory();
@@ -67,15 +60,14 @@ export const GalleryEditPanel: React.FC<
}))
);
+ const isNew = gallery.id === undefined;
const { configuration: stashConfig } = React.useContext(ConfigurationContext);
const Scrapers = useListGalleryScrapers();
const [queryableScrapers, setQueryableScrapers] = useState([]);
- const [
- scrapedGallery,
- setScrapedGallery,
- ] = useState();
+ const [scrapedGallery, setScrapedGallery] =
+ useState();
// Network state
const [isLoading, setIsLoading] = useState(false);
diff --git a/ui/v2.5/src/components/Galleries/GalleryRecommendationRow.tsx b/ui/v2.5/src/components/Galleries/GalleryRecommendationRow.tsx
index 437eaeb94..dbd10e090 100644
--- a/ui/v2.5/src/components/Galleries/GalleryRecommendationRow.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryRecommendationRow.tsx
@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
import { useFindGalleries } from "src/core/StashService";
-import Slider from "react-slick";
+import Slider from "@ant-design/react-slick";
import { GalleryCard } from "./GalleryCard";
import { ListFilterModel } from "src/models/list-filter/filter";
import { getSlickSliderSettings } from "src/core/recommendations";
@@ -13,9 +13,7 @@ interface IProps {
header: string;
}
-export const GalleryRecommendationRow: FunctionComponent = (
- props: IProps
-) => {
+export const GalleryRecommendationRow: React.FC = (props) => {
const result = useFindGalleries(props.filter);
const cardCount = result.data?.findGalleries.count;
diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss
index 93079baf0..1ee4ee152 100644
--- a/ui/v2.5/src/components/Galleries/styles.scss
+++ b/ui/v2.5/src/components/Galleries/styles.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
.gallery-image {
&:hover {
cursor: pointer;
@@ -138,14 +140,14 @@ $galleryTabWidth: 450px;
}
@mixin galleryWidth($width) {
- height: ($width / 3) * 2;
+ height: math.div($width, 3) * 2;
&-landscape {
width: $width;
}
&-portrait {
- width: $width / 2;
+ width: math.div($width, 2);
}
}
diff --git a/ui/v2.5/src/components/Help/Manual.tsx b/ui/v2.5/src/components/Help/Manual.tsx
index 12faa3e26..7af8756f8 100644
--- a/ui/v2.5/src/components/Help/Manual.tsx
+++ b/ui/v2.5/src/components/Help/Manual.tsx
@@ -173,11 +173,9 @@ export const Manual: React.FC = ({
event: React.MouseEvent
) {
if (event.target instanceof HTMLAnchorElement) {
- const href = (event.target as HTMLAnchorElement).getAttribute("href");
+ const href = event.target.getAttribute("href");
if (href && href.startsWith("/help")) {
- const newKey = (event.target as HTMLAnchorElement).pathname.substring(
- "/help/".length
- );
+ const newKey = event.target.pathname.substring("/help/".length);
setActiveTab(newKey);
event.preventDefault();
}
diff --git a/ui/v2.5/src/components/Images/EditImagesDialog.tsx b/ui/v2.5/src/components/Images/EditImagesDialog.tsx
index 6d18f9df3..1f34ec078 100644
--- a/ui/v2.5/src/components/Images/EditImagesDialog.tsx
+++ b/ui/v2.5/src/components/Images/EditImagesDialog.tsx
@@ -31,10 +31,8 @@ export const EditImagesDialog: React.FC = (
const Toast = useToast();
const [rating100, setRating] = useState();
const [studioId, setStudioId] = useState();
- const [
- performerMode,
- setPerformerMode,
- ] = React.useState(GQL.BulkUpdateIdMode.Add);
+ const [performerMode, setPerformerMode] =
+ React.useState(GQL.BulkUpdateIdMode.Add);
const [performerIds, setPerformerIds] = useState();
const [existingPerformerIds, setExistingPerformerIds] = useState();
const [tagMode, setTagMode] = React.useState(
diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index 72d88bad9..0d70f3370 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -239,7 +239,9 @@ export const Image: React.FC = () => {
Mousetrap.bind("a", () => setActiveTabKey("image-details-panel"));
Mousetrap.bind("e", () => setActiveTabKey("image-edit-panel"));
Mousetrap.bind("f", () => setActiveTabKey("image-file-info-panel"));
- Mousetrap.bind("o", () => onIncrementClick());
+ Mousetrap.bind("o", () => {
+ onIncrementClick();
+ });
return () => {
Mousetrap.unbind("a");
diff --git a/ui/v2.5/src/components/Images/ImageRecommendationRow.tsx b/ui/v2.5/src/components/Images/ImageRecommendationRow.tsx
index 55f7e7b78..36f13b8d4 100644
--- a/ui/v2.5/src/components/Images/ImageRecommendationRow.tsx
+++ b/ui/v2.5/src/components/Images/ImageRecommendationRow.tsx
@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
import { useFindImages } from "src/core/StashService";
-import Slider from "react-slick";
+import Slider from "@ant-design/react-slick";
import { ListFilterModel } from "src/models/list-filter/filter";
import { getSlickSliderSettings } from "src/core/recommendations";
import { RecommendationRow } from "../FrontPage/RecommendationRow";
@@ -13,9 +13,7 @@ interface IProps {
header: string;
}
-export const ImageRecommendationRow: FunctionComponent = (
- props: IProps
-) => {
+export const ImageRecommendationRow: React.FC = (props: IProps) => {
const result = useFindImages(props.filter);
const cardCount = result.data?.findImages.count;
diff --git a/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx b/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
index 52a3bae7e..68d75ad39 100644
--- a/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
@@ -10,10 +10,9 @@ interface IHierarchicalLabelValueFilterProps {
onValueChanged: (value: IHierarchicalLabelValue) => void;
}
-export const HierarchicalLabelValueFilter: React.FC = ({
- criterion,
- onValueChanged,
-}) => {
+export const HierarchicalLabelValueFilter: React.FC<
+ IHierarchicalLabelValueFilterProps
+> = ({ criterion, onValueChanged }) => {
const intl = useIntl();
if (
diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
index d48fb015a..ba69ad52a 100644
--- a/ui/v2.5/src/components/MainNavbar.tsx
+++ b/ui/v2.5/src/components/MainNavbar.tsx
@@ -18,7 +18,7 @@ import { ManualStateContext } from "./Help/context";
import { SettingsButton } from "./SettingsButton";
import {
faBars,
- faChartBar,
+ faChartColumn,
faFilm,
faHeart,
faImage,
@@ -220,10 +220,10 @@ export const MainNavbar: React.FC = () => {
const pathname = location.pathname.replace(/\/$/, "");
let newPath = newPathsList.includes(pathname) ? `${pathname}/new` : null;
- if (newPath != null) {
+ if (newPath !== null) {
let queryParam = new URLSearchParams(location.search).get("q");
- if (queryParam != null) {
- newPath += "?name=" + encodeURIComponent(queryParam);
+ if (queryParam) {
+ newPath += "?q=" + encodeURIComponent(queryParam);
}
}
@@ -296,7 +296,7 @@ export const MainNavbar: React.FC = () => {
className="minimal d-flex align-items-center h-100"
title={intl.formatMessage({ id: "statistics" })}
>
-
+
void;
}
-export const MovieCard: FunctionComponent = (props: IProps) => {
+export const MovieCard: React.FC = (props: IProps) => {
function maybeRenderSceneNumber() {
if (!props.sceneIndex) return;
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
index 3984d4c33..2f7076078 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -51,7 +51,9 @@ const MoviePage: React.FC = ({ movie }) => {
// set up hotkeys
useEffect(() => {
Mousetrap.bind("e", () => setIsEditing(true));
- Mousetrap.bind("d d", () => onDelete());
+ Mousetrap.bind("d d", () => {
+ onDelete();
+ });
return () => {
Mousetrap.unbind("e");
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
index faef1c20c..38437a395 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
@@ -1,22 +1,24 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
import * as GQL from "src/core/generated-graphql";
import { useMovieCreate } from "src/core/StashService";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
import { LoadingIndicator } from "src/components/Shared";
import { useToast } from "src/hooks";
import { MovieEditPanel } from "./MovieEditPanel";
const MovieCreate: React.FC = () => {
const history = useHistory();
+ const location = useLocation();
const Toast = useToast();
+ const query = useMemo(() => new URLSearchParams(location.search), [location]);
+ const movie = {
+ name: query.get("q") ?? undefined,
+ };
+
// Editing movie state
- const [frontImage, setFrontImage] = useState(
- undefined
- );
- const [backImage, setBackImage] = useState(
- undefined
- );
+ const [frontImage, setFrontImage] = useState();
+ const [backImage, setBackImage] = useState();
const [encodingImage, setEncodingImage] = useState(false);
const [createMovie] = useMovieCreate();
@@ -84,6 +86,7 @@ const MovieCreate: React.FC = () => {
history.push("/movies")}
onDelete={() => {}}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
index b822724b5..8f25000bf 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
@@ -25,7 +25,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
import { ConfigurationContext } from "src/hooks/Config";
interface IMovieEditPanel {
- movie?: Partial;
+ movie: Partial;
onSubmit: (
movie: Partial
) => void;
@@ -49,19 +49,15 @@ export const MovieEditPanel: React.FC = ({
const Toast = useToast();
const { configuration: stashConfig } = React.useContext(ConfigurationContext);
- const isNew = movie === undefined;
+ const isNew = movie.id === undefined;
const [isLoading, setIsLoading] = useState(false);
const [isImageAlertOpen, setIsImageAlertOpen] = useState(false);
- const [imageClipboard, setImageClipboard] = useState(
- undefined
- );
+ const [imageClipboard, setImageClipboard] = useState();
const Scrapers = useListMovieScrapers();
- const [scrapedMovie, setScrapedMovie] = useState<
- GQL.ScrapedMovie | undefined
- >();
+ const [scrapedMovie, setScrapedMovie] = useState();
const schema = yup.object({
name: yup.string().required(),
@@ -113,10 +109,10 @@ export const MovieEditPanel: React.FC = ({
setBackImage(formik.values.back_image);
}, [formik.values.back_image, setBackImage]);
- useEffect(() => onImageEncoding(encodingImage), [
- onImageEncoding,
- encodingImage,
- ]);
+ useEffect(
+ () => onImageEncoding(encodingImage),
+ [onImageEncoding, encodingImage]
+ );
function setRating(v: number) {
formik.setFieldValue("rating100", v);
diff --git a/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx b/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
index 710b54b59..34d5119ff 100644
--- a/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
+++ b/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { useFindMovies } from "src/core/StashService";
-import Slider from "react-slick";
+import Slider from "@ant-design/react-slick";
import { MovieCard } from "./MovieCard";
import { ListFilterModel } from "src/models/list-filter/filter";
import { getSlickSliderSettings } from "src/core/recommendations";
diff --git a/ui/v2.5/src/components/PageNotFound.tsx b/ui/v2.5/src/components/PageNotFound.tsx
index 645709fcf..67cb6b38c 100644
--- a/ui/v2.5/src/components/PageNotFound.tsx
+++ b/ui/v2.5/src/components/PageNotFound.tsx
@@ -1,5 +1,5 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
-export const PageNotFound: FunctionComponent = () => {
+export const PageNotFound: React.FC = () => {
return Page not found.
;
};
diff --git a/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx b/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
index fc189eeb7..4d25e7fab 100644
--- a/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
+++ b/ui/v2.5/src/components/Performers/EditPerformersDialog.tsx
@@ -60,10 +60,8 @@ export const EditPerformersDialog: React.FC = (
mode: GQL.BulkUpdateIdMode.Add,
});
const [existingTagIds, setExistingTagIds] = useState();
- const [
- aggregateState,
- setAggregateState,
- ] = useState({});
+ const [aggregateState, setAggregateState] =
+ useState({});
// weight needs conversion to/from number
const [weight, setWeight] = useState();
const [updateInput, setUpdateInput] = useState(
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
index 8d7077406..c021441c6 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -32,12 +32,8 @@ import { PerformerImagesPanel } from "./PerformerImagesPanel";
import { PerformerEditPanel } from "./PerformerEditPanel";
import { PerformerSubmitButton } from "./PerformerSubmitButton";
import GenderIcon from "../GenderIcon";
-import {
- faCamera,
- faDove,
- faHeart,
- faLink,
-} from "@fortawesome/free-solid-svg-icons";
+import { faHeart, faLink } from "@fortawesome/free-solid-svg-icons";
+import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { IUIConfig } from "src/core/config";
import { useRatingKeybinds } from "src/hooks/keybinds";
@@ -247,7 +243,6 @@ const PerformerPage: React.FC = ({ performer }) => {
{
@@ -351,7 +346,7 @@ const PerformerPage: React.FC = ({ performer }) => {
target="_blank"
rel="noopener noreferrer"
>
-
+
)}
@@ -366,7 +361,7 @@ const PerformerPage: React.FC = ({ performer }) => {
target="_blank"
rel="noopener noreferrer"
>
-
+
)}
@@ -405,7 +400,7 @@ const PerformerPage: React.FC = ({ performer }) => {
{performer.name}
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
index 1427ceb4a..9306caeba 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { LoadingIndicator } from "src/components/Shared";
import { PerformerEditPanel } from "./PerformerEditPanel";
@@ -8,13 +8,11 @@ const PerformerCreate: React.FC = () => {
const [imagePreview, setImagePreview] = useState();
const [imageEncoding, setImageEncoding] = useState(false);
- function useQuery() {
- const { search } = useLocation();
- return React.useMemo(() => new URLSearchParams(search), [search]);
- }
-
- const query = useQuery();
- const nameQuery = query.get("name");
+ const location = useLocation();
+ const query = useMemo(() => new URLSearchParams(location.search), [location]);
+ const performer = {
+ name: query.get("q") ?? undefined,
+ };
const activeImage = imagePreview ?? "";
const intl = useIntl();
@@ -50,9 +48,8 @@ const PerformerCreate: React.FC = () => {
/>
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
index f542ee7de..40f87c2a5 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
@@ -50,7 +50,6 @@ const isScraper = (
interface IPerformerDetails {
performer: Partial;
- isNew?: boolean;
isVisible: boolean;
onImageChange?: (image?: string | null) => void;
onImageEncoding?: (loading?: boolean) => void;
@@ -59,7 +58,6 @@ interface IPerformerDetails {
export const PerformerEditPanel: React.FC = ({
performer,
- isNew,
isVisible,
onImageChange,
onImageEncoding,
@@ -68,8 +66,10 @@ export const PerformerEditPanel: React.FC = ({
const Toast = useToast();
const history = useHistory();
+ const isNew = performer.id === undefined;
+
// Editing state
- const [scraper, setScraper] = useState();
+ const [scraper, setScraper] = useState();
const [newTags, setNewTags] = useState();
const [isScraperModalOpen, setIsScraperModalOpen] = useState(false);
@@ -447,10 +447,10 @@ export const PerformerEditPanel: React.FC = ({
return () => onImageChange?.();
}, [formik.values.image, onImageChange]);
- useEffect(() => onImageEncoding?.(imageEncoding), [
- onImageEncoding,
- imageEncoding,
- ]);
+ useEffect(
+ () => onImageEncoding?.(imageEncoding),
+ [onImageEncoding, imageEncoding]
+ );
useEffect(() => {
const newQueryableScrapers = (
diff --git a/ui/v2.5/src/components/Performers/PerformerRecommendationRow.tsx b/ui/v2.5/src/components/Performers/PerformerRecommendationRow.tsx
index 300b93f2f..40611967a 100644
--- a/ui/v2.5/src/components/Performers/PerformerRecommendationRow.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerRecommendationRow.tsx
@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
import { useFindPerformers } from "src/core/StashService";
-import Slider from "react-slick";
+import Slider from "@ant-design/react-slick";
import { PerformerCard } from "./PerformerCard";
import { ListFilterModel } from "src/models/list-filter/filter";
import { getSlickSliderSettings } from "src/core/recommendations";
@@ -13,9 +13,7 @@ interface IProps {
header: string;
}
-export const PerformerRecommendationRow: FunctionComponent = (
- props: IProps
-) => {
+export const PerformerRecommendationRow: React.FC = (props) => {
const result = useFindPerformers(props.filter);
const cardCount = result.data?.findPerformers.count;
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index 1e8fbb7ba..910088a8b 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -76,7 +76,7 @@
width: 100%;
}
- .flag-icon {
+ .fi {
bottom: 1rem;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
height: 2rem;
diff --git a/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx b/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
index 521ec41c6..5617f7ac1 100644
--- a/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
+++ b/ui/v2.5/src/components/SceneDuplicateChecker/SceneDuplicateChecker.tsx
@@ -12,7 +12,6 @@ import {
} from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
-import querystring from "query-string";
import * as GQL from "src/core/generated-graphql";
import {
@@ -47,20 +46,13 @@ const CLASSNAME = "duplicate-checker";
export const SceneDuplicateChecker: React.FC = () => {
const intl = useIntl();
const history = useHistory();
- const { page, size, distance } = querystring.parse(history.location.search);
- const currentPage = Number.parseInt(
- Array.isArray(page) ? page[0] : page ?? "1",
- 10
- );
- const pageSize = Number.parseInt(
- Array.isArray(size) ? size[0] : size ?? "20",
- 10
- );
+
+ const query = new URLSearchParams(history.location.search);
+ const currentPage = Number.parseInt(query.get("page") ?? "1", 10);
+ const pageSize = Number.parseInt(query.get("size") ?? "20", 10);
+ const hashDistance = Number.parseInt(query.get("distance") ?? "0", 10);
+
const [currentPageSize, setCurrentPageSize] = useState(pageSize);
- const hashDistance = Number.parseInt(
- Array.isArray(distance) ? distance[0] : distance ?? "0",
- 10
- );
const [isMultiDelete, setIsMultiDelete] = useState(false);
const [deletingScenes, setDeletingScenes] = useState(false);
const [editingScenes, setEditingScenes] = useState(false);
@@ -90,9 +82,8 @@ export const SceneDuplicateChecker: React.FC = () => {
GQL.SlimSceneDataFragment[] | null
>(null);
- const [mergeScenes, setMergeScenes] = useState<
- { id: string; title: string }[] | undefined
- >(undefined);
+ const [mergeScenes, setMergeScenes] =
+ useState<{ id: string; title: string }[]>();
if (loading) return ;
if (!data) return ;
@@ -107,12 +98,16 @@ export const SceneDuplicateChecker: React.FC = () => {
).length;
const setQuery = (q: Record) => {
- history.push({
- search: querystring.stringify({
- ...querystring.parse(history.location.search),
- ...q,
- }),
- });
+ const newQuery = new URLSearchParams(query);
+ for (const key of Object.keys(q)) {
+ const value = q[key];
+ if (value !== undefined) {
+ newQuery.set(key, String(value));
+ } else {
+ newQuery.delete(key);
+ }
+ }
+ history.push({ search: newQuery.toString() });
};
function onDeleteDialogClosed(deleted: boolean) {
@@ -504,7 +499,7 @@ export const SceneDuplicateChecker: React.FC = () => {
page: undefined,
})
}
- defaultValue={distance ?? 0}
+ defaultValue={hashDistance}
className="input-control ml-4"
>