Merge pull request #42 from BU-Spark/checkBox

Boston Voter App: Check box election now fixed
BU-Spark · Jun 24, 2024 · 464196a · 464196a
2 parents d096faf + efdd155
commit 464196a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 27 deletions.
diff --git a/client/src/common/index.ts b/client/src/common/index.ts
@@ -21,9 +21,14 @@ export const localCandidateRoleAPI = localStrapiURL + 'candidate-roles';
 export const deployedCandidateRoleAPI = deployedStrapiURL + 'candidate-roles';
 
 
-// Global variable and its setting function for district number
+// Global variables and their setting functions for district number and selected election
 export let globalDistrictNum: string | null = null;
 
 export const setGlobalDistrictNum = (num: string | null) => {
     globalDistrictNum = "District " + num;
+};
+export let globalCurrElection: string | null = null;
+
+export const setGlobalCurrElection = (name: string | null) => {
+    globalCurrElection = name;
 };
diff --git a/client/src/pages/ballotInfo/districtForm.tsx b/client/src/pages/ballotInfo/districtForm.tsx
@@ -49,7 +49,6 @@ const DistrictForm: React.FC<DistrictFormProps> = ({ onFormSubmit }) => {
 
             // Set district number or error if no district number
             if (data) {
-                console.log(data);
                 setDistrictNum(data);
                 setGlobalDistrictNum(data);
                 onFormSubmit();

diff --git a/client/src/pages/ballotInfo/electionCheckBox/electionCheckbox.tsx b/client/src/pages/ballotInfo/electionCheckBox/electionCheckbox.tsx
@@ -2,7 +2,7 @@
 import react from 'react';
 import { useState, useEffect } from 'react';
 import ElectionCheckboxCard from './electionCheckboxCard';
-import { localBostonMunicipalAPI, deployedBostonMunicipalAPI } from '@/common';
+import { localBostonMunicipalAPI, deployedBostonMunicipalAPI, setGlobalCurrElection } from '@/common';
 
 
 interface ElectionDateObject {
@@ -12,7 +12,11 @@ interface ElectionDateObject {
     }
 }
 
-export default function ElectionCheckbox() {
+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[]>([])
@@ -48,6 +52,7 @@ export default function ElectionCheckbox() {
         fetchElectionDates();
     }, [])
 
+
     useEffect(() => {
         if (electionDates.length > 0) {
             const sortedDates = electionDates.sort((a: ElectionDateObject, b: ElectionDateObject) => {
@@ -58,9 +63,12 @@ export default function ElectionCheckbox() {
 
     }, [electionDates]);
 
+
     const handleCheckboxChange = (electionName: string) => {
-        setSelectedElection(electionName);
         console.log(electionName);
+        setSelectedElection(electionName);
+        setGlobalCurrElection(electionName);
+        onCheck(electionName);
     };
 
 
@@ -95,4 +103,6 @@ export default function ElectionCheckbox() {
             )}
         </div>
     )
-}
+};
+
+export default ElectionCheckbox;
diff --git a/client/src/pages/ballotInfo/index.tsx b/client/src/pages/ballotInfo/index.tsx
@@ -14,18 +14,19 @@ import CandidateData from "./whatsOnTheBallot/candidateData";
 
 export default function BallotInfo() {
     const [isFormSubmitted, setIsFormSubmitted] = React.useState(false);
+    const [selectedElection, setSelectedElection] = React.useState<string | null>(null);
 
     const handleFormSubmit = () => {
         setIsFormSubmitted(true);
     };
 
-    const [checked, setChecked] = React.useState(true);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setChecked(event.target.checked);
+    const handleCheck = (electionName: string) => {
+        setSelectedElection(electionName);
     };
+
+
     return (
-        <div className=''>
+        <div>
             <NavBar />
             <div className="bg-oval-wrapper flex flex-col justify-center">
             {/* Header */}
@@ -43,7 +44,7 @@ export default function BallotInfo() {
 
 
             {/* Election checkbox card */}
-            <ElectionCheckbox />
+            <ElectionCheckbox onCheck={handleCheck}/>
 
 
             {/* What's on the Ballot dropdown */}
@@ -52,16 +53,14 @@ export default function BallotInfo() {
 
                 <h1 className='font-semibold text-left text-2xl mt-4'>Candidates</h1>
                 {/*Testing*/}
-                {isFormSubmitted && <CandidateData />}
-                {!isFormSubmitted && <div>Please fill out the address form above to see your ballot information</div>}
-
-                {/* <DropDown /> */}
+                {isFormSubmitted && selectedElection && <CandidateData />}
+                {(!isFormSubmitted || !selectedElection) && <div>Please fill out the address form above and select an election to see your ballot information</div>}
 
                 <h1 className='font-semibold text-left text-2xl mt-4'>Ballot Initiatives</h1>
                 {/* NOTE: REPLACE BUTTON BELOW WITH DESCRIPTION FROM YAWU */}
                 <ButtonFillEx name='What are Ballot Initiatives?' link='https://ballotpedia.org/Ballot_initiative' className='p-3 m-4 rounded-full bg-blue-700 text-white' />
-                {isFormSubmitted && <BallotInitDropDown />}
-                {!isFormSubmitted && <div>Please fill out the address form above to see your ballot information</div>}
+                {isFormSubmitted && selectedElection && <BallotInitDropDown />}
+                {(!isFormSubmitted || !selectedElection) && <div>Please fill out the address form above and select an election to see your ballot information</div>}
             </div>
 
 

diff --git a/client/src/pages/ballotInfo/whatsOnTheBallot/candidateData.tsx b/client/src/pages/ballotInfo/whatsOnTheBallot/candidateData.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useEffect, useState } from 'react';
-import { localCandidateAPI, deployedCandidateAPI, localCandidateRoleAPI, deployedCandidateRoleAPI, globalDistrictNum } from '@/common';
+import { localCandidateAPI, deployedCandidateAPI, localCandidateRoleAPI, deployedCandidateRoleAPI, globalDistrictNum, globalCurrElection } from '@/common';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -36,6 +36,7 @@ export default function CandidateData() {
     const [allCandidateData, setAllCandidateData] = useState<CandidateDataObject[]>([])
     const [filteredCandidateData, setFilteredCandidateData] = useState<{ [key: string]: Candidate[] }>({})
     const [districtNum, setDistrictNum] = useState<string | null>(globalDistrictNum);
+    const [selectedElection, setSelectedElection] = useState<string | null>(globalCurrElection);
     const [candidateRoleDate, setCandidateRoleData] = useState<{ [key: string]: string }>({})
 
 
@@ -59,17 +60,18 @@ export default function CandidateData() {
             }
         };
 
-        // Fetch data only if districtNum is set
-        if (districtNum) {
+        // Fetch data only if districtNum and election are set
+        if (districtNum && selectedElection) {
             getData();
         }
-    }, [districtNum]);
+    }, [districtNum, selectedElection]);
 
 
     // Set the district number to the global number which was set in DistrictForm
     useEffect(() => {
         setDistrictNum(globalDistrictNum);
-    }, [globalDistrictNum]);
+        setSelectedElection(globalCurrElection);
+    }, [globalDistrictNum, globalCurrElection]);
 
 
     useEffect(() => {
@@ -80,7 +82,6 @@ export default function CandidateData() {
         const sortedData: { [key: string]: Candidate[] } = {};
         const roleData: { [key: string]: string } = {};
 
-        const election = "Primary Municipal Election";
 
         // Get candidate role from strapi
         const getData = async () => {
@@ -109,8 +110,7 @@ export default function CandidateData() {
         // Add candidates to hash table
         if (allCandidateData.length > 0 && districtNum) {
             allCandidateData.forEach((candidateDataObject: CandidateDataObject) => {
-
-                if (candidateDataObject.attributes.District.trim() === districtNum && candidateDataObject.attributes.ElectionName === election) {
+                if (candidateDataObject.attributes.District.trim() === districtNum && candidateDataObject.attributes.ElectionName.trim() === selectedElection?.trim()) {
                     const candidate: Candidate = {
                         attributes: candidateDataObject.attributes
                     };
@@ -126,7 +126,7 @@ export default function CandidateData() {
         }
 
         console.log(sortedData);
-    }, [allCandidateData, districtNum])
+    }, [allCandidateData, districtNum, selectedElection])
 
 
     useEffect(() => {