format nicer

pages/teams/profile.tsx

@@ -6,125 +6,165 @@ 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 { currUser, logOut } = useAuth();
+  const [user, setUser] = useState<User | null>(null);
 
-  const router = useRouter()
-  const userService: UserService = new UserService()
+  const router = useRouter();
+  const userService: UserService = new UserService();
 
   useEffect(() => {
-    (async function() {
+    (async function () {
       try {
         // if not authenticated, take user to the login
         if (!currUser) {
-          console.log('not authenticated...routing from dashboard to teams home')
+          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)
+        // 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)
+          userService.createUser(
+            currUser.uid,
+            currUser.email,
+            currUser.photoURL
+          );
         }
 
-        console.log('got user from the backend')
+        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')
+        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
+      setError("Must input first name");
+      return;
     } else if (!lastName) {
-      setError('Must input last name')
-      return
+      setError("Must input last name");
+      return;
     } else if (!nickname) {
-      setError('Must input nickname')
-      return
+      setError("Must input nickname");
+      return;
     } else if (nickname.length > 22) {
-      setError('nickname must be less than 22 characters')
-      return
+      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
+    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.')
+      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>('')
+  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 
+    <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}  
+      onSubmit={handleSubmit}
     >
       {/* header */}
       <div className="text-lg">Profile</div>
 
-      {
-        error && <span className="text-red-300 text-md">{error}</span>
-      }
+      {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 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 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)} />        
+        <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)} />
+        <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 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 />
@@ -132,24 +172,33 @@ export default function Profile() {
       <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>
-              </>         
-        }
-       
+        {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>
-  )
-}
+  );
+}