Add team sidebar display conditions (#689)

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

@@ -2,15 +2,60 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import Sidebar from "../";
 import { EpisodeIdContext } from "../../../contexts/EpisodeContext";
+import { CurrentUserContext } from "../../../contexts/CurrentUserContext";
+import {
+  CurrentTeamContext,
+  TeamStateEnum,
+} from "../../../contexts/CurrentTeamContext";
 import { MemoryRouter } from "react-router-dom";
+import { Status526Enum } from "../../../utils/types";
+
+const mem = {
+  id: 123,
+  username: "theuser",
+  is_staff: false,
+};
+const faketeam = {
+  id: 123,
+  episode: "bc23",
+  name: "theteam",
+  members: [mem],
+  join_key: "abc",
+  status: Status526Enum.O,
+};
+const fakeuser = {
+  id: 123,
+  username: "theuser",
+  email: "[email protected]",
+  first_name: "the",
+  last_name: "user",
+  is_staff: false,
+};
 
 test("UI: should collapse sidebar", () => {
   render(
     <MemoryRouter>
       <EpisodeIdContext.Provider
         value={{ episodeId: "something", setEpisodeId: (_) => undefined }}
       >
-        <Sidebar collapsed={true} />
+        <CurrentTeamContext.Provider
+          value={{ teamState: TeamStateEnum.IN_TEAM, team: faketeam }}
+        >
+          <CurrentUserContext.Provider
+            value={{
+              authState: "loading",
+              user: fakeuser,
+              login: (_) => {
+                console.log();
+              },
+              logout: () => {
+                console.log();
+              },
+            }}
+          >
+            <Sidebar collapsed={true} />
+          </CurrentUserContext.Provider>
+        </CurrentTeamContext.Provider>
       </EpisodeIdContext.Provider>
     </MemoryRouter>,
   );
@@ -23,7 +68,24 @@ test("UI: should link to episode in surrounding context", () => {
       <EpisodeIdContext.Provider
         value={{ episodeId: "something", setEpisodeId: (_) => undefined }}
       >
-        <Sidebar />
+        <CurrentTeamContext.Provider
+          value={{ teamState: TeamStateEnum.IN_TEAM, team: faketeam }}
+        >
+          <CurrentUserContext.Provider
+            value={{
+              authState: "loading",
+              user: fakeuser,
+              login: (_) => {
+                console.log();
+              },
+              logout: () => {
+                console.log();
+              },
+            }}
+          >
+            <Sidebar />
+          </CurrentUserContext.Provider>
+        </CurrentTeamContext.Provider>
       </EpisodeIdContext.Provider>
     </MemoryRouter>,
   );

frontend2/src/components/sidebar/index.tsx

@@ -3,6 +3,8 @@ import SidebarSection from "./SidebarSection";
 import SidebarItem from "./SidebarItem";
 import { useEpisodeId } from "../../contexts/EpisodeContext";
 import { type IconName } from "../elements/Icon";
+import { useCurrentUser } from "../../contexts/CurrentUserContext";
+import { useCurrentTeam } from "../../contexts/CurrentTeamContext";
 
 interface SidebarProps {
   collapsed?: boolean;
@@ -90,7 +92,28 @@ export const generateSidebarItems = (
 const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
   collapsed = collapsed ?? false;
   const { episodeId } = useEpisodeId();
+  const { user } = useCurrentUser();
+  const { team } = useCurrentTeam();
+  let teamManage;
 
+  // construct teamManage if needed
+  if (user !== undefined) {
+    if (team !== undefined) {
+      teamManage = (
+        <SidebarSection title="team management">
+          {generateSidebarItems(6, 8, episodeId)}
+        </SidebarSection>
+      );
+    } else {
+      teamManage = (
+        <SidebarSection title="team management">
+          {generateSidebarItems(6, 6, episodeId)}
+        </SidebarSection>
+      );
+    }
+  }
+
+  // generate sidebar
   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">
       <SidebarSection title="">
@@ -99,9 +122,7 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
       <SidebarSection title="compete">
         {generateSidebarItems(3, 5, episodeId)}
       </SidebarSection>
-      <SidebarSection title="team management">
-        {generateSidebarItems(6, 8, episodeId)}
-      </SidebarSection>
+      {teamManage}
     </nav>
   );
 };