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

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -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 { useIntl } from "react-intl";
 import { useHistory, Redirect, RouteComponentProps } from "react-router-dom";
@@ -48,7 +48,7 @@ import { ExternalLink } from "src/components/Shared/ExternalLink";
 
 interface IProps {
   performer: GQL.PerformerDataFragment;
-  tabKey: TabKey;
+  tabKey?: TabKey;
 }
 
 interface IPerformerParams {
@@ -66,8 +66,6 @@ const validTabs = [
 ] as const;
 type TabKey = (typeof validTabs)[number];
 
-const defaultTab: TabKey = "default";
-
 function isTabKey(tab: string): tab is TabKey {
   return validTabs.includes(tab as TabKey);
 }
@@ -133,20 +131,23 @@ const PerformerPage: React.FC<IProps> = ({ performer, tabKey }) => {
     return ret;
   }, [performer]);
 
-  if (tabKey === defaultTab) {
-    tabKey = populatedDefaultTab;
-  }
-
-  function setTabKey(newTabKey: string | null) {
-    if (!newTabKey || newTabKey === defaultTab) newTabKey = populatedDefaultTab;
+  const setTabKey = useCallback(
+    (newTabKey: string | null) => {
+      if (!newTabKey) newTabKey = populatedDefaultTab;
       if (newTabKey === tabKey) return;
 
-    if (newTabKey === populatedDefaultTab) {
-      history.replace(`/performers/${performer.id}`);
-    } else if (isTabKey(newTabKey)) {
+      if (isTabKey(newTabKey)) {
         history.replace(`/performers/${performer.id}/${newTabKey}`);
       }
+    },
+    [populatedDefaultTab, tabKey, history, performer.id]
+  );
+
+  useEffect(() => {
+    if (!tabKey) {
+      setTabKey(populatedDefaultTab);
     }
+  }, [setTabKey, populatedDefaultTab, tabKey]);
 
   async function onAutoTag() {
     try {
@@ -621,11 +622,7 @@ const PerformerLoader: React.FC<RouteComponentProps<IPerformerParams>> = ({
   if (!data?.findPerformer)
     return <ErrorMessage error={`No performer found with id ${id}.`} />;
 
-  if (!tab) {
-    return <PerformerPage performer={data.findPerformer} tabKey={defaultTab} />;
-  }
-
-  if (!isTabKey(tab)) {
+  if (tab && !isTabKey(tab)) {
     return (
       <Redirect
         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;

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -1,5 +1,5 @@
 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 { FormattedMessage, useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
@@ -48,7 +48,7 @@ import { ExternalLink } from "src/components/Shared/ExternalLink";
 
 interface IProps {
   studio: GQL.StudioDataFragment;
-  tabKey: TabKey;
+  tabKey?: TabKey;
 }
 
 interface IStudioParams {
@@ -138,9 +138,23 @@ const StudioPage: React.FC<IProps> = ({ studio, tabKey }) => {
     studio,
   ]);
 
-  if (tabKey === defaultTab) {
-    tabKey = populatedDefaultTab;
+  const setTabKey = useCallback(
+    (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
   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 = () => (
     <span className="name-icons">
       {studio.url && (
@@ -574,11 +577,7 @@ const StudioLoader: React.FC<RouteComponentProps<IStudioParams>> = ({
   if (!data?.findStudio)
     return <ErrorMessage error={`No studio found with id ${id}.`} />;
 
-  if (!tab) {
-    return <StudioPage studio={data.findStudio} tabKey={defaultTab} />;
-  }
-
-  if (!isTabKey(tab)) {
+  if (tab && !isTabKey(tab)) {
     return (
       <Redirect
         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;

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -1,5 +1,5 @@
 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 { FormattedMessage, useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
@@ -43,7 +43,7 @@ import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
 
 interface IProps {
   tag: GQL.TagDataFragment;
-  tabKey: TabKey;
+  tabKey?: TabKey;
 }
 
 interface ITagParams {
@@ -61,8 +61,6 @@ const validTabs = [
 ] as const;
 type TabKey = (typeof validTabs)[number];
 
-const defaultTab: TabKey = "default";
-
 function isTabKey(tab: string): tab is TabKey {
   return validTabs.includes(tab as TabKey);
 }
@@ -124,20 +122,23 @@ const TagPage: React.FC<IProps> = ({ tag, tabKey }) => {
     return ret;
   }, [sceneCount, imageCount, galleryCount, sceneMarkerCount, performerCount]);
 
-  if (tabKey === defaultTab) {
-    tabKey = populatedDefaultTab;
-  }
-
-  function setTabKey(newTabKey: string | null) {
-    if (!newTabKey || newTabKey === defaultTab) newTabKey = populatedDefaultTab;
+  const setTabKey = useCallback(
+    (newTabKey: string | null) => {
+      if (!newTabKey) newTabKey = populatedDefaultTab;
       if (newTabKey === tabKey) return;
 
-    if (newTabKey === populatedDefaultTab) {
-      history.replace(`/tags/${tag.id}`);
-    } else if (isTabKey(newTabKey)) {
+      if (isTabKey(newTabKey)) {
         history.replace(`/tags/${tag.id}/${newTabKey}`);
       }
+    },
+    [populatedDefaultTab, tabKey, history, tag.id]
+  );
+
+  useEffect(() => {
+    if (!tabKey) {
+      setTabKey(populatedDefaultTab);
     }
+  }, [setTabKey, populatedDefaultTab, tabKey]);
 
   // set up hotkeys
   useEffect(() => {
@@ -564,11 +565,7 @@ const TagLoader: React.FC<RouteComponentProps<ITagParams>> = ({
   if (!data?.findTag)
     return <ErrorMessage error={`No tag found with id ${id}.`} />;
 
-  if (!tab) {
-    return <TagPage tag={data.findTag} tabKey={defaultTab} />;
-  }
-
-  if (!isTabKey(tab)) {
+  if (tab && !isTabKey(tab)) {
     return (
       <Redirect
         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;