Issue #12 : Added routes and calendar screen

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Roadmap"
+    ]
+}

apps/frontend/src/App.tsx

@@ -2,16 +2,24 @@ import React from 'react';
 import './App.css';
 import { APPS_NAME } from '@team8/constants/apps';
 import MainScreen from './Screens/MainScreen';
+import Calendar from "./Screens/Calendar";
+import AddDropCourses from './Screens/AddDropCourses';
+import CoursesLookUp from './Screens/CoursesLookUp';
+import Roadmap from './Screens/Roadmap';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from "./Components/Navbar";
 
 const App = () => {
 	return (
 		<>
-			<Router>
-				<Routes>
-					<Route index={true} path="/" element={<MainScreen />} />
-				</Routes>
-			</Router>
+			<Navbar />
+			<Routes>
+				<Route path="/" element={<MainScreen />}/>
+				<Route path='/courses-look-up' element={<CoursesLookUp />}/>
+				<Route path='/add-drop-courses' element={<AddDropCourses />}/>
+				<Route path='/calendar' element={<Calendar />}/>
+				<Route path='/roadmap' element={<Roadmap />}/>
+			</Routes>
 		</>
 	);
 };

apps/frontend/src/Components/Navbar.tsx

@@ -16,6 +16,7 @@ import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import { amber } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
 import { brown } from '@mui/material/colors';
+import { Link } from "react-router-dom";
 
 const pages = ['Products', 'Pricing', 'Blog'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
@@ -114,11 +115,31 @@ const Navbar = () => {
                 </Toolbar>
                 <Divider sx={{bgcolor:"black"}}></Divider>
                 <Toolbar sx={{justifyContent:"space-between"}}>
-                    <ColorButton variant="contained">Home</ColorButton>
-                    <ColorButton variant="contained">Courses Look Up</ColorButton>
-                    <ColorButton variant="contained">Add/Drop Courses</ColorButton>
-                    <ColorButton variant="contained">Calendar</ColorButton>
-                    <ColorButton variant="contained">Roadmap</ColorButton>
+                  <Link to="/">
+                    <ColorButton variant="contained">
+                      Home
+                    </ColorButton>
+                  </Link>
+                  <Link to="/courses-look-up">
+                    <ColorButton variant="contained">
+                      Courses Look Up
+                    </ColorButton>
+                  </Link>
+                  <Link to="/add-drop-courses">
+                    <ColorButton variant="contained">
+                      Add/Drop Courses
+                    </ColorButton>
+                  </Link>
+                  <Link to="/calendar">        
+                    <ColorButton variant="contained">
+                      Calendar
+                    </ColorButton>
+                  </Link>
+                  <Link to="/roadmap">
+                    <ColorButton variant="contained">
+                      Roadmap
+                    </ColorButton>
+                  </Link>
                 </Toolbar>
             </Stack>
         </Container>

apps/frontend/src/Screens/AddDropCourses.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const AddDropCourses = () => {
+    return (
+    <h1>
+        AddDropCourses
+    </h1>
+    );
+}
+
+export default AddDropCourses;

apps/frontend/src/Screens/Calendar.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import Container from '@mui/material/Container';
+// @ts-ignore
+import { DayPilotCalendar } from "@daypilot/daypilot-lite-react";
+const Calendar = () => {
+    const [config, setConfig] = useState({
+        viewType: "WorkWeek",
+        headerDateFormat: "dddd",
+        businessBeginsHour: 8,
+        businessEndsHour: 17,
+        timeRangeSelectedHandling: "Disabled",
+        eventMoveHandling: "Disabled",
+        eventResizeHandling: "Disabled",
+        eventClickHandling: "Disabled",
+      });
+
+    return(
+    <Container maxWidth = "lg">
+        <h2>
+            Weekly Schedule
+        </h2>
+        <DayPilotCalendar {...config} />
+    </Container>
+    );
+}
+
+export default Calendar;

apps/frontend/src/Screens/CoursesLookUp.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const CoursesLookUp = () => {
+    return(
+    <h1>
+        CoursesLookUp
+    </h1>
+    )
+}
+
+export default CoursesLookUp;

apps/frontend/src/Screens/MainScreen.tsx

@@ -55,7 +55,7 @@ const MainScreen = () => {
   }, []);
   return(
   <>
-  <Navbar/>
+  {/*<Navbar/>*/}
   <Container maxWidth="lg" sx={{mt: 2}}>
     <Grid container>
       <Grid item xs={8} sx={{boxShadow:"none", backgroundColor:"#FAD37D", borderTopLeftRadius:10, borderBottomLeftRadius:10}}>

apps/frontend/src/Screens/Roadmap.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Roadmap = () => {
+    return(
+    <h1>
+        Roadmap
+    </h1>
+    )
+}
+
+export default Roadmap;

apps/frontend/src/index.tsx

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+import {BrowserRouter} from "react-router-dom";
 const root = ReactDOM.createRoot(
 	document.getElementById('root') as HTMLElement,
 );
 root.render(
 	<React.StrictMode>
-		<App />
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
 	</React.StrictMode>,
 );
 

package.json

@@ -22,20 +22,23 @@
 		]
 	},
 	"devDependencies": {
+		"@types/jest": "^29.5.2",
+		"@types/node": "^20.3.1",
 		"@typescript-eslint/eslint-plugin": "^5.59.11",
 		"@typescript-eslint/parser": "^5.59.11",
 		"eslint": "^8.42.0",
 		"eslint-config-prettier": "^8.8.0",
+		"eslint-config-team8": "*",
 		"eslint-plugin-prettier": "^4.2.1",
+		"jest": "^29.5.0",
 		"prettier": "^2.8.8",
+		"ts-jest": "^29.1.0",
 		"ts-loader": "^9.4.3",
 		"ts-node": "^10.9.1",
 		"tsconfig-paths": "^4.2.0",
-		"typescript": "^5.1.3",
-		"eslint-config-team8": "*",
-		"jest": "^29.5.0",
-		"ts-jest": "^29.1.0",
-		"@types/node": "^20.3.1",
-		"@types/jest": "^29.5.2"
+		"typescript": "^5.1.3"
+	},
+	"dependencies": {
+		"@daypilot/daypilot-lite-react": "^3.20.1"
 	}
 }