Update public profile monica frontend sprint2

client/package.json

@@ -12,7 +12,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@rollup/rollup-win32-x64-msvc": "^4.12.0",
     "axios": "^1.6.7",
+    "esbuild": "^0.20.1",
     "formik": "^2.4.5",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
@@ -22,6 +24,7 @@
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.21.3",
     "react-toastify": "^10.0.4",
+    "rollup": "^4.12.0",
     "yup": "^1.3.3"
   },
   "devDependencies": {

client/src/Components/Buttons/ContinueButton.jsx

@@ -1,17 +1,15 @@
 import React from "react";
-import { Link} from "react-router-dom";
-import './ContinueButton.css'
+import { Link } from "react-router-dom";
+import "./ContinueButton.css";
 
+const ContinueButton = (props) => {
+  // Continue button is the button that is used for logging in and signing up for accounts
 
-const ContinueButton = props => {
-
-   // Continue button is the button that is used for logging in and signing up for accounts
-
-    return(
+  return (
     <div className="continue__button">
-        <Link onClick={props.onClick} ><button>{props.name}</button></Link>
+      <button onClick={props.onClick}>{props.name}</button>
     </div>
-    )
-}
+  );
+};
 
-export default ContinueButton;
+export default ContinueButton;

client/src/Components/Dashboard/SideDrawer.jsx

@@ -1,48 +1,74 @@
-import React from 'react';
-import './SideDrawer.css';
-import { Link } from 'react-router-dom';
+import React from "react";
+import "./SideDrawer.css";
+import { Link } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa";
 import { MdWavingHand } from "react-icons/md";
-import image from '../../pictures/loginHero.jpg'
-
+import image from "../../pictures/loginHero.jpg";
 
 // The sidedrawer container has all information for navigating between links to see the different features.
 
+const SideDrawer = (props) => {
+  // Retrieve userData from localStorage
+  const userData = JSON.parse(localStorage.getItem("userData"));
 
-const SideDrawer = props => {
+  // Get cmcName from userData, or fallback to an empty string if userData is not available
+  // const cmcName = userData ? userData.cmcName : "";
 
-  return (
+  // Convert userData object to array of entries
+  const userDataArray = userData ? Object.entries(userData) : [];
+
+  // Get user name from userDataArray by index, or fallback to an empty string
+  const firstName = userDataArray.length > 1 ? userDataArray[1][1] : ""; // Assuming user name is the second item
+  const lastName = userDataArray.length > 1 ? userDataArray[2][1] : "";
 
+  // Function to handle logout
+  const handleLogout = () => {
+    // Clear userData from localStorage
+    localStorage.removeItem("userData");
+  };
+
+  return (
     // Conditional rendering on wether the drawer is open or not.
-    <div className={`sideDrawer ${props.isOpen ? 'open' : ''}`}>
+    <div className={`sideDrawer ${props.isOpen ? "open" : ""}`}>
       <div className="closeButton" onClick={props.onClose}>
-      <FaArrowLeft style={{color:'black'}}/>
+        <FaArrowLeft style={{ color: "black" }} />
       </div>
       <div className="company__tag">
-        <Link to ="/DashboardHome">
+        <Link to="/DashboardHome">
           <h1>Butler.</h1>
-        </Link>     
+        </Link>
         <div className="profile__info">
-            <div className="profile__picture">
-                  <img src={image} alt="Uploaded" style={{ maxWidth:'100%', objectFit:'cover' }} />
-            </div>
-            <div className="greeting">
-                <p>Welcome back <MdWavingHand /></p>
-                <p className="user__name">{props.firstName + " " + props.lastName}</p>
-            </div>
+          <div className="profile__picture">
+            <img
+              src={image}
+              alt="Uploaded"
+              style={{ maxWidth: "100%", objectFit: "cover" }}
+            />
+          </div>
+          <div className="greeting">
+            <p>
+              Welcome back <MdWavingHand />
+            </p>
+            <p className="user__name">
+              {/* {props.firstName + " " + props.lastName} */}
+              {firstName + " " + lastName}
+            </p>
+          </div>
         </div>
-
       </div>
-      <ul className="">
-        {props.children}
-      </ul>
+      <ul className="">{props.children}</ul>
       <div className="drawer__buttons">
-          <div className="edit__profile">
-           <Link to="/DashboardHome/editUser"> <button>Edit Profile</button></Link>
-          </div>
-          <div className="log__out">
-              <Link to="/"><button> Log Out</button></Link>
-          </div>
+        <div className="edit__profile">
+          <Link to="/DashboardHome/editUser">
+            {" "}
+            <button>Edit Profile</button>
+          </Link>
+        </div>
+        <div className="log__out">
+          <Link to="/" onClick={handleLogout}>
+            <button> Log Out</button>
+          </Link>
+        </div>
       </div>
     </div>
   );