some comments

client/src/pages/ballotInfo/electionCheckBox/electionCheckbox.tsx

@@ -1,3 +1,7 @@
+/* Upcoming election checkbox. Includes calls to strapi to fetch the election
+ * date and name. Styles the larger box holding the data.
+*/
+
 'use client';
 import react from 'react';
 import { useState, useEffect } from 'react';
@@ -12,17 +16,21 @@ interface ElectionDateObject {
     }
 }
 
+
+// onCheck will be called when an election's box is checked
 interface ElectionCheckboxProps {
     onCheck: (electionName: string) => void;
 }
 
+
 const ElectionCheckbox: React.FC<ElectionCheckboxProps> = ({ onCheck }) => {
     const [electionDates, setElectionDates] = useState<ElectionDateObject[]>([])
     const [isLoading, setIsLoading] = useState(true);
     const [sortedElectionDates, setSortedElectionDates] = useState<ElectionDateObject[]>([])
     const [selectedElection, setSelectedElection] = useState<string | null>(null);
 
 
+    // Get the election dates from strapi
     useEffect(() => {
         const fetchElectionDates = async () => {
             setIsLoading(true);
@@ -53,17 +61,18 @@ const ElectionCheckbox: React.FC<ElectionCheckboxProps> = ({ onCheck }) => {
     }, [])
 
 
+    // Sort the dates and calculate how far away they are
     useEffect(() => {
         if (electionDates.length > 0) {
             const sortedDates = electionDates.sort((a: ElectionDateObject, b: ElectionDateObject) => {
                 return new Date(a.attributes.ElectionDate).getTime() - new Date(b.attributes.ElectionDate).getTime();
             });
             setSortedElectionDates(sortedDates);
         }
-
     }, [electionDates]);
 
 
+    // When box is checked, set the election as selected, set the global variable (in common/index.tsx), and call onCheck function
     const handleCheckboxChange = (electionName: string) => {
         console.log(electionName);
         setSelectedElection(electionName);
@@ -88,7 +97,10 @@ const ElectionCheckbox: React.FC<ElectionCheckboxProps> = ({ onCheck }) => {
                                 ) : (
                                     <div>
                                         {sortedElectionDates.map((election, index) => (
-                                            <ElectionCheckboxCard key={index} electionName={election.attributes.ElectionName} electionDate={election.attributes.ElectionDate}
+                                            <ElectionCheckboxCard
+                                                key={index}
+                                                electionName={election.attributes.ElectionName}
+                                                electionDate={election.attributes.ElectionDate}
                                                 onCheckboxChange={handleCheckboxChange}
                                                 isChecked={selectedElection === election.attributes.ElectionName} />
                                         ))}

client/src/pages/ballotInfo/electionCheckBox/electionCheckboxCard.tsx

@@ -1,3 +1,8 @@
+/* Upcoming election checkbox card. Given the election name and date, calculates
+ * the time remaining before the election and displays the contents of the card.
+ * Styles the card contents (name, date, checkbox, dividing lines)
+*/
+
 'use client';
 import react from 'react';
 import { useState, useEffect } from 'react';
@@ -11,7 +16,7 @@ type Props = {
 };
 
 
-export default function ElectionCheckboxCard({ electionName = 'Preliminary Municipal Election', electionDate, onCheckboxChange, isChecked }: Props) {
+export default function ElectionCheckboxCard({ electionName, electionDate, onCheckboxChange, isChecked }: Props) {
     const [displayElectionDate, setDisplayElectionDate] = useState('')
     const [remainingDays, setRemainingDays] = useState(0);
     const [electionChecked, setElectionChecked] = useState('')
@@ -22,8 +27,8 @@ export default function ElectionCheckboxCard({ electionName = 'Preliminary Munic
             if (electionDate && electionName) {
 
                 const electionDateObj = new Date(electionDate);
-                electionDateObj.setHours(0, 0, 0, 0);
 
+                electionDateObj.setHours(0, 0, 0, 0);
                 electionDateObj.setDate(electionDateObj.getDate() + 1)
 
                 const formattedElectionDate = electionDateObj.toLocaleDateString('en-US', {
@@ -35,6 +40,7 @@ export default function ElectionCheckboxCard({ electionName = 'Preliminary Munic
             }
         }
 
+        // Calculate time remaining from date till now
         const getRemainingDate = () => {
             const electionDateObj = new Date(electionDate);
             const today = new Date();
@@ -44,24 +50,21 @@ export default function ElectionCheckboxCard({ electionName = 'Preliminary Munic
         }
 
         changeDateDisplay();
-        getRemainingDate()
-
-
+        getRemainingDate();
     }, [electionName, electionDate]);
 
+
+    // On change, set the election name
     const handleChange = () => {
         onCheckboxChange(electionName);
-
     };
 
 
-
-
     return (
         <div className="space-y-4 w-full px-4">
             <div className='flex justify-between items-center'>
                 <h1 className='text-xl text-gray-600'>{electionName}</h1>
-                {/* Replace with your Checkbox component with proper props */}
+                {/* Replace with Checkbox component with proper props */}
                 <Checkbox
                     checked={isChecked}
                     onChange={handleChange}
@@ -74,13 +77,6 @@ export default function ElectionCheckboxCard({ electionName = 'Preliminary Munic
                 <h1 className='font-semibold'>{remainingDays} Days</h1>
             </div>
         </div>
-
-
-
-
-
-
-
     )
 }
 

client/src/pages/ballotInfo/whatsOnTheBallot/candidateData.tsx

@@ -1,3 +1,8 @@
+/* Gets all candidates from strapi, queries them based on the voter's district
+ * and selected election, and displays the filtered results. Styles the outer
+ * dropdowns of candidates and the description of the role.
+*/
+
 'use client'
 import { useEffect, useState } from 'react';
 import { localCandidateAPI, deployedCandidateAPI, localCandidateRoleAPI, deployedCandidateRoleAPI, globalDistrictNum, globalCurrElection } from '@/common';
@@ -40,8 +45,8 @@ export default function CandidateData() {
     const [candidateRoleDate, setCandidateRoleData] = useState<{ [key: string]: string }>({})
 
 
+    // Fetch candidate data from strapi
     useEffect(() => {
-        // Fetch candidate data from strapi
         const getData = async () => {
             try {
                 const response = await fetch(localCandidateAPI, {
@@ -60,7 +65,7 @@ export default function CandidateData() {
             }
         };
 
-        // Fetch data only if districtNum and election are set
+        // Actually fetch data only if districtNum and election are set
         if (districtNum && selectedElection) {
             getData();
         }
@@ -74,15 +79,14 @@ export default function CandidateData() {
     }, [globalDistrictNum, globalCurrElection]);
 
 
+    /* Query data, store data to new variable as nested hashtable based on the election date and district.
+     * Loop through the data, match the election data and district type, then check to see if their role
+     * is already in the hashtable. If yes, add another person to the value . If no, initialize the key
+     * with the person and value */
     useEffect(() => {
-        // Query data, store data to new variable as nested hashtable based on the election date and district 
-        // loop through the data, match the election data and district type, then check to see if their role is already in the hashtable
-        // if yes, add another person to the value . If no, initialize the key with the person the valye 
-
         const sortedData: { [key: string]: Candidate[] } = {};
         const roleData: { [key: string]: string } = {};
 
-
         // Get candidate role from strapi
         const getData = async () => {
             try {
@@ -107,7 +111,7 @@ export default function CandidateData() {
         }
         getData();
 
-        // Add candidates to hash table
+        // Filter candidates and add to hash table
         if (allCandidateData.length > 0 && districtNum) {
             allCandidateData.forEach((candidateDataObject: CandidateDataObject) => {
                 if (candidateDataObject.attributes.District.trim() === districtNum && candidateDataObject.attributes.ElectionName.trim() === selectedElection?.trim()) {

client/src/pages/ballotInfo/whatsOnTheBallot/dropDown.tsx

@@ -1,3 +1,5 @@
+/* Hardcoded candidate dropdown. Delete later */
+
 'use client'
 import { useEffect, useState } from 'react';
 import * as React from 'react';

client/src/pages/ballotInfo/whatsOnTheBallot/peopleCard.tsx

@@ -1,5 +1,7 @@
-'use client';
+/* Card for each individual candidate. 
+*/
 
+'use client';
 import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -17,7 +19,6 @@ type Props = {
 };
 
 
-
 const PeopleCard = ({ name, affiliation, picture, link }: Props) => {
 
     const router = useRouter();