adding more loops for the admin page

components/Dashboard/Header.tsx

@@ -105,7 +105,7 @@ export default function Header() {
 
           <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
             <FaClock />
-            <Moment format="h:m a" />
+            <Moment format="h:mm a" />
           </span>
         </span>
       </span>

components/Dashboard/TeamVoiceLine.tsx

@@ -6,11 +6,19 @@ import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import { User, UserStatus } from "../../models/user";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { TeamMemberRole } from "../../models/teamMember";
+import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
 import UserService from "../../services/userService";
-import { DocumentSnapshot, Unsubscribe } from "firebase/firestore";
+import {
+  doc,
+  DocumentSnapshot,
+  getFirestore,
+  onSnapshot,
+  Unsubscribe,
+} from "firebase/firestore";
+import { Collections } from "../../services/collections";
 
 const userService = new UserService();
+const db = getFirestore();
 
 function statusBubble(status: UserStatus) {
   console.log(status);
@@ -72,31 +80,18 @@ export default function TeamVoiceLine() {
       try {
         // listeners for all teammates' status
         if (teamMembers) {
-          teamMembers.forEach(async (tmember) => {
-            const unsub = await userService.getUserRealtime(
-              tmember.userId,
-              (doc: DocumentSnapshot) => {
-                // setTeamUsers((prevTeamUsers) => ({
-                //   ...prevTeamUsers,
-                // }));
+          teamMembers.map((tmember) => {
+            if (tmember.status == TeamMemberStatus.activated) {
+              const docRef = doc(this.db, Collections.users, tmember.userId);
 
-                // updated user
-                const updatedUser = doc.data() as User;
+              const unsub = onSnapshot(docRef, (doc) => {
+                console.log(doc.data());
+              });
 
-                // update the teamUsers array in state
-                const newUsers: User[] = teamUsers.map((user, i) => {
-                  if (user.id == updatedUser.id) {
-                    return updatedUser;
-                  }
+              unsubs.push(unsub);
+            }
 
-                  return user;
-                });
-
-                setTeamUsers(newUsers);
-              }
-            );
-
-            unsubs.push(unsub);
+            return;
           });
         }
       } catch (error) {

contexts/teamDashboardContext.tsx

@@ -119,15 +119,17 @@ export function TeamDashboardContextProvider({ children }) {
         }
 
         // SECTION: get all teammembers for team, will have listeners in other subcomponents
-        const teamMembers = await teamService.getTeamMembersByTeamIdNotUser(
-          returnedTeam.id,
-          currUser.uid
+        var teamMembers: TeamMember[] =
+          await teamService.getTeamMembersByTeamId(returnedTeam.id);
+
+        teamMembers = teamMembers.filter(
+          (element) => element.userId != currUser.uid
         );
 
         setValue((prevValue) => ({ ...prevValue, teamMembers }));
       } catch (error) {
         console.log(error);
-        router.push("/teams/login");
+        router.push("/teams/landing");
       }
 
       setLoading(false);

pages/teams/[teamid]/admin.tsx

@@ -6,10 +6,19 @@ import {
   TeamDashboardContextProvider,
   useTeamDashboardContext,
 } from "../../../contexts/teamDashboardContext";
-import { TeamMemberRole } from "../../../models/teamMember";
+import {
+  TeamMember,
+  TeamMemberRole,
+  TeamMemberStatus,
+} from "../../../models/teamMember";
 import { toast } from "react-hot-toast";
 import { Team, TeamStatus } from "../../../models/team";
 
+import { FaMoneyBillWave, FaTrash, FaPaperPlane } from "react-icons/fa";
+import TeamService from "../../../services/teamService";
+import Router from "next/router";
+import Moment from "react-moment";
+
 export default function TeamAdminWrapper() {
   return (
     <TeamDashboardContextProvider>
@@ -20,6 +29,31 @@ export default function TeamAdminWrapper() {
 
 const initialSite: string = "https://";
 
+function renderTeamMemberStatus(status: TeamMemberStatus) {
+  switch (status) {
+    case TeamMemberStatus.invited:
+      return (
+        <span className="text-gray-700 ml-1 bg-gray-200 p-1 rounded-md text-xs font-bold mt-2">
+          invited
+        </span>
+      );
+    case TeamMemberStatus.activated:
+      return (
+        <span className="text-sky-700 ml-1 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2">
+          active
+        </span>
+      );
+    case TeamMemberStatus.deleted:
+      return (
+        <span className="text-red-700 ml-1 bg-red-200 p-1 rounded-md text-xs font-bold mt-2">
+          deleted
+        </span>
+      );
+  }
+}
+
+const teamService = new TeamService();
+
 function TeamAdmin() {
   const router = useRouter();
   const { teamid } = router.query;
@@ -28,6 +62,7 @@ function TeamAdmin() {
   const [error, setError] = useState<string>("");
   const [teamName, setTeamName] = useState<string>(team.name);
   const [companySite, setcompanySite] = useState<string>(team.companySite);
+  const [inviteEmail, setInviteEmail] = useState<string>("");
   const [loading, setLoading] = useState<Boolean>(true);
 
   useEffect(() => {
@@ -48,7 +83,7 @@ function TeamAdmin() {
     })();
   }, []);
 
-  async function handleSubmit(e) {
+  async function handleSubmitTeamUpdate(e) {
     e.preventDefault();
 
     setLoading(true);
@@ -84,96 +119,265 @@ function TeamAdmin() {
     setLoading(false);
   }
 
+  async function handleSubmitNewTeamMember(e) {
+    e.preventDefault();
+
+    setLoading(true);
+
+    if (!inviteEmail) {
+      setError("You must input a valid email!");
+      return;
+    }
+
+    try {
+      const newInviteTeamMember = new TeamMember();
+      newInviteTeamMember.inviteEmailAddress = inviteEmail;
+      newInviteTeamMember.invitedByUserId = user.id;
+      newInviteTeamMember.status = TeamMemberStatus.invited;
+      newInviteTeamMember.teamId = team.id;
+
+      await teamService.createTeamInvite(newInviteTeamMember);
+
+      Router.reload();
+    } catch (error) {
+      toast.error("something went wrong");
+    }
+  }
+
+  async function handleDeleteTeamMember(teamMemberId: string) {
+    setLoading(true);
+
+    try {
+      await teamService.updateTeamMemberStatus(
+        teamMemberId,
+        TeamMemberStatus.deleted
+      );
+
+      Router.reload();
+    } catch (error) {
+      toast.error("unable to delete team member");
+    }
+  }
+
   if (loading) {
     return <Loading />;
   }
 
+  async function handleInviteTeamMember(teamMemberId: string) {
+    setLoading(true);
+
+    try {
+      await teamService.updateTeamMemberStatus(
+        teamMemberId,
+        TeamMemberStatus.invited
+      );
+
+      Router.reload();
+    } catch (error) {
+      toast.error("unable to delete team member");
+    }
+  }
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  // get count of all active and invited users...
+  const activeOrInvited = teamMembers.filter(
+    (tmember) =>
+      tmember.status == TeamMemberStatus.invited ||
+      tmember.status == TeamMemberStatus.activated
+  );
+  const teamSpotsRemaining =
+    (team.allowedUserCount || 0) - activeOrInvited.length - 1;
+
   return (
-    <form
-      className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
-      onSubmit={handleSubmit}
-    >
-      {/* header */}
-      <div className="text-lg">🙌Manage Team</div>
+    <div className="container mx-auto max-w-screen-sm m-10 bg-white p-10 rounded-lg shadow-md">
+      <form
+        onSubmit={handleSubmitTeamUpdate}
+        className="flex flex-col space-y-5"
+      >
+        {/* header */}
+        <div className="text-lg">🙌Manage Team</div>
 
-      {error && <span className="text-red-300 text-md">{error}</span>}
+        {error && <span className="text-red-300 text-md">{error}</span>}
 
-      <Divider />
+        <Divider />
 
-      <span className="flex flex-col items-start">
-        <span className="text-md">Team Name</span>
-        <span className="text-gray-300 text-xs mb-2">
-          Everyone in your team will see this.
+        <span className="flex flex-col items-start">
+          <span className="text-md">Team Name</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Everyone in your team will see this.
+          </span>
+          <input
+            placeholder="ex. AirBnB"
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={teamName}
+            onChange={(e) => setTeamName(e.target.value)}
+          />
         </span>
-        <input
-          placeholder="ex. AirBnB"
-          className="w-full rounded-lg bg-gray-50 p-3"
-          value={teamName}
-          onChange={(e) => setTeamName(e.target.value)}
-        />
-      </span>
 
-      <span className="flex flex-col items-start">
-        <span className="text-md">Company Site</span>
-        <span className="text-gray-300 text-xs mb-2">optional</span>
-        <input
-          placeholder="ex. https://"
-          className="w-full rounded-lg bg-gray-50 p-3"
-          value={companySite}
-          onChange={(e) => setcompanySite(e.target.value)}
-        />
-      </span>
+        <span className="flex flex-col items-start">
+          <span className="text-md">Company Site</span>
+          <span className="text-gray-300 text-xs mb-2">optional</span>
+          <input
+            placeholder="ex. https://"
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={companySite}
+            onChange={(e) => setcompanySite(e.target.value)}
+          />
+        </span>
 
-      <Divider />
+        <Divider />
 
-      <span className="text-md">Team</span>
+        <span className="flex flex-row justify-end space-x-2">
+          <button
+            onClick={() => router.push("/teams")}
+            className="bg-gray-100 py-2 px-5 rounded text-gray-400"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
+          >
+            Save
+          </button>
+        </span>
+      </form>
 
-      {/* current user */}
-      <div className="flex flex-row">
-        <img src={user.avatarUrl} alt="asdf" className="rounded-full w-12" />
-        <span className="flex flex-col items-start ml-2">
-          <span className="text-md text-gray-500">
-            {user.firstName + " " + user.lastName}
+      <form
+        className="flex flex-col space-y-5"
+        onSubmit={handleSubmitNewTeamMember}
+      >
+        <Divider />
 
-            <span className="text-gray-700 ml-1 bg-gray-200 p-1 rounded-md text-xs font-bold mt-2">
-              admin
+        <span className="flex flex-row justify-start items-start">
+          <FaMoneyBillWave className="text-5xl text-green-500" />
+
+          <span className="flex flex-col justify-start ml-2">
+            <span className="text-md ">Billing</span>
+            <span className="text-md text-gray-500 mr-20">
+              Please email{" "}
+              <button className="underline decoration-teal-500 text-brown-500">
+                arjunpatel@berkeley.edu
+              </button>{" "}
+              to open more spots for your team.
             </span>
           </span>
-          <span className="text-sm text-gray-200">{user.emailAddress}</span>
+
+          <span className="ml-auto text-center text-orange-700 bg-orange-200 p-1 rounded-md text-sm font-bold mt-2">
+            {teamSpotsRemaining} spots remaining
+          </span>
         </span>
-      </div>
 
-      {teamMembers.map((tmember, i) => {
-        return (
-          <div key={i} className="flex flex-row">
-            <div className="rounded-full w-12 pulse" />
+        <Divider />
 
-            <span className="flex flex-col items-start ml-2">
-              <span className="text-md text-gray-500">
-                {tmember.inviteEmailAddress}
+        <span className="text-md">Team</span>
+
+        {/* current user */}
+        <div className="flex flex-row">
+          <img src={user.avatarUrl} alt="asdf" className="rounded-full w-12" />
+          <span className="flex flex-col items-start ml-2">
+            <span className="text-md text-gray-500">
+              {user.firstName + " " + user.lastName}
+
+              <span className="text-green-700 ml-1 bg-green-200 p-1 rounded-md text-xs font-bold mt-2">
+                admin
               </span>
-              <span className="text-sm text-gray-200">{user.emailAddress}</span>
+
+              {renderTeamMemberStatus(userTeamMember.status)}
             </span>
-          </div>
-        );
-      })}
+            <span className="text-xs text-gray-200">{user.emailAddress}</span>
+          </span>
+        </div>
 
-      <Divider />
+        {/* mapping all team members */}
+        {teamMembers.map((tmember, i) => {
+          return (
+            <div key={i} className="flex flex-row items-center">
+              <div className="rounded-full w-12 animate-pulse bg-gray-200 h-12" />
 
-      <span className="flex flex-row justify-end space-x-2">
-        <button
-          onClick={() => router.push("/teams")}
-          className="bg-gray-100 py-2 px-5 rounded text-gray-400"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
-        >
-          Save
-        </button>
-      </span>
-    </form>
+              <span className="flex flex-col items-start ml-2">
+                <span className="text-md text-gray-500">
+                  {tmember.inviteEmailAddress}
+
+                  {renderTeamMemberStatus(tmember.status)}
+                </span>
+
+                {/* todo: date joined */}
+                {/* <Moment date={tmember} className="text-xs text-gray-200" /> */}
+              </span>
+
+              {tmember.status == TeamMemberStatus.deleted &&
+              teamSpotsRemaining > 0 ? (
+                <button
+                  onClick={() => handleInviteTeamMember(tmember.id)}
+                  className="ml-auto bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
+                >
+                  <FaPaperPlane className="text-sm text-teal-500 " />
+                </button>
+              ) : (
+                <></>
+              )}
+              {tmember.status == TeamMemberStatus.invited ||
+              tmember.status == TeamMemberStatus.activated ? (
+                <button
+                  onClick={() => handleDeleteTeamMember(tmember.id)}
+                  className="bg-orange-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
+                >
+                  <FaTrash className="text-sm text-orange-500 " />
+                </button>
+              ) : (
+                <></>
+              )}
+            </div>
+          );
+        })}
+
+        {/* input for adding people */}
+        {teamSpotsRemaining > 0 ? (
+          <>
+            <span className="flex flex-col items-start">
+              <span className="text-md">Add Members</span>
+              <span className="text-red-300 text-md mb-2">
+                IMPORTANT: Tell them to sign up at{" "}
+                <span className="underline decoration-teal-500">
+                  usenirvana.com{" "}
+                </span>{" "}
+                using this same email address.
+              </span>
+              <input
+                placeholder="ex. jack@apple.com"
+                className="w-full rounded-lg bg-gray-50 p-3"
+                value={inviteEmail}
+                onChange={(e) => setInviteEmail(e.target.value)}
+              />
+            </span>
+
+            <span className="flex flex-row justify-end space-x-2">
+              {inviteEmail ? (
+                <button
+                  type="submit"
+                  className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
+                >
+                  Add
+                </button>
+              ) : (
+                <button
+                  type="submit"
+                  className="text-sm text-white font-semibold py-2 px-5 bg-gray-200 rounded"
+                  disabled
+                >
+                  Add
+                </button>
+              )}
+            </span>
+          </>
+        ) : (
+          <></>
+        )}
+      </form>
+    </div>
   );
 }

services/teamService.tsx

@@ -158,14 +158,10 @@ export default class TeamService implements IService {
     return teamMembers;
   }
 
-  async getTeamMembersByTeamIdNotUser(
-    teamId: string,
-    userId: string
-  ): Promise<TeamMember[]> {
+  async getTeamMembersByTeamId(teamId: string): Promise<TeamMember[]> {
     const q = query(
       collection(this.db, Collections.teamMembers),
-      where("teamId", "==", teamId),
-      where("userId", "!=", userId)
+      where("teamId", "==", teamId)
     );
 
     const querySnapshot = await getDocs(q);
@@ -192,4 +188,39 @@ export default class TeamService implements IService {
       { merge: true }
     );
   }
+
+  async createTeamInvite(teamMember: TeamMember) {
+    // if a person was already invited, then update that record, otherwise create a new one
+    const existingTeamMember = await this.getTeamMemberByEmailInvite(
+      teamMember.teamId,
+      teamMember.inviteEmailAddress
+    );
+
+    if (!existingTeamMember) {
+      const teamMemberRef = await addDoc(
+        collection(this.db, Collections.teamMembers),
+        {
+          ...teamMember,
+          createdDate: serverTimestamp(),
+        }
+      );
+
+      return;
+    }
+
+    // just update the current user to active since we are activating again
+    await this.updateTeamMemberStatus(
+      existingTeamMember.id,
+      TeamMemberStatus.invited
+    );
+  }
+
+  async updateTeamMemberStatus(teamMemberId: string, status: TeamMemberStatus) {
+    const docRef = doc(this.db, Collections.teamMembers, teamMemberId);
+    await setDoc(
+      docRef,
+      { status, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
 }

services/userService.tsx

@@ -38,13 +38,12 @@ export default class UserService {
     }
   }
 
-  async getUserRealtime(
-    userId: string,
-    handleDataFetch: (doc: DocumentSnapshot) => void
-  ): Promise<Unsubscribe> {
+  async getUserRealtime(userId: string): Promise<Unsubscribe> {
     const docRef = doc(this.db, Collections.users, userId);
 
-    const unsub = onSnapshot(docRef, handleDataFetch);
+    const unsub = onSnapshot(docRef, (doc) => {
+      console.log(doc.data());
+    });
 
     return unsub;
   }