Added Private Route and 404 page

backend/seeder.js

@@ -20,7 +20,6 @@ const importData = async () => {
     const createdUsers = await Admin.insertMany(users)
     console.log('inserted users')
     const adminUser = createdUsers[0]._id
-    //the following code will insert admin user in each of the student data
 
     const sampleStudents = students.map((student) => {
       return { ...student, user: adminUser }
@@ -29,8 +28,6 @@ const importData = async () => {
     await Dashboard.insertMany(items)
     await Student.insertMany(sampleStudents)
 
-    //among all the inserted students by the above code of line
-    //we will select the first
 
     console.log('Data imported.')
     process.exit()
@@ -40,36 +37,20 @@ const importData = async () => {
   }
 }
 
-//following is for deleting the data from the database of mongodb
 const exportData = async () => {
   try {
     await Student.deleteMany()
     await Dashboard.deleteMany()
     await Admin.deleteMany()
-    // const createdUsers = await Admin.insertMany(users)
-    // const adminUser = createdUsers[0]._id
-    // //the following code will insert admin user in each of the student data
-
-    // const sampleStudents = students.map((student) => {
-    //   return { ...student, user: adminUser }
-    // })
-    // await Student.insertMany(sampleStudents)
-
-    // //among all the inserted students by the above code of line
-    // //we will select the first
-
-    // await Dashboard.insertMany(items)
+
     console.log('Data destroyed.')
     process.exit()
   } catch (error) {
     console.log(error)
     process.exit(1)
   }
 }
-//following line of code looks into the command
-//passed into the terminal
-//if the two index is '-d', then the destroy function is called
-//otherwise import function is called.
+
 if (process.argv[2] === '-d') {
   destroyData()
 } else {

frontend/src/App.js

@@ -23,93 +23,109 @@ import AllTeachers from './screens/AllTeachers'
 import AllStaffs from './screens/AllStaffs'
 import StaffRegister from './screens/StaffRegister'
 import IncomeScreen from './screens/IncomeScreen'
+import NotFound from './screens/NotFound'
+
 import ExpenseScreen from './screens/ExpenseScreen'
 import underConstruction from './components/underConstruction'
 import { studentAttendances } from './actions/studentActions'
+import PrivateRoute from '../src/utils/PrivateRoute'
 // import ExpenseScreen from './screens/ExpenseScreen'
 
 const App = () => {
   return (
     <Router>
       <div>
         <Switch>
-          <Route path='/' component={Landing} exact />
+          <PrivateRoute path='/' component={Landing} exact />
           <Route path='/login' component={Login} exact />
-          <Route path='/student-register' component={StudentRegister} />
-          <Route path='/student-fee' component={StudentFees} />
-          <Route path='/student_details' component={StudentDetails} exact />
-          <Route
+          <PrivateRoute path='/student-register' component={StudentRegister} />
+          <PrivateRoute path='/student-fee' component={StudentFees} />
+          <PrivateRoute
+            path='/student_details'
+            component={StudentDetails}
+            exact
+          />
+          <PrivateRoute
             path='/student_details/details/:id'
             component={StudentDeepDetails}
             exact
           />
-          {/* <Route
+          {/* <PrivateRoute
             path='/student-attendance'
             component={underConstruction}
             exact
           /> */}
-          <Route
+          <PrivateRoute
             path='/teacher_attendance'
             component={underConstruction}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/non-teaching_staff_attendance'
             component={underConstruction}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/student-attendance/:class'
             component={StudentDeepAttendance}
             exact
           />
-          <Route path='/students' component={AllStudents} exact />
-          <Route path='/admit_card' component={StudentAdmitCard} exact />
-          <Route
+          <PrivateRoute path='/students' component={AllStudents} exact />
+          <PrivateRoute path='/admit_card' component={StudentAdmitCard} exact />
+          <PrivateRoute
             path='/admit_card/allstudents'
             component={AllStudentsAdmitCard}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/admit_card/classes'
             component={StudentClassAdmitCard}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/admit_card/classes/:id'
             component={StudentClassAdmitCardDeep}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/admit_card/student'
             component={ParticularStudentAdmitCard}
             exact
           />
-          <Route path='/teacher_salary' component={TeacherSalary} exact />
-          <Route path='/teacher_register' component={TeacherRegister} exact />
-          <Route path='/teacher_details' component={AllTeachers} exact />
-          <Route
+          <PrivateRoute
+            path='/teacher_salary'
+            component={TeacherSalary}
+            exact
+          />
+          <PrivateRoute
+            path='/teacher_register'
+            component={TeacherRegister}
+            exact
+          />
+          <PrivateRoute path='/teacher_details' component={AllTeachers} exact />
+          <PrivateRoute
             path='/non-teaching_staff_details'
             component={AllStaffs}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/non-teaching_staff_register'
             component={StaffRegister}
             exact
           />
-          <Route
+          <PrivateRoute
             path='/non-teaching_staff_salary'
             component={StaffSalary}
             exact
           />
-          <Route path='/income' component={IncomeScreen} exact />
-          <Route path='/salary' component={ExpenseScreen} exact />
-          <Route
+          <PrivateRoute path='/income' component={IncomeScreen} exact />
+          <PrivateRoute path='/salary' component={ExpenseScreen} exact />
+          <PrivateRoute
             path='/student-attendance'
             component={StudentAttendance}
             exact
           />
+          <Route component={NotFound} />
         </Switch>
       </div>
     </Router>

frontend/src/index.css

@@ -17,3 +17,20 @@
   display: block;
 } */
           /* // style={{ marginTop: '10px', maxWidth: '30%', display: 'block' }} */
+
+          .notFound{
+
+            height: 100vh;
+            /* border: 1px solid red; */
+            overflow: hidden;
+            width: 100%;
+
+
+          }
+          .notFound img{
+            /* border: 1px solid red; */
+          height: 100vh;
+         margin: auto;
+         display: block;
+
+          }

frontend/src/screens/Landing.js

@@ -16,11 +16,7 @@ const Landing = ({ history }) => {
   const closeSidebar = () => {
     setsidebarOpen(false)
   }
-  useEffect(() => {
-    if (!userCred) {
-      history.push('/login')
-    }
-  }, [userCred, history])
+
   return (
     <div className='containers'>
       <Header sidebarOpen={sidebarOpen} openSidebar={openSidebar} />

frontend/src/screens/NotFound.js

@@ -0,0 +1,10 @@
+import React from 'react'
+const NotFound = () => {
+  return (
+    <div className='notFound'>
+      <img src='./images/notFound.webp' alt='' />
+    </div>
+  )
+}
+
+export default NotFound

frontend/src/utils/PrivateRoute.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  const isLoggedIn = localStorage.getItem('userCred')
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        isLoggedIn ? <Component {...props} /> : <Redirect to='/login' />
+      }
+    />
+  )
+}
+
+export default PrivateRoute