nirvana/pages/teams/profile.tsx

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')
      }
    })();
  }, [])

  async function handleSubmit(e) {
    e.preventDefault();

    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

    try {
      await userService.updateUser(newUser)
      router.push('/teams')
    }
    catch(error) {
      setError('Something went wrong in saving your information. Please try again.')
    }
  }

  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 mb-2">This is set from your Google account and cannot be changed.</span>
        <input disabled className="w-full rounded-lg bg-gray-100 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 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">
        <span className="text-md">Nickname</span>
        <span className="text-gray-300 text-xs mb-2">What does your team call you?</span>
        <input placeholder="ex. nicky" className="w-full rounded-lg bg-gray-50 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 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>
              </>
              :
              <>
                {/* 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>
  )
}