From 6eec880c9a3317830613c3328c2c3df9d0fd7cd5 Mon Sep 17 00:00:00 2001
From: Serena Li <40174697+acrantel@users.noreply.github.com>
Date: Sat, 30 Sep 2023 14:28:11 -0400
Subject: [PATCH] Add team context, update user/episode context (#679)

---
 frontend2/src/App.tsx                         | 19 +++++--
 .../src/components/CurrentUserProvider.tsx    | 29 +++++-----
 frontend2/src/components/EpisodeLayout.tsx    | 10 ++--
 frontend2/src/components/Header.tsx           |  7 +--
 .../src/components/compete/RatingDelta.tsx    |  6 +-
 .../sidebar/__test__/Sidebar.test.tsx         | 28 +++------
 frontend2/src/components/sidebar/index.tsx    |  6 +-
 frontend2/src/contexts/CurrentTeamContext.ts  | 30 ++++++++++
 .../src/contexts/CurrentTeamProvider.tsx      | 44 ++++++++++++++
 frontend2/src/contexts/EpisodeContext.ts      | 39 +++++++++----
 frontend2/src/contexts/EpisodeProvider.tsx    | 57 +++++++++++++++++++
 frontend2/src/utils/api/team.ts               |  9 +++
 frontend2/src/views/Account.tsx               |  6 +-
 frontend2/src/views/Login.tsx                 |  6 +-
 frontend2/src/views/Queue.tsx                 |  6 +-
 frontend2/src/views/Rankings.tsx              |  6 +-
 frontend2/src/views/Register.tsx              |  6 +-
 17 files changed, 235 insertions(+), 79 deletions(-)
 create mode 100644 frontend2/src/contexts/CurrentTeamContext.ts
 create mode 100644 frontend2/src/contexts/CurrentTeamProvider.tsx
 create mode 100644 frontend2/src/contexts/EpisodeProvider.tsx

diff --git a/frontend2/src/App.tsx b/frontend2/src/App.tsx
index f50897731..ad3479985 100644
--- a/frontend2/src/App.tsx
+++ b/frontend2/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import EpisodeLayout from "./components/EpisodeLayout";
 import Home from "./views/Home";
 import Logout from "./views/Logout";
@@ -8,7 +8,6 @@ import PasswordChange from "./views/PasswordChange";
 import Account from "./views/Account";
 import Login from "./views/Login";
 import QuickStart from "./views/QuickStart";
-import { EpisodeContext } from "./contexts/EpisodeContext";
 import {
   RouterProvider,
   createBrowserRouter,
@@ -22,14 +21,18 @@ import { CurrentUserProvider } from "./components/CurrentUserProvider";
 import PrivateRoute from "./components/PrivateRoute";
 import Queue from "./views/Queue";
 import Resources from "./views/Resources";
+import MyTeam from "./views/MyTeam";
+import { CurrentTeamProvider } from "./contexts/CurrentTeamProvider";
+import { EpisodeProvider } from "./contexts/EpisodeProvider";
 
 const App: React.FC = () => {
-  const [episodeId, setEpisodeId] = useState(DEFAULT_EPISODE);
   return (
     <CurrentUserProvider>
-      <EpisodeContext.Provider value={{ episodeId, setEpisodeId }}>
-        <RouterProvider router={router} />
-      </EpisodeContext.Provider>
+      <EpisodeProvider>
+        <CurrentTeamProvider>
+          <RouterProvider router={router} />
+        </CurrentTeamProvider>
+      </EpisodeProvider>
     </CurrentUserProvider>
   );
 };
@@ -49,6 +52,10 @@ const router = createBrowserRouter([
       {
         element: <EpisodeLayout />,
         children: [
+          {
+            path: "/:episodeId/team",
+            element: <MyTeam />,
+          },
           // TODO: /:episodeId/team, /:episodeId/submissions, /:episodeId/scrimmaging
         ],
       },
diff --git a/frontend2/src/components/CurrentUserProvider.tsx b/frontend2/src/components/CurrentUserProvider.tsx
index 297cc4f66..84b1d6cef 100644
--- a/frontend2/src/components/CurrentUserProvider.tsx
+++ b/frontend2/src/components/CurrentUserProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { type UserPrivate } from "../utils/types";
 import {
   AuthStateEnum,
@@ -20,19 +20,20 @@ export const CurrentUserProvider: React.FC<{ children: React.ReactNode }> = ({
     authState: AuthStateEnum.LOADING,
   });
 
-  const login = (user: UserPrivate): void => {
+  // useCallback to avoid redefining login/logout each rerender
+  const login = useCallback((user: UserPrivate): void => {
     setUserData({
       user,
       authState: AuthStateEnum.AUTHENTICATED,
     });
-  };
-  const logout = (): void => {
+  }, []);
+  const logout = useCallback((): void => {
     Cookies.remove("access");
     Cookies.remove("refresh");
     setUserData({
       authState: AuthStateEnum.NOT_AUTHENTICATED,
     });
-  };
+  }, []);
 
   useEffect(() => {
     const checkLoggedIn = async (): Promise<void> => {
@@ -51,15 +52,17 @@ export const CurrentUserProvider: React.FC<{ children: React.ReactNode }> = ({
     void checkLoggedIn();
   }, []);
 
+  const providedValue = useMemo(
+    () => ({
+      ...userData,
+      login,
+      logout,
+    }),
+    [login, logout, userData],
+  );
+
   return (
-    <CurrentUserContext.Provider
-      value={{
-        authState: userData.authState,
-        user: userData.user,
-        login,
-        logout,
-      }}
-    >
+    <CurrentUserContext.Provider value={providedValue}>
       {children}
     </CurrentUserContext.Provider>
   );
diff --git a/frontend2/src/components/EpisodeLayout.tsx b/frontend2/src/components/EpisodeLayout.tsx
index b51fea020..0d88dd1cc 100644
--- a/frontend2/src/components/EpisodeLayout.tsx
+++ b/frontend2/src/components/EpisodeLayout.tsx
@@ -1,13 +1,13 @@
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import Header from "./Header";
 import Sidebar from "./sidebar";
 import { Outlet, useParams } from "react-router-dom";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 
 // This component contains the Header and SideBar.
 // Child route components are rendered with <Outlet />
 const EpisodeLayout: React.FC = () => {
-  const episodeContext = useContext(EpisodeContext);
+  const episodeContext = useEpisodeId();
   const { episodeId } = useParams();
   useEffect(() => {
     if (episodeId !== undefined && episodeId !== episodeContext.episodeId) {
@@ -15,10 +15,10 @@ const EpisodeLayout: React.FC = () => {
     }
   }, [episodeId]);
   return (
-    <div className="h-screen overflow-auto">
+    <div className="h-screen">
       <Header />
       <Sidebar />
-      <div className="fixed right-0 h-full pt-16 sm:left-52">
+      <div className="h-full pt-16 sm:pl-52">
         <Outlet />
       </div>
     </div>
diff --git a/frontend2/src/components/Header.tsx b/frontend2/src/components/Header.tsx
index 7f9e4c1af..356d04dff 100644
--- a/frontend2/src/components/Header.tsx
+++ b/frontend2/src/components/Header.tsx
@@ -1,14 +1,14 @@
-import React, { Fragment, useContext } from "react";
+import React, { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { Link, NavLink } from "react-router-dom";
 import { AuthStateEnum, useCurrentUser } from "../contexts/CurrentUserContext";
 import Icon from "./elements/Icon";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 import { SIDEBAR_ITEM_DATA } from "./sidebar";
 
 const Header: React.FC = () => {
   const { authState, logout, user } = useCurrentUser();
-  const { episodeId } = useContext(EpisodeContext);
+  const { episodeId } = useEpisodeId();
 
   return (
     <nav className="fixed top-0 h-16 w-full bg-gray-700">
@@ -80,7 +80,6 @@ const Header: React.FC = () => {
                 alt="Battlecode Logo"
               />
             </div>
-            <div className="hidden sm:ml-6 sm:block"></div>
           </div>
           {/* profile menu (if the user is logged in) */}
           {authState === AuthStateEnum.AUTHENTICATED && (
diff --git a/frontend2/src/components/compete/RatingDelta.tsx b/frontend2/src/components/compete/RatingDelta.tsx
index 84152a005..372989a09 100644
--- a/frontend2/src/components/compete/RatingDelta.tsx
+++ b/frontend2/src/components/compete/RatingDelta.tsx
@@ -1,7 +1,7 @@
 import { NavLink } from "react-router-dom";
 import { type MatchParticipant } from "../../utils/types";
-import React, { useContext } from "react";
-import { EpisodeContext } from "../../contexts/EpisodeContext";
+import React from "react";
+import { useEpisodeId } from "../../contexts/EpisodeContext";
 
 interface RatingDeltaProps {
   participant: MatchParticipant;
@@ -9,7 +9,7 @@ interface RatingDeltaProps {
 }
 
 const RatingDelta: React.FC<RatingDeltaProps> = ({ participant, ranked }) => {
-  const episodeId = useContext(EpisodeContext).episodeId;
+  const { episodeId } = useEpisodeId();
 
   const newRating = ranked
     ? Math.round(participant.rating)
diff --git a/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx b/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx
index c4630b6d8..1925573b8 100644
--- a/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx
+++ b/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx
@@ -1,29 +1,17 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import Sidebar from "../";
-import { DEFAULT_EPISODE } from "../../../utils/constants";
-import { EpisodeContext } from "../../../contexts/EpisodeContext";
+import { EpisodeIdContext } from "../../../contexts/EpisodeContext";
 import { MemoryRouter } from "react-router-dom";
 
-test("UI: should link to default episode", () => {
-  render(
-    <MemoryRouter>
-      <Sidebar />
-    </MemoryRouter>,
-  );
-  const linkElement = screen
-    .getByText("Resources")
-    .closest("a")
-    ?.getAttribute("href");
-  expect(linkElement).toEqual(
-    expect.stringContaining(`/${DEFAULT_EPISODE}/resources`),
-  );
-});
-
 test("UI: should collapse sidebar", () => {
   render(
     <MemoryRouter>
-      <Sidebar collapsed={true} />
+      <EpisodeIdContext.Provider
+        value={{ episodeId: "something", setEpisodeId: (_) => undefined }}
+      >
+        <Sidebar collapsed={true} />
+      </EpisodeIdContext.Provider>
     </MemoryRouter>,
   );
   expect(screen.queryByText("Home")).toBeNull();
@@ -32,11 +20,11 @@ test("UI: should collapse sidebar", () => {
 test("UI: should link to episode in surrounding context", () => {
   render(
     <MemoryRouter>
-      <EpisodeContext.Provider
+      <EpisodeIdContext.Provider
         value={{ episodeId: "something", setEpisodeId: (_) => undefined }}
       >
         <Sidebar />
-      </EpisodeContext.Provider>
+      </EpisodeIdContext.Provider>
     </MemoryRouter>,
   );
   const linkElement = screen
diff --git a/frontend2/src/components/sidebar/index.tsx b/frontend2/src/components/sidebar/index.tsx
index 1740e697b..d2d14c6ca 100644
--- a/frontend2/src/components/sidebar/index.tsx
+++ b/frontend2/src/components/sidebar/index.tsx
@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 import SidebarSection from "./SidebarSection";
 import SidebarItem from "./SidebarItem";
-import { EpisodeContext } from "../../contexts/EpisodeContext";
+import { useEpisodeId } from "../../contexts/EpisodeContext";
 import { type IconName } from "../elements/Icon";
 
 interface SidebarProps {
@@ -89,7 +89,7 @@ export const generateSidebarItems = (
 // IMPORTANT: When changing this file, also remember to change the mobile menu that appears on small screens.
 const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
   collapsed = collapsed ?? false;
-  const { episodeId } = useContext(EpisodeContext);
+  const { episodeId } = useEpisodeId();
 
   return collapsed ? null : (
     <nav className="fixed top-16 z-10 hidden h-full w-52 flex-col gap-8 bg-gray-50 py-4 drop-shadow-[2px_0_2px_rgba(0,0,0,0.25)] sm:flex">
diff --git a/frontend2/src/contexts/CurrentTeamContext.ts b/frontend2/src/contexts/CurrentTeamContext.ts
new file mode 100644
index 000000000..567f02b28
--- /dev/null
+++ b/frontend2/src/contexts/CurrentTeamContext.ts
@@ -0,0 +1,30 @@
+import { createContext, useContext } from "react";
+import { type TeamPrivate } from "../utils/types";
+
+export enum TeamStateEnum {
+  // the current user is not part of a team (or is not logged in)
+  NO_TEAM = "no_team",
+  // the current user is part of a team
+  IN_TEAM = "has_team",
+}
+
+interface CurrentTeamContextType {
+  teamState: TeamStateEnum;
+  team?: TeamPrivate;
+}
+
+export const CurrentTeamContext = createContext<CurrentTeamContextType | null>(
+  null,
+);
+
+export const useCurrentTeam = (): CurrentTeamContextType => {
+  const currentTeamContext = useContext(CurrentTeamContext);
+
+  if (currentTeamContext === null) {
+    throw new Error(
+      "useCurrentTeam has to be used within <CurrentTeamProvider>",
+    );
+  }
+
+  return currentTeamContext;
+};
diff --git a/frontend2/src/contexts/CurrentTeamProvider.tsx b/frontend2/src/contexts/CurrentTeamProvider.tsx
new file mode 100644
index 000000000..d8f3172c1
--- /dev/null
+++ b/frontend2/src/contexts/CurrentTeamProvider.tsx
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import { type TeamPrivate } from "../utils/types";
+import { AuthStateEnum, useCurrentUser } from "../contexts/CurrentUserContext";
+import { CurrentTeamContext, TeamStateEnum } from "./CurrentTeamContext";
+import { useEpisodeId } from "./EpisodeContext";
+import { retrieveTeam } from "../utils/api/team";
+
+export const CurrentTeamProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [teamData, setTeamData] = useState<{
+    team?: TeamPrivate;
+    teamState: TeamStateEnum;
+  }>({
+    teamState: TeamStateEnum.NO_TEAM,
+  });
+  const { authState } = useCurrentUser();
+  const { episodeId } = useEpisodeId();
+
+  useEffect(() => {
+    const loadTeam = async (): Promise<void> => {
+      try {
+        const team = await retrieveTeam(episodeId);
+        setTeamData({ team, teamState: TeamStateEnum.IN_TEAM });
+      } catch {
+        setTeamData({ teamState: TeamStateEnum.NO_TEAM });
+      }
+    };
+
+    if (authState === AuthStateEnum.AUTHENTICATED) {
+      void loadTeam();
+    } else {
+      setTeamData({
+        teamState: TeamStateEnum.NO_TEAM,
+      });
+    }
+  }, [authState, episodeId]);
+
+  return (
+    <CurrentTeamContext.Provider value={teamData}>
+      {children}
+    </CurrentTeamContext.Provider>
+  );
+};
diff --git a/frontend2/src/contexts/EpisodeContext.ts b/frontend2/src/contexts/EpisodeContext.ts
index 9e8efdb5d..2f77b5364 100644
--- a/frontend2/src/contexts/EpisodeContext.ts
+++ b/frontend2/src/contexts/EpisodeContext.ts
@@ -1,10 +1,29 @@
-import { createContext } from "react";
-import { DEFAULT_EPISODE } from "../utils/constants";
-
-export const EpisodeContext = createContext({
-  // the default episode.
-  episodeId: DEFAULT_EPISODE,
-  setEpisodeId: (episodeId: string) => {
-    console.log("default episode");
-  },
-});
+import { createContext, useContext } from "react";
+import { type Episode } from "../utils/types";
+import { type Maybe } from "../utils/utilTypes";
+
+interface EpisodeIdContextType {
+  episodeId: string;
+  setEpisodeId: (episodeId: string) => void;
+}
+
+export const EpisodeContext = createContext<Maybe<Episode>>(undefined);
+export const EpisodeIdContext = createContext<EpisodeIdContextType | null>(
+  null,
+);
+
+// Use this function to retrieve full episode information. If the api call to
+// retrieve full episode information has not completed, then
+// episodeContext.episode will be undefined.
+export const useEpisode = (): Maybe<Episode> => {
+  return useContext(EpisodeContext);
+};
+
+// Use this function to retrieve and update the episodeId.
+export const useEpisodeId = (): EpisodeIdContextType => {
+  const episodeIdContext = useContext(EpisodeIdContext);
+  if (episodeIdContext === null) {
+    throw new Error("useEpisodeId has to be used within <EpisodeProvider>");
+  }
+  return episodeIdContext;
+};
diff --git a/frontend2/src/contexts/EpisodeProvider.tsx b/frontend2/src/contexts/EpisodeProvider.tsx
new file mode 100644
index 000000000..ca6f28434
--- /dev/null
+++ b/frontend2/src/contexts/EpisodeProvider.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { type Episode } from "../utils/types";
+import { EpisodeContext, EpisodeIdContext } from "./EpisodeContext";
+import { DEFAULT_EPISODE } from "../utils/constants";
+import { getEpisodeInfo } from "../utils/api/episode";
+
+export const EpisodeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  // episodeId is set by the EpisodeLayout component to the episode in the url
+  const [episodeId, setEpisodeId] = useState<string>(DEFAULT_EPISODE);
+  // on episodeId changes (or initial load), we will fetch information for the episode
+  const [episode, setEpisode] = useState<Episode>();
+
+  useEffect(() => {
+    // used to avoid data races when loading episodes.
+    let isActiveLookup = true;
+    const loadEpisodeInfo = async (): Promise<void> => {
+      try {
+        console.log("episode id in loadEpisodeInfo:", episodeId);
+        const episode = await getEpisodeInfo(episodeId);
+        if (isActiveLookup) {
+          setEpisode(episode);
+        }
+      } catch {
+        console.error(`Could not load episode ${episodeId}`);
+        if (isActiveLookup) {
+          setEpisode(undefined);
+        }
+      }
+    };
+
+    setEpisode(undefined);
+    void loadEpisodeInfo();
+    return () => {
+      // cleanup function ensures we don't load wrong episode data
+      isActiveLookup = false;
+    };
+  }, [episodeId]);
+
+  // avoid recreating context value if episode id hasn't changed
+  const episodeIdContextValue = useMemo(
+    () => ({
+      episodeId,
+      setEpisodeId,
+    }),
+    [episodeId, setEpisodeId],
+  );
+
+  return (
+    <EpisodeIdContext.Provider value={episodeIdContextValue}>
+      <EpisodeContext.Provider value={episode}>
+        {children}
+      </EpisodeContext.Provider>
+    </EpisodeIdContext.Provider>
+  );
+};
diff --git a/frontend2/src/utils/api/team.ts b/frontend2/src/utils/api/team.ts
index 59a2ee78e..856a61508 100644
--- a/frontend2/src/utils/api/team.ts
+++ b/frontend2/src/utils/api/team.ts
@@ -5,6 +5,7 @@ import {
   type PaginatedTeamPublicList,
   type TeamTListRequest,
   type TeamTAvatarCreateRequest,
+  type TeamPrivate,
 } from "../types";
 import { DEFAULT_API_CONFIGURATION } from "./helpers";
 
@@ -54,6 +55,14 @@ export const leaveTeam = async (episodeId: string): Promise<void> => {
   await API.teamTLeaveCreate({ episodeId });
 };
 
+/**
+ * Get the current user's team for an episode.
+ * @param episodeId The episode of the team to retrieve.
+ */
+export const retrieveTeam = async (episodeId: string): Promise<TeamPrivate> => {
+  return await API.teamTMeRetrieve({ episodeId });
+};
+
 // -- TEAM STATS --//
 
 // TODO: implement rankings history
diff --git a/frontend2/src/views/Account.tsx b/frontend2/src/views/Account.tsx
index a6b41d31e..ad4f998fe 100644
--- a/frontend2/src/views/Account.tsx
+++ b/frontend2/src/views/Account.tsx
@@ -1,8 +1,8 @@
-import React, { useContext } from "react";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import React from "react";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 
 const Account: React.FC = () => {
-  const { episodeId } = useContext(EpisodeContext);
+  const { episodeId } = useEpisodeId();
   return <p>the episode is {episodeId} and this is the account page</p>;
 };
 
diff --git a/frontend2/src/views/Login.tsx b/frontend2/src/views/Login.tsx
index 872211a4e..124a365b6 100644
--- a/frontend2/src/views/Login.tsx
+++ b/frontend2/src/views/Login.tsx
@@ -1,11 +1,11 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Input from "../components/elements/Input";
 import Button from "../components/elements/Button";
 import { login as apiLogin } from "../utils/api/auth";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { FIELD_REQUIRED_ERROR_MSG } from "../utils/constants";
 import { Link, useNavigate } from "react-router-dom";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 import { useCurrentUser, AuthStateEnum } from "../contexts/CurrentUserContext";
 import { type Maybe } from "../utils/utilTypes";
 import { getUserUserProfile } from "../utils/api/user";
@@ -17,7 +17,7 @@ interface LoginFormInput {
 
 const Login: React.FC = () => {
   const { register, handleSubmit } = useForm<LoginFormInput>();
-  const { episodeId } = useContext(EpisodeContext);
+  const { episodeId } = useEpisodeId();
   const { login, authState } = useCurrentUser();
   const [loginError, setLoginError] = useState<Maybe<string>>();
 
diff --git a/frontend2/src/views/Queue.tsx b/frontend2/src/views/Queue.tsx
index da4f1e9be..2d474108e 100644
--- a/frontend2/src/views/Queue.tsx
+++ b/frontend2/src/views/Queue.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { PageTitle } from "../components/elements/BattlecodeStyle";
 import type {
   PaginatedTeamPublicList,
@@ -6,7 +6,7 @@ import type {
 } from "../utils/types";
 import { useSearchParams } from "react-router-dom";
 import { getAllMatches, getScrimmagesByTeam } from "../utils/api/compete";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 import BattlecodeTable from "../components/BattlecodeTable";
 import BattlecodeTableBottomElement from "../components/BattlecodeTableBottomElement";
 import Button from "../components/elements/Button";
@@ -18,7 +18,7 @@ import AsyncSelectMenu from "../components/elements/AsyncSelectMenu";
 import type { Maybe } from "../utils/utilTypes";
 
 const Queue: React.FC = () => {
-  const episodeId = useContext(EpisodeContext).episodeId;
+  const { episodeId } = useEpisodeId();
 
   const [queryParams, setQueryParams] = useSearchParams({
     page: "1",
diff --git a/frontend2/src/views/Rankings.tsx b/frontend2/src/views/Rankings.tsx
index 12fe29d7e..5bc38343a 100644
--- a/frontend2/src/views/Rankings.tsx
+++ b/frontend2/src/views/Rankings.tsx
@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from "react";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import React, { useEffect, useState } from "react";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 import BattlecodeTable from "../components/BattlecodeTable";
 import { type PaginatedTeamPublicList } from "../utils/types";
 import BattlecodeTableBottomElement from "../components/BattlecodeTableBottomElement";
@@ -17,7 +17,7 @@ function trimString(str: string, maxLength: number): string {
 }
 
 const Rankings: React.FC = () => {
-  const episodeId = useContext(EpisodeContext).episodeId;
+  const { episodeId } = useEpisodeId();
 
   const [searchText, setSearchText] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(true);
diff --git a/frontend2/src/views/Register.tsx b/frontend2/src/views/Register.tsx
index 4803eac12..d0d15b35c 100644
--- a/frontend2/src/views/Register.tsx
+++ b/frontend2/src/views/Register.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { createUser } from "../utils/api/user";
 import Input from "../components/elements/Input";
 import Button from "../components/elements/Button";
@@ -14,12 +14,12 @@ import {
 import { COUNTRIES } from "../utils/apiTypes";
 import { FIELD_REQUIRED_ERROR_MSG } from "../utils/constants";
 import { useNavigate } from "react-router-dom";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 
 const Register: React.FC = () => {
   const { login, authState } = useCurrentUser();
   const navigate = useNavigate();
-  const { episodeId } = useContext(EpisodeContext);
+  const { episodeId } = useEpisodeId();
   const {
     register,
     handleSubmit,