[WIP] Account settings flow.

Author: jtorreggiani

src/components/elements/AppRoutes.jsx

@@ -23,6 +23,7 @@ import ContactPage from 'components/pages/ContactPage';
 import PrivacyPage from 'components/pages/PrivacyPolicyPage';
 import ContactSuccessPage from 'components/pages/ContactSuccessPage';
 import TermsPage from 'components/pages/TermsPage';
+import AccountSettingsPage from 'components/pages/AccountSettingsPage';
 
 // Elements
 import RequireAuth from 'components/elements/RequireAuth';
@@ -94,6 +95,7 @@ function AppRoutes() {
         element={<VerifyMagicLinkPage />}
       />
       <Route path="/contact-success" element={<ContactSuccessPage />} />
+      <Route path="/account-settings" element={<AccountSettings />} />
     </Routes>
   );
 }

src/components/elements/DropdownMenu.jsx

@@ -3,6 +3,24 @@ import { Link } from 'react-router-dom';
 import { navStyleClasses } from 'styles/navbar';
 import DownArrowIcon from 'components/elements/DownArrowIcon';
 
+function DropDownAction({ value, label, route, action }) {
+  if (action) {
+    return (
+      <a href="#" onClick={action} className={navStyleClasses.navDropdownItem}>{label}</a>
+    )
+  } else {
+    return (
+      <Link
+        to={route}
+        value={value}
+        className={navStyleClasses.navDropdownItem}
+      >
+        {label}
+      </Link>
+    )
+  }
+}
+
 function DropdownMenu({ label, options }) {
   return (
     <div className="flex justify-center mt-4 mr-10">
@@ -22,16 +40,15 @@ function DropdownMenu({ label, options }) {
             className={navStyleClasses.navSelectMenu}
             aria-labelledby="dropdownMenuButton2"
           >
-            {options.map(({ value, label, route }) => {
+            {options.map(({ value, label, route, action }) => {
               return (
                 <li key={value}>
-                  <Link
-                    to={route}
+                  <DropDownAction
                     value={value}
-                    className={navStyleClasses.navDropdownItem}
-                  >
-                    {label}
-                  </Link>
+                    label={label}
+                    route={route}
+                    action={action}
+                  />
                 </li>
               )
             })}

src/components/elements/NavigationBar.jsx

@@ -13,7 +13,10 @@ import { NAVBAR_EVENT_OPTIONS } from 'constants/navbar';
 function NavigationBar() {
   const auth = useAuth();
   const [colorTheme, setTheme] = useDarkMode();
-  const signOut = () => auth.signOutCurrentUser();
+  const authLinks = [
+    { label: 'Settings', value: 'settings', route: '/account-settings' },
+    { label: 'Sign Out', value: 'sign-out', action: () => auth.signOutCurrentUser() },
+  ]
 
   return (
     <>
@@ -44,12 +47,14 @@ function NavigationBar() {
                 alt="logo"
               />
             </div>
-            <div className={navStyleClasses.navLink}>
-              {auth.currentUser.isAuthenticated
-                ? <button onClick={signOut}>Sign Out</button>
-                : <Link to="/sign-in">Sign In</Link>
+
+            <div>
+              { auth.currentUser.isAuthenticated
+                ? <DropdownMenu label="Account" options={authLinks} />
+                : <div className={navStyleClasses.navLink}><Link to="/sign-in">Sign In</Link></div>
               }
             </div>
+
             <div className={navStyleClasses.navLink}>
               <a
                 href="https://www.dataumbrella.org"
@@ -64,7 +69,10 @@ function NavigationBar() {
                 Sponsors
               </a>
             </div>
-            <DropdownMenu label="Events" options={NAVBAR_EVENT_OPTIONS} />
+
+            <div>
+              <DropdownMenu label="Events" options={NAVBAR_EVENT_OPTIONS} />
+            </div>
           </div>
         </div>
       </div>

src/components/pages/AccountSettingsPage.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useAuth } from 'hooks/authentication'; 
+
+function AccountSettingsPage() {
+  const auth = useAuth();
+
+  return (
+    <div className="w-3/4 container mx-auto p-20">
+      <h1 className="text-2xl font-bold">Email</h1>
+      <p>{auth.currentUser.email}</p>
+    </div>
+  );
+}
+
+export default AccountSettingsPage;