Updating the UI Based on Auth Status

Author: zntb

frontend/src/App.js

@@ -17,12 +17,15 @@ import AuthenticationPage, {
   action as authAction,
 } from './pages/Authentication';
 import { action as logoutAction } from './pages/Logout';
+import { tokenLoader } from './util/auth';
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <RootLayout />,
     errorElement: <ErrorPage />,
+    id: 'root',
+    loader: tokenLoader,
     children: [
       { index: true, element: <HomePage /> },
       {

frontend/src/components/EventItem.js

@@ -1,8 +1,10 @@
-import { Link, useSubmit } from 'react-router-dom';
+import { Link, useRouteLoaderData, useSubmit } from 'react-router-dom';
 
 import classes from './EventItem.module.css';
 
 function EventItem({ event }) {
+  const token = useRouteLoaderData('root');
+
   const submit = useSubmit();
 
   function startDeleteHandler() {
@@ -19,10 +21,12 @@ function EventItem({ event }) {
       <h1>{event.title}</h1>
       <time>{event.date}</time>
       <p>{event.description}</p>
-      <menu className={classes.actions}>
-        <Link to="edit">Edit</Link>
-        <button onClick={startDeleteHandler}>Delete</button>
-      </menu>
+      {token && (
+        <menu className={classes.actions}>
+          <Link to="edit">Edit</Link>
+          <button onClick={startDeleteHandler}>Delete</button>
+        </menu>
+      )}
     </article>
   );
 }

frontend/src/components/EventsNavigation.js

@@ -1,8 +1,10 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useRouteLoaderData } from 'react-router-dom';
 
 import classes from './EventsNavigation.module.css';
 
 function EventsNavigation() {
+  const token = useRouteLoaderData('root');
+
   return (
     <header className={classes.header}>
       <nav>
@@ -18,16 +20,18 @@ function EventsNavigation() {
               All Events
             </NavLink>
           </li>
-          <li>
-            <NavLink
-              to="/events/new"
-              className={({ isActive }) =>
-                isActive ? classes.active : undefined
-              }
-            >
-              New Event
-            </NavLink>
-          </li>
+          {token && (
+            <li>
+              <NavLink
+                to="/events/new"
+                className={({ isActive }) =>
+                  isActive ? classes.active : undefined
+                }
+              >
+                New Event
+              </NavLink>
+            </li>
+          )}
         </ul>
       </nav>
     </header>

frontend/src/components/MainNavigation.js

@@ -1,9 +1,11 @@
-import { Form, NavLink } from 'react-router-dom';
+import { Form, NavLink, useRouteLoaderData } from 'react-router-dom';
 
 import classes from './MainNavigation.module.css';
 import NewsletterSignup from './NewsletterSignup';
 
 function MainNavigation() {
+  const token = useRouteLoaderData('root');
+
   return (
     <header className={classes.header}>
       <nav>
@@ -39,22 +41,26 @@ function MainNavigation() {
               Newsletter
             </NavLink>
           </li>
-          <li>
-            <NavLink
-              to="/auth?mode=login"
-              className={({ isActive }) =>
-                isActive ? classes.active : undefined
-              }
-              end
-            >
-              Authentication
-            </NavLink>
-          </li>
-          <li>
-            <Form action="/logout" method="post">
-              <button style={{ padding: '0.2rem 0.5rem' }}>Logout</button>
-            </Form>
-          </li>
+          {!token && (
+            <li>
+              <NavLink
+                to="/auth?mode=login"
+                className={({ isActive }) =>
+                  isActive ? classes.active : undefined
+                }
+                end
+              >
+                Authentication
+              </NavLink>
+            </li>
+          )}
+          {token && (
+            <li>
+              <Form action="/logout" method="post">
+                <button style={{ padding: '0.2rem 0.5rem' }}>Logout</button>
+              </Form>
+            </li>
+          )}
         </ul>
       </nav>
       <NewsletterSignup />

frontend/src/util/auth.js

@@ -2,3 +2,7 @@ export function getAuthToken() {
   const token = localStorage.getItem('token');
   return token;
 }
+
+export function tokenLoader() {
+  return getAuthToken();
+}