fix redirection issues

src/backend/metadata/getmeta.ts

@@ -201,10 +201,16 @@ export function decodeTMDBId(
   };
 }
 
+export function isLegacyUrl(url: string): boolean {
+  if (url.startsWith("/media/JW")) return true;
+  return false;
+}
+
 export async function convertLegacyUrl(
   url: string
 ): Promise<string | undefined> {
-  if (url.startsWith("/media/JW")) {
+  if (!isLegacyUrl(url)) return undefined;
+
   const urlParts = url.split("/").slice(2);
   const [, type, id] = urlParts[0].split("-", 3);
 
@@ -225,5 +231,3 @@ export async function convertLegacyUrl(
     return `/media/tmdb-${type}-${tmdbId}`;
   }
 }
-  return undefined;
-}

src/setup/App.tsx

@@ -1,7 +1,13 @@
-import { lazy, useEffect, useState } from "react";
-import { Redirect, Route, Switch, useLocation } from "react-router-dom";
+import { ReactElement, lazy, useEffect } from "react";
+import {
+  Redirect,
+  Route,
+  Switch,
+  useHistory,
+  useLocation,
+} from "react-router-dom";
 
-import { convertLegacyUrl } from "@/backend/metadata/getmeta";
+import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
 import { MWMediaType } from "@/backend/metadata/types/mw";
 import { BannerContextProvider } from "@/hooks/useBanner";
 import { Layout } from "@/setup/Layout";
@@ -13,28 +19,22 @@ import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import { V2MigrationView } from "@/views/other/v2Migration";
 import { SearchView } from "@/views/search/SearchView";
 
-// eslint-disable-next-line react/function-component-definition, react/prop-types
-const LegacyUrlView: React.FC = ({ children }) => {
+function LegacyUrlView({ children }: { children: ReactElement }) {
   const location = useLocation();
-  const [redirectUrl, setRedirectUrl] = useState<string | null>(null);
+  const { replace } = useHistory();
 
   useEffect(() => {
-    // Call the conversion function and set the redirect URL if necessary
+    const url = location.pathname;
+    if (!isLegacyUrl(url)) return;
     convertLegacyUrl(location.pathname).then((convertedUrl) => {
-      if (convertedUrl) {
-        setRedirectUrl(convertedUrl);
-      }
+      replace(convertedUrl ?? "/");
     });
-  }, [location.pathname]);
+  }, [location.pathname, replace]);
 
-  if (redirectUrl) {
-    return <Redirect to={redirectUrl} />;
+  if (isLegacyUrl(location.pathname)) return null;
+  return children;
 }
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{children}</>;
-};
-
 function App() {
   return (
     <SettingsProvider>
@@ -42,25 +42,24 @@ function App() {
         <BookmarkContextProvider>
           <BannerContextProvider>
             <Layout>
-              <LegacyUrlView>
               <Switch>
                 {/* functional routes */}
-                  <Route
-                    exact
-                    path="/v2-migration"
-                    component={V2MigrationView}
-                  />
+                <Route exact path="/v2-migration" component={V2MigrationView} />
                 <Route exact path="/">
                   <Redirect to={`/search/${MWMediaType.MOVIE}`} />
                 </Route>
 
                 {/* pages */}
-                  <Route exact path="/media/:media" component={MediaView} />
-                  <Route
-                    exact
-                    path="/media/:media/:season/:episode"
-                    component={MediaView}
-                  />
+                <Route exact path="/media/:media">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
+                <Route exact path="/media/:media/:season/:episode">
+                  <LegacyUrlView>
+                    <MediaView />
+                  </LegacyUrlView>
+                </Route>
                 <Route
                   exact
                   path="/search/:type/:query?"
@@ -111,7 +110,6 @@ function App() {
                 ) : null}
                 <Route path="*" component={NotFoundPage} />
               </Switch>
-              </LegacyUrlView>
             </Layout>
           </BannerContextProvider>
         </BookmarkContextProvider>