format nicer

pages/teams/create.tsx

@@ -6,113 +6,133 @@ import { Team, TeamStatus } from "../../models/team";
 import { User, UserStatus } from "../../models/user";
 import TeamService from "../../services/teamService";
 
-const initialSite: string = 'https://'
+const initialSite: string = "https://";
 
-const teamService = new TeamService()
+const teamService = new TeamService();
 
 export default function CreateTeam() {
-  const { currUser } = useAuth()
+  const { currUser } = useAuth();
-  const [error, setError] = useState<string>('')
+  const [error, setError] = useState<string>("");
-  const [loading, setLoading] = useState<Boolean>(true)
+  const [loading, setLoading] = useState<Boolean>(true);
-  const router = useRouter()
+  const router = useRouter();
 
   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(
-          router.push('/teams/login')
+            "not authenticated...routing from dashboard to teams home"
+          );
+          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) {
-      } catch(error) {
+        console.log(error);
-        console.log(error)
+        router.push("/teams/login");
-        router.push('/teams/login')
       }
 
-      setLoading(false)
+      setLoading(false);
     })();
-  }, [])
+  }, []);
 
   async function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
-    setLoading(true)
+    setLoading(true);
 
     if (!teamName) {
-      setError('You must input a team name!')
+      setError("You must input a team name!");
-      return
+      return;
     }
 
     try {
-      const team = new Team()
+      const team = new Team();
-      team.name = teamName
+      team.name = teamName;
-      team.createdByUserId = currUser.uid
+      team.createdByUserId = currUser.uid;
-      team.status = TeamStatus.created
+      team.status = TeamStatus.created;
-      
+
       if (companySite != initialSite) {
         // make sure to put null in database for the team
-        team.companySite = companySite
+        team.companySite = companySite;
       }
-  
+
       // provision a team with state of initiated
-      const createdTeamId = await teamService.createTeam(team)
+      const createdTeamId = await teamService.createTeam(team);
-      router.push('/teams/' + createdTeamId)
+      router.push("/teams/" + createdTeamId);
-    } catch(error) {
+    } catch (error) {
-      setError(error.message)
+      setError(error.message);
     }
 
-    setLoading(false)
+    setLoading(false);
   }
 
-  const [teamName, setTeamName] = useState<string>('')
+  const [teamName, setTeamName] = useState<string>("");
-  const [companySite, setcompanySite] = useState<string>(initialSite)
+  const [companySite, setcompanySite] = useState<string>(initialSite);
 
   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">🙌Create a Team</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">Team Name</span>
-        <span className="text-gray-300 text-xs mb-2">Everyone in your team will see this. You can always change this later.</span>
+        <span className="text-gray-300 text-xs mb-2">
-        <input placeholder="ex. AirBnB" className="w-full rounded-lg bg-gray-50 p-3" value={teamName} onChange={e => setTeamName(e.target.value)} />        
+          Everyone in your team will see this. You can always change this later.
+        </span>
+        <input
+          placeholder="ex. AirBnB"
+          className="w-full rounded-lg bg-gray-50 p-3"
+          value={teamName}
+          onChange={(e) => setTeamName(e.target.value)}
+        />
       </span>
 
       <span className="flex flex-col items-start">
         <span className="text-md">Company Site</span>
         <span className="text-gray-300 text-xs mb-2">optional</span>
-        <input placeholder="ex. https://" className="w-full rounded-lg bg-gray-50 p-3" value={companySite} onChange={e => setcompanySite(e.target.value)} />        
+        <input
+          placeholder="ex. https://"
+          className="w-full rounded-lg bg-gray-50 p-3"
+          value={companySite}
+          onChange={(e) => setcompanySite(e.target.value)}
+        />
       </span>
 
       <Divider />
 
       <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
-        {
+          onClick={() => router.push("/teams")}
-          loading ?
+          className="bg-gray-100 py-2 px-5 rounded text-gray-400"
-          <div className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600" role="status">
+        >
+          Cancel
+        </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'>
+          <button
-            {'Continue ->'}
+            type="submit"
+            className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
+          >
+            {"Continue ->"}
           </button>
-        }
+        )}
-        
       </span>
     </form>
-  )
+  );
-}
+}

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 { currUser, logOut } = useAuth();
-  const [user, setUser] = useState<User | null>(null)
+  const [user, setUser] = useState<User | null>(null);
 
-  const router = useRouter()
+  const router = useRouter();
-  const userService: UserService = new UserService()
+  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 
+        // get user
-        const returnedUser: User|null = await userService.getUser(currUser.uid)
+        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)
+        setUser(returnedUser);
-        setNickname(returnedUser.nickName ?? '')
+        setNickname(returnedUser.nickName ?? "");
-        setFirstName(returnedUser.firstName ?? currUser.displayName.split(" ")[0])
+        setFirstName(
-        setLastName(returnedUser.lastName ?? '')
+          returnedUser.firstName ?? currUser.displayName.split(" ")[0]
-      } catch(error) {
+        );
-        console.log(error)
+        setLastName(returnedUser.lastName ?? "");
-        router.push('/teams/login')
+      } catch (error) {
+        console.log(error);
+        router.push("/teams/login");
       }
     })();
-  }, [])
+  }, []);
 
   async function handleSubmit(e) {
     e.preventDefault();
 
     if (!firstName) {
-      setError('Must input first name')
+      setError("Must input first name");
-      return
+      return;
     } else if (!lastName) {
-      setError('Must input last name')
+      setError("Must input last name");
-      return
+      return;
     } else if (!nickname) {
-      setError('Must input nickname')
+      setError("Must input nickname");
-      return
+      return;
     } else if (nickname.length > 22) {
-      setError('nickname must be less than 22 characters')
+      setError("nickname must be less than 22 characters");
-      return
+      return;
     }
 
     // create the user in the backend or just merge results
-    let newUser = new User()
+    let newUser = new User();
-    newUser.id = currUser.uid
+    newUser.id = currUser.uid;
-    newUser.firstName = firstName
+    newUser.firstName = firstName;
-    newUser.lastName = lastName
+    newUser.lastName = lastName;
-    newUser.nickName = nickname
+    newUser.nickName = nickname;
-    newUser.avatarUrl = currUser.photoURL
+    newUser.avatarUrl = currUser.photoURL;
 
     try {
-      await userService.updateUser(newUser)
+      await userService.updateUser(newUser);
-      router.push('/teams')
+      router.push("/teams");
-    }
+    } catch (error) {
-    catch(error) {
+      setError(
-      setError('Something went wrong in saving your information. Please try again.')
+        "Something went wrong in saving your information. Please try again."
+      );
     }
   }
 
-  const [firstName, setFirstName] = useState<string>(currUser.displayName.split(" ")[0]);
+  const [firstName, setFirstName] = useState<string>(
-  const [lastName, setLastName] = useState<string>('');
+    currUser.displayName.split(" ")[0]
-  const [nickname, setNickname] = useState<string>('')
+  );
-  const [error, setError] = useState<string>('')
+  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>
+        <span className="text-gray-300 text-xs">
-        <img src={user ? user.avatarUrl : currUser.photoURL} alt="asdf" className="rounded-lg mt-2" />
+          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>
+        <span className="text-gray-300 text-xs mb-2">
-        <input disabled className="w-full rounded-lg bg-gray-100 p-3" value={user ? user.emailAddress : currUser.email} readOnly />
+          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>
+        <span className="text-gray-300 text-xs mb-2">
-        <input placeholder="ex. nicky" className="w-full rounded-lg bg-gray-50 p-3" value={nickname} onChange={e => setNickname(e.target.value)} />
+          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 ? (
-          user && user.nickName ?
+          <>
-              <>
+            <button
-                <button onClick={() => router.push('/teams') } className="bg-gray-100 py-2 px-5 rounded text-gray-400">Cancel</button>                
+              onClick={() => router.push("/teams")}
-                <button type="submit" className='text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded'>
+              className="bg-gray-100 py-2 px-5 rounded text-gray-400"
-                  Save
+            >
-                </button>
+              Cancel
-              </>
+            </button>
-              :
+            <button
-              <>
+              type="submit"
-                {/* if they already had a nickname, they are probably revisiting this page */}
+              className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
-                <button type="submit" className='text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded'>
+            >
-                  {'Continue ->'}
+              Save
-                </button>
+            </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>
-  )
+  );
-}
+}