From ffff7efaccd9efe885ac8e3e9516fd429e4559ec Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 21:46:17 -0700
Subject: [PATCH 01/16] settings JSDOC comments

---
 .../components/client/settings/settings.jsx   | 99 +++++++++++++++----
 1 file changed, 78 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/client/settings/settings.jsx b/frontend/src/components/client/settings/settings.jsx
index fd09261..0e9898c 100644
--- a/frontend/src/components/client/settings/settings.jsx
+++ b/frontend/src/components/client/settings/settings.jsx
@@ -2,6 +2,17 @@ import { useEffect, useState } from "react";
 import { baseUrl } from "../../../emails/emailHandler";
 import "./settings.css";
 
+/**
+ * Settings component for managing user preferences
+ * @param {Object} param0 - Component props
+ * @param {boolean} param0.isChecked - Indicates whether summaries are enabled
+ * @param {function} param0.handleToggleSummariesInInbox - Callback to toggle summaries
+ * @param {number} param0.emailFetchInterval - Current email fetch interval
+ * @param {function} param0.handleSetEmailFetchInterval - Callback to set email fetch interval
+ * @param {string} param0.theme - Current theme
+ * @param {function} param0.handleSetTheme - Callback to set theme
+ * @returns {JSX.Element}
+ */
 export function Settings({
   isChecked,
   handleToggleSummariesInInbox,
@@ -15,10 +26,15 @@ export function Settings({
     window.location.href = "/login";
   };
 
-  const handleDeleteAccount = async() => {
-    //confirm if the user wants to delete their account
+  /**
+   * Deletes the user account after confirmation, removes all user info from the database,
+   * and redirects to the login page.
+   * @async
+   * @returns {Promise<void>}
+   */
+  const handleDeleteAccount = async () => {
     if (!window.confirm("Are you sure you want to delete your EmailEssence Account? \nThis will remove all information associated with your gmail account from our server and lead to longer loading times when you log back in next time.")) return;
-    try{
+    try {
       const profile = await fetchUserProfile();
       const userId = profile.google_id
       await deleteUserById(userId);
@@ -31,8 +47,14 @@ export function Settings({
     };
   }
 
+
+  /**
+   * Custom hook to detect system theme preference
+   * This hook listens for changes in the user's system theme preference
+   * and updates the state accordingly.
+   * @returns {boolean} isDarkTheme - true if the system theme is dark, false otherwise
+   */
   const isDarkTheme = useSystemTheme();
-  // useEffect that sets the dark mode class when the theme is set to system
   useEffect(() => {
     if (theme === "system") {
       if (isDarkTheme) {
@@ -63,7 +85,7 @@ export function Settings({
   );
 }
 
-// component that renders the summary toggle switch for enabling/disabling summaries in the inbox
+/* Component that renders the summary toggle switch for enabling/disabling summaries in the inbox */
 export function SummariesInInbox({ isChecked, onToggle }) {
   return (
     <div className="settings-block">
@@ -76,7 +98,7 @@ export function SummariesInInbox({ isChecked, onToggle }) {
   );
 }
 
-// component that renders the email fetch interval slider
+/* Component that renders the email fetch interval slider */
 export function EmailFetchInterval({
   emailFetchInterval,
   onSetEmailFetchInterval,
@@ -101,11 +123,14 @@ export function EmailFetchInterval({
   );
 }
 
-// component that renders the buttons to switch between different themes
+/**
+ * Component that renders the theme switcher buttons
+ * @param {string} theme - The current theme
+ * @param {function} onSetTheme - Callback function to handle theme changes
+ * @returns {JSX.Element}
+ */
 export function Theme({ theme, onSetTheme }) {
-  const themes = ["light", "system", "dark"]; //array of themes
-
-  //function to handle theme change between light and dark through the buttons
+  const themes = ["light", "system", "dark"];
   const handleThemeChange = (setTheme) => {
     onSetTheme(setTheme);
     if (setTheme === "dark") {
@@ -123,14 +148,13 @@ export function Theme({ theme, onSetTheme }) {
       }
     }
   };
-
   return (
     <div className="settings-block">
       <h2>Theme</h2>
       <div className="theme-toggle-group">
-        {themes.map(
+        {themes.map( //renders the theme buttons
           (
-            t //renders the theme buttons
+            t
           ) => (
             <button
               key={t}
@@ -146,6 +170,7 @@ export function Theme({ theme, onSetTheme }) {
   );
 }
 
+/* Component that renders the logout button */
 export function Logout({ onLogout }) {
   return (
     <button className="logout" onClick={onLogout}>
@@ -154,6 +179,7 @@ export function Logout({ onLogout }) {
   );
 }
 
+/* Component that renders the delete account button */
 export function DeleteAccount({ onDelete }) {
   return (
     <button className="delete-account" onClick={onDelete}>
@@ -162,6 +188,11 @@ export function DeleteAccount({ onDelete }) {
   );
 }
 
+/**
+ * Custom hook to detect system theme preference
+ * This hook listens for changes in the user's system theme preference
+ * @returns {boolean} isDarkTheme - true if the system theme is dark, false otherwise
+ */
 const useSystemTheme = () => {
   const getCurrentTheme = () =>
     window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -180,7 +211,10 @@ const useSystemTheme = () => {
   return isDarkTheme;
 };
 
-//  @router.get("/me"), gets current users profile, Retrieves the authenticated user's profile
+/**
+ * Fetches the current user's profile information
+ * @returns {Promise<Object>} - The user's profile data
+ */
 export const fetchUserProfile = async () => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(`${baseUrl}/user/me`, {
@@ -195,7 +229,11 @@ export const fetchUserProfile = async () => {
   return response.json();
 };
 
-// @router.get("/preferences"), gets the user preferences, Retrieves the authenticated user's preferences settings
+
+/**
+ * Fetches the current user's preferences
+ * @returns {Promise<Object>} - The user's preferences data
+ */
 export const fetchUserPreferences = async () => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(`${baseUrl}/user/preferences`, {
@@ -210,7 +248,10 @@ export const fetchUserPreferences = async () => {
   return response.json();
 };
 
-// @router.put("/preferences"), updates the user preferences, Updates the authenticated user's preferences settings
+/**
+ * Fetches the user's preferences and updates them
+ * @returns {Promise<Object>} - The updated user's preferences data
+ */
 export const updateUserPreferences = async () => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(`${baseUrl}/user/preferences`, {
@@ -225,7 +266,10 @@ export const updateUserPreferences = async () => {
   return response.json();
 };
 
-// @router.get ("/user_id"). gets user by ID, retrieves user information by user ID
+/**
+ * Fetches a user by ID
+ * @returns {Promise<Object>} - The user's data
+ */
 export const fetchUserById = async () => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(`${baseUrl}/user/${user_id}`, {
@@ -240,7 +284,11 @@ export const fetchUserById = async () => {
   return response.json();
 };
 
-// @router.put("/user_id"), updates user, updates user information by user ID
+/**
+ * Updates a user by ID
+ * @param {string} user_id - The ID of the user to update
+  * @returns {Promise<Object>} - The updated user's data
+ */
 export const updateUserById = async (user_id) => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(`${baseUrl}/user/${user_id}`, {
@@ -255,10 +303,14 @@ export const updateUserById = async (user_id) => {
   return response.json();
 };
 
-// @router.delete( "/user_id"), deletes user, deletes user account by user ID
+/**
+ * Deletes a user by ID
+ * @param {string} user_id - The ID of the user to delete
+ * @returns {Promise<Object>} - The deleted user's data
+ */
 export const deleteUserById = async (user_id) => {
   const token = localStorage.getItem("auth_token");
-  
+
   const response = await fetch(`${baseUrl}/user/${user_id}`, {
     method: "DELETE",
     headers: {
@@ -272,7 +324,12 @@ export const deleteUserById = async (user_id) => {
   return response.json();
 };
 
-// function saves the user preferences to the backend
+/**
+ * Saves the user preferences to the backend
+ * @param {string} user_id - The ID of the user
+ * @param {Object} userPreferences - The user's preferences data
+ * @returns {Promise<Object>} - The updated user's preferences data
+ */
 export const saveUserPreferences = async (user_id, userPreferences) => {
   const token = localStorage.getItem("auth_token");
   const response = await fetch(

From 54de76e8e4f4422efd4092cf3a9217194337442b Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 21:48:53 -0700
Subject: [PATCH 02/16] contact comments

---
 frontend/src/components/login/contact.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/login/contact.jsx b/frontend/src/components/login/contact.jsx
index a5b0bbb..58324ac 100644
--- a/frontend/src/components/login/contact.jsx
+++ b/frontend/src/components/login/contact.jsx
@@ -9,8 +9,10 @@ export default function Contact() {
     const overviewRef = useRef(null);
     const aboutRef = useRef(null);
 
-    useEffect(() => { window.scrollTo(0, 0);}, []); //scrolls to the top
+    /* Scrolls to the top */
+    useEffect(() => { window.scrollTo(0, 0);}, []);
 
+    /* smoothly scrolls to the ref section */
     const scrollToSection = (ref) => {
         if (ref.current) {
             ref.current.scrollIntoView({ behavior: "smooth" });

From c87621b8cc85e7d7a994e365646c8f1b5966135c Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 21:53:39 -0700
Subject: [PATCH 03/16] comments for loading

---
 frontend/src/components/login/Loading.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/login/Loading.jsx b/frontend/src/components/login/Loading.jsx
index f5f6cc0..be268d4 100644
--- a/frontend/src/components/login/Loading.jsx
+++ b/frontend/src/components/login/Loading.jsx
@@ -3,19 +3,23 @@ import { useNavigate } from "react-router";
 import { handleOAuthCallback } from "../../authentication/authenticate";
 import "./Loading.css";
 
+/**
+ * A loading component that handles the OAuth callback and navigates to the home page.
+ * It displays a loading spinner and text while the OAuth process is completed.
+ */
 export default function Loading() {
   const navigate = useNavigate();
   useEffect(() => {
     const completeOAuth = async () => {
       try {
-        //calls Oauth and updates the loading state
+        /* calls Oauth and updates the loading state */
         await handleOAuthCallback();
 
         navigate("/client/home#newEmails");
-        // Link to /client & mention new emails
+        /* Link to /client & mention new emails */
       } catch (error) {
         console.error("OAuth callback failed:", error);
-        // Optionally navigate to an error page
+        /* Optionally navigate to an error page */
         navigate("/error");
       }
     };

From 8d2cdaf6ed3f53da43553dce78ff92383c841aec Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 21:54:30 -0700
Subject: [PATCH 04/16] comments for privacy and terms

---
 frontend/src/components/login/privacy.jsx | 4 +++-
 frontend/src/components/login/terms.jsx   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/login/privacy.jsx b/frontend/src/components/login/privacy.jsx
index a925c36..6cdfd90 100644
--- a/frontend/src/components/login/privacy.jsx
+++ b/frontend/src/components/login/privacy.jsx
@@ -9,8 +9,10 @@ export default function PrivacyPolicy() {
     const overviewRef = useRef(null);
     const aboutRef = useRef(null);
 
-    useEffect(() => { window.scrollTo(0, 0);}, []); //scrolls to the top
+    /* Scrolls to the top */
+    useEffect(() => { window.scrollTo(0, 0); }, []);
 
+    /* smoothly scrolls to the ref section */
     const scrollToSection = (ref) => {
         if (ref.current) {
             ref.current.scrollIntoView({ behavior: "smooth" });
diff --git a/frontend/src/components/login/terms.jsx b/frontend/src/components/login/terms.jsx
index 1758575..c6178c0 100644
--- a/frontend/src/components/login/terms.jsx
+++ b/frontend/src/components/login/terms.jsx
@@ -9,8 +9,10 @@ export default function TermsOfService() {
   const overviewRef = useRef(null);
   const aboutRef = useRef(null);
 
-  useEffect(() => { window.scrollTo(0, 0); }, []); //scrolls to the top
+  /* Scrolls to the top */
+  useEffect(() => { window.scrollTo(0, 0); }, []);
 
+  /* smoothly scrolls to the ref section */
   const scrollToSection = (ref) => {
     if (ref.current) {
       ref.current.scrollIntoView({ behavior: "smooth" });

From f23f975726c37c41719a694cc4d6be0ede560908 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 22:03:24 -0700
Subject: [PATCH 05/16] error and home comments

---
 frontend/src/components/login/Error.jsx | 3 ++-
 frontend/src/components/login/Home.jsx  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/login/Error.jsx b/frontend/src/components/login/Error.jsx
index 28de1ef..1cf5794 100644
--- a/frontend/src/components/login/Error.jsx
+++ b/frontend/src/components/login/Error.jsx
@@ -1,6 +1,7 @@
-import styles from "./Error.module.css";
 import Logo from "../../assets/Logo";
+import styles from "./Error.module.css";
 
+/* Error page that is displayed when authentication fails. */
 function Error() {
   const errorMessage = localStorage.getItem("error_message") || "Unknown error";
 
diff --git a/frontend/src/components/login/Home.jsx b/frontend/src/components/login/Home.jsx
index be68638..2e69109 100644
--- a/frontend/src/components/login/Home.jsx
+++ b/frontend/src/components/login/Home.jsx
@@ -6,6 +6,7 @@ import ReaderView from "../../assets/ReaderView";
 import UserIcon from "../../assets/UserIcon";
 import "./Home.css";
 
+/* The landing page component for EmailEssence. */
 export default function Home() {
   const navigate = useNavigate();
   const homeRef = useRef(null);

From 12ad8c459eddaeed1686b86c3c49ad8c2d915a50 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 22:14:17 -0700
Subject: [PATCH 06/16] settings and home css sectioning

---
 .../src/components/client/settings/settings.css  | 13 ++++++++-----
 frontend/src/components/login/Home.css           | 16 ++++++++++------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/client/settings/settings.css b/frontend/src/components/client/settings/settings.css
index 912c386..74fd41c 100644
--- a/frontend/src/components/client/settings/settings.css
+++ b/frontend/src/components/client/settings/settings.css
@@ -7,6 +7,7 @@ body {
   background-color: var(--color-background);
 }
 
+/* ---------------------------Settings--------------------------------- */
 .settings {
   width: 100%;
   height: 100%;
@@ -31,6 +32,7 @@ body {
   position: relative;
 }
 
+/* ------------------------------Headings-------------------------------- */
 h2 {
   margin-right: 20px;
   color: var(--color-text);
@@ -40,7 +42,7 @@ h2 {
   line-height: normal;
 }
 
-/* The switch - the box around the slider */
+/* -----------------------------Settings Switch-------------------------- */
 .settings .switch {
   margin-left: auto;
   position: relative;
@@ -49,7 +51,6 @@ h2 {
   height: 20px;
 }
 
-/* Hide default HTML checkbox */
 .settings .switch input {
   opacity: 0;
   width: 0;
@@ -82,12 +83,12 @@ h2 {
   border-radius: 50%;
 }
 
-/* When the checkbox is checked, add a background color */
+/* Checked state for switch */
 .switch input:checked+.toggle {
   background-color: var(--color-toggle-border);
 }
 
-/* Move the slider when the checkbox is checked */
+/* Move the slider when checked */
 .switch input:checked+.toggle:before {
   transform: translateX(calc(1rem + 0.5vw));
   left: 75%;
@@ -103,6 +104,7 @@ h2 {
   border-radius: 50%;
 }
 
+/* --------------------------Email Fetch Interval-------------------------- */
 .email-fetch-interval {
   display: flex;
   flex-direction: column;
@@ -180,7 +182,7 @@ h2 {
   color: var(--color-slider-thumb);
 }
 
-/* Theme Toggle Styles */
+/* ---------------------------Theme Toggle-------------------------- */
 .theme-toggle-group {
   margin-left: auto;
   display: flex;
@@ -221,6 +223,7 @@ h2 {
   outline-offset: 2px;
 }
 
+/* -----------------------Logout and Delete Buttons------------------------ */
 .settings-account-actions {
   position: absolute;
   right: 2rem;
diff --git a/frontend/src/components/login/Home.css b/frontend/src/components/login/Home.css
index 5c20516..051eacb 100644
--- a/frontend/src/components/login/Home.css
+++ b/frontend/src/components/login/Home.css
@@ -1,5 +1,6 @@
 @import url("../../main.css");
 
+/* -----------------------Home Container & Layout------------------------ */
 .home {
   height: 100vh;
   background-color: var(--grey-split);
@@ -11,6 +12,7 @@
   background-color: var(--white);
 }
 
+/* -----------------------Navigation Bar------------------------ */
 .home .nav-container {
   position: fixed;
   top: 0;
@@ -51,6 +53,7 @@
   border-bottom: 2px solid var(--grey);
 }
 
+/* -----------------------Background Image & Container------------------------ */
 .background-container {
   position: relative;
   width: 100vw;
@@ -70,6 +73,7 @@
   left: 0;
 }
 
+/* -----------------------Title & Hero Section------------------------ */
 .home .title-container {
   display: flex;
   flex-direction: column;
@@ -126,6 +130,7 @@
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+/* -----------------------Overview Section------------------------ */
 .home .overview-container {
   display: flex;
   flex-direction: column;
@@ -142,7 +147,6 @@
   align-items: center;
   justify-content: flex-start;
   text-align: left;
-
 }
 
 .home .overview-items {
@@ -181,7 +185,7 @@
   color: var(--black);
 }
 
-/* ------------------------------------------------------------------------------- */
+/* -----------Terms of Service, Privacy Policy, Contact Us, About Us-------------- */
 .home .terms-of-service,
 .privacy-policy,
 .contact-us,
@@ -207,7 +211,7 @@
   min-height: 80vh;
 }
 
-/*-----------------------------------footer----------------------------------------*/
+/* -----------------------Footer------------------------ */
 .footer-container {
   background-color: var(--grey-4);
   color: var(--black);
@@ -241,7 +245,7 @@
   color: var(--grey-light);
 }
 
-/*-----------------------------------Privacy Policy--------------------------------*/
+/* -----------------------Privacy Policy------------------------ */
 .privacy-policy {
   padding: 2.5rem 2rem;
   font-family: var(--font-family);
@@ -300,7 +304,7 @@
   text-decoration: underline;
 }
 
-/*-----------------------------------Terms of Service--------------------------------*/
+/* -----------------------Terms of Service------------------------ */
 .terms-of-service {
   padding: 2.5rem 2rem;
   font-family: var(--font-family);
@@ -355,7 +359,7 @@
   list-style-type: disc;
 }
 
-/*-----------------------------------Contact Us--------------------------------*/
+/* -----------------------Contact Us------------------------ */
 .contact-us {
   padding: 2.5rem 2rem;
   font-family: var(--font-family);

From 64210a00efe343df7318287e60a168da39ceaa73 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 23:39:34 -0700
Subject: [PATCH 07/16] main comments and sectioning

---
 frontend/src/emails/emailHandler.js | 86 ++++++++++++++++++++++++++++-
 frontend/src/main.css               | 12 ++--
 frontend/src/main.jsx               |  5 +-
 3 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/frontend/src/emails/emailHandler.js b/frontend/src/emails/emailHandler.js
index da5681b..8486dd6 100644
--- a/frontend/src/emails/emailHandler.js
+++ b/frontend/src/emails/emailHandler.js
@@ -1,5 +1,5 @@
-import { fetchUserPreferences } from "../components/client/settings/settings";
 import DOMPurify from "dompurify";
+import { fetchUserPreferences } from "../components/client/settings/settings";
 // TODO : env variable for baseUrl
 // export const baseUrl = "http://127.0.0.1:8000";
 export const baseUrl = "https://ee-backend-w86t.onrender.com";
@@ -10,6 +10,29 @@ export let userPreferences = {
   theme: "light",
 };
 
+/**
+ * @typedef {Object} Email
+ * @property {string} email_id
+ * @property {string} sender
+ * @property {string[]} recipients
+ * @property {string} subject
+ * @property {string} body
+ * @property {[string, string, string, string]} received_at - [year, month, day, time]
+ * @property {string} category
+ * @property {boolean} is_read
+ * @property {string} summary_text
+ * @property {string[]} keywords
+ * @property {boolean} hasInnerHTML
+ */
+
+
+/**
+ * Fetches new emails and updates the global emails array.
+ * If found, it appends new emails to the existing list and updates the URL hash.
+ * @async
+ * @returns {Promise<void>}
+ * @throws {Error} If there is an error during the fetch operation.
+ */
 export const fetchNewEmails = async () => {
   try {
     const requestedEmails = await fetchEmails(100);
@@ -25,6 +48,13 @@ export const fetchNewEmails = async () => {
   }
 };
 
+
+/**
+ * Filters out emails that already exist in the allEmails array.
+ * @param {Array} requestedEmails the list of emails requested by the user
+ * @param {Array} allEmails the list of all existing emails
+ * @returns {Array} the list of new emails
+ */
 function getNewEmails(requestedEmails, allEmails) {
   return requestedEmails.filter((reqEmail) => {
     let exists = false;
@@ -35,6 +65,12 @@ function getNewEmails(requestedEmails, allEmails) {
   });
 }
 
+/**
+ * Retrieves user data: emails and preferences.
+ * @async
+ * @returns {Promise<void>}
+ * @throws {Error} If there is an error during the fetch operations.
+ */
 export const retrieveUserData = async () => {
   try {
     emails = await fetchEmails(100);
@@ -45,6 +81,13 @@ export const retrieveUserData = async () => {
   }
 };
 
+/**
+ * Fetches user preferences based on the user ID.
+ * @async
+ * @param {string} user_id - The ID of the user whose preferences are to be fetched.
+ * @returns {Promise<void>}
+ * @throws {Error} If there is an error during the fetch operation.
+ */
 const getUserPreferences = async (user_id) => {
   try {
     const preferences = await fetchUserPreferences(user_id);
@@ -54,6 +97,12 @@ const getUserPreferences = async (user_id) => {
   }
 };
 
+/**
+ * Fetches raw emails from the backend.
+ * @param {number} extension - The number of emails to fetch.
+ * @returns {Promise<array>} - A promise that resolves to an array of emails.
+ * @throws {Error} If it fails to retrieve emails or response is not ok.
+ */
 async function getEmails(extension) {
   const option = {
     method: "GET",
@@ -78,6 +127,13 @@ async function getEmails(extension) {
   }
 }
 
+/**
+ * Fetches the reader view content for a specific email.
+ * @async
+ * @param {string} emailId - The ID of the email to fetch the reader view for.
+ * @returns {Promise<string>} - A promise that resolves to the reader view content of the email.
+ * @throws {Error} Will throw if the fetch fails.
+ */
 export async function getReaderView(emailId) {
   const option = {
     method: "GET",
@@ -99,6 +155,13 @@ export async function getReaderView(emailId) {
   return email.reader_content;
 }
 
+/**
+ * Fetches summaries for a batch of email IDs.
+ * @async
+ * @param {Array<string>} emailIds - Array of email IDs.
+ * @returns {Promise<Array<Object>>} Array of summary objects.
+ * @throws {Error} If the request fails.
+ */
 async function getSummaries(emailIds) {
   const option = {
     method: "GET",
@@ -125,6 +188,12 @@ async function getSummaries(emailIds) {
   }
 }
 
+/**
+ * Parses a date string into an array of [year, month, day, time].
+ * @param {string} date - The date string to parse.
+ * @returns {Array<string>} [year, month, day, time] or ["", "", "", ""] on error.
+ * @throws {Error} If the date string is invalid or parsing fails.
+ */
 function parseDate(date) {
   if (!date) return ["", "", "", ""]; // Handle null/undefined dates
   try {
@@ -140,6 +209,13 @@ function parseDate(date) {
   }
 }
 
+
+/**
+ * Fetches emails from the backend.
+ * @async
+ * @param {number} numRequested - The number of emails to fetch.
+ * @returns {Promise<Array>} - Array of processed email objects.
+ */
 export default async function fetchEmails(numRequested) {
   try {
     // Fetch both emails and summaries concurrently
@@ -191,6 +267,14 @@ export function getTop5(emailList) {
   return emailList.length > 5 ? emailList.slice(0, 5) : emailList;
 }
 
+/**
+ * Adds summaries and keywords to a list of emails by fetching them from the backend.
+ * Updates the corresponding emails in the global emails array.
+ * @async
+ * @param {Array<Object>} emailList - List of email objects to update with summaries.
+ * @returns {Promise<void>}
+ * @throws {Error} If fetching or updating summaries fails.
+ */
 async function addSummaries(emailList) {
   const ids = emailList.map((emailList) => {
     return emailList.email_id;
diff --git a/frontend/src/main.css b/frontend/src/main.css
index 34f291f..156aa47 100644
--- a/frontend/src/main.css
+++ b/frontend/src/main.css
@@ -2,7 +2,7 @@
   --sidebar-width: 1px;
   --sidebar-icon-height: calc(30px + 2vw);
 
-  /* Color palette from dark to light */
+  /*------------------------Color palette---------------------------------*/
   --black: #000;
   --grey: #1e1e1e;
   --grey-1: #161616;
@@ -14,7 +14,7 @@
   --white: white;
   --brown: #a2845e;
 
-  /*variables */
+  /*----------------------------Variables-----------------------------------*/
   --font-family: sans-serif;
   --font-size: 15px;
   --color-text: var(--black);
@@ -41,7 +41,7 @@
   --color-icon: var(--white);
 }
 
-/* dark theme variables */
+/*--------------------------dark theme variables----------------------------*/
 body.dark-mode {
   --color-text: var(--grey-5);
   --color-border: var(--grey-2);
@@ -65,6 +65,7 @@ body.dark-mode {
   --color-icon: var(--white);
 }
 
+/*--------------------------Scrollbar----------------------------*/
 /* Target the scrollbar track (the background) */
 ::-webkit-scrollbar-track {
   background-color: var(--color-scroll-background);
@@ -74,10 +75,8 @@ body.dark-mode {
 ::-webkit-scrollbar-thumb {
   background-color: var(--color-scroll-thumb);
   border-radius: 10px;
-  /* Optional: round the thumb */
 }
 
-/* Target the scrollbar thumb on hover */
 ::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-scroll-hover);
 }
@@ -85,10 +84,9 @@ body.dark-mode {
 /* Target the whole scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
-  /* Optional: adjust the width */
 }
 
-/* CSS Reset */
+/*----------------------------------CSS Reset-----------------------------*/
 *,
 *::before,
 *::after {
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 7d55916..c95ab84 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,8 +1,9 @@
-import { BrowserRouter } from "react-router";
 import { createRoot } from "react-dom/client";
-import "./main.css";
+import { BrowserRouter } from "react-router";
 import Display from "./components/router/Router";
+import "./main.css";
 
+/* Entry point for our react application.*/
 createRoot(document.getElementById("root")).render(
   <BrowserRouter basename={`/${import.meta.env.BASE_URL}`}>
     <Display />

From dbb8e2f5de653a8d572c8e726f2be055ec8ff3f8 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 23:43:19 -0700
Subject: [PATCH 08/16] router

---
 frontend/src/components/router/Router.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/router/Router.jsx b/frontend/src/components/router/Router.jsx
index d76c3e8..190e271 100644
--- a/frontend/src/components/router/Router.jsx
+++ b/frontend/src/components/router/Router.jsx
@@ -17,6 +17,11 @@ import Login from "../login/login";
 import PrivacyPolicy from "../login/privacy";
 import TermsOfService from "../login/terms";
 
+/**
+ * Main Router component for the application.
+ * Wraps AppRouter in BrowserRouter for test environments.
+ * @returns {JSX.Element}
+ */
 export function Router() {
   const testing = import.meta.env.MODE === "test";
   if (testing) {
@@ -29,6 +34,11 @@ export function Router() {
   return <AppRouter />;
 }
 
+/**
+ * Defines routes and manages user email state for client routes.
+ * Updates userEmails state when the global emails array changes or when #newEmails is in the URL hash.
+ * @returns {JSX.Element}
+ */
 export function AppRouter() {
   const [userEmails, setUserEmails] = useState(emails);
   const location = useLocation();

From 715520c5ca4dac444bf5446db0a79ec4faf9f4a0 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 23:48:03 -0700
Subject: [PATCH 09/16] client JSDoc

---
 frontend/src/components/client/client.jsx | 31 +++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/src/components/client/client.jsx b/frontend/src/components/client/client.jsx
index 2003788..2c3e302 100644
--- a/frontend/src/components/client/client.jsx
+++ b/frontend/src/components/client/client.jsx
@@ -9,6 +9,14 @@ import { clientReducer, userPreferencesReducer } from "./reducers";
 import { Settings } from "./settings/settings";
 import SideBar from "./sidebar/sidebar";
 
+/**
+ * Main client component for authenticated user experience.
+ * Handles sidebar, routing, user preferences, and periodic email fetching.
+ * @param {Object} props
+ * @param {Array<Email>} props.emailsByDate - List of emails grouped by date.
+ * @param {Object} props.defaultUserPreferences - Default user preferences.
+ * @returns {JSX.Element}
+ */
 function Client({
   emailsByDate,
   defaultUserPreferences = {
@@ -27,6 +35,10 @@ function Client({
     defaultUserPreferences
   );
 
+  /**
+   * Sets up an interval to fetch new emails based on user preference.
+   * @returns {void}
+   */
   useEffect(() => {
     const clock = setInterval(async () => {
       try {
@@ -38,12 +50,14 @@ function Client({
     return () => clearInterval(clock);
   }, [userPreferences.emailFetchInterval]);
 
+  // Dynamically update sidebar width
   const root = document.querySelector(":root");
   root.style.setProperty(
     "--sidebar-width",
     `calc(${client.expandedSideBar ? "70px + 5vw" : "30px + 2vw"})`
   );
 
+  /** Handles logo click to toggle sidebar expansion. */
   const handleLogoClick = () => {
     dispatchClient({
       type: "logoClick",
@@ -51,6 +65,10 @@ function Client({
     });
   };
 
+  /**
+   * Handles navigation between client pages.
+   * @param {string} pageName - The page route to navigate to.
+   */
   const handlePageChange = (pageName) => {
     const toChange = import.meta.env.MODE === "test" ? "/client" : null;
     if (toChange) {
@@ -60,6 +78,7 @@ function Client({
     }
   };
 
+  /** Toggles the summaries-in-inbox user preference. */
   const handleToggleSummariesInInbox = () => {
     dispatchUserPreferences({
       type: "isChecked",
@@ -67,6 +86,10 @@ function Client({
     });
   };
 
+  /**
+   * Sets the email fetch interval user preference.
+   * @param {number} interval - Interval in seconds.
+   */
   const handleSetEmailFetchInterval = (interval) => {
     dispatchUserPreferences({
       type: "emailFetchInterval",
@@ -74,6 +97,10 @@ function Client({
     });
   };
 
+  /**
+   * Sets the theme user preference.
+   * @param {string} theme - Theme name ("light", "system", "dark").
+   */
   const handleSetTheme = (theme) => {
     dispatchUserPreferences({
       type: "theme",
@@ -81,6 +108,10 @@ function Client({
     });
   };
 
+  /**
+   * Sets the currently selected email.
+   * @param {Email} email - The email object to set as current.
+   */
   const handleSetCurEmail = (email) => {
     dispatchClient({
       type: "emailChange",

From f31864be922de1f2aaf841f78e8c2557db1fc9b0 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Fri, 13 Jun 2025 23:52:02 -0700
Subject: [PATCH 10/16] reducer JSDOC

---
 frontend/src/components/client/reducers.jsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/components/client/reducers.jsx b/frontend/src/components/client/reducers.jsx
index 4b62cc5..8f84861 100644
--- a/frontend/src/components/client/reducers.jsx
+++ b/frontend/src/components/client/reducers.jsx
@@ -1,5 +1,15 @@
 import { saveUserPreferences } from "./settings/settings";
 
+/**
+ * Reducer for client state (sidebar, current page, current email).
+ * @param {Object} client - Current client state.
+ * @param {Object} action - Action to perform.
+ * @param {string} action.type - Type of action ("logoClick", "pageChange", "emailChange").
+ * @param {boolean} [action.state] - Sidebar expansion state (for "logoClick").
+ * @param {string} [action.page] - Page name (for "pageChange").
+ * @param {Object} [action.email] - Email object (for "emailChange").
+ * @returns {Object} New client state.
+ */
 export function clientReducer(client, action) {
   switch (action.type) {
     case "logoClick": {
@@ -23,6 +33,17 @@ export function clientReducer(client, action) {
   }
 }
 
+/**
+ * Reducer for user preferences state.
+ * Updates and saves user preferences based on the action type.
+ * @param {Object} userPreferences - Current user preferences state.
+ * @param {Object} action - Action to perform.
+ * @param {string} action.type - Type of action ("isChecked", "emailFetchInterval", "theme").
+ * @param {boolean} [action.isChecked] - Toggle summaries in inbox (for "isChecked").
+ * @param {number} [action.emailFetchInterval] - Email fetch interval (for "emailFetchInterval").
+ * @param {string} [action.theme] - Theme name (for "theme").
+ * @returns {Object} New user preferences state.
+ */
 export function userPreferencesReducer(userPreferences, action) {
   // Call to get user preferences to the update preferences base on the reducer action
   switch (action.type) {

From a863be241e64e558ad8f8aa257c2a635c8986244 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:00:13 -0700
Subject: [PATCH 11/16] Dashboard JSDOCS

---
 .../components/client/dashboard/dashboard.jsx | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/client/dashboard/dashboard.jsx b/frontend/src/components/client/dashboard/dashboard.jsx
index b96b3e7..05744bc 100644
--- a/frontend/src/components/client/dashboard/dashboard.jsx
+++ b/frontend/src/components/client/dashboard/dashboard.jsx
@@ -1,9 +1,18 @@
+import PropTypes from "prop-types";
 import ViewIcon from "../../../assets/ViewIcon";
 import { getTop5 } from "../../../emails/emailHandler";
-import MiniViewPanel from "./miniview";
-import PropTypes from "prop-types";
 import "./dashboard.css";
+import MiniViewPanel from "./miniview";
 
+/**
+ * Dashboard component for the client.
+ * Displays the weighted email list and the mini view panel.
+ * @param {Object} props
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @returns {JSX.Element}
+ */
 function Dashboard({ emailList, handlePageChange, setCurEmail }) {
   return (
     <div className="dashboard">
@@ -21,6 +30,15 @@ function Dashboard({ emailList, handlePageChange, setCurEmail }) {
   );
 }
 
+/**
+ * Renders a list of the top 5 weighted emails.
+ * @const {JSX.Element} WEList - Returns an array of WEListEmail components for the top 5 emails.
+ * @param {Object} props
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @returns {JSX.Element}
+ */
 function WeightedEmailList({ emailList, setCurEmail, handlePageChange }) {
   const emails = () => {
     const WEList = getTop5(emailList);
@@ -40,6 +58,15 @@ function WeightedEmailList({ emailList, setCurEmail, handlePageChange }) {
   return <div className="weighted-email-list-container">{emails()}</div>;
 }
 
+/**
+ * Renders a single weighted email entry with summary and view icon.
+ * @const {JSX.Element} summary - Renders the summary for the email, or a loading placeholder if not available.
+ * @param {Object} props
+ * @param {Email} props.email - The email object.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @returns {JSX.Element}
+ */
 function WEListEmail({ email, setCurEmail, handlePageChange }) {
   const summary = () => {
     let returnBlock;

From 8a946311cd5f6ac4a8bd20a4adbd2b7162b2ac2e Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:06:11 -0700
Subject: [PATCH 12/16] miniview JSDOCS

---
 .../components/client/dashboard/miniview.jsx  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/frontend/src/components/client/dashboard/miniview.jsx b/frontend/src/components/client/dashboard/miniview.jsx
index 9e516a1..58ab40e 100644
--- a/frontend/src/components/client/dashboard/miniview.jsx
+++ b/frontend/src/components/client/dashboard/miniview.jsx
@@ -6,6 +6,15 @@ import InboxIcon from "../../../assets/InboxArrow";
 import { emailsPerPage } from "../../../assets/constants";
 import "./miniview.css";
 
+/**
+ * MiniViewPanel component for the client dashboard.
+ * Displays a list of emails in a compact view with an option to expand to the full inbox.
+ * @param {Object} props
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @returns {JSX.Element}
+ */
 function MiniViewPanel({ emailList, handlePageChange, setCurEmail }) {
   return (
     <div className="mini-view">
@@ -19,6 +28,12 @@ function MiniViewPanel({ emailList, handlePageChange, setCurEmail }) {
   );
 }
 
+/**
+ * Renders the headfor the mini view
+ * @param {Object} props
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @returns {JSX.Element}
+ */
 function MiniViewHead({ handlePageChange }) {
   return (
     <div className="head-container">
@@ -39,6 +54,14 @@ function MiniViewHead({ handlePageChange }) {
   );
 }
 
+/**
+ * Displays a scrollable list of emails, loading more as the user scrolls.
+ * @param {Object} props
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @returns {JSX.Element}
+ */
 function MiniViewBody({ emailList, setCurEmail, handlePageChange }) {
   const [pages, setPages] = useState(1);
   const ref = useRef(null);
@@ -48,6 +71,10 @@ function MiniViewBody({ emailList, setCurEmail, handlePageChange }) {
       : emailList.length;
   const hasUnloadedEmails = maxEmails < emailList.length;
 
+
+  /**
+   * Handles the scroll event to load more emails when the user scrolls to the bottom.
+   */
   const handleScroll = () => {
     const fullyScrolled =
       Math.abs(
@@ -64,6 +91,10 @@ function MiniViewBody({ emailList, setCurEmail, handlePageChange }) {
     handleScroll();
   }, [pages]); // Fixes minimum for large screens, but runs effect after every load which is unnecessary
 
+  /**
+ * Renders the list of MiniViewEmail components up to maxEmails.
+ * @returns {JSX.Element[]}
+ */
   const emails = () => {
     const returnBlock = [];
     for (let i = 0; i < maxEmails; i++) {
@@ -85,6 +116,14 @@ function MiniViewBody({ emailList, setCurEmail, handlePageChange }) {
   );
 }
 
+/**
+ * Renders a single email entry in the mini view.
+ * @param {Object} props
+ * @param {Email} props.email - The email object.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @param {Function} props.handlePageChange - Function to change the client page.
+ * @returns {JSX.Element}
+ */
 function MiniViewEmail({ email, setCurEmail, handlePageChange }) {
   return (
     <div
@@ -127,6 +166,11 @@ MiniViewEmail.propTypes = {
   email: PropTypes.object,
 };
 
+/**
+ * Gets the sender's name from the sender string.
+ * @param {string} sender - The sender string
+ * @returns {string} The sender's name.
+ */
 const getSenderName = (sender) => {
   return sender.slice(0, sender.indexOf("<"));
 };

From 23f4ebabb4d63b2052e2aef18fbf25999becb2b9 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:16:27 -0700
Subject: [PATCH 13/16] auth JSDOCs

---
 frontend/src/authentication/authenticate.js | 36 ++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/src/authentication/authenticate.js b/frontend/src/authentication/authenticate.js
index 20e0b1e..d847d2b 100644
--- a/frontend/src/authentication/authenticate.js
+++ b/frontend/src/authentication/authenticate.js
@@ -1,11 +1,24 @@
 import { baseUrl, retrieveUserData } from "../emails/emailHandler";
+
+/**
+ * Initiates the OAuth authentication flow by redirecting to the backend login endpoint.
+ * Sets the redirect URI to the /loading route.
+ * @async
+ * @returns {void}
+ */
 export const authenticate = async () => {
   // Check for auth hash and render OAuthCallback if present
   const redirect_uri = `${window.location.origin}/loading`;
   window.location.href = `${baseUrl}/auth/login?redirect_uri=${redirect_uri}`;
 };
 
-// When Reach loading component call this function
+/**
+ * Handles the OAuth callback after authentication.
+ * Parses the auth state from the URL hash, verifies authentication, and stores the token.
+ * Navigates to the error page if authentication fails.
+ * @async
+ * @returns {Promise<void>}
+ */
 export const handleOAuthCallback = async () => {
   const hash = window.location.hash;
   if (hash && hash.startsWith("#auth=")) {
@@ -30,6 +43,13 @@ export const handleOAuthCallback = async () => {
   }
 };
 
+/**
+ * Stores the authentication token and retrieves user data.
+ * Navigates to the error page if authentication fails.
+ * @async
+ * @param {string} token - The authentication token.
+ * @returns {Promise<void>}
+ */
 export const handleAuthenticate = async (token) => {
   try {
     localStorage.setItem("auth_token", token);
@@ -39,6 +59,14 @@ export const handleAuthenticate = async (token) => {
   }
 };
 
+
+/**
+ * Handles authentication errors by logging out, storing the error message,
+ * and redirecting to the error page.
+ * @async
+ * @param {Error|string} error - The error object or message.
+ * @returns {Promise<void>}
+ */
 const handleAuthError = async (error) => {
   console.error("Auth flow error:", error);
   localStorage.removeItem("auth_token");
@@ -46,6 +74,12 @@ const handleAuthError = async (error) => {
   window.location.href = "/error"; // go to error page
 };
 
+/**
+ * Checks the authentication status of the provided token by querying the backend.
+ * @async
+ * @param {string} token - The authentication token.
+ * @returns {Promise<boolean>} True if authenticated, false otherwise.
+ */
 export const checkAuthStatus = async (token) => {
   const option = {
     method: "GET",

From d981507454aca1269bb0106a7f064b4469717687 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:16:35 -0700
Subject: [PATCH 14/16] email.jsx JSDOCs

---
 frontend/src/components/client/inbox/Email.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/client/inbox/Email.jsx b/frontend/src/components/client/inbox/Email.jsx
index a0621b3..afcaf2c 100644
--- a/frontend/src/components/client/inbox/Email.jsx
+++ b/frontend/src/components/client/inbox/Email.jsx
@@ -1,5 +1,11 @@
 import PropTypes from "prop-types";
 
+/**
+ * Renders the email body, using inner HTML if present.
+ * @param {Object} props
+ * @param {Email} props.email - The email object to display.
+ * @returns {JSX.Element}
+ */
 export function Email({ email }) {
   return (
     <>

From 0a36918647a22a42e5cf248e8dd820e42639f4d5 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:16:45 -0700
Subject: [PATCH 15/16] emailDisplay JSDOCs

---
 .../components/client/inbox/emailDisplay.jsx  | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/client/inbox/emailDisplay.jsx b/frontend/src/components/client/inbox/emailDisplay.jsx
index 146cf64..72c5823 100644
--- a/frontend/src/components/client/inbox/emailDisplay.jsx
+++ b/frontend/src/components/client/inbox/emailDisplay.jsx
@@ -3,10 +3,16 @@ import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import ReactDom from "react-dom";
 import ReaderViewIcon from "../../../assets/ReaderView";
-import Email from "./Email";
 import { getReaderView } from "../../../emails/emailHandler";
+import Email from "./Email";
 import "./emailDisplay.css";
 
+/**
+ * Displays the currently selected email with header, body, and reader view option.
+ * @param {Object} props
+ * @param {Email} props.curEmail - The currently selected email object.
+ * @returns {JSX.Element}
+ */
 function EmailDisplay({
   curEmail = {
     user_id: 1,
@@ -40,10 +46,21 @@ function EmailDisplay({
   );
 }
 
+/**
+ * Fetches and displays a simplified, readable version of the email.
+ * @param {Object} props
+ * @param {Email} props.curEmail - The currently selected email object.
+ * @returns {JSX.Element}
+ */
 function ReaderView({ curEmail }) {
   const [text, setText] = useState("Loading ...");
   const [displaying, setDisplaying] = useState(false);
 
+  /**
+ * Toggles the display of the reader view and fetches content if opening.
+ * @async
+ * @returns {Promise<void>}
+ */
   async function displayReaderView() {
     setDisplaying(!displaying);
     if (!displaying) {
@@ -87,6 +104,14 @@ function ReaderView({ curEmail }) {
   );
 }
 
+/**
+ * Renders a modal overlay for displaying content or a loading spinner.
+ * @param {Object} props
+ * @param {boolean} props.isLoading - Whether to show the loading spinner.
+ * @param {Function} props.handleClose - Function to close the popup.
+ * @param {React.ReactNode} props.children - Content to display in the popup.
+ * @returns {JSX.Element}
+ */
 function PopUp({ isLoading, handleClose, children }) {
   return ReactDom.createPortal(
     isLoading ? (
@@ -108,10 +133,20 @@ function PopUp({ isLoading, handleClose, children }) {
   );
 }
 
+/**
+ * Formats a date array as MM/DD/YYYY.
+ * @param {Array<string|number>} date - [year, month, day]
+ * @returns {string} Formatted date string.
+ */
 const formatDate = (date) => {
   return `${date[1]}/${date[2]}/${date[0]}`;
 };
 
+/**
+ * Extracts the sender's name from the sender string.
+ * @param {string} sender - The sender string
+ * @returns {string} The sender's name.
+ */
 const getSenderName = (sender) => {
   return sender.slice(0, sender.indexOf("<"));
 };

From 2b96ba3ce468a0e7f8c88e279982ead59c2769b0 Mon Sep 17 00:00:00 2001
From: emmamelkumian <147114444+emmamelkumian@users.noreply.github.com>
Date: Sat, 14 Jun 2025 00:16:51 -0700
Subject: [PATCH 16/16] inbox JSDOCs

---
 .../src/components/client/inbox/inbox.jsx     | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/client/inbox/inbox.jsx b/frontend/src/components/client/inbox/inbox.jsx
index b2030f5..82df1bf 100644
--- a/frontend/src/components/client/inbox/inbox.jsx
+++ b/frontend/src/components/client/inbox/inbox.jsx
@@ -2,11 +2,20 @@ import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import ArrowIcon from "../../../assets/InboxArrow";
 import { emailsPerPage } from "../../../assets/constants";
-import EmailDisplay from "./emailDisplay";
 import { getPageSummaries } from "../../../emails/emailHandler";
+import EmailDisplay from "./emailDisplay";
 import "./emailEntry.css";
 import "./emailList.css";
 
+/**
+ * Inbox component displays the email list and the selected email.
+ * @param {Object} props
+ * @param {boolean} props.displaySummaries - Whether to show summaries.
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Function} props.setCurEmail - Function to set the current email.
+ * @param {Email} props.curEmail - The currently selected email.
+ * @returns {JSX.Element}
+ */
 function Inbox({ displaySummaries, emailList, setCurEmail, curEmail }) {
   return (
     <div className="inbox-display">
@@ -21,7 +30,20 @@ function Inbox({ displaySummaries, emailList, setCurEmail, curEmail }) {
   );
 }
 
+/**
+ * Renders a single email entry in the inbox list.
+ * @param {Object} props
+ * @param {boolean} props.displaySummary - Whether to show the summary.
+ * @param {Email} props.email - The email object.
+ * @param {Function} props.onClick - Function to select this email.
+ * @param {boolean} props.selected - Whether this email is currently selected.
+ * @returns {JSX.Element}
+ */
 function EmailEntry({ displaySummary, email, onClick, selected }) {
+  /**
+   * Renders the summary for the email, or a loading placeholder if not available.
+   * @returns {JSX.Element}
+   */
   const summary = () => {
     let returnBlock;
     if (email.summary_text.length > 0) {
@@ -34,9 +56,8 @@ function EmailEntry({ displaySummary, email, onClick, selected }) {
   const date = getDate(email.received_at);
   return (
     <div
-      className={`entry${displaySummary ? "" : " no-summary"}${
-        selected ? " selected" : ""
-      }`}
+      className={`entry${displaySummary ? "" : " no-summary"}${selected ? " selected" : ""
+        }`}
       onClick={onClick}
     >
       <div className="indicator-container">
@@ -58,6 +79,15 @@ function EmailEntry({ displaySummary, email, onClick, selected }) {
   );
 }
 
+/**
+ * Renders the list of emails in the inbox, with infinite scroll and summary fetching.
+ * @param {Object} props
+ * @param {boolean} props.displaySummaries - Whether to show summaries.
+ * @param {Array<Email>} props.emailList - List of emails.
+ * @param {Email} props.curEmail - The currently selected email.
+ * @param {Function} props.onClick - Function to select an email.
+ * @returns {JSX.Element}
+ */
 function InboxEmailList({ displaySummaries, emailList, curEmail, onClick }) {
   const [pages, setPages] = useState(1);
   const ref = useRef(null);
@@ -67,13 +97,16 @@ function InboxEmailList({ displaySummaries, emailList, curEmail, onClick }) {
       : emailList.length;
   const hasUnloadedEmails = maxEmails < emailList.length;
 
+  /**
+   * Handles scroll event to load more emails when scrolled to the bottom.
+   */
   const handleScroll = () => {
     // add external summary call
     const fullyScrolled =
       Math.abs(
         ref.current.scrollHeight -
-          ref.current.clientHeight -
-          ref.current.scrollTop
+        ref.current.clientHeight -
+        ref.current.scrollTop
       ) <= 1;
     if (fullyScrolled && hasUnloadedEmails) {
       setPages(pages + 1);
@@ -85,6 +118,11 @@ function InboxEmailList({ displaySummaries, emailList, curEmail, onClick }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pages]); // Fixes minimum for large screens, but runs effect after every load which is unnecessary
 
+  /**
+   * Renders the list of EmailEntry components up to maxEmails.
+   * Fetches summaries for emails that need them.
+   * @returns {JSX.Element[]}
+   */
   const emails = () => {
     const returnBlock = [];
     const needsSummary = [];
@@ -143,10 +181,20 @@ InboxEmailList.propTypes = {
   onClick: PropTypes.func,
 };
 
+/**
+ * Formats a date array as MM/DD/YYYY.
+ * @param {Array<string|number>} date - [year, month, day]
+ * @returns {string} Formatted date string.
+ */
 const getDate = (date) => {
   return `${date[1]}/${date[2]}/${date[0]}`;
 };
 
+/**
+ * Extracts the sender's name from the sender string.
+ * @param {string} sender - The sender string, e.g., "John Doe <john@example.com>"
+ * @returns {string} The sender's name.
+ */
 const getSenderName = (sender) => {
   return sender.slice(0, sender.indexOf("<"));
 };