diff --git a/src/Components/Routing/Routes.js b/src/Components/Routing/Routes.js new file mode 100644 index 000000000..53d1d583d --- /dev/null +++ b/src/Components/Routing/Routes.js @@ -0,0 +1,170 @@ +import Overview from '../../Pages/Overview/Overview.js'; +import Login from '../../Pages/Login/Login.js'; +import ForgotPassword from '../../Pages/ForgotPassword/ForgotPassword.js'; +import ResetPasswordPage from '../../Pages/ForgotPassword/ResetPassword.js'; +import Profile from '../../Pages/Profile/MemberView/Profile.js'; +import LedSign from '../../Pages/LedSign/LedSign.js'; +import EditUserInfo from '../../Pages/UserManager/EditUserInfo.js'; + +import Home from '../../Pages/Home/Home.js'; +import MembershipApplication from + '../../Pages/MembershipApplication/MembershipApplication.js'; +import VerifyEmailPage from '../../Pages/MembershipApplication/VerifyEmail.js'; +import Printing from '../../Pages/2DPrinting/2DPrinting.js'; +import AdvertisementAdmin from '../../Pages/Advertisement/AdvertisementAdmin.js'; + +import AboutPage from '../../Pages/About/About.js'; +import ProjectsPage from '../../Pages/Projects/Projects.js'; +import URLShortenerPage from '../../Pages/URLShortener/URLShortener.js'; + +import EmailPreferencesPage from '../../Pages/EmailPreferences/EmailPreferences.js'; + +import sendUnsubscribeEmail from '../../Pages/Profile/admin/SendUnsubscribeEmail.js'; +import Messaging from '../../Pages/Messaging/Messaging.js'; + +import { membershipState } from '../../Enums.js'; + +export function getSignedInRoutes(authenticated, user) { + const userIsAuthenticated = authenticated; + const userIsMember = + userIsAuthenticated && + user && + user.accessLevel === membershipState.MEMBER; + const userIsOfficerOrAdmin = + userIsAuthenticated && + user && + user.accessLevel >= membershipState.OFFICER; + + const notAuthenticatedRoutes = [ + { + Component: Login, + path: '/login*', + allowedIf: !userIsAuthenticated, + redirect: '/', + queryParams: { + redirect: 'redirect', + }, + pageName: 'Login', + }, + { + Component: ForgotPassword, + path: '/forgot', + allowedIf: !userIsAuthenticated, + redirect: '/', + pageName: 'Forgot Password', + }, + { + Component: MembershipApplication, + path: '/register', + allowedIf: !userIsAuthenticated, + redirect: '/', + pageName: 'Membership Application', + }, + ]; + + const authenticatedRoutes = [ + { + Component: Profile, + path: '/profile', + allowedIf: userIsAuthenticated, + redirect: '/login', + pageName: 'Profile', + }, + ]; + + const memberRoutes = [ + { + Component: Printing, + path: '/2DPrinting', + allowedIf: userIsMember || userIsOfficerOrAdmin, + redirect: '/login', + pageName: 'Printing', + }, + { + Component: Messaging, + path: '/messaging/:id?', + allowedIf: userIsMember || userIsOfficerOrAdmin, + redirect: '/login', + pageName: 'Messaging', + }, + ...authenticatedRoutes, + ]; + + const officerOrAdminRoutes = [ + // new for Overview + { + Component: Overview, + path: '/user-manager', + allowedIf: userIsOfficerOrAdmin, + redirect: '/', + inAdminNavbar: true, + pageName: 'User Manager', + }, + // + // { + // Component: EmailPage, + // path: '/email-list', + // allowedIf: userIsOfficerOrAdmin, + // redirect: '/', + // inAdminNavbar: true, + // pageName: 'Email', + // }, + { + Component: LedSign, + path: '/led-sign', + allowedIf: userIsOfficerOrAdmin, + redirect: '/', + inAdminNavbar: true, + pageName: 'Led Sign', + }, + { + Component: EditUserInfo, + path: '/user/edit/:id', + allowedIf: userIsOfficerOrAdmin, + redirect: '/', + inAdminNavbar: true, + pageName: 'Edit User Info', + }, + { + Component: URLShortenerPage, + path: '/short', + allowedIf: userIsOfficerOrAdmin, + inAdminNavbar: true, + redirect: '/', + pageName: 'URL Shortner', + }, + { + Component: sendUnsubscribeEmail, + path: '/unsub', + allowedIf: userIsOfficerOrAdmin, + inAdminNavbar: true, + redirect: '/', + pageName: 'Send Unsubscribe Email', + }, + { + Component: AdvertisementAdmin, + path: '/advertisement-admin', + allowedIf: userIsOfficerOrAdmin, + redirect: '/', + inAdminNavbar: true, + pageName: 'Advertisement Admin', + }, + ...memberRoutes, + ]; + + return { + notAuthenticatedRoutes, + authenticatedRoutes, + memberRoutes, + officerOrAdminRoutes + }; +} + +export const signedOutRoutes = [ + { Component: Home, path: '/', pageName: 'Home' }, + { Component: VerifyEmailPage, path: '/verify', pageName: 'Verify Email' }, + { Component: ResetPasswordPage, path: '/reset', pageName: 'Reset Password' }, + { Component: AboutPage, path: '/about', pageName: 'About' }, + { Component: ProjectsPage, path: '/projects', pageName: 'Projects' }, + { Component: EmailPreferencesPage, path: '/emailPreferences', pageName: 'Email Preferences' }, +]; diff --git a/src/Routing.js b/src/Routing.js index 0d5b1eabf..a1c736852 100644 --- a/src/Routing.js +++ b/src/Routing.js @@ -3,32 +3,9 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import PrivateRoute from './Components/Routing/PrivateRoute'; import NavBarWrapper from './Components/Navbar/NavBarWrapper'; -import Overview from './Pages/Overview/Overview'; -import Login from './Pages/Login/Login'; -import ForgotPassword from './Pages/ForgotPassword/ForgotPassword'; -import ResetPasswordPage from './Pages/ForgotPassword/ResetPassword'; -import Profile from './Pages/Profile/MemberView/Profile'; -import LedSign from './Pages/LedSign/LedSign'; -import EditUserInfo from './Pages/UserManager/EditUserInfo'; - -import Home from './Pages/Home/Home.js'; import NotFoundPage from './Pages/NotFoundPage/NotFoundPage'; -import MembershipApplication from - './Pages/MembershipApplication/MembershipApplication.js'; -import VerifyEmailPage from './Pages/MembershipApplication/VerifyEmail.js'; -import Printing from './Pages/2DPrinting/2DPrinting.js'; -import AdvertisementAdmin from './Pages/Advertisement/AdvertisementAdmin.js'; - -import { membershipState } from './Enums'; - -import AboutPage from './Pages/About/About'; -import ProjectsPage from './Pages/Projects/Projects'; -import URLShortenerPage from './Pages/URLShortener/URLShortener'; - -import EmailPreferencesPage from './Pages/EmailPreferences/EmailPreferences'; -import sendUnsubscribeEmail from './Pages/Profile/admin/SendUnsubscribeEmail'; -import Messaging from './Pages/Messaging/Messaging.js'; +import { getSignedInRoutes, signedOutRoutes } from './Components/Routing/Routes'; import CardReader from './Pages/CardReader/CardReader.js'; @@ -36,122 +13,8 @@ import { useUser } from './Components/context/UserContext'; export default function Routing({ appProps }) { const { user, setUser } = useUser(); - const userIsAuthenticated = appProps.authenticated; - const userIsMember = - userIsAuthenticated && - user && - user.accessLevel === membershipState.MEMBER; - const userIsOfficerOrAdmin = - userIsAuthenticated && - user && - user.accessLevel >= membershipState.OFFICER; - const signedInRoutes = [ - // new for Overview - { - Component: Overview, - path: '/user-manager', - allowedIf: userIsOfficerOrAdmin, - redirect: '/', - inAdminNavbar: true - }, - // - // { - // Component: EmailPage, - // path: '/email-list', - // allowedIf: userIsOfficerOrAdmin, - // redirect: '/', - // inAdminNavbar: true - // }, - { - Component: LedSign, - path: '/led-sign', - allowedIf: userIsOfficerOrAdmin, - redirect: '/', - inAdminNavbar: true - }, - { - Component: Printing, - path: '/2DPrinting', - allowedIf: userIsMember || userIsOfficerOrAdmin, - redirect: '/login' - }, - { - Component: Login, - path: '/login*', - allowedIf: !userIsAuthenticated, - redirect: '/', - queryParams: { - redirect: 'redirect', - }, - }, - { - Component: ForgotPassword, - path: '/forgot', - allowedIf: !userIsAuthenticated, - redirect: '/' - }, - { - Component: MembershipApplication, - path: '/register', - allowedIf: !userIsAuthenticated, - redirect: '/' - }, - { - Component: Profile, - path: '/profile', - allowedIf: userIsAuthenticated, - redirect: '/login' - }, - { - Component: EditUserInfo, - path: '/user/edit/:id', - allowedIf: userIsOfficerOrAdmin, - redirect: '/', - inAdminNavbar: true - }, - { - Component: URLShortenerPage, - path: '/short', - allowedIf: userIsOfficerOrAdmin, - inAdminNavbar: true, - redirect: '/', - }, - { - Component: sendUnsubscribeEmail, - path: '/unsub', - allowedIf: userIsOfficerOrAdmin, - inAdminNavbar: true, - redirect: '/', - }, - { - Component: Messaging, - path: '/messaging/:id?', - allowedIf: userIsMember || userIsOfficerOrAdmin, - redirect: '/login' - }, - { - Component: AdvertisementAdmin, - path: '/advertisement-admin', - allowedIf: userIsOfficerOrAdmin, - redirect: '/', - inAdminNavbar: true - }, - { - Component: CardReader, - path: '/card-reader', - allowedIf: userIsOfficerOrAdmin, - redirect: '/', - inAdminNavbar: true - }, - ]; - const signedOutRoutes = [ - { Component: Home, path: '/' }, - { Component: VerifyEmailPage, path: '/verify' }, - { Component: ResetPasswordPage, path: '/reset' }, - { Component: AboutPage, path: '/about'}, - { Component: ProjectsPage, path: '/projects'}, - { Component: EmailPreferencesPage, path: '/emailPreferences' }, - ]; + const { notAuthenticatedRoutes, officerOrAdminRoutes } = getSignedInRoutes(appProps.authenticated, appProps.user); + const signedInRoutes = [...notAuthenticatedRoutes, ...officerOrAdminRoutes]; return (
@@ -182,7 +45,7 @@ export default function Routing({ appProps }) { appProps={{ allowed: allowedIf, redirect, - authenticated:userIsAuthenticated, + authenticated: appProps.authenticated, ...appProps }} component={props => getCorrectComponent(props)} diff --git a/src/Shortcut.js b/src/Shortcut.js new file mode 100644 index 000000000..7d1dba8eb --- /dev/null +++ b/src/Shortcut.js @@ -0,0 +1,71 @@ +import { useState, useEffect } from 'react'; +import { getSignedInRoutes, signedOutRoutes } from './Components/Routing/Routes'; +import { useHistory } from 'react-router-dom'; + +function Shortcut({ appProps }) { + const [text, setText] = useState(''); + const [isVisible, setIsVisible] = useState(false); + const history = useHistory(); + + const { notAuthenticatedRoutes, officerOrAdminRoutes } = getSignedInRoutes(appProps.authenticated, appProps.user); + const allRoutes = [...notAuthenticatedRoutes, ...officerOrAdminRoutes, ...signedOutRoutes]; + const routes = allRoutes.filter((route) => route.allowedIf !== false && route.pageName.toLowerCase().includes(text.toLowerCase())); + + useEffect(() => { + const handleKeyPress = (e) => { + if (e.ctrlKey && e.key === 'k') { + e.preventDefault(); + setIsVisible((prev) => !prev); + } + }; + window.addEventListener('keydown', handleKeyPress); + return () => { + window.removeEventListener('keydown', handleKeyPress); + }; + }, []); + + const handleKeyDown = (e) => { + if (e.key === 'Enter' && routes.length > 0) { + history.push(routes[0].path); + setIsVisible(false); + setText(''); + window.location.reload(); + } + }; + + return ( + <> + {isVisible && +
+
+
+
+
+ setText(e.target.value)} + onKeyDown={handleKeyDown} + /> +
+
+
+ {routes.map((route) => ( +

+ {route.pageName} +

+ ))} +
+
+
+
+ } + + ); +} + +export default Shortcut; diff --git a/src/index.js b/src/index.js index 3c6741005..02adef2fd 100755 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,10 @@ import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter } from 'react-router-dom'; +import { withRouter, BrowserRouter } from 'react-router-dom'; import './index.css'; import Routing from './Routing'; +import Shortcut from './Shortcut'; import { checkIfUserIsSignedIn } from './APIFunctions/Auth'; import { UserContext } from './Components/context/UserContext'; @@ -27,13 +28,16 @@ function App(props) { return ( !isAuthenticating && ( - - + <> + - - + + + ) ); } -ReactDOM.render(, document.getElementById('root')); +export default withRouter(App); + +ReactDOM.render(, document.getElementById('root'));