Routing Improvements

frontend2/src/App.tsx

@@ -20,7 +20,7 @@ import {
   type LoaderFunction,
 } from "react-router-dom";
 import { DEFAULT_EPISODE } from "./utils/constants";
-import NotFound from "./views/NotFound";
+import EpisodeNotFound from "./views/EpisodeNotFound";
 import Rankings from "./views/Rankings";
 import { CurrentUserProvider } from "./contexts/CurrentUserProvider";
 import PrivateRoute from "./components/PrivateRoute";
@@ -48,6 +48,7 @@ import { tournamentLoader } from "./api/loaders/tournamentLoader";
 import { homeLoader } from "./api/loaders/homeLoader";
 import ErrorBoundary from "./views/ErrorBoundary";
 import { searchTeamsFactory } from "api/team/teamFactories";
+import PageNotFound from "views/PageNotFound";
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -62,6 +63,9 @@ const queryClient = new QueryClient({
   }),
 });
 
+queryClient.setQueryDefaults(["episode"], {
+  retry: 1,
+});
 queryClient.setQueryDefaults(["team"], { retry: false });
 queryClient.setQueryDefaults(["user"], { retry: false });
 
@@ -82,21 +86,29 @@ const App: React.FC = () => {
   );
 };
 
-const episodeLoader: LoaderFunction = ({ params }) => {
+const episodeLoader: LoaderFunction = async ({ params }) => {
   // check if the episodeId is a valid one.
   // if the episode is not found, throw an error.
   const id = params.episodeId ?? "";
+  if (id === "") {
+    throw new ResponseError(
+      new Response("Episode not found.", { status: 404 }),
+    );
+  }
 
-  // Prefetch the episode info.
-  void queryClient.ensureQueryData({
+  // Await the episode info so we can be sure that it exists.
+  const episodeInfo = await queryClient.ensureQueryData({
     queryKey: buildKey(episodeInfoFactory.queryKey, { id }),
     queryFn: async () => await episodeInfoFactory.queryFn({ id }),
     staleTime: Infinity,
   });
 
   // Prefetch the top 10 ranked teams' rating histories.
   void queryClient.ensureQueryData({
-    queryKey: buildKey(searchTeamsFactory.queryKey, { episodeId: id, page: 1 }),
+    queryKey: buildKey(searchTeamsFactory.queryKey, {
+      episodeId: id,
+      page: 1,
+    }),
     queryFn: async () =>
       await searchTeamsFactory.queryFn(
         { episodeId: id, page: 1 },
@@ -105,7 +117,7 @@ const episodeLoader: LoaderFunction = ({ params }) => {
       ),
   });
 
-  return null;
+  return episodeInfo;
 };
 
 const router = createBrowserRouter([
@@ -137,13 +149,14 @@ const router = createBrowserRouter([
   // Pages that will contain the episode sidebar and navbar (excl. account page)
   {
     element: <EpisodeLayout />,
-    errorElement: <ErrorBoundary />,
+    errorElement: <EpisodeNotFound />,
     path: "/:episodeId",
     loader: episodeLoader,
     children: [
       {
         // Pages that should only be visible when logged in
         element: <PrivateRoute />,
+        errorElement: <ErrorBoundary />,
         children: [
           {
             path: "submissions",
@@ -197,7 +210,7 @@ const router = createBrowserRouter([
       },
       {
         path: "*",
-        element: <NotFound />,
+        element: <PageNotFound />,
       },
     ],
   },

frontend2/src/components/EpisodeSwitcher.tsx

@@ -4,24 +4,27 @@ import Icon from "./elements/Icon";
 import { useEpisodeId } from "../contexts/EpisodeContext";
 import { isPresent } from "../utils/utilTypes";
 import { useNavigate } from "react-router-dom";
-import { useEpisodeList } from "../api/episode/useEpisode";
+import { useEpisodeInfo, useEpisodeList } from "../api/episode/useEpisode";
 import { useQueryClient } from "@tanstack/react-query";
-import toast from "react-hot-toast";
-import { episodeInfoFactory } from "../api/episode/episodeFactories";
-import { buildKey } from "../api/helpers";
+import Spinner from "./Spinner";
 
 const EpisodeSwitcher: React.FC = () => {
   const queryClient = useQueryClient();
   const { episodeId, setEpisodeId } = useEpisodeId();
-  const { data: episodeList } = useEpisodeList({ page: 1 }, queryClient);
+  const episodeList = useEpisodeList({ page: 1 }, queryClient);
+  const episodeInfo = useEpisodeInfo({ id: episodeId });
   const navigate = useNavigate();
   const idToName = useMemo(
     () =>
       new Map(
-        (episodeList?.results ?? []).map((ep) => [ep.name_short, ep.name_long]),
+        (episodeList?.data?.results ?? []).map((ep) => [
+          ep.name_short,
+          ep.name_long,
+        ]),
       ),
     [episodeList],
   );
+
   if (!isPresent(episodeList)) {
     return null;
   }
@@ -30,27 +33,24 @@ const EpisodeSwitcher: React.FC = () => {
       <Listbox
         value={episodeId}
         onChange={(newEpisodeId) => {
-          (async () =>
-            await queryClient.fetchQuery({
-              queryKey: buildKey(episodeInfoFactory.queryKey, {
-                id: newEpisodeId,
-              }),
-              queryFn: async () =>
-                await episodeInfoFactory.queryFn({ id: newEpisodeId }),
-            }))().catch((e) => toast.error((e as Error).message));
           setEpisodeId(newEpisodeId);
           navigate(`/${newEpisodeId}/home`);
         }}
       >
         <div className="relative">
           <Listbox.Button
-            className={`relative h-9 w-full truncate rounded-full bg-gray-900/80 py-1.5
+            className={`relative flex h-9 w-full flex-row items-center justify-center gap-3 truncate rounded-full bg-gray-900/80 py-1.5
             pl-3.5 pr-8 text-left text-gray-100 shadow-sm focus:outline-none
             sm:text-sm sm:leading-6`}
           >
             <span className="text-sm font-semibold">
               {idToName.get(episodeId)}
             </span>
+            {(episodeList.isLoading || episodeInfo.isLoading) && (
+              <div className="my-1 flex w-full justify-center">
+                <Spinner size="xs" />
+              </div>
+            )}
             <div
               className="absolute inset-y-0 right-0 mr-2 flex transform items-center
               transition duration-300 ui-open:rotate-180"
@@ -69,7 +69,7 @@ const EpisodeSwitcher: React.FC = () => {
               bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none
               sm:max-h-60 sm:text-sm"
             >
-              {episodeList?.results?.map((ep) => (
+              {episodeList?.data?.results?.map((ep) => (
                 <Listbox.Option
                   className="flex cursor-default flex-row justify-between py-1.5 pl-4 pr-2 ui-active:bg-cyan-100"
                   key={ep.name_short}

frontend2/src/views/EpisodeNotFound.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { DEFAULT_EPISODE } from "utils/constants";
+
+const EpisodeNotFound: React.FC = () => {
+  return (
+    <div className="flex h-full w-full flex-col overflow-auto p-6">
+      <p>
+        That episode was not found.{" "}
+        <Link to={`/${DEFAULT_EPISODE}/home`} className="hover:underline">
+          Go Home?
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default EpisodeNotFound;

frontend2/src/views/Login.tsx

@@ -75,7 +75,7 @@ const Login: React.FC = () => {
         <div>
           <hr />
           <div className="mt-3 flex flex-row justify-between text-sm text-cyan-600">
-            <Link to="/forgot_password">Forgot password?</Link>
+            <Link to="/password_forgot">Forgot password?</Link>
             <Link to={episodeId !== undefined ? `/${episodeId}/home` : "/"}>
               Back to home
             </Link>

frontend2/src/views/PageNotFound.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { DEFAULT_EPISODE } from "utils/constants";
+
+const PageNotFound: React.FC = () => {
+  return (
+    <div className="flex h-full w-full flex-col overflow-auto p-6">
+      <p>
+        That page was not found.{" "}
+        <NavLink to={`/${DEFAULT_EPISODE}/home`} className="hover:underline">
+          Go Home?
+        </NavLink>
+      </p>
+    </div>
+  );
+};
+
+export default PageNotFound;