Merge branch 'trunk' expose public events

client/src/App.css

@@ -12,6 +12,18 @@ label.total_volunteers_label{
   margin: 10px;
 }
 
+body.public_layout {
+
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+}
+
+main.public_layout {
+  flex-grow: 1;
+}
+
 /* 992px expand:lg */
 @media screen and (max-width: 992px) {
 

client/src/App.jsx

@@ -30,68 +30,70 @@ import EventStats from "./features/event/EventStats";
 
 import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
+import PublicEvents from "./components/PublicEvents";
 
 const App = () => {
   return (
     <Routes>
-      <Route path="/" element={<Layout />}>
+      <Route path="/" element={<Layout /> }>
         <Route index={true} element={<PublicPage />} />
 
-        <Route path="/login" element={<Login />} />
+        <Route element={<PrefetchEvents />}>
 
-        <Route path="/register" element={<Register />} />
+          {/* browse events as a guest */}
+          <Route path="/events/*" element={<PublicEvents/>}/>
 
-        <Route element={<PersistLogin />}>
-          <Route element={<PrefetchEvents />}>
+          <Route path="/login" element={<Login />} />
+
+          <Route path="/register" element={<Register />} />
+
+          <Route element={<PersistLogin />}>
+            {/* <Route element={<PrefetchEvents />}> */}
             <Route path="/dash" element={<DashLayout />}>
               <Route element={<PrefetchVolunteers />}>
                 <Route index={true} element={<Welcome />} />
-                  <Route path="events" element={<EventHeader />}>
-                    <Route index={true} element={<EventList />} />
+                <Route path="events" element={<EventHeader />}>
+                  <Route index={true} element={<EventList />} />
 
-                    <Route path=":eventId">
-                      <Route index element={<EventPage />} />
+                  <Route path=":eventId">
+                    <Route index element={<EventPage />} />
 
-                      <Route element={<RoleBasedRoute allowedRole={"ADMIN"} />}>
-                        <Route path="edit" element={<EditEvent />} />
-                        <Route path="stats" element={<EventStats />} />
-                      </Route>
+                    <Route element={<RoleBasedRoute allowedRole={"ADMIN"} />}>
+                      <Route path="edit" element={<EditEvent />} />
+                      <Route path="stats" element={<EventStats />} />
                     </Route>
+                  </Route>
 
-                    <Route path="new" element={<NewEventForm />} />
-                    <Route path="filter" element={<FilteredEventList />} />
+                  <Route path="new" element={<NewEventForm />} />
+                  <Route path="filter" element={<FilteredEventList />} />
 
-                    <Route path="sort" element={<SortedEventsList />} />
+                  <Route path="sort" element={<SortedEventsList />} />
 
-                    <Route path="search" element={<SearchedEventsList />} />
-                  </Route>
+                  <Route path="search" element={<SearchedEventsList />} />
+                </Route>
 
-                  {/* prefetchVOluns here */}
-                  {/* RoleBaseRoute for admin only */}
-                  {/* <Route element={<RoleBaseRoute allowedRole={"ADMIN"}/>}> */}
-                  <Route path="volunteers" element={<VolunteerHeader />}>
-                    <Route element={<RoleBasedRoute allowedRole={"ADMIN"} />}>
-                      {/* <Route element={<PrefetchVolunteers/>}> */}
-                      <Route index={true} element={<VolunteersList />} />
+                {/* prefetchVOluns here */}
+                {/* RoleBaseRoute for admin only */}
+                {/* <Route element={<RoleBaseRoute allowedRole={"ADMIN"}/>}> */}
+                <Route path="volunteers" element={<VolunteerHeader />}>
+                  <Route element={<RoleBasedRoute allowedRole={"ADMIN"} />}>
+                    <Route index={true} element={<VolunteersList />} />
 
-                      <Route path="search" element={<SearchedVolunList />} />
+                    <Route path="search" element={<SearchedVolunList />} />
 
-                      <Route path="sort" element={<SortedVolunList />} />
-                      {/* </Route> */}
-                    </Route>
+                    <Route path="sort" element={<SortedVolunList />} />
+                  </Route>
 
-                    <Route
-                      element={<RoleBasedRoute allowedRole={"VOLUNTEER"} />}
-                    >
-                      <Route path=":volunId">
-                        <Route index={true} element={<SingleVolunteerPage />} />
-                        <Route path="edit" element={<EditVolunteer />} />
-                        <Route path="pwd" element={<UpdatePassword />} />
-                      </Route>
+                  <Route element={<RoleBasedRoute allowedRole={"VOLUNTEER"} />}>
+                    <Route path=":volunId">
+                      <Route index={true} element={<SingleVolunteerPage />} />
+                      <Route path="edit" element={<EditVolunteer />} />
+                      <Route path="pwd" element={<UpdatePassword />} />
                     </Route>
                   </Route>
                 </Route>
               </Route>
+            </Route>
           </Route>
         </Route>
       </Route>

client/src/app/api/apiSlice.js

@@ -1,7 +1,8 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 import { setCredentials } from '../../features/auth/authSlice';
 
-const apiBaseUrl =import.meta.env.VITE_API_PROD_URL || import.meta.env.VITE_API_DEV_URL
+const apiBaseUrl =(import.meta.env.VITE_API_PROD_URL) || ( import.meta.env.VITE_API_DEV_URL)
+
 const baseQuery = fetchBaseQuery({
 
     baseUrl: apiBaseUrl,
@@ -21,8 +22,16 @@ const baseQuery = fetchBaseQuery({
 
 const baseQueryWithRefreshAuth = async (args, api, extraOptions) => {
 
+    const publicEndpoints = ['/events/search','/events/sort']
+
+    if (publicEndpoints.includes(args.endpoint) ) {
+
+        return baseQuery(args, api, extraOptions);
+    }
+
     let originalResult = await baseQuery(args, api, extraOptions)
 
+
     //forbidden from verifyJWT
     if(originalResult?.error?.status === 403){
 

client/src/components/DashFooter.jsx

@@ -38,7 +38,7 @@ const DashFooter = () => {
     content = (
 
       <footer className='bg-secondary text-white position-relative bottom-0 w-100  h-auto'>
-        <Container className=' pt-4' >
+        <Container className=' pt-4 text-center' >
           <Row className='py-2'>
             <Col>
 

client/src/components/DashHeader.jsx

@@ -15,7 +15,7 @@ const DashHeader = () => {
           <Navbar.Toggle aria-controls="basic-navbar-nav"></Navbar.Toggle>
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="ms-auto header-nav">
-              <LinkContainer to={"/dash/home"}>
+              <LinkContainer to={"/dash"}>
                 <Nav.Link><FaHome/> Home</Nav.Link>
               </LinkContainer>
               <Logout />

client/src/components/Layout.jsx

@@ -1,24 +1,25 @@
-import { Outlet } from 'react-router-dom'
-import useAuth from '../hooks/useAuth'
-import PublicHeader from './PublicHeader'
-import { ToastContainer } from 'react-toastify'
+import { Outlet } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+import PublicHeader from "./PublicHeader";
+import { ToastContainer } from "react-toastify";
+import PublicFooter from "./PublicFooter";
 
 const Layout = () => {
+  const { volunId, role } = useAuth();
 
-    const {volunId, role}= useAuth()
+  const displayPublic = !volunId && !role;
 
-    const displayPublicHeader = !volunId  && !role
+  return (
+    <body className="public_layout">
+      {displayPublic && <PublicHeader />}
+      <main className="public_layout">
 
-    return (
-
-        <>
-            {displayPublicHeader && <PublicHeader/>}
-            <ToastContainer/>
-
-                 <Outlet />
-
-
-        </>
-   )
-}
-export default Layout
+        <ToastContainer />
+        <Outlet />
+      </main>
+
+      {displayPublic && <PublicFooter />}
+    </body>
+  );
+};
+export default Layout;

client/src/components/PublicEvents.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import EventHeader from "../features/event/EventHeader";
+import EventList from "../features/event/EventList";
+import useAuth from "../hooks/useAuth";
+import { Route, Routes } from "react-router-dom";
+import EventPage from "../features/event/EventPage";
+import SearchedEventsList from "../features/event/search/SearchedEventsList";
+import SortedEventsList from "../features/event/sort/SortedEventsList";
+import FilteredEventList from "../features/event/filter/FilteredEventList";
+
+const PublicEvents = () => {
+
+//   const authData = useAuth();
+  const content = (
+    <>
+      <EventHeader />
+      <Routes>
+        <Route index={true} element={<EventList />} />
+        <Route path=":eventId" element={<EventPage />} />
+        <Route path="search" element={<SearchedEventsList />} />
+        <Route path="sort" element={<SortedEventsList />} />
+        <Route path="filter" element={<FilteredEventList />} />
+      </Routes>
+    </>
+  );
+
+//   console.log("guest info: ", authData);
+  return content;
+};
+
+export default PublicEvents;

client/src/components/PublicFooter.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button, Col, Container, Row } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const PublicFooter = () => {
+
+  const content = (
+    <footer className=" bg-black text-white position-relative bottom-0 w-100  h-auto">
+      <Container className=" pt-4 text-center">
+        <Row className="py-2">
+          <Col>
+            {/* <Button as={Link} to='/dash' variant='warning' > */}
+            <Button as={Link} to="/" variant="warning">
+              Home
+            </Button>
+          </Col>
+
+
+
+          <Col>
+            <p> Copyright &copy; KZH 2023</p>
+          </Col>
+        </Row>
+      </Container>
+    </footer>
+  );
+  return content;
+};
+
+export default PublicFooter;

client/src/components/PublicHeader.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Container, Nav, Navbar } from 'react-bootstrap'
 import { FaRegistered, FaSignInAlt } from 'react-icons/fa'
-import { Outlet } from 'react-router'
 import { LinkContainer } from 'react-router-bootstrap'
 
 const PublicHeader = () => {
@@ -10,7 +9,7 @@ const PublicHeader = () => {
     const headerContent = (
 
         <header>
-            <Navbar bg="dark" variant="dark" collapseOnSelect expand='lg'>
+            <Navbar bg="dark" variant="dark" collapseOnSelect expand='lg' className=' py-3'>
                 <Container>
                     <Navbar.Brand href='/'>Home</Navbar.Brand>
                     <Navbar.Toggle aria-controls='basic-navbar-nav'/>

client/src/components/PublicPage.jsx

@@ -12,17 +12,22 @@ const PublicPage = () => {
         <p className="text-center mb-4">
           This space is for student volunteers at ...
         </p>
-        <div className="d-flex">
+        <div className="d-flex mb-3">
           <Button as={Link} variant="primary" to="/login" className=" me-3">
             Sign In
           </Button>
-          <Badge className="me-3" bg="info" pill>
-            or
+          <Badge className="me-3 d-flex align-items-center justify-content-center" bg="info" pill>
+          or
+
           </Badge>
-          <Button as={Link} variant="secondary" to="/register">
+          <Button as={Link} variant="primary" to="/register">
             Register
           </Button>
         </div>
+
+        <div className="d-flex">
+          <Button as={Link} variant="warning" to="/events">Check out events!</Button>
+        </div>
       </Card>
     </Container>
   );

client/src/features/auth/AuthFormContainer.jsx

@@ -5,7 +5,7 @@ const AuthFormContainer = ({children}) => {
 
 
   return (
-    <Container>
+    <Container className='my-3'>
         <Row className='justify-content-md-center mt-5'>
             <Col xs={12} md={6} className='card p-5' >
                 {children}

client/src/features/auth/PersistLogin.jsx

@@ -26,7 +26,7 @@ const PersistLogin = () => {
 
                 try {
                     const {accessToken  } = await refresh().unwrap()
-                    console.log('new AccessTOkne from PersistLogin: ', accessToken);
+                    // console.log('new AccessTOkne from PersistLogin: ', accessToken);
 
                     setTrueSuccess(true)
 

client/src/features/event/DeleteEvent.jsx

@@ -24,7 +24,6 @@ const DeleteEvent = ({ eventId }) => {
 
   const handleDeleteEvent = async () => {
     try {
-    //   const deleteEventResult = await deleteEvent(eventId).unwrap();
       const deleteEventResult = await deleteEvent({eventId}).unwrap();
 
       console.log("deleteEventResult: ", deleteEventResult);