Fix url not updated for default tab on Performer/Studio/Tag pages (#4538)

This commit is contained in:
WithoutPants
2024-02-12 15:08:11 +11:00
committed by GitHub
parent 46eb01198a
commit e9703e9a6e
3 changed files with 64 additions and 64 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;