Merge pull request #62 from Shaurya0108/develop

Develop

FrontEnd/src/App.css

@@ -2,28 +2,55 @@
 @tailwind components;
 @tailwind utilities;
 
+
 .nav {
   background-color: #154734;
   color: white;
-  display: flex; 
+  display: flex;
+  justify-content: space-between; /* center Align items to the center horizontally */
+  align-items: center; /* Align items to the center vertically */
   width:100%;
   top: 0;
-  top: 0px;
+  /* top: 0px; */
+}
+
+.center-container {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* Center the contents */
+  padding: 1%;
 }
 
 .utd-icon {
   max-width: 10%;
-  margin-left: 2rem;
+  /* margin-right: 1%; 0 auto */
 }
 
 .navbar-caption {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+   margin: 0 auto /* new */
+  /* align-items: center;
+  justify-content: center; */
+}
+
+.navbar-cap-1,
+.navbar-cap-2 {
+  margin: 0;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .navbar-cap-1 {
+  font-size: 40px;
+}
+
+.navbar-cap-2 {
+  font-size: 20px;
+}
+
+/* .navbar-cap-1 {
   margin: 0;
   font-size: 40px;
   margin-top: 30px;
@@ -39,7 +66,7 @@
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
-}
+} */
 
 .hidden {
   display: none;
@@ -77,13 +104,22 @@
   padding-bottom: 60px;
 }
 
-.settings-button {
-  background-image: url('../src/images/Settings button Icon.png');
-  width: 5%;
-  height: 40px;
+.menu-button, .settings-button{
   background-repeat: no-repeat;
   background-position: center;
-
-  position: relative;
-  right: 3%;
+  width: 60px;
+  height: 60px;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  /* position: relative; */
+} 
+
+.menu-icon, .settings-icon {
+  transition: transform 0.3s ease-in-out;
+  width: 100%;
+  height: 100%;
 }
+
+.rotate {
+  transform: rotate(90deg);
+}

FrontEnd/src/App.jsx

@@ -3,6 +3,8 @@ import {Routes, Route} from 'react-router-dom';
 import Login from './Login';
 import Home from './Home'
 import Settings from './Settings'
+import Menu from './Menu'
+
 
 export default function App() {
   return (
@@ -11,6 +13,7 @@ export default function App() {
         <Route path="/home" element={<Home/>} />
         <Route path="/" element={<Login/>} />
         <Route path="/settings" element={<Settings/>}/>
+        <Route path="/menu" element={<Menu/>}/>
       </Routes>
   );
 }

FrontEnd/src/Menu.jsx

@@ -0,0 +1,7 @@
+export default function Menu() {
+
+    return (
+        <div>Menu page</div>
+    )
+  }
+

FrontEnd/src/components/Navbar.jsx

@@ -1,54 +1,94 @@
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import UTDIcon from "../images/UTD Icon.png";
+import MenuIcon from "../icons/MenuIcon.svg";
+import SettingsIcon from "../icons/SettingsIcon.svg";
 
 export default function Navbar() {
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [isSettingsDropdownOpen, setIsSettingsDropdownOpen] = useState(false);
+    const [isSettingsIconRotated, setIsSettingsIconRotated] = useState(false);
+    const [isMenuDropdownOpen, setIsMenuDropdownOpen] = useState(false);
+    const [isMenuIconRotated, setIsMenuIconRotated] = useState(false);
     const dropdownRef = useRef(null);
     const navigate = useNavigate();
 
-    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const toggleMenuDropdown = () => {
+        setIsMenuDropdownOpen(!isMenuDropdownOpen);
+        setIsMenuIconRotated(!isMenuIconRotated);
+    }
+    const toggleSettingsDropdown = () => {
+        setIsSettingsDropdownOpen(!isSettingsDropdownOpen);
+        setIsSettingsIconRotated(!isSettingsIconRotated);
+    }
 
-    const handleSettingsClick = () => {
-        toggleDropdown();
-        navigate('/settings');
+    const handleSyllabusClick = () => {
+        navigate('/syllabus');
+    };
+
+    const handleHomeworkClick = () => {
+        navigate('/homework');
+    };
+
+    const handleProfileClick = () => {
+        navigate('/profile');
     };
 
     const handleLogoutClick = () => {
-        toggleDropdown();
-        navigate('/');
+        navigate('/logout');
+    };
+
+    const handleHelpClick = () => {
+        navigate('/help');
     };
 
     useEffect(() => {
         function handleClickOutside(event) {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsDropdownOpen(false);
+                setIsMenuDropdownOpen(false);
+                setIsSettingsDropdownOpen(false);
             }
         }
 
-        if (isDropdownOpen) {
+        if (isSettingsDropdownOpen || isMenuDropdownOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
 
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isDropdownOpen]);
+    }, [isSettingsDropdownOpen, isMenuDropdownOpen]);
 
     return (
         <nav className="nav flex items-center justify-between relative">
-            <img src={UTDIcon} className="utd-icon" alt="UTD Icon"></img>
-            <div className="navbar-caption text-center mx-auto">
-                <h1 className="navbar-cap-1 text-4xl font-bold">The Virtual Teacher Assistant</h1>
-                <h3 className="navbar-cap-2 text-xl">Advanced Algorithms Design and Analysis</h3>
+            <button className="menu-button" onClick={toggleMenuDropdown}>
+                <img src={MenuIcon} alt="Menu Icon" className={`menu-icon ${isMenuIconRotated ? 'rotate' : ''}`} />
+            </button>
+            {isMenuDropdownOpen && (
+                <div ref={dropdownRef} className="dropdown-menu absolute left-0 top-20 mt-5 py-2 w-48 bg-white rounded-md shadow-xl z-50">
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleSyllabusClick}>Syllabus</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleHomeworkClick}>Homework</a>
+                </div>
+            )}
+
+            <div className="center-container">
+                <img src={UTDIcon} className="utd-icon" alt="UTD Icon"></img>
+                <div className="navbar-caption text-center mx-auto">
+                    <h1 className="navbar-cap-1 text-4xl font-bold">The Virtual Teacher Assistant</h1>
+                    <h3 className="navbar-cap-2 text-xl">Advanced Algorithms Design and Analysis</h3>
+                </div>
             </div>
-            <button className="settings-button" onClick={toggleDropdown}></button>
-            {isDropdownOpen && (
+
+            <button className="settings-button" onClick={toggleSettingsDropdown}>
+                <img src={SettingsIcon} alt="Settings Icon" className={`settings-icon ${isSettingsIconRotated ? 'rotate' : ''}`} />
+            </button>
+            {isSettingsDropdownOpen && (
                 <div ref={dropdownRef} className="dropdown-menu absolute right-0 top-20 mt-5 py-2 w-48 bg-white rounded-md shadow-xl z-50">
-                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleSettingsClick}>Settings</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleProfileClick}>Profile</a>
                     <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleLogoutClick}>Logout</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleHelpClick}>Help</a>
                 </div>
             )}
+
         </nav>
     );
 }

FrontEnd/src/components/TextBox2.jsx

@@ -3,8 +3,6 @@ import '../css/Home.css';
 import { BlockMath } from 'react-katex';
 import 'katex/dist/katex.min.css';
 import Latex from './Latex'
-import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 
 export default class ChatBox extends React.Component {

Server/src/classes/DynamoDBConnector.js

@@ -32,7 +32,6 @@ export class DynamoDBConnector{
         return new Promise((resolve, reject) => {
             this.db.putItem(params, function(err, data) {
                 if (err) {
-                    console.log(err, err.stack);
                     reject(err);
                 } else {
                     resolve(data);

Server/src/classes/User.js

@@ -31,23 +31,22 @@ export class User{
 
                     const result = await DB.scanTable(params);
 
-                    let highestUserId = 1001;
+                    let highestUserId = 1000;
 
                     for (let item of result) {
-                        const currentUserId = parseInt(item.UserId.S, 10);
+                        const currentUserId = parseInt(item.UserId.N);
                         if (currentUserId > highestUserId) {
                             highestUserId = currentUserId;
                         }
                     }
-
                     highestUserId += 1;
-                    const newUserIdStr = highestUserId.toString();
+                    const newUserIdStr = highestUserId;
                     const salt = await bcrypt.genSalt();
                     const hashedPassword = await bcrypt.hash(this.password, salt);
                     const param = {
                         TableName: "Users",
                         Item: {
-                            UserId: { "S": newUserIdStr },
+                            UserId: { "N": newUserIdStr.toString() },
                             username: { "S": this.userName },
                             password: { "S": hashedPassword }
                         }
@@ -56,7 +55,6 @@ export class User{
                     resolve(newUserIdStr);
                 }
             } catch (err) {
-                console.log(err);
                 reject(err);
             }
         })
@@ -83,7 +81,6 @@ export class User{
                     throw new UnauthorizedError("Not Allowed", 401);
                 }
             } catch (err) {
-                console.log(err);
                 reject(err);
             }
         })