resolved issues on error rendering when action took placce

sangayt1997 · Feb 17, 2023 · 09d25c4 · 09d25c4
1 parent d4dc115
commit 09d25c4
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 122 deletions.
diff --git a/backend/events.json b/backend/events.json
@@ -1,51 +1 @@
-{
-  "events": [
-    {
-      "title": "msdfmasdmfkfd",
-      "image": "https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg",
-      "date": "2023-02-18",
-      "description": "dfnfjndfjnk s dfkf ",
-      "id": "774c7fa4-8d52-413c-a390-dacb9105c7b3"
-    },
-    {
-      "title": "Clock tower Event",
-      "image": "https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg",
-      "date": "2023-08-17",
-      "description": "New Music festival events at Clock tower",
-      "id": "3a8bc0ca-a50d-4a4a-9c47-61d6ebb0fb4f"
-    },
-    {
-      "title": "New Event ad Druk hotel",
-      "image": "https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg",
-      "date": "2023-03-31",
-      "description": "Everyone is welcome here",
-      "id": "6c2a9c3e-206e-426f-87d7-a4339b933fc6"
-    },
-    {
-      "title": "Sangay BirthDay Events",
-      "image": "https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg",
-      "date": "2023-02-23",
-      "description": "This events is for sangay birthday event at Dusit Yargay",
-      "id": "444a2772-150c-494f-b598-1445cd88d236"
-    },
-    {
-      "title": "An new event!!!!",
-      "image": "https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg",
-      "date": "2023-02-18",
-      "description": "It is new event",
-      "id": "195cf2be-70ff-4a8d-a480-0275ef0c37ef"
-    }
-  ],
-  "users": [
-    {
-      "email": "test@gmail.com",
-      "password": "test123",
-      "id": "9a07caf4-f155-456b-9cb1-a699823de10c"
-    },
-    {
-      "email": "test1@gmail.com",
-      "password": "$2a$12$BYt0tR0naW4qcJpHOoYf3uYs2CHCfQ8tgAjgMPod6F1gJ.Ra00Fbi",
-      "id": "a5cbf549-77ab-42b0-97a0-cc6b2ff2b90a"
-    }
-  ]
-}
+{"events":[{"title":"New Event ad Druk hotel","image":"https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg","date":"2023-03-31","description":"Everyone is welcome here","id":"6c2a9c3e-206e-426f-87d7-a4339b933fc6"},{"title":"Sangay BirthDay Events","image":"https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg","date":"2023-02-23","description":"This events is for sangay birthday event at Dusit Yargay","id":"444a2772-150c-494f-b598-1445cd88d236"},{"title":"An new event!!!!","image":"https://blog.hubspot.de/hubfs/Germany/Blog_images/Optimize_Marketing%20Events%20DACH%202021.jpg","date":"2023-02-18","description":"It is new event","id":"195cf2be-70ff-4a8d-a480-0275ef0c37ef"}],"users":[{"email":"test@gmail.com","password":"$2a$12$KFa.aOFOrfhAlucKNmsjqOgUR8t2G5xMCObeFE4mhA/OEROoIUFsG","id":"67b3d5fa-4068-4d20-addb-f18eb4e6fd86"},{"email":"sangaythinley1694@gmail.com","password":"$2a$12$VOiUkRQC83nJf1mVAzn5Keh.lkjLpe1VDnicwf1pYljSw1QjjMFpa","id":"96b0e8ad-e717-4fff-8674-47e5c4e3d958"},{"email":"sangaydorji@gmail.com","password":"$2a$12$DJLYr5sRtwv1QFlv0y1Nt.Eibb6U60S09IbkT8CzKf2PqEgiWCleu","id":"dae7501b-c6d9-4fc5-a04c-5820e9396d2a"}]}
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
@@ -50,7 +50,7 @@ router.post('/login', async (req, res) => {
   try {
     user = await get(email);
   } catch (error) {
-    return res.status(401).json({ message: 'Authentication failed.' });
+    return res.status(401).json({ message: 'Logout failed.' });
   }
 
   const pwIsValid = await isValidPassword(password, user.password);

diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -14,12 +14,16 @@ import Error from "./pages/error/error";
 import { action as dynamicEventAction } from "./components/event-form/event-form";
 import Newsletter, { action as newsletterAction } from "./pages/news-letter/news-letter";
 import Authentication, { action as authAction} from "./pages/authentication/authentication";
+import { action as logoutAction } from "./pages/logout/logout";
+import { checkAuthLoader, tokenLoader } from "./util/auth";
 
 const router = createBrowserRouter([
     {
         path: '/',
         element: <MainLayout/>,
         errorElement: <Error/>,
+        id: 'root',
+        loader: tokenLoader ,
         children: [
             {
                 index: true,
@@ -47,14 +51,16 @@ const router = createBrowserRouter([
                             {
                                 path: 'edit',
                                 element: <EditEvent/>,
-                                action: dynamicEventAction
+                                action: dynamicEventAction,
+                                loader: checkAuthLoader
                             },
                         ]
                     },
                     {
                         path: 'new',
                         element: <NewEvent/>,
-                        action: dynamicEventAction
+                        action: dynamicEventAction,
+                        loader: checkAuthLoader
                     },
                 ]
             },
@@ -68,6 +74,10 @@ const router = createBrowserRouter([
                 element: <Newsletter />,
                 action: newsletterAction,
             },
+            {
+                path: 'logout',
+                action: logoutAction,
+            }
         ],
     },
 ]);

diff --git a/frontend/src/components/event-item/event-item.js b/frontend/src/components/event-item/event-item.js
@@ -1,17 +1,17 @@
 import React from "react";
 import classes from './event-item.module.css';
-import { Link, useSubmit } from "react-router-dom";
+import { Link, useRouteLoaderData, useSubmit } from "react-router-dom";
 
 function EventItem({events}) {
+    const token = useRouteLoaderData('root');
     const submit = useSubmit();
 
     function startDeleteHandler() {
         const proceed = window.confirm('Are you sure?');
 
         if (proceed) {
-            submit(null, { method: 'delete' });
+            submit(null, {method: 'delete'});
         }
-
     }
 
     return (
@@ -20,10 +20,12 @@ function EventItem({events}) {
             <h1>{events?.title}</h1>
             <time>{events?.date}</time>
             <p>{events?.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>
     );
 }

diff --git a/frontend/src/components/events-navigation/events-navigation.js b/frontend/src/components/events-navigation/events-navigation.js
@@ -1,25 +1,28 @@
 import classes from './events-navigation.module.css';
-import { NavLink } from "react-router-dom";
+import { NavLink, useRouteLoaderData } from "react-router-dom";
 
 function EventsNavigation() {
-  return (
-    <header className={classes.header}>
-      <nav>
-        <ul className={classes.list}>
-          <li>
-            <NavLink to="/events" className={({isActive}) => isActive ? classes.active : undefined} end>
-              All Events
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="/events/new" className={({isActive}) => isActive ? classes.active : undefined}>
-              New Event
-            </NavLink>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  );
+    const token = useRouteLoaderData('root');
+    return (
+        <header className={classes.header}>
+            <nav>
+                <ul className={classes.list}>
+                    <li>
+                        <NavLink to="/events" className={({isActive}) => isActive ? classes.active : undefined} end>
+                            All Events
+                        </NavLink>
+                    </li>
+                    {token && (
+                        <li>
+                            <NavLink to="/events/new" className={({isActive}) => isActive ? classes.active : undefined}>
+                                New Event
+                            </NavLink>
+                        </li>
+                    )}
+                </ul>
+            </nav>
+        </header>
+    );
 }
 
 export default EventsNavigation;
diff --git a/frontend/src/components/main-navigation/main-navigation.js b/frontend/src/components/main-navigation/main-navigation.js
@@ -1,48 +1,58 @@
 import React from "react";
 import classes from './main-navigation.module.css';
-import { NavLink } from "react-router-dom";
+import { Form, NavLink, useRouteLoaderData } from "react-router-dom";
 import NewsletterSignup from "../new-letter-signup/new-letter-signup";
 
 function MainNavigation() {
-  return (
-    <header className={classes.header}>
-      <nav>
-        <ul className={classes.list}>
-          <li>
-            <NavLink to="/" className={({isActive}) => isActive ? classes.active : undefined} end>
-                Home
-            </NavLink>
-          </li>
-          <li>
-            <NavLink to="events" className={({isActive}) => isActive ? classes.active : undefined}>
-              Events
-            </NavLink>
-          </li>
-          <li>
-            <NavLink
-                to="/newsletter"
-                className={({ isActive }) =>
-                    isActive ? classes.active : undefined
-                }
-            >
-              Newsletter
-            </NavLink>
-          </li>
-            <li>
-                <NavLink
-                    to="/auth?mode=login"
-                    className={({ isActive }) =>
-                        isActive ? classes.active : undefined
-                    }
-                >
-                    Authentication
-                </NavLink>
-            </li>
-        </ul>
-      </nav>
-      <NewsletterSignup />
-    </header>
-  );
+    const token = useRouteLoaderData('root');
+    return (
+        <header className={classes.header}>
+            <nav>
+                <ul className={classes.list}>
+                    <li>
+                        <NavLink to="/" className={({isActive}) => isActive ? classes.active : undefined} end>
+                            Home
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink to="events" className={({isActive}) => isActive ? classes.active : undefined}>
+                            Events
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink
+                            to="/newsletter"
+                            className={({isActive}) =>
+                                isActive ? classes.active : undefined
+                            }
+                        >
+                            Newsletter
+                        </NavLink>
+                    </li>
+                    {!token && (
+                        <li>
+                            <NavLink
+                                to="/auth?mode=login"
+                                className={({isActive}) =>
+                                    isActive ? classes.active : undefined
+                                }
+                            >
+                                Authentication
+                            </NavLink>
+                        </li>
+                    )}
+                    {token && (
+                        <li>
+                            <Form action="/logout" method="post">
+                                <button>Logout</button>
+                            </Form>
+                        </li>
+                    )}
+                </ul>
+            </nav>
+            <NewsletterSignup/>
+        </header>
+    );
 }
 
 export default MainNavigation;
diff --git a/frontend/src/pages/authentication/authentication.js b/frontend/src/pages/authentication/authentication.js
@@ -19,13 +19,14 @@ export async function action({request}) {
         email: data.get('email'),
         password: data.get('password')
     };
-    const response = fetch('http://localhost:8080/' + mode, {
+    const response = await fetch('http://localhost:8080/' + mode, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify(authData),
     });
+
     if (response.status === 422 || response.status === 401) {
         return response;
     }

diff --git a/frontend/src/pages/event-detail/event-detail.js b/frontend/src/pages/event-detail/event-detail.js
@@ -29,7 +29,7 @@ export async function loader({request, params}) {
 export async function action({params, request}) {
     const eventId = params.eventId;
     const token = getAuthToken();
-    const response = fetch('http://localhost:8080/events/' + eventId, {
+    const response = await fetch('http://localhost:8080/events/' + eventId, {
         method: request.method,
         headers: {
             'Authorization': 'Bearer ' + token

diff --git a/frontend/src/pages/logout/logout.js b/frontend/src/pages/logout/logout.js
@@ -0,0 +1,6 @@
+import { redirect } from "react-router-dom";
+
+export function action() {
+    localStorage.removeItem('token');
+    return redirect('/');
+}
diff --git a/frontend/src/util/auth.js b/frontend/src/util/auth.js
@@ -1,4 +1,19 @@
+import { redirect } from "react-router-dom";
+
 export function getAuthToken() {
     const token = localStorage.getItem('token');
     return token;
 }
+
+export function tokenLoader() {
+    return getAuthToken();
+}
+
+export function checkAuthLoader() {
+    const token = getAuthToken();
+
+    if(!token) {
+        redirect('/auth');
+    }
+    return null;
+}