Merge branch 'main' of https://github.com/CSCE315-Spring23/Project3_Team_71

Author: Ahnaf-hossain

client/src/css/AddMenuItem.css

@@ -71,4 +71,20 @@
 
   #menuadder-form button[type="button"].done-button:hover {
     background-color: rgb(231, 74, 74);
+  }
+  .help {
+    display: flex;
+    z-index: 2;
+    align-items: center;
+    justify-content: right;
+
+  }
+  .help-btn {
+    padding: 5px 10px;
+    /* margin-top: 10px; */
+    background-color: rgb(240, 46, 46);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
   }

client/src/css/Home.css

@@ -40,6 +40,11 @@
 
 
 /* Scroll bar stuff */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 98%;
+    border-radius:1rem;
+  }
  /* Track */
  ::-webkit-scrollbar-track {
     background: #f1f1f1;

client/src/css/ad.css

@@ -68,16 +68,15 @@
     border-color: white;
     max-width: 8rem;
     max-height: 9rem;
+    background-color: #e51636;
+    color: white;
 
 }
 .btn-sauce:hover {
-    background-color: #c1c1c1;
+    background-color: #940e23;
     cursor: pointer;
+    transition: 0.2s ease;
 }
-::-webkit-scrollbar {
-    width: 10px;
-    height: 98%;
-    border-radius:1rem;
-  }
+
 
 

client/src/host.js

@@ -1,2 +1,13 @@
+/**
+
+The current hostname of the window object
+@type {string}
+*/
 const local = window.location.hostname;
+
+/**
+
+The base URL for the API server
+@type {string}
+*/
 export const HOST = (local == "localhost") ? "http://localhost:3001" : "https://chick-fil-a-client-71.onrender.com";

client/src/index.js

@@ -3,6 +3,11 @@ import ReactDOM from "react-dom/client";
 import "./css/index.css";
 import App from "./pages/App";
 
+/**
+
+The root element of the React application
+@type {ReactRoot}
+*/
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
     <React.StrictMode>

client/src/login_comp/login.js

@@ -3,13 +3,31 @@ import { GoogleLogin } from "react-google-login";
 const client_id =
     "910012439370-t5574l8cl6b2jsg0n2t4n55dg4cgqp7l.apps.googleusercontent.com";
 
+/**
+
+The Login component's UI, which renders a Google login button that can be used to authenticate with the Google API
+@function
+@returns {JSX.Element} - The Login component's UI
+*/
 function Login() {
 
+    /**
 
+    A function that handles the successful authentication of a user via the Google API
+    @function
+    @param {Object} res - The response object returned by the Google API after successful authentication
+    @param {Object} res.profileObj - The user profile object returned by the Google API after successful authentication
+    */
     const onSuccess = (res) => {
         console.log("Login success! Curr user: ", res.profileObj);
     };
 
+    /**
+
+    A function that handles the failed authentication of a user via the Google API
+    @function
+    @param {Object} res - The response object returned by the Google API after failed authentication
+    */
     const onFailure = (res) => {
         console.log("Login failes! res: ", res);
     };

client/src/login_comp/logout.js

@@ -2,8 +2,20 @@ import {GoogleLogout} from 'react-google-login';
 
 const client_id = "910012439370-t5574l8cl6b2jsg0n2t4n55dg4cgqp7l.apps.googleusercontent.com";
 
+/**
+
+The Logout component's UI, which renders a Google logout button that can be used to log out of the Google API
+@function
+@returns {JSX.Element} - The Logout component's UI
+*/
 function Logout(){
 
+    /**
+
+    A function that handles the successful logout of a user via the Google API
+    @function
+    @returns {void}
+    */
     const onSuccess = () =>{
         console.log("Logout successful!");
     }

client/src/pages/App.js

@@ -23,17 +23,41 @@ import Header from "../components/Header";
 import CashierSauce from "./cashier/CashierSauce";
 import { useEffect } from "react";
 
+/**
+
+A React component for the main App
+@function
+@returns {JSX.Element} - The App component's UI
+*/
 function App() {
 
 
+    /**
+
+A custom hook that retrieves the user state from local storage and updates it when changed
+@function
+@param {string} initialValue - The initial value for the user state
+@param {string} key - The key used to store the user state in local storage
+@returns {Array} - An array containing the user state and a function to update it
+*/
     const [user, setUser] = useLocalState("", "user");
 
+    /**
+
+    A function that handles the user sign out event by resetting the user state and redirecting to the home page
+    @function
+    */
     function HandleSignOut() {
         setUser({});
         console.log(user);
         window.location.href = "/";
     }
 
+    /**
+
+    A React hook that runs once when the component mounts to the DOM, and logs the current window's hostname to the console
+    @function
+    */
     useEffect(() => {
         console.log(window.location.hostname);
     }, [])

client/src/pages/PrivateRoute/privateCashier.js

@@ -4,12 +4,26 @@ import { useLocalState } from "../util/useLocalStorage";
 import { useEffect, useState, useMemo } from "react";
 import { HOST } from "../../host";
 
+/**
+
+A React memoized component that wraps the given children in a Private Route that restricts access to authorized users only.
+
+@param {Object} props - Component props.
+
+@param {JSX.Element} props.children - The component(s) to be wrapped in the Private Route.
+
+@returns {JSX.Element} - The Private Route component.
+*/
 const PrivateRouteCashier = React.memo(({ children }) => {
     const [user, setUser] = useLocalState("", "user");
     const [isAuthorized, setIsAuthorized] = useState(false);
     const [privilege, setPrivilege] = useState(null);
     const [shouldRender, setShouldRender] = useState(false);
 
+    /**
+    Sends a POST request to the server to check authorization and returns the response.
+    @returns {Promise<Object>} - The response from the server.
+    */
     const make_request = React.useCallback(async () => {
         return await fetch(`${HOST}/check-authorization`, {
             method: "POST",
@@ -22,6 +36,16 @@ const PrivateRouteCashier = React.memo(({ children }) => {
             .then((data) => data);
     }, [user]);
 
+    /**
+
+    Checks the privileges of the user to determine if they are authorized to access the Private Route.
+
+    If the user is authorized, it sets the shouldRender state to true.
+
+    If the user is not authorized, it sets the shouldRender state to false and redirects to the home page.
+
+    @returns {Promise<void>}
+    */
     const checkPriv = React.useCallback(async () => {
         if (user.hasOwnProperty("email")) {
             const data = await make_request();

client/src/pages/PrivateRoute/privateManager.js

@@ -3,12 +3,27 @@ import { useLocalState } from "../util/useLocalStorage";
 import { useEffect, useState } from "react";
 import { HOST } from "../../host";
 
+
+/**
+
+A higher-order component that renders its children only if the user is authorized as a manager.
+
+@param {Object} props - The component props.
+
+@param {React.ReactNode} props.children - The children to be rendered if the user is authorized.
+
+@return {React.ReactNode} The rendered component or an empty string.
+*/
 const PrivateRouteManager = React.memo(({ children }) => {
     const [user, setUser] = useLocalState("", "user");
     const [isAuthorized, setIsAuthorized] = useState(false);
     const [privilege, setPrivilege] = useState(null);
     const [shouldRender, setShouldRender] = useState(false);
 
+    /**
+    Makes a request to the server to check if the user is authorized.
+    @return {Promise<Object>} A promise that resolves to an object containing authorization data.
+    */
     const make_request = React.useCallback(async () => {
         return await fetch(`${HOST}/check-authorization`, {
             method: "POST",
@@ -21,6 +36,13 @@ const PrivateRouteManager = React.memo(({ children }) => {
             .then((data) => data);
     }, [user]);
 
+    /**
+    Checks if the user is authorized as a manager.
+
+    If authorized, sets the shouldRender state to true and renders the children.
+
+    If not authorized, sets the shouldRender state to false and redirects the user to the homepage.
+    */
     const checkPriv = React.useCallback(async () => {
         if (user.hasOwnProperty("email")) {
             const data = await make_request();
@@ -41,12 +63,10 @@ const PrivateRouteManager = React.memo(({ children }) => {
             if (data.isAuthorized && data.privilege === "manager") {
                 console.log("user found");
                 // do something here if success
-                // setShouldRender(true); // not needed
                 setShouldRender(true);
             } else {
                 console.log("priv failed");
                 // do something here if it failed
-                // setShouldRender(false); // not needed
                 setShouldRender(false);
                 // since you want to navigate to "/" if the check is false, you can simply do it here
                 document.location.assign("/");