From 329829b8261ba3871b9eafaf28f5da4ece28b02a Mon Sep 17 00:00:00 2001
From: Serena Li <40174697+acrantel@users.noreply.github.com>
Date: Tue, 24 Oct 2023 16:29:18 -0400
Subject: [PATCH] Add the my team settings page (#680)

---
 frontend2/src/App.tsx                         |   2 +
 frontend2/src/components/Header.tsx           |   2 +-
 frontend2/src/components/JoinTeam.tsx         |   7 +
 frontend2/src/components/SectionCard.tsx      |  27 ++++
 .../elements/DescriptiveCheckbox.tsx          |  46 ++++++
 .../src/components/elements/FormLabel.tsx     |   2 +-
 frontend2/src/components/elements/Input.tsx   |   9 +-
 .../src/components/elements/SelectMenu.tsx    |   2 +-
 .../src/components/elements/TextArea.tsx      |  38 +++++
 frontend2/src/components/team/MemberList.tsx  |  57 +++++++
 frontend2/src/contexts/CurrentTeamContext.ts  |   2 +
 .../src/contexts/CurrentTeamProvider.tsx      |   4 +-
 frontend2/src/index.css                       |  10 +-
 frontend2/src/views/MyTeam.tsx                | 150 ++++++++++++++++++
 14 files changed, 347 insertions(+), 11 deletions(-)
 create mode 100644 frontend2/src/components/JoinTeam.tsx
 create mode 100644 frontend2/src/components/SectionCard.tsx
 create mode 100644 frontend2/src/components/elements/DescriptiveCheckbox.tsx
 create mode 100644 frontend2/src/components/elements/TextArea.tsx
 create mode 100644 frontend2/src/components/team/MemberList.tsx
 create mode 100644 frontend2/src/views/MyTeam.tsx

diff --git a/frontend2/src/App.tsx b/frontend2/src/App.tsx
index cb952ba4c..cf2c9ac7c 100644
--- a/frontend2/src/App.tsx
+++ b/frontend2/src/App.tsx
@@ -24,6 +24,7 @@ import Resources from "./views/Resources";
 import { CurrentTeamProvider } from "./contexts/CurrentTeamProvider";
 import { EpisodeProvider } from "./contexts/EpisodeProvider";
 import Scrimmaging from "./views/Scrimmaging";
+import MyTeam from "./views/MyTeam";
 
 const App: React.FC = () => {
   return (
@@ -55,6 +56,7 @@ const router = createBrowserRouter([
           // TODO: /:episodeId/submissions
           {
             path: "/:episodeId/team",
+            element: <MyTeam />,
           },
           { path: "/:episodeId/scrimmaging", element: <Scrimmaging /> },
         ],
diff --git a/frontend2/src/components/Header.tsx b/frontend2/src/components/Header.tsx
index 356d04dff..70d96cef3 100644
--- a/frontend2/src/components/Header.tsx
+++ b/frontend2/src/components/Header.tsx
@@ -11,7 +11,7 @@ const Header: React.FC = () => {
   const { episodeId } = useEpisodeId();
 
   return (
-    <nav className="fixed top-0 h-16 w-full bg-gray-700">
+    <nav className="fixed top-0 z-30 h-16 w-full bg-gray-700">
       <div className="w-full px-2 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
           {/* mobile menu */}
diff --git a/frontend2/src/components/JoinTeam.tsx b/frontend2/src/components/JoinTeam.tsx
new file mode 100644
index 000000000..843bd66e4
--- /dev/null
+++ b/frontend2/src/components/JoinTeam.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const JoinTeam: React.FC = () => {
+  return <div>you have no team! this page is tbd</div>;
+};
+
+export default JoinTeam;
diff --git a/frontend2/src/components/SectionCard.tsx b/frontend2/src/components/SectionCard.tsx
new file mode 100644
index 000000000..3111dcb0c
--- /dev/null
+++ b/frontend2/src/components/SectionCard.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface SectionCardProps {
+  children?: React.ReactNode;
+  title?: string;
+  className?: string;
+}
+
+const SectionCard: React.FC<SectionCardProps> = ({
+  children,
+  title,
+  className = "",
+}) => {
+  return (
+    <div className={className}>
+      {title !== undefined && (
+        <div className="mb-2 text-xl font-semibold tracking-wide">{title}</div>
+      )}
+      <div className={`relative rounded bg-white p-6 shadow-md`}>
+        <div className="absolute inset-0 h-full w-1 rounded-l bg-cyan-600" />
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default SectionCard;
diff --git a/frontend2/src/components/elements/DescriptiveCheckbox.tsx b/frontend2/src/components/elements/DescriptiveCheckbox.tsx
new file mode 100644
index 000000000..f9045f352
--- /dev/null
+++ b/frontend2/src/components/elements/DescriptiveCheckbox.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import Icon from "./Icon";
+import { Switch } from "@headlessui/react";
+
+interface DescriptiveCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  title: string;
+  description: string;
+}
+
+const DescriptiveCheckbox: React.FC<DescriptiveCheckboxProps> = ({
+  checked,
+  onChange,
+  title,
+  description,
+}) => {
+  return (
+    <Switch
+      checked={checked}
+      onChange={onChange}
+      className={`flex w-full
+      flex-row items-center justify-between gap-3 rounded-lg px-6 py-4 shadow ring-2 ring-inset
+       ring-cyan-600/20 transition-all ui-checked:bg-cyan-900/80 ui-checked:ring-0`}
+    >
+      <div className="flex flex-col gap-2 text-left">
+        <div className="font-semibold ui-checked:text-white ">{title}</div>
+        <div className="text-sm text-cyan-700 ui-checked:text-cyan-100">
+          {description}
+        </div>
+      </div>
+      <div
+        className="rounded-full p-1.5 ring-2 ring-inset ring-cyan-600/20 transition-all
+       ui-checked:bg-cyan-500/50 ui-checked:ring-0"
+      >
+        <Icon
+          name="check"
+          size="sm"
+          className={`text-cyan-100 opacity-0 ui-checked:opacity-100`}
+        />
+      </div>
+    </Switch>
+  );
+};
+
+export default DescriptiveCheckbox;
diff --git a/frontend2/src/components/elements/FormLabel.tsx b/frontend2/src/components/elements/FormLabel.tsx
index 1f7b76f97..1aa044717 100644
--- a/frontend2/src/components/elements/FormLabel.tsx
+++ b/frontend2/src/components/elements/FormLabel.tsx
@@ -7,7 +7,7 @@ const FormLabel: React.FC<{
 }> = ({ label, required = false, className }) => {
   return (
     <div
-      className={`flex flex-row items-center gap-1 text-sm font-medium leading-6 text-gray-700 ${
+      className={`flex flex-row items-center gap-1 text-sm leading-6 text-gray-700 ${
         className ?? ""
       }`}
     >
diff --git a/frontend2/src/components/elements/Input.tsx b/frontend2/src/components/elements/Input.tsx
index 0489d7544..10e0739fd 100644
--- a/frontend2/src/components/elements/Input.tsx
+++ b/frontend2/src/components/elements/Input.tsx
@@ -22,10 +22,15 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           <input
             ref={ref}
             aria-invalid={errorMessage !== undefined ? "true" : "false"}
-            className={`block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 ring-1 ring-inset
+            className={`block w-full rounded-md border-0 px-2 py-1.5 ring-1 ring-inset
             ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset
             focus:ring-cyan-600 sm:text-sm sm:leading-6
-            ${invalid ? "ring-red-500" : ""}`}
+            ${invalid ? "ring-red-500" : ""}
+            ${
+              rest.disabled === true
+                ? "bg-gray-400/20 text-gray-600"
+                : "text-gray-900"
+            }`}
             {...rest}
           />
         </div>
diff --git a/frontend2/src/components/elements/SelectMenu.tsx b/frontend2/src/components/elements/SelectMenu.tsx
index 9883aacb1..4bda266bb 100644
--- a/frontend2/src/components/elements/SelectMenu.tsx
+++ b/frontend2/src/components/elements/SelectMenu.tsx
@@ -62,7 +62,7 @@ function SelectMenu<T extends React.Key | null | undefined>({
             leaveTo="opacity-0"
           >
             <Listbox.Options
-              className="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-md
+              className="absolute z-10 ml-0 mt-1 max-h-48 w-full overflow-auto rounded-md
               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"
             >
diff --git a/frontend2/src/components/elements/TextArea.tsx b/frontend2/src/components/elements/TextArea.tsx
new file mode 100644
index 000000000..0e8d0e4c1
--- /dev/null
+++ b/frontend2/src/components/elements/TextArea.tsx
@@ -0,0 +1,38 @@
+import React, { forwardRef } from "react";
+import FormError from "./FormError";
+import FormLabel from "./FormLabel";
+
+interface TextAreaProps extends React.ComponentPropsWithoutRef<"textarea"> {
+  label?: string;
+  required?: boolean;
+  className?: string;
+  errorMessage?: string;
+}
+
+const Input = forwardRef<HTMLTextAreaElement, TextAreaProps>(function Input(
+  { label, required = false, className = "", errorMessage, ...rest },
+  ref,
+) {
+  const invalid = errorMessage !== undefined;
+  return (
+    <div className={`relative ${invalid ? "mb-1" : ""} ${className}`}>
+      <label>
+        <FormLabel label={label} required={required} />
+        <div className="relative rounded-md shadow-sm">
+          <textarea
+            ref={ref}
+            aria-invalid={errorMessage !== undefined ? "true" : "false"}
+            className={`block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 ring-1 ring-inset
+            ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset
+            focus:ring-cyan-600 sm:text-sm sm:leading-6
+            ${invalid ? "ring-red-500" : ""}`}
+            {...rest}
+          />
+        </div>
+        {invalid && <FormError message={errorMessage} />}
+      </label>
+    </div>
+  );
+});
+
+export default Input;
diff --git a/frontend2/src/components/team/MemberList.tsx b/frontend2/src/components/team/MemberList.tsx
new file mode 100644
index 000000000..510e36e79
--- /dev/null
+++ b/frontend2/src/components/team/MemberList.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { type UserPublic } from "../../utils/types";
+import { useCurrentUser } from "../../contexts/CurrentUserContext";
+
+interface MemberListProps {
+  members: UserPublic[];
+  className?: string;
+}
+
+interface UserRowProps {
+  user: UserPublic;
+  isCurrentUser?: boolean;
+}
+const UserRow: React.FC<UserRowProps> = ({ user, isCurrentUser = false }) => {
+  return (
+    <div className="flex flex-row items-center rounded">
+      <img
+        className="h-8 w-8 rounded-full bg-blue-100"
+        src={user.profile?.avatar_url}
+      />
+      <div className="ml-6 font-semibold">
+        {user.username}
+        {isCurrentUser && (
+          <span className="ml-1 font-normal text-gray-600">(you)</span>
+        )}
+        {user.is_staff && (
+          <span className="ml-1 font-normal text-gray-600">(staff)</span>
+        )}
+      </div>
+      <div className="ml-12 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap text-end text-gray-600">
+        {user.profile?.school}
+      </div>
+    </div>
+  );
+};
+
+// Displays a list of the users in members. If the current user is in members,
+// displays the current user first.
+const MemberList: React.FC<MemberListProps> = ({ members, className = "" }) => {
+  const { user: currentUser } = useCurrentUser();
+  return (
+    <div className={`flex flex-col gap-6 ${className}`}>
+      {/* display current user first */}
+      {currentUser !== undefined && (
+        <UserRow isCurrentUser user={currentUser} />
+      )}
+      {members.map(
+        (member) =>
+          member.id !== currentUser?.id && (
+            <UserRow key={member.id} user={member} />
+          ),
+      )}
+    </div>
+  );
+};
+
+export default MemberList;
diff --git a/frontend2/src/contexts/CurrentTeamContext.ts b/frontend2/src/contexts/CurrentTeamContext.ts
index 567f02b28..a8e9db873 100644
--- a/frontend2/src/contexts/CurrentTeamContext.ts
+++ b/frontend2/src/contexts/CurrentTeamContext.ts
@@ -2,6 +2,8 @@ import { createContext, useContext } from "react";
 import { type TeamPrivate } from "../utils/types";
 
 export enum TeamStateEnum {
+  // the current team state is still loading
+  LOADING = "loading",
   // 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
diff --git a/frontend2/src/contexts/CurrentTeamProvider.tsx b/frontend2/src/contexts/CurrentTeamProvider.tsx
index d8f3172c1..f18a0b4be 100644
--- a/frontend2/src/contexts/CurrentTeamProvider.tsx
+++ b/frontend2/src/contexts/CurrentTeamProvider.tsx
@@ -8,11 +8,13 @@ import { retrieveTeam } from "../utils/api/team";
 export const CurrentTeamProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  // invariant: team must be undefined when teamState is LOADING or NO_TEAM
+  // team must be defined when teamState is IN_TEAM
   const [teamData, setTeamData] = useState<{
     team?: TeamPrivate;
     teamState: TeamStateEnum;
   }>({
-    teamState: TeamStateEnum.NO_TEAM,
+    teamState: TeamStateEnum.LOADING,
   });
   const { authState } = useCurrentUser();
   const { episodeId } = useEpisodeId();
diff --git a/frontend2/src/index.css b/frontend2/src/index.css
index 8ff36ee89..aa3eb228e 100644
--- a/frontend2/src/index.css
+++ b/frontend2/src/index.css
@@ -1,20 +1,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Josefin+Sans:wght@100;300;400;500;700&display=swap");
 
 @layer base {
   h1 {
-    @apply pb-4 text-3xl font-medium text-gray-900;
+    @apply pb-4 text-3xl font-semibold text-gray-900;
   }
   h2 {
-    @apply pb-4 pt-6 text-2xl font-medium text-gray-900;
+    @apply pb-4 pt-6 text-2xl font-semibold text-gray-900;
   }
   h3 {
-    @apply pb-4 text-xl font-medium text-gray-900;
+    @apply pb-4 text-xl font-semibold text-gray-900;
   }
   h4 {
-    @apply pb-4 text-lg font-medium text-gray-700;
+    @apply pb-4 text-lg font-semibold text-gray-700;
   }
   p {
     @apply pb-4 text-gray-900;
diff --git a/frontend2/src/views/MyTeam.tsx b/frontend2/src/views/MyTeam.tsx
new file mode 100644
index 000000000..9e4538345
--- /dev/null
+++ b/frontend2/src/views/MyTeam.tsx
@@ -0,0 +1,150 @@
+import React, { useMemo, useState } from "react";
+import { PageTitle } from "../components/elements/BattlecodeStyle";
+import SectionCard from "../components/SectionCard";
+import Input from "../components/elements/Input";
+import TextArea from "../components/elements/TextArea";
+import { TeamStateEnum, useCurrentTeam } from "../contexts/CurrentTeamContext";
+import Button from "../components/elements/Button";
+import MemberList from "../components/team/MemberList";
+import DescriptiveCheckbox from "../components/elements/DescriptiveCheckbox";
+import JoinTeam from "../components/JoinTeam";
+
+const MyTeam: React.FC = () => {
+  const { team, teamState } = useCurrentTeam();
+  const [checked, setChecked] = useState<boolean>(false);
+  const membersList = useMemo(() => {
+    return (
+      <div className="flex flex-col gap-8">
+        {team !== undefined && <MemberList members={team?.members} />}
+        <Button className="self-start" label="Leave team" />
+      </div>
+    );
+  }, [team]);
+  if (teamState !== TeamStateEnum.IN_TEAM || team === undefined) {
+    return <JoinTeam />;
+  }
+  return (
+    <div className="p-10">
+      <PageTitle>Team Settings</PageTitle>
+      <div className="flex flex-col gap-8 xl:flex-row">
+        <div className="flex flex-1 flex-col gap-8 xl:max-w-4xl">
+          <SectionCard title="Profile" className="max-w-5xl">
+            <div className="flex flex-col md:flex-row md:gap-8">
+              <div className="flex flex-col items-center gap-6 p-4">
+                <img
+                  className="h-24 w-24 rounded-full bg-gray-400 md:h-48 md:w-48"
+                  src={team.profile?.avatar_url}
+                />
+                <div className="text-center text-xl font-semibold">
+                  {team.name}
+                </div>
+              </div>
+              <div className="flex flex-1 flex-col gap-4">
+                <Input
+                  disabled
+                  label="Join key"
+                  value={team.join_key ?? "Loading..."}
+                />
+                <Input label="Team quote" />
+                <TextArea label="Team biography" />
+                {/* TODO: This button will be disabled when no changes have been made,
+                and will turn dark cyan after changes have been made. When changes
+                are saved, it will be disabled again. We may want to show a popup indicating
+                success */}
+                <Button className="mt-2" label="Save" type="submit" />
+              </div>
+            </div>
+          </SectionCard>
+          {/* The members list that displays when on a smaller screen */}
+          <SectionCard className="shrink xl:hidden" title="Members">
+            {membersList}
+          </SectionCard>
+          <SectionCard title="Eligibility">
+            <div className="flex flex-col gap-4 2xl:flex-row">
+              <div className="2xl:w-60">
+                <p className="text-gray-700">
+                  Check the box(es) that apply to <i>all</i> members of your
+                  team.
+                </p>
+                <p className="text-gray-700">
+                  This determines which tournaments and prizes your team is
+                  eligible for.
+                </p>
+              </div>
+              <div className="flex flex-1 flex-col gap-2">
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="Student"
+                  description="Here's a description of what a student is"
+                />
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="US Student"
+                  description="Here's a description of what a US student is"
+                />
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="High school student"
+                  description="These descriptions and titles should be loaded dynamically."
+                />
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="Newbie"
+                  description="These descriptions and titles should be loaded dynamically. I think this is MIT newbie? we might want to rename this criteria"
+                />
+              </div>
+            </div>
+          </SectionCard>
+          <SectionCard title="Scrimmaging">
+            <div className="flex flex-col gap-3 2xl:flex-row">
+              <div className="text-green-600 2xl:w-60">
+                <p className="text-gray-700">
+                  Choose how you want to handle incoming scrimmage requests from
+                  other players.
+                </p>
+              </div>
+              <div className="flex flex-1 flex-col gap-2">
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="Auto-accept ranked scrimmages"
+                  description="When enabled, your team will automatically accept
+                  ranked scrimmage requests. Ranked scrimmages affect your ELO rating."
+                />
+                <DescriptiveCheckbox
+                  checked={checked}
+                  onChange={(checked) => {
+                    setChecked(checked);
+                  }}
+                  title="Auto-accept unranked scrimmages"
+                  description="When enabled, your team will automatically accept
+                  unranked scrimmage requests. Unranked scrimmages do not affect your ELO rating."
+                />
+              </div>
+            </div>
+          </SectionCard>
+        </div>
+        {/* The members list that displays to the right side when on a big screen. */}
+        <SectionCard className="hidden w-1/3 shrink xl:block" title="Members">
+          {membersList}
+        </SectionCard>
+      </div>
+    </div>
+  );
+};
+
+export default MyTeam;