mirror of
https://github.com/stashapp/stash.git
synced 2025-12-18 12:54:38 +03:00
Fix url not updated for default tab on Performer/Studio/Tag pages (#4538)
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { Button, Tabs, Tab, Col, Row } from "react-bootstrap";
|
import { Button, Tabs, Tab, Col, Row } from "react-bootstrap";
|
||||||
import { useIntl } from "react-intl";
|
import { useIntl } from "react-intl";
|
||||||
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
||||||
@@ -48,7 +48,7 @@ import { ExternalLink } from "src/components/Shared/ExternalLink";
|
|||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
performer: GQL.PerformerDataFragment;
|
performer: GQL.PerformerDataFragment;
|
||||||
tabKey: TabKey;
|
tabKey?: TabKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IPerformerParams {
|
interface IPerformerParams {
|
||||||
@@ -66,8 +66,6 @@ const validTabs = [
|
|||||||
] as const;
|
] as const;
|
||||||
type TabKey = (typeof validTabs)[number];
|
type TabKey = (typeof validTabs)[number];
|
||||||
|
|
||||||
const defaultTab: TabKey = "default";
|
|
||||||
|
|
||||||
function isTabKey(tab: string): tab is TabKey {
|
function isTabKey(tab: string): tab is TabKey {
|
||||||
return validTabs.includes(tab as TabKey);
|
return validTabs.includes(tab as TabKey);
|
||||||
}
|
}
|
||||||
@@ -133,20 +131,23 @@ const PerformerPage: React.FC<IProps> = ({ performer, tabKey }) => {
|
|||||||
return ret;
|
return ret;
|
||||||
}, [performer]);
|
}, [performer]);
|
||||||
|
|
||||||
if (tabKey === defaultTab) {
|
const setTabKey = useCallback(
|
||||||
tabKey = populatedDefaultTab;
|
(newTabKey: string | null) => {
|
||||||
}
|
if (!newTabKey) newTabKey = populatedDefaultTab;
|
||||||
|
if (newTabKey === tabKey) return;
|
||||||
|
|
||||||
function setTabKey(newTabKey: string | null) {
|
if (isTabKey(newTabKey)) {
|
||||||
if (!newTabKey || newTabKey === defaultTab) newTabKey = populatedDefaultTab;
|
history.replace(`/performers/${performer.id}/${newTabKey}`);
|
||||||
if (newTabKey === tabKey) return;
|
}
|
||||||
|
},
|
||||||
|
[populatedDefaultTab, tabKey, history, performer.id]
|
||||||
|
);
|
||||||
|
|
||||||
if (newTabKey === populatedDefaultTab) {
|
useEffect(() => {
|
||||||
history.replace(`/performers/${performer.id}`);
|
if (!tabKey) {
|
||||||
} else if (isTabKey(newTabKey)) {
|
setTabKey(populatedDefaultTab);
|
||||||
history.replace(`/performers/${performer.id}/${newTabKey}`);
|
|
||||||
}
|
}
|
||||||
}
|
}, [setTabKey, populatedDefaultTab, tabKey]);
|
||||||
|
|
||||||
async function onAutoTag() {
|
async function onAutoTag() {
|
||||||
try {
|
try {
|
||||||
@@ -621,11 +622,7 @@ const PerformerLoader: React.FC<RouteComponentProps<IPerformerParams>> = ({
|
|||||||
if (!data?.findPerformer)
|
if (!data?.findPerformer)
|
||||||
return <ErrorMessage error={`No performer found with id ${id}.`} />;
|
return <ErrorMessage error={`No performer found with id ${id}.`} />;
|
||||||
|
|
||||||
if (!tab) {
|
if (tab && !isTabKey(tab)) {
|
||||||
return <PerformerPage performer={data.findPerformer} tabKey={defaultTab} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isTabKey(tab)) {
|
|
||||||
return (
|
return (
|
||||||
<Redirect
|
<Redirect
|
||||||
to={{
|
to={{
|
||||||
@@ -636,7 +633,12 @@ const PerformerLoader: React.FC<RouteComponentProps<IPerformerParams>> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <PerformerPage performer={data.findPerformer} tabKey={tab} />;
|
return (
|
||||||
|
<PerformerPage
|
||||||
|
performer={data.findPerformer}
|
||||||
|
tabKey={tab as TabKey | undefined}
|
||||||
|
/>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PerformerLoader;
|
export default PerformerLoader;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Button, Tabs, Tab } from "react-bootstrap";
|
import { Button, Tabs, Tab } from "react-bootstrap";
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { Helmet } from "react-helmet";
|
import { Helmet } from "react-helmet";
|
||||||
@@ -48,7 +48,7 @@ import { ExternalLink } from "src/components/Shared/ExternalLink";
|
|||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
studio: GQL.StudioDataFragment;
|
studio: GQL.StudioDataFragment;
|
||||||
tabKey: TabKey;
|
tabKey?: TabKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IStudioParams {
|
interface IStudioParams {
|
||||||
@@ -138,9 +138,23 @@ const StudioPage: React.FC<IProps> = ({ studio, tabKey }) => {
|
|||||||
studio,
|
studio,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (tabKey === defaultTab) {
|
const setTabKey = useCallback(
|
||||||
tabKey = populatedDefaultTab;
|
(newTabKey: string | null) => {
|
||||||
}
|
if (!newTabKey) newTabKey = populatedDefaultTab;
|
||||||
|
if (newTabKey === tabKey) return;
|
||||||
|
|
||||||
|
if (isTabKey(newTabKey)) {
|
||||||
|
history.replace(`/studios/${studio.id}/${newTabKey}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[populatedDefaultTab, tabKey, history, studio.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tabKey === defaultTab) {
|
||||||
|
setTabKey(populatedDefaultTab);
|
||||||
|
}
|
||||||
|
}, [setTabKey, populatedDefaultTab, tabKey]);
|
||||||
|
|
||||||
// set up hotkeys
|
// set up hotkeys
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -270,17 +284,6 @@ const StudioPage: React.FC<IProps> = ({ studio, tabKey }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTabKey(newTabKey: string | null) {
|
|
||||||
if (!newTabKey || newTabKey === defaultTab) newTabKey = populatedDefaultTab;
|
|
||||||
if (newTabKey === tabKey) return;
|
|
||||||
|
|
||||||
if (newTabKey === populatedDefaultTab) {
|
|
||||||
history.replace(`/studios/${studio.id}`);
|
|
||||||
} else if (isTabKey(newTabKey)) {
|
|
||||||
history.replace(`/studios/${studio.id}/${newTabKey}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderClickableIcons = () => (
|
const renderClickableIcons = () => (
|
||||||
<span className="name-icons">
|
<span className="name-icons">
|
||||||
{studio.url && (
|
{studio.url && (
|
||||||
@@ -574,11 +577,7 @@ const StudioLoader: React.FC<RouteComponentProps<IStudioParams>> = ({
|
|||||||
if (!data?.findStudio)
|
if (!data?.findStudio)
|
||||||
return <ErrorMessage error={`No studio found with id ${id}.`} />;
|
return <ErrorMessage error={`No studio found with id ${id}.`} />;
|
||||||
|
|
||||||
if (!tab) {
|
if (tab && !isTabKey(tab)) {
|
||||||
return <StudioPage studio={data.findStudio} tabKey={defaultTab} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isTabKey(tab)) {
|
|
||||||
return (
|
return (
|
||||||
<Redirect
|
<Redirect
|
||||||
to={{
|
to={{
|
||||||
@@ -589,7 +588,9 @@ const StudioLoader: React.FC<RouteComponentProps<IStudioParams>> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <StudioPage studio={data.findStudio} tabKey={tab} />;
|
return (
|
||||||
|
<StudioPage studio={data.findStudio} tabKey={tab as TabKey | undefined} />
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default StudioLoader;
|
export default StudioLoader;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Tabs, Tab, Dropdown, Button } from "react-bootstrap";
|
import { Tabs, Tab, Dropdown, Button } from "react-bootstrap";
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
import { FormattedMessage, useIntl } from "react-intl";
|
||||||
import { Helmet } from "react-helmet";
|
import { Helmet } from "react-helmet";
|
||||||
@@ -43,7 +43,7 @@ import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
|
|||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
tag: GQL.TagDataFragment;
|
tag: GQL.TagDataFragment;
|
||||||
tabKey: TabKey;
|
tabKey?: TabKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ITagParams {
|
interface ITagParams {
|
||||||
@@ -61,8 +61,6 @@ const validTabs = [
|
|||||||
] as const;
|
] as const;
|
||||||
type TabKey = (typeof validTabs)[number];
|
type TabKey = (typeof validTabs)[number];
|
||||||
|
|
||||||
const defaultTab: TabKey = "default";
|
|
||||||
|
|
||||||
function isTabKey(tab: string): tab is TabKey {
|
function isTabKey(tab: string): tab is TabKey {
|
||||||
return validTabs.includes(tab as TabKey);
|
return validTabs.includes(tab as TabKey);
|
||||||
}
|
}
|
||||||
@@ -124,20 +122,23 @@ const TagPage: React.FC<IProps> = ({ tag, tabKey }) => {
|
|||||||
return ret;
|
return ret;
|
||||||
}, [sceneCount, imageCount, galleryCount, sceneMarkerCount, performerCount]);
|
}, [sceneCount, imageCount, galleryCount, sceneMarkerCount, performerCount]);
|
||||||
|
|
||||||
if (tabKey === defaultTab) {
|
const setTabKey = useCallback(
|
||||||
tabKey = populatedDefaultTab;
|
(newTabKey: string | null) => {
|
||||||
}
|
if (!newTabKey) newTabKey = populatedDefaultTab;
|
||||||
|
if (newTabKey === tabKey) return;
|
||||||
|
|
||||||
function setTabKey(newTabKey: string | null) {
|
if (isTabKey(newTabKey)) {
|
||||||
if (!newTabKey || newTabKey === defaultTab) newTabKey = populatedDefaultTab;
|
history.replace(`/tags/${tag.id}/${newTabKey}`);
|
||||||
if (newTabKey === tabKey) return;
|
}
|
||||||
|
},
|
||||||
|
[populatedDefaultTab, tabKey, history, tag.id]
|
||||||
|
);
|
||||||
|
|
||||||
if (newTabKey === populatedDefaultTab) {
|
useEffect(() => {
|
||||||
history.replace(`/tags/${tag.id}`);
|
if (!tabKey) {
|
||||||
} else if (isTabKey(newTabKey)) {
|
setTabKey(populatedDefaultTab);
|
||||||
history.replace(`/tags/${tag.id}/${newTabKey}`);
|
|
||||||
}
|
}
|
||||||
}
|
}, [setTabKey, populatedDefaultTab, tabKey]);
|
||||||
|
|
||||||
// set up hotkeys
|
// set up hotkeys
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -564,11 +565,7 @@ const TagLoader: React.FC<RouteComponentProps<ITagParams>> = ({
|
|||||||
if (!data?.findTag)
|
if (!data?.findTag)
|
||||||
return <ErrorMessage error={`No tag found with id ${id}.`} />;
|
return <ErrorMessage error={`No tag found with id ${id}.`} />;
|
||||||
|
|
||||||
if (!tab) {
|
if (tab && !isTabKey(tab)) {
|
||||||
return <TagPage tag={data.findTag} tabKey={defaultTab} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isTabKey(tab)) {
|
|
||||||
return (
|
return (
|
||||||
<Redirect
|
<Redirect
|
||||||
to={{
|
to={{
|
||||||
@@ -579,7 +576,7 @@ const TagLoader: React.FC<RouteComponentProps<ITagParams>> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return <TagPage tag={data.findTag} tabKey={tab} />;
|
return <TagPage tag={data.findTag} tabKey={tab as TabKey | undefined} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TagLoader;
|
export default TagLoader;
|
||||||
|
|||||||
Reference in New Issue
Block a user