profile page complete functionality

models/user.ts

@@ -3,12 +3,15 @@ import IFirestoreSerializable from "./firestoreSerializable";
 
 export class User {
     id: string;
+    emailAddress: string;
     nickName: string;
     firstName: string;
     lastName: string;
+    avatarUrl: string;
+    userStatus: UserStatus
 
-    createdDate: Date
-    lastUpdatedDate: Date
+    createdDate: Timestamp;
+    lastUpdatedDate: Timestamp;
 
     // serialize() {
     //     return {            

pages/teams/index.tsx

@@ -12,7 +12,7 @@ import unfetch from 'isomorphic-unfetch'
  * figure out where to take the user based on everything
  */
 function RouteHandler({ user }) {
-  const { currUser, logOut } = useAuth()
+  const { currUser } = useAuth()
   const router = useRouter()
   const userService: UserService = new UserService()
 
@@ -31,7 +31,7 @@ function RouteHandler({ user }) {
         console.log(user)
         // if user has no profile, then go to create profile
         if (!user || !user.firstName || !user.lastName || !user.nickName) {
-
+          router.push('/teams/profile')
         }
       } catch(error) {
         console.log(error)

pages/teams/profile.tsx

@@ -0,0 +1,147 @@
+import { Divider } from "antd";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useAuth } from "../../contexts/authContext";
+import { User } from "../../models/user";
+import UserService from "../../services/userService";
+import Image from "next/image";
+
+
+export default function Profile() {
+  const { currUser, logOut } = useAuth()
+  const [user, setUser] = useState<User | null>(null)
+
+  const router = useRouter()
+  const userService: UserService = new UserService()
+
+  useEffect(() => {
+    (async function() {
+      try {
+        // if not authenticated, take user to the login
+        if (!currUser) {
+          console.log('not authenticated...routing from dashboard to teams home')
+          // router.push('/teams/login')
+        }
+
+        // get user 
+        const returnedUser: User|null = await userService.getUser(currUser.uid)
+
+        // if the user is null, then go ahead and create the user even though it's not there yet
+        if (!returnedUser) {
+          userService.createUser(currUser.uid, currUser.email, currUser.photoURL)
+        }
+
+        console.log('got user from the backend')
+
+        setUser(returnedUser)
+        setNickname(returnedUser.nickName ?? '')
+        setFirstName(returnedUser.firstName ?? currUser.displayName.split(" ")[0])
+        setLastName(returnedUser.lastName ?? '')
+      } catch(error) {
+        console.log(error)
+        router.push('/teams/login')
+      }
+    })();
+  }, [])
+
+  function handleSubmit() {
+    if (!firstName) {
+      setError('Must input first name')
+      return
+    } else if (!lastName) {
+      setError('Must input last name')
+      return
+    } else if (!nickname) {
+      setError('Must input nickname')
+      return
+    } else if (nickname.length > 22) {
+      setError('nickname must be less than 22 characters')
+      return
+    }
+
+    // create the user in the backend or just merge results
+    let newUser = new User()
+    newUser.id = currUser.uid
+    newUser.firstName = firstName
+    newUser.lastName = lastName
+    newUser.nickName = nickname
+    newUser.avatarUrl = currUser.photoURL
+
+    userService.updateUser(newUser)
+  }
+
+  const [firstName, setFirstName] = useState<string>(currUser.displayName.split(" ")[0]);
+  const [lastName, setLastName] = useState<string>('');
+  const [nickname, setNickname] = 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"
+      onSubmit={handleSubmit}  
+    >
+      {/* header */}
+      <div className="text-lg">Profile</div>
+
+      {
+        error && <span className="text-red-300 text-md">{error}</span>
+      }
+
+      <Divider />
+
+      <span className="flex flex-col items-start">
+        <span className="text-md">Avatar</span>
+        <span className="text-gray-300 text-xs">Please change your google image to change this.</span>
+        <img src={user ? user.avatarUrl : currUser.photoURL} alt="asdf" className="rounded-lg mt-2" />
+      </span>
+
+      <span className="flex flex-col items-start">
+        <span className="text-md">Email</span>
+        <span className="text-gray-300 text-xs">This is set from your Google account and cannot be changed.</span>
+        <input disabled className="w-full rounded-lg bg-gray-50 p-3" value={user ? user.emailAddress : currUser.email} readOnly />
+      </span>
+
+      <span className="flex flex-col items-start">
+        <span className="text-md">First Name</span>
+        <span className="text-gray-300 text-xs"></span>
+        <input placeholder="ex. John" className="w-full rounded-lg bg-gray-100 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"></span>
+        <input placeholder="ex. Brown" className="w-full rounded-lg bg-gray-100 p-3" value={lastName} onChange={e => setLastName(e.target.value)} />
+      </span>
+
+      <span className="flex flex-col items-start">
+        <span className="text-md">Nickname</span>
+        <span className="text-gray-300 text-xs">What does your team call you?</span>
+        <input placeholder="ex. nicky" className="w-full rounded-lg bg-gray-100 p-3" value={nickname} onChange={e => setNickname(e.target.value)} />
+      </span>
+
+      <Divider />
+
+      <span className="flex flex-row justify-end space-x-2">
+        {/* if they already had a nickname, they are probably revisiting this page */}
+        {/* can't cancel if they are a new user */}
+        {
+          user && user.nickName ?
+              <>
+                <button 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>
+              </>
+              :
+              <>
+                {/* if they already had a nickname, they are probably revisiting this page */}
+                <button type="submit" className='text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded'>
+                  {'Continue ->'}
+                </button>
+              </>         
+        }
+       
+      </span>
+    </form>
+  )
+}

services/userService.tsx

@@ -1,5 +1,5 @@
 import { User as FirUser } from "firebase/auth";
-import { Firestore, getFirestore, doc, getDoc } from "firebase/firestore";
+import { Firestore, getFirestore, doc, getDoc, setDoc, Timestamp, serverTimestamp } from "firebase/firestore";
 import { User } from '../models/user'
 
 export default class UserService {
@@ -10,13 +10,9 @@ export default class UserService {
 
   }
 
-  // give back the avatar based on the person's google account avatar or if they set one then
-  getUserAvatar(firstName: string, lastName: string, avatar: string = null) {
-    if (avatar) {
-      return avatar
-    }
-
-    return `https://ui-avatars.com/api/?name=${firstName}+${lastName}`
+  // 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> {
@@ -24,7 +20,7 @@ export default class UserService {
     const docSnap = await getDoc(docRef);
 
     if (docSnap.exists()) {
-      console.log("Document data:", docSnap.data());
+      console.log('got user data')
       let user: User = docSnap.data() as User
       return user
     } else {
@@ -34,4 +30,14 @@ export default class UserService {
       return null
     }
   }
+
+  async createUser(userId: string, emailAddress: string, avatarUrl: string) {
+    const docRef = doc(this.db, UserService.collectionName, userId);
+    await setDoc(docRef, { emailAddress, avatarUrl, createdDate: serverTimestamp() }, { merge: true })
+  }
+
+  async updateUser(user: User) {
+    const docRef = doc(this.db, UserService.collectionName, user.id);
+    await setDoc(docRef, { ...user, lastUpdatedDate: serverTimestamp() }, { merge: true })
+  }
 }