diff --git a/client/src/App.jsx b/client/src/App.jsx index 947e77d22..bd5d28b1b 100644 --- a/client/src/App.jsx +++ b/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 if user is not logged in + Return 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', diff --git a/client/src/components/ProjectForm.jsx b/client/src/components/ProjectForm.jsx index cc6453838..15e417edb 100644 --- a/client/src/components/ProjectForm.jsx +++ b/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({ ); - return auth && auth.user ? ( + return ( Project Management @@ -330,7 +329,5 @@ export default function ProjectForm({ )} - ) : ( - ); } diff --git a/client/src/components/admin/dashboard/index.jsx b/client/src/components/admin/dashboard/index.jsx index 461614e54..d21768aae 100644 --- a/client/src/components/admin/dashboard/index.jsx +++ b/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 (
@@ -472,8 +469,6 @@ const AdminDashboard = () => {
- ) : ( - ); }; diff --git a/client/src/components/manageProjects/addProject.jsx b/client/src/components/manageProjects/addProject.jsx index ddec883be..fa62cd9d4 100644 --- a/client/src/components/manageProjects/addProject.jsx +++ b/client/src/components/manageProjects/addProject.jsx @@ -2,7 +2,7 @@ import React from 'react'; import ProjectForm from '../ProjectForm'; import { simpleInputs } from '../data'; -function addProject() { +function addProject({auth}) { return (
); diff --git a/client/src/hooks/withAuth.jsx b/client/src/hooks/withAuth.jsx new file mode 100644 index 000000000..f846c6dec --- /dev/null +++ b/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 + } + + return ; +} + +export default withAuth; \ No newline at end of file diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx index e2f83ec07..ecbebad47 100644 --- a/client/src/pages/Events.jsx +++ b/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 (

Filter:

{

{' '} - {event.name} - ({moment(event.date).format('ddd, MMM D @ h:mm a')}) + {event.name}( + {moment(event.date).format('ddd, MMM D @ h:mm a')})

@@ -65,9 +63,7 @@ const Events = (props) => { })}
- ) : ( - ); }; -export default Events; \ No newline at end of file +export default Events; diff --git a/client/src/pages/ManageProjects.jsx b/client/src/pages/ManageProjects.jsx index b6088acc3..75f4512bd 100644 --- a/client/src/pages/ManageProjects.jsx +++ b/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 ; - } - let displayedComponent; switch (componentToDisplay) { diff --git a/client/src/pages/ProjectList.jsx b/client/src/pages/ProjectList.jsx index fd47269ae..fecb39ca9 100644 --- a/client/src/pages/ProjectList.jsx +++ b/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 ; - } + // Render loading circle until project data is served from API if (!projects) diff --git a/client/src/pages/UserAdmin.jsx b/client/src/pages/UserAdmin.jsx index 0fcf458b1..460f53aa7 100644 --- a/client/src/pages/UserAdmin.jsx +++ b/client/src/pages/UserAdmin.jsx @@ -1,7 +1,5 @@ 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'; @@ -9,7 +7,6 @@ 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 ; - } - if (Object.keys(userToEdit).length === 0) { return ; } else {