team creation clean done

models/team.ts

@@ -8,7 +8,9 @@ export class Team {
 
   allowedUserCount:number;
 
-  createdBy: string;
+  companySite: string;
+
+  createdByUserId: string;
   createdDate: Timestamp;
 
   lastUpdatedDate: Timestamp;

models/teamMember.ts

@@ -1,3 +1,5 @@
+import { Timestamp } from "firebase/firestore";
+
 export class TeamMember {
   id: string;
   userId: string;
@@ -8,6 +10,9 @@ export class TeamMember {
   
   role: TeamMemberRole
   status: TeamMemberStatus 
+
+  createdDate: Timestamp
+  lastUpdatedDate: Timestamp
 }
 
 export enum TeamMemberRole {

pages/teams/create.tsx

@@ -2,12 +2,18 @@ import { Divider } from "antd";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useAuth } from "../../contexts/authContext";
+import { Team, TeamStatus } from "../../models/team";
 import { User, UserStatus } from "../../models/user";
+import TeamService from "../../services/teamService";
 
 const initialSite: string = 'https://'
+
+const teamService = new TeamService()
+
 export default function CreateTeam() {
-  const { currUser, logOut } = useAuth()
+  const { currUser } = useAuth()
   const [error, setError] = useState<string>('')
+  const [loading, setLoading] = useState<Boolean>(true)
   const router = useRouter()
 
   useEffect(() => {
@@ -19,25 +25,47 @@ export default function CreateTeam() {
           // router.push('/teams/login')
         }
 
+        // todo if user is in a team already, notify them to make sure
+        // buttt most likely will already be routed to the correct place from the router...don't do the router's job
+
       } catch(error) {
         console.log(error)
         router.push('/teams/login')
       }
     })();
+
+    setLoading(false)
   }, [])
 
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault()
 
+    setLoading(true)
+
     if (!teamName) {
       setError('You must input a team name!')
+      return
     }
 
-    if (companySite == initialSite) {
-      // make sure to put null in database for the team
+    try {
+      const team = new Team()
+      team.name = teamName
+      team.createdByUserId = currUser.uid
+      team.status = TeamStatus.created
+      
+      if (companySite != initialSite) {
+        // make sure to put null in database for the team
+        team.companySite = companySite
+      }
+  
+      // provision a team with state of initiated
+      const createdTeamId = await teamService.createTeam(team)
+      router.push('/teams/' + createdTeamId)
+    } catch(error) {
+      setError(error.message)
     }
 
-    // provision a team with state of initiated
+    setLoading(false)
   }
 
   const [teamName, setTeamName] = useState<string>('')
@@ -73,9 +101,17 @@ export default function CreateTeam() {
 
       <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'>
-          {'Continue ->'}
-        </button>
+        {
+          loading ?
+          <div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600" role="status">
+            <span className="text-black hidden">Loading...</span>
+          </div>
+          :
+          <button type="submit" className='text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded'>
+            {'Continue ->'}
+          </button>
+        }
+        
       </span>
     </form>
   )

services/IService.tsx

@@ -0,0 +1,5 @@
+import { Firestore } from "firebase/firestore";
+
+export default interface IService {
+  db: Firestore;
+}

services/collections.tsx

@@ -0,0 +1,8 @@
+
+
+export enum Collections {
+  users = "users",
+  teams = "teams",
+  teamMembers = "teamMembers",
+  teamSubscriptions = "teamSubscriptions"
+}

services/teamService.tsx

@@ -0,0 +1,33 @@
+import { addDoc, collection, doc, DocumentReference, Firestore, getFirestore, serverTimestamp } from 'firebase/firestore'
+import { Team } from '../models/team'
+import { TeamMember, TeamMemberRole, TeamMemberStatus } from '../models/teamMember'
+import { Collections } from './collections'
+import IService from './IService'
+
+export default class TeamService implements IService {
+  db : Firestore = getFirestore()
+
+  async createTeam(team: Team): Promise<string> {
+    // create team
+    const teamDocRef = await addDoc(collection(this.db, Collections.teams), {
+      ...team,
+      createdDate: serverTimestamp()
+    })
+
+    const teamMember = new TeamMember()
+    teamMember.role = TeamMemberRole.admin
+    teamMember.teamId = teamDocRef.id
+    teamMember.userId = team.createdByUserId
+    teamMember.status = TeamMemberStatus.activated
+
+    // create team member as admin who created the team
+    const teamMemberRef = await addDoc(collection(this.db, Collections.teamMembers), {
+      ...teamMember,
+      createdDate: serverTimestamp()
+    })
+
+    console.log('created team')
+
+    return teamDocRef.id
+  }
+}

services/userService.tsx

@@ -1,18 +1,18 @@
 import { User as FirUser } from "firebase/auth";
 import { Firestore, getFirestore, doc, getDoc, setDoc, Timestamp, serverTimestamp } from "firebase/firestore";
 import { User } from '../models/user'
+import { Collections } from "./collections";
 
 export default class UserService {
   private db : Firestore = getFirestore()
-  private static collectionName: string = "users"
-  
+
   // give back the avatar based on the person's google account avatar
   getUserAvatar(displayName: string) {
     return `https://ui-avatars.com/api/?name=${displayName}`
   }
 
   async getUser(userId: string) : Promise<User | null> {
-    const docRef = doc(this.db, UserService.collectionName, userId);
+    const docRef = doc(this.db, Collections.users, userId);
     const docSnap = await getDoc(docRef);
 
     if (docSnap.exists()) {
@@ -28,12 +28,12 @@ export default class UserService {
   }
 
   async createUser(userId: string, emailAddress: string, avatarUrl: string) {
-    const docRef = doc(this.db, UserService.collectionName, userId);
+    const docRef = doc(this.db, Collections.users, userId);
     await setDoc(docRef, { emailAddress, avatarUrl, createdDate: serverTimestamp() }, { merge: true })
   }
 
   async updateUser(user: User) {
-    const docRef = doc(this.db, UserService.collectionName, user.id);
+    const docRef = doc(this.db, Collections.users, user.id);
     await setDoc(docRef, { ...user, lastUpdatedDate: serverTimestamp() }, { merge: true })
   }
 }