team creation clean done

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>
   )