address code review

frontend2/src/App.tsx

@@ -18,9 +18,9 @@ import { DEFAULT_EPISODE } from "./utils/constants";
 import NotFound from "./views/NotFound";
 
 const App: React.FC = () => {
-  const [episode, setEpisode] = useState(DEFAULT_EPISODE);
+  const [episodeId, setEpisodeId] = useState(DEFAULT_EPISODE);
   return (
-    <EpisodeContext.Provider value={{ episode, setEpisode }}>
+    <EpisodeContext.Provider value={{ episodeId, setEpisodeId }}>
       <RouterProvider router={router} />
     </EpisodeContext.Provider>
   );
@@ -38,12 +38,12 @@ const router = createBrowserRouter([
     element: <EpisodeLayout />,
     children: [
       // Pages that should always be visible
-      // TODO: /:episode/resources, /:episode/tournaments, /:episode/rankings, /:episode/queue
-      { path: "/:episode/home", element: <Home /> },
-      { path: "/:episode/quickstart", element: <QuickStart /> },
-      { path: "/:episode/*", element: <NotFound /> },
+      // TODO: /:episodeId/resources, /:episodeId/tournaments, /:episodeId/rankings, /:episodeId/queue
+      { path: "/:episodeId/home", element: <Home /> },
+      { path: "/:episodeId/quickstart", element: <QuickStart /> },
+      { path: "/:episodeId/*", element: <NotFound /> },
       // Pages that should only be visible when logged in
-      // TODO: /:episode/team, /:episode/submissions, /:episode/scrimmaging
+      // TODO: /:episodeId/team, /:episodeId/submissions, /:episodeId/scrimmaging
       { path: "/account", element: <Account /> },
       // etc
     ],

frontend2/src/components/EpisodeLayout.tsx

@@ -8,9 +8,9 @@ import { EpisodeContext } from "../contexts/EpisodeContext";
 // Child route components are rendered with <Outlet />
 const EpisodeLayout: React.FC = () => {
   const episodeContext = useContext(EpisodeContext);
-  const { episode } = useParams();
-  if (episode !== undefined && episode !== episodeContext.episode) {
-    episodeContext.setEpisode(episode);
+  const { episodeId } = useParams();
+  if (episodeId !== undefined && episodeId !== episodeContext.episodeId) {
+    episodeContext.setEpisodeId(episodeId);
   }
   return (
     <div className="h-screen">

frontend2/src/components/sidebar/__test__/Sidebar.test.tsx

@@ -5,20 +5,20 @@ import { DEFAULT_EPISODE } from "../../../utils/constants";
 import { EpisodeContext } from "../../../contexts/EpisodeContext";
 import { MemoryRouter } from "react-router-dom";
 
-test('should link to default episode', () => {
+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('should collapse sidebar', () => {
+test('UI: should collapse sidebar', () => {
   render(<MemoryRouter><Sidebar collapsed={true} /></MemoryRouter>);
   expect(screen.queryByText('Home')).toBeNull();
 });
 
-test('should link to episode in surrounding context', () => {
+test('UI: should link to episode in surrounding context', () => {
   render(<MemoryRouter>
-    <EpisodeContext.Provider value={{ episode: "something", setEpisode: (_) => undefined }}>
+    <EpisodeContext.Provider value={{ episodeId: "something", setEpisodeId: (_) => undefined }}>
       <Sidebar />
     </EpisodeContext.Provider></MemoryRouter>
   );

frontend2/src/components/sidebar/index.tsx

@@ -16,8 +16,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   collapsed
 }) => {
   collapsed = collapsed ?? false;
-  const { episode } = useContext(EpisodeContext);
-  const linkBase = `/${episode}/`;
+  const { episodeId } = useContext(EpisodeContext);
+  const linkBase = `/${episodeId}/`;
 
   return (
     collapsed ? null : (

frontend2/src/contexts/EpisodeContext.ts

@@ -3,8 +3,8 @@ import { DEFAULT_EPISODE } from "../utils/constants";
 
 export const EpisodeContext = createContext({
   // the default episode.
-  episode: DEFAULT_EPISODE,
-  setEpisode: (episode: string) => {
+  episodeId: DEFAULT_EPISODE,
+  setEpisodeId: (episodeId: string) => {
     console.log("default episode");
   },
 });

frontend2/src/views/Account.tsx

@@ -2,8 +2,8 @@ import React, { useContext } from "react";
 import { EpisodeContext } from "../contexts/EpisodeContext";
 
 const Account: React.FC = () => {
-  const { episode } = useContext(EpisodeContext);
-  return <p>the episode is {episode} and this is the account page</p>;
+  const { episodeId } = useContext(EpisodeContext);
+  return <p>the episode is {episodeId} and this is the account page</p>;
 };
 
 export default Account;

frontend2/src/views/QuickStart.tsx

@@ -1,8 +1,6 @@
-import React, { useContext } from "react";
-import { EpisodeContext } from "../contexts/EpisodeContext";
+import React from "react";
 
 const QuickStart: React.FC = () => {
-  const { episode, setEpisode } = useContext(EpisodeContext);
   return <p>quickstart page</p>;
 };