chore(webapp): fetch team from API in Team page

measure-sh · Dec 4, 2023 · ab3b6ea · ab3b6ea
1 parent b1ce8a9
commit ab3b6ea
Showing 1 changed file with 83 additions and 30 deletions.
diff --git a/measure-web-app/app/[teamId]/team/page.tsx b/measure-web-app/app/[teamId]/team/page.tsx
@@ -1,7 +1,10 @@
 "use client"
 
 import Dropdown from "@/app/components/dropdown";
-import { useState } from "react";
+import { getAccessTokenOrRedirectToAuth, logoutIfAuthError } from "@/app/utils/auth_utils";
+import { useEffect, useState } from "react";
+import { useRouter } from 'next/navigation';
+
 
 const getSelectedTeam = () => {
   const { pathname } = new URL(document.location.href)
@@ -67,11 +70,51 @@ const teamMembers = [
 ];
 
 export default function Team({ params }: { params: { teamId: string } }) {
-  const defaultTeamName = "Anup's team"
+
+  enum TeamsApiStatus {
+    Loading,
+    Success,
+    Error
+  }
+  const emptyTeam = { 'id': '', 'name': '' }
+  const [teamsApiStatus, setTeamsApiStatus] = useState(TeamsApiStatus.Loading);
+  const [team, setTeam] = useState(emptyTeam)
+
   const [saveTeamNameButtonDisabled, setSaveTeamNameButtonDisabled] = useState(true);
   const [role, setRole] = useState("Owner")
   const [email, setEmail] = useState<string>()
 
+  const router = useRouter();
+
+  const getTeam = async () => {
+    setTeamsApiStatus(TeamsApiStatus.Loading)
+
+    const authToken = await getAccessTokenOrRedirectToAuth(router)
+    const origin = process.env.NEXT_PUBLIC_API_BASE_URL
+    const opts = {
+      headers: {
+        "Authorization": `Bearer ${authToken}`
+      }
+    };
+
+    const res = await fetch(`${origin}/teams`, opts);
+    if (!res.ok) {
+      setTeamsApiStatus(TeamsApiStatus.Error)
+      logoutIfAuthError(router, res)
+      return
+    }
+
+    setTeamsApiStatus(TeamsApiStatus.Success)
+    const data: [{ id: string, name: string }] = await res.json()
+
+
+    setTeam(data.filter((i) => i.id === params.teamId)[0])
+  }
+
+  useEffect(() => {
+    getTeam()
+  }, []);
+
   const handleInvite = (e: React.FormEvent) => {
     e.preventDefault()
     const teamId = getSelectedTeam()
@@ -84,35 +127,45 @@ export default function Team({ params }: { params: { teamId: string } }) {
       <div className="py-4" />
       <p className="font-display font-regular text-black text-4xl max-w-6xl text-center">Team</p>
       <div className="py-4" />
-      <p className="font-sans text-black max-w-6xl text-center">Team name</p>
-      <div className="py-1" />
-      <div className="flex flex-row items-center">
-        <input id="change-team-name-input" type="text" defaultValue={defaultTeamName} onChange={(event) => event.target.value === defaultTeamName ? setSaveTeamNameButtonDisabled(true) : setSaveTeamNameButtonDisabled(false)} className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" />
-        <button disabled={saveTeamNameButtonDisabled} className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black disabled:border-gray-400 rounded-md font-display text-black disabled:text-gray-400 transition-colors duration-100 py-2 px-4">Save</button>
-      </div>
-      <div className="py-4" />
-      <p className="font-sans text-black max-w-6xl text-center">Invite team members</p>
-      <div className="py-1" />
-      <form name="invite-form" id="invite-form" autoComplete="on" onSubmit={handleInvite}>
-        <div className="flex flex-row items-center">
-          <input id="invite-email-input" name="invite-email-input" type="text" placeholder="Enter email" className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" onInput={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} defaultValue={email} />
-          <div className="px-2" />
-          <Dropdown items={['Owner', 'Admin', 'Developer', 'Viewer']} onChangeSelectedItem={(item) => setRole(item)} initialItemIndex={0} />
-          <button form="invite-form" type="submit" className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display text-black transition-colors duration-100 py-2 px-4">Invite</button>
-        </div>
-      </form>
-      <div className="py-8" />
-      <p className="font-display font-regular text-black text-2xl max-w-6xl text-center">Members</p>
-      <div className="py-2" />
-      <div className="table-row-group">
-        {teamMembers.map(({ id, email }) => (
-          <div key={id} className="table-row font-sans text-black">
-            <div className="table-cell p-4 pl-0 text-lg">{email}</div>
-            <div className="table-cell p-4 w-52"><Dropdown items={['Owner', 'Admin', 'Developer', 'Viewer']} /></div>
-            <div className="table-cell p-4"><button className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display text-black transition-colors duration-100 py-2 px-4">Remove</button></div>
+
+      {/* Loading message for team */}
+      {teamsApiStatus === TeamsApiStatus.Loading && <p className="text-lg font-display">Loading team...</p>}
+
+      {/* Error message for tean fetch error */}
+      {teamsApiStatus === TeamsApiStatus.Error && <p className="text-lg font-display">Error fetching team, please refresh page to try again</p>}
+
+      {teamsApiStatus === TeamsApiStatus.Success &&
+        <div className="flex flex-col items-start">
+          <p className="font-sans text-black max-w-6xl text-center">Team name</p>
+          <div className="py-1" />
+          <div className="flex flex-row items-center">
+            <input id="change-team-name-input" type="text" defaultValue={team.name} onChange={(event) => event.target.value === team.name ? setSaveTeamNameButtonDisabled(true) : setSaveTeamNameButtonDisabled(false)} className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" />
+            <button disabled={saveTeamNameButtonDisabled} className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black disabled:border-gray-400 rounded-md font-display text-black disabled:text-gray-400 transition-colors duration-100 py-2 px-4">Save</button>
+          </div>
+          <div className="py-4" />
+          <p className="font-sans text-black max-w-6xl text-center">Invite team members</p>
+          <div className="py-1" />
+          <form name="invite-form" id="invite-form" autoComplete="on" onSubmit={handleInvite}>
+            <div className="flex flex-row items-center">
+              <input id="invite-email-input" name="invite-email-input" type="text" placeholder="Enter email" className="w-96 border border-black rounded-md outline-none focus-visible:outline-yellow-300 text-black py-2 px-4 font-sans placeholder:text-neutral-400" onInput={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} defaultValue={email} />
+              <div className="px-2" />
+              <Dropdown items={['Owner', 'Admin', 'Developer', 'Viewer']} onChangeSelectedItem={(item) => setRole(item)} initialItemIndex={0} />
+              <button form="invite-form" type="submit" className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display text-black transition-colors duration-100 py-2 px-4">Invite</button>
+            </div>
+          </form>
+          <div className="py-8" />
+          <p className="font-display font-regular text-black text-2xl max-w-6xl text-center">Members</p>
+          <div className="py-2" />
+          <div className="table-row-group">
+            {teamMembers.map(({ id, email }) => (
+              <div key={id} className="table-row font-sans text-black">
+                <div className="table-cell p-4 pl-0 text-lg">{email}</div>
+                <div className="table-cell p-4 w-52"><Dropdown items={['Owner', 'Admin', 'Developer', 'Viewer']} /></div>
+                <div className="table-cell p-4"><button className="m-4 outline-none flex justify-center hover:bg-yellow-200 active:bg-yellow-300 focus-visible:bg-yellow-200 border border-black rounded-md font-display text-black transition-colors duration-100 py-2 px-4">Remove</button></div>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </div>}
     </div>
   )
 }