Added redirect and user context opt-out for private pages.

client/src/App.js

@@ -23,7 +23,7 @@ export const UserContext = React.createContext();
 
 function App() {
   // this default value avoids crashing for navbar and accessing private pages when not login, should be changed in the future
-  const [user, setUser] = useState({username: "no-user", email: "", icon: process.env.PUBLIC_URL + '/images/avatar-1.png'})
+  const [user, setUser] = useState({username: "", email: "", icon: process.env.PUBLIC_URL + '/images/avatar-1.png'})
 
   // load user context if the existing cookies hasnt expire
   useEffect(() => {
@@ -35,6 +35,8 @@ function App() {
         })
     }, (error) => {
         console.log("No valid user detected")
+        // opt-out current user if it the token is  expired
+        setUser({username: "no-user", email: "", icon: process.env.PUBLIC_URL + '/images/avatar-1.png'})
     })
 }, [])
 

client/src/pages/CreateContest.js

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useContext, useEffect } from 'react'
 import { Grid, Paper } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
 import CreateContestForm from '../components/CreateContestForm'
+import { UserContext } from '../App'
+import { Redirect } from 'react-router-dom'
 
 const useStyles = makeStyles((theme) => ({
     pageContainer: {
@@ -21,6 +23,15 @@ const useStyles = makeStyles((theme) => ({
 
 export default function CreateContest() {
     const classes = useStyles()
+    const {user, setUser} = useContext(UserContext)
+
+    useEffect(() => {
+        if (user.username === "no-user") {
+            return (
+            <Redirect to='/login'/>
+            )
+        }
+    }, [user])
 
     return (
         <Grid container justify='center' className={classes.pageContainer}>

client/src/pages/SocketioConnection.js

@@ -6,7 +6,7 @@ import { UserContext } from '../App';
 import { getMsgLog } from '../apiCalls';
 import { Button, Form, InputGroup } from 'react-bootstrap';
 import { makeStyles, Typography } from '@material-ui/core';
-import { useHistory, useLocation } from 'react-router-dom';
+import { Redirect, useHistory, useLocation } from 'react-router-dom';
 
 let socket = io.connect(null, {port:5000, rememberTransport: false});
 
@@ -82,6 +82,14 @@ function Socketio() {
       history.push('/profile/'+room.user.username)
   }
 
+  useEffect( () => {
+    if (user.username === "no-user") {
+      return (
+        <Redirect to='/login'/>
+      )
+    }
+  }, [user])
+
   return (
     <CurrentSessionContext.Provider value={{room, setRoom}}>
       <SessionsContext.Provider value={{sessions, setSessions}}>

client/src/pages/SubmitDesign.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import { useHistory } from 'react-router-dom'
+import React, { useContext, useEffect } from 'react'
+import { Redirect, useHistory } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import { Paper, Typography, Button, Box } from '@material-ui/core'
 import { useDropzone } from 'react-dropzone'
+import { UserContext } from '../App'
 
 const useStyles = makeStyles((theme) => ({
     pageContainer: {
@@ -63,6 +64,7 @@ const useStyles = makeStyles((theme) => ({
 export default function SubmitDesign(props) {
     const history = useHistory()
     const classes = useStyles()
+    const {user, setUser} = useContext(UserContext);
     const {
         acceptedFiles,
         fileRejections,
@@ -115,6 +117,15 @@ export default function SubmitDesign(props) {
         })
     }
 
+    useEffect(() => {
+        if (user.username === "no-user") {
+            return (
+              <Redirect to='/login'/>
+            )
+        }
+    }, [user])
+
+
     return (
         <div className={classes.pageContainer}>
             <div {...getRootProps({ className: 'dropzone' })}>