Fixes #1472 - Create withAuth component to manage automatic redirect to login page

client/src/App.jsx

@@ -35,9 +35,19 @@ import theme from './theme';
 
 import './App.scss';
 
+/* 
+   withAuth Hook
+   Wraps component with withAuth hook to manage automatic redirect to login page if user is not logged in
+   An example (inside routes object):
+   { path: '/endpoint', name: 'endpoint', Component: withAuth(ComponentName) },
+   Return <Redirect to="/login" /> if user is not logged in
+   Return <ComponentName {...props} auth={auth} /> if user is logged in
+*/
+import withAuth from './hooks/withAuth';
+
 const routes = [
   { path: '/', name: 'home', Component: Home },
-  { path: '/admin', name: 'admindashboard', Component: AdminDashboard },
+  { path: '/admin', name: 'admindashboard', Component: withAuth(AdminDashboard) },
   { path: '/user', name: 'userdashboard', Component: UserDashboard },
   { path: '/profile', name: 'profile', Component: UserProfile },
   { path: '/event/:id', name: 'event', Component: Event },
@@ -49,21 +59,20 @@ const routes = [
   { path: '/success', name: 'success', Component: Success },
   { path: '/handleauth', name: 'handleauth', Component: HandleAuth },
   { path: '/emailsent', name: 'emailsent', Component: EmailSent },
-  { path: '/events', name: 'events', Component: Events },
+  { path: '/events', name: 'events', Component: withAuth(Events) },
+  { path: '/useradmin', name: 'useradmin', Component: withAuth(UserAdmin) },
+  { path: '/projects', name: 'projects', Component: withAuth(ProjectList) },
+  { path: '/projects/create', name: 'projectform', Component: withAuth(addProject) },
   { path: '/users', name: 'users', Component: Users },
-
-  { path: '/users/user-search', name: 'useradmin', Component: UserAdmin },
   {
     path: '/users/permission-search',
     name: 'useradmin',
     Component: UserPermission,
   },
-  { path: '/projects', name: 'projects', Component: ProjectList },
-  { path: '/projects/create', name: 'projectform', Component: addProject },
   {
     path: '/projects/:projectId',
     name: 'project',
-    Component: ManageProjects,
+    Component: withAuth(ManageProjects),
   },
   {
     path: '/projectleader',

client/src/components/ProjectForm.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useForm, useFormState } from 'react-hook-form';
-import { Redirect } from 'react-router-dom';
 import {
   CircularProgress,
   Typography,
@@ -230,7 +229,7 @@ export default function ProjectForm({
     </Grid>
   );
 
-  return auth && auth.user ? (
+  return (
     <Box sx={{ px: 0.5 }}>
       <Box sx={{ textAlign: 'center' }}>
         <Typography variant="h1">Project Management</Typography>
@@ -330,7 +329,5 @@ export default function ProjectForm({
         </TitledBox>
       )}
     </Box>
-  ) : (
-    <Redirect to="/login" />
   );
 }

client/src/components/admin/dashboard/index.jsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Redirect } from 'react-router-dom';
-import useAuth from '../../../hooks/useAuth';
 import UpcomingEvent from '../../presentational/upcomingEvent';
 import EventOverview from '../eventOverview';
 import DonutChartContainer from '../donutChartContainer';
@@ -13,7 +11,6 @@ import './index.scss';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend} from '../../../utils/globalSettings';
 
 const AdminDashboard = () => {
-  const { auth } = useAuth();
   const defaultChartType = 'All Events';
   const eventsArr = [];
 
@@ -383,7 +380,7 @@ const AdminDashboard = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return auth && auth.user ? (
+  return (
     <div className="flex-container">
       <div className="dashboard admin-dashboard-wrap">
         <div className="admin-header">
@@ -472,8 +469,6 @@ const AdminDashboard = () => {
         </TabsContainer>
       </div>
     </div>
-  ) : (
-    <Redirect to="/login" />
   );
 };
 

client/src/components/manageProjects/addProject.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import ProjectForm from '../ProjectForm';
 import { simpleInputs } from '../data';
 
-function addProject() {
+function addProject({auth}) {
   return (
     <div>
       <ProjectForm
         arr={simpleInputs}
         formData={null}
         handleChange={null}
         isEdit={false}
+        auth={auth}
       />
     </div>
   );

client/src/hooks/withAuth.jsx

@@ -0,0 +1,14 @@
+import { Redirect } from 'react-router-dom';
+import useAuth from './useAuth';
+
+const withAuth = (Component) => (props) => {
+    const { auth } = useAuth();
+
+    if (!auth) {
+        return <Redirect to="/login" />
+    }
+
+    return <Component {...props} auth={auth} />;
+}
+
+export default withAuth;

client/src/pages/Events.jsx

@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import moment from 'moment';
-import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend} from '../utils/globalSettings';
+import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
 
 import '../sass/Events.scss';
-import useAuth from '../hooks/useAuth';
 
 const Events = (props) => {
-  const { auth } = useAuth();
   const [events, setEvents] = useState([]);
   const [eventSearchParam, setEventSearchParam] = useState('');
 
@@ -20,17 +18,17 @@ const Events = (props) => {
           },
         });
         const resJson = await res.json();
-  
+
         setEvents(resJson);
       } catch (error) {
         alert(error);
       }
     }
-    
+
     fetchData();
   }, []);
 
-  return auth && auth.user ? (
+  return (
     <div className="events-list">
       <p>Filter:</p>
       <input
@@ -54,8 +52,8 @@ const Events = (props) => {
                     <Link to={`/event/${event._id}`}>
                       <p className="event-name">
                         {' '}
-                        {event.name}
-                        ({moment(event.date).format('ddd, MMM D @ h:mm a')})
+                        {event.name}(
+                        {moment(event.date).format('ddd, MMM D @ h:mm a')})
                       </p>
                     </Link>
                   </div>
@@ -65,9 +63,7 @@ const Events = (props) => {
           })}
       </ul>
     </div>
-  ) : (
-    <Redirect to="/login" />
   );
 };
 
-export default Events;
+export default Events;

client/src/pages/ManageProjects.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
-import useAuth from '../hooks/useAuth';
+import { useParams } from 'react-router-dom';
 import SelectProject from '../components/manageProjects/selectProject';
 import EditProject from '../components/manageProjects/editProject';
 import ProjectApiService from '../api/ProjectApiService';
@@ -38,9 +37,8 @@ const noStyle = {
   "display": "none",
 }
 
-const ManageProjects = () => {
+const ManageProjects = ({ auth }) => {
   const { projectId } = useParams();
-  const { auth } = useAuth();
   const [projects, setProjects] = useState();
   const [projectToEdit, setProjectToEdit] = useState();
   const [recurringEvents, setRecurringEvents] = useState();
@@ -142,11 +140,6 @@ const ManageProjects = () => {
     fetchRegularEvents();
   }, [fetchProjects, fetchRecurringEvents, fetchRegularEvents]);
 
-  // If not logged in, redirect to login page
-  if (!auth && !auth?.user) {
-    return <Redirect to="/login" />;
-  }
-
   let displayedComponent;
 
   switch (componentToDisplay) {

client/src/pages/ProjectList.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import ProjectApiService from '../api/ProjectApiService';
 import { styled } from '@mui/system';
-import useAuth from '../hooks/useAuth';
-import { Redirect } from 'react-router-dom';
 
 import {
   Box,
@@ -30,12 +28,10 @@ const StyledTypography = styled(Typography)({
  *   - will not see button to add a new project
  */
 
-export default function ProjectList() {
+export default function ProjectList({ auth }) {
   const [projects, setProjects] = useState(null);
   const [projectApiService] = useState(new ProjectApiService());
-
-  // destructuring auth from context object created by AuthContext.Provider
-  const { auth } = useAuth();
+
   const user = auth?.user;
 
   // On component mount, request projects data from API
@@ -66,10 +62,7 @@ export default function ProjectList() {
     [projectApiService, user.accessLevel, user.managedProjects]
   );
 
-  // Figure out better way to block unauthorized users from accessing this page
-  if (!auth) {
-    return <Redirect to="/login" />;
-  }
+
 
   // Render loading circle until project data is served from API
   if (!projects)

client/src/pages/UserAdmin.jsx

@@ -1,15 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Redirect } from 'react-router-dom';
 import '../sass/UserAdmin.scss';
-import useAuth from '../hooks/useAuth';
 import EditUsers from '../components/user-admin/EditUsers';
 import UserApiService from '../api/UserApiService';
 import ProjectApiService from '../api/ProjectApiService';
 import UserManagement from '../components/user-admin/UserManagement';
 
 const UserAdmin = () => {
   // Initialize state hooks
-  const { auth } = useAuth();
   const [users, setUsers] = useState([]); // All users pulled from database
   const [projects, setProjects] = useState([]); // All projects pulled from db
   const [userToEdit, setUserToEdit] = useState({}); // The selected user that is being edited
@@ -61,10 +58,6 @@ const UserAdmin = () => {
     setUserToEdit({});
   };
 
-  if (!auth && !auth?.user) {
-    return <Redirect to="/login" />;
-  }
-
   if (Object.keys(userToEdit).length === 0) {
     return <UserManagement users={users} setUserToEdit={setUserToEdit} />;
   } else {