adjustments to add team role and other better stuff

components/Dashboard/Header.tsx

@@ -12,6 +12,7 @@ import {
   FaPeopleCarry,
   FaAngleDown,
   FaCheck,
+  FaDatabase,
 } from "react-icons/fa";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import router from "next/router";
@@ -77,6 +78,12 @@ export default function Header() {
 
   const TeamsMenu = (
     <Menu key={2} title="teams">
+      <Menu.Item key={1} icon={<FaDatabase />}>
+        <button onClick={handleAdminRoute}>Admin</button>
+      </Menu.Item>
+
+      <Menu.Divider />
+
       {/* all current teams that this person is a part of */}
       {usersTeams &&
         usersTeams.map((uteam, i) => {
@@ -100,6 +107,7 @@ export default function Header() {
 
       <Menu.Divider />
 
+      {/* create TEAM */}
       <Menu.Item key={"createteam"} icon={<FaPeopleCarry />}>
         <button
           onClick={(e) => {
@@ -107,19 +115,13 @@ export default function Header() {
             router.push("/teams/create");
           }}
         >
-          create team
+          Create Team
         </button>
       </Menu.Item>
     </Menu>
   );
   const UserMenu = (
     <Menu title="user menu">
-      <Menu.Item key={1}>
-        <button onClick={handleAdminRoute}>Admin</button>
-      </Menu.Item>
-
-      <Menu.Divider />
-
       <Menu.Item key={2}>
         <button
           onClick={(e) => {
@@ -192,7 +194,6 @@ export default function Header() {
         <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
         <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
         <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
-        <FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
 
         {/* teams menu */}
 

components/Dashboard/TeamVoiceLine.tsx

@@ -173,7 +173,7 @@ export default function TeamVoiceLine() {
             </span>
 
             <span className={"text-xs span-sans text-gray-300"}>
-              {tmember.firstName + " " + tmember.lastName}
+              {tmember.teamRole}
             </span>
           </span>
 

models/user.ts

@@ -1,33 +1,41 @@
-import { documentId, Firestore, serverTimestamp, Timestamp } from "firebase/firestore";
+import {
+  documentId,
+  Firestore,
+  serverTimestamp,
+  Timestamp,
+} from "firebase/firestore";
 import IFirestoreSerializable from "./firestoreSerializable";
 
 export class User {
-    id: string;
-    emailAddress: string;
-    nickName: string;
-    firstName: string;
-    lastName: string;
-    avatarUrl: string;
-    userStatus: UserStatus
+  id: string;
+  emailAddress: string;
+  nickName: string;
+  firstName: string;
+  lastName: string;
+  avatarUrl: string;
+  userStatus: UserStatus;
 
-    createdDate: Timestamp;
-    lastUpdatedDate: Timestamp;
+  /**designer? dev? */
+  teamRole: string;
 
-    // serialize() {
-    //     return {            
-    //         createdDate: Timestamp.fromDate(this.createdDate),
-    //         lastUpdatedDate: Timestamp.fromDate(this.lastUpdatedDate)
-    //     }
-    // }
+  createdDate: Timestamp;
+  lastUpdatedDate: Timestamp;
 
-    // deserialize(firestoreData: {}) {
-    //     this.lastUpdatedDate = firestoreData.lastUpdatedDate.toDate()
-    // }
+  // serialize() {
+  //     return {
+  //         createdDate: Timestamp.fromDate(this.createdDate),
+  //         lastUpdatedDate: Timestamp.fromDate(this.lastUpdatedDate)
+  //     }
+  // }
+
+  // deserialize(firestoreData: {}) {
+  //     this.lastUpdatedDate = firestoreData.lastUpdatedDate.toDate()
+  // }
 }
 
 export enum UserStatus {
-    online = "online",
-    offline = "offline",
-    inCall = "in call",
-    busy = "busy"
+  online = "online",
+  offline = "offline",
+  inCall = "in call",
+  busy = "busy",
 }

pages/teams/[teamid]/admin.tsx

@@ -109,11 +109,8 @@ function TeamAdmin() {
         team.companySite = companySite;
       }
 
-      // check again that the team has allowed count of people
-
-      // create invites for new people
-
       // update team name and company site if it changed
+      await teamService.updateTeam(team);
 
       // take user back to team dashboard
       router.push("/teams/" + team.id);

pages/teams/profile.tsx

@@ -68,6 +68,9 @@ export default function Profile() {
     } else if (nickname.length > 22) {
       setError("nickname must be less than 22 characters");
       return;
+    } else if (!teamRole) {
+      setError("Must input team role!");
+      return;
     }
 
     // create the user in the backend or just merge results
@@ -77,6 +80,7 @@ export default function Profile() {
     newUser.lastName = lastName;
     newUser.nickName = nickname;
     newUser.avatarUrl = currUser.photoURL;
+    newUser.teamRole = teamRole;
 
     try {
       await userService.updateUser(newUser);
@@ -93,11 +97,12 @@ export default function Profile() {
   );
   const [lastName, setLastName] = useState<string>("");
   const [nickname, setNickname] = useState<string>("");
+  const [teamRole, setTeamRole] = useState<string>("");
   const [error, setError] = useState<string>("");
 
   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"
+      className="container mx-auto max-w-screen-sm flex flex-col m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
       onSubmit={handleSubmit}
     >
       {/* header */}
@@ -132,32 +137,36 @@ export default function Profile() {
         />
       </span>
 
-      <span className="flex flex-col items-start">
-        <span className="text-md">First Name</span>
-        <span className="text-gray-300 text-xs mb-2"></span>
-        <input
-          placeholder="ex. John"
-          className="w-full rounded-lg bg-gray-50 p-3"
-          value={firstName}
-          onChange={(e) => setFirstName(e.target.value)}
-        />
-      </span>
+      <div className="flex flex-row justify-between space-x-3">
+        <span className="flex flex-col items-start flex-1">
+          <span className="text-md">First Name</span>
+          <span className="text-gray-300 text-xs mb-2"></span>
+          <input
+            placeholder="ex. John"
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+          />
+        </span>
 
-      <span className="flex flex-col items-start">
-        <span className="text-md">Last Name</span>
-        <span className="text-gray-300 text-xs mb-2"></span>
-        <input
-          placeholder="ex. Brown"
-          className="w-full rounded-lg bg-gray-50 p-3"
-          value={lastName}
-          onChange={(e) => setLastName(e.target.value)}
-        />
-      </span>
+        <span className="flex flex-col items-start flex-1">
+          <span className="text-md">Last Name</span>
+          <span className="text-gray-300 text-xs mb-2"></span>
+          <input
+            placeholder="ex. Brown"
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+          />
+        </span>
+      </div>
+
+      <Divider />
 
       <span className="flex flex-col items-start">
         <span className="text-md">Nickname</span>
         <span className="text-gray-300 text-xs mb-2">
-          What does your team call you?
+          What does your team call you? This is what is displayed.
         </span>
         <input
           placeholder="ex. nicky"
@@ -167,6 +176,19 @@ export default function Profile() {
         />
       </span>
 
+      <span className="flex flex-col items-start">
+        <span className="text-md">Role</span>
+        <span className="text-gray-300 text-xs mb-2">
+          Are you a developer? designer? manager?
+        </span>
+        <input
+          placeholder="ex. designer"
+          className="w-full rounded-lg bg-gray-50 p-3"
+          value={teamRole}
+          onChange={(e) => setTeamRole(e.target.value)}
+        />
+      </span>
+
       <Divider />
 
       <span className="flex flex-row justify-end space-x-2">

services/teamService.tsx

@@ -52,6 +52,15 @@ export default class TeamService implements IService {
     return teamDocRef.id;
   }
 
+  async updateTeam(team: Team) {
+    const docRef = doc(this.db, Collections.teams, team.id);
+    await setDoc(
+      docRef,
+      { ...team, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
+
   async getTeam(teamId: string): Promise<Team | null> {
     const docRef = doc(this.db, Collections.teams, teamId);
     const docSnap = await getDoc(docRef);