From 0cd77c7da5f7bb5ad9ecf9f540c88dbd33b5aef1 Mon Sep 17 00:00:00 2001 From: Remus Date: Sun, 3 Nov 2024 10:36:33 -0500 Subject: [PATCH] updated addressForm with white background and save checkbox --- client/src/components/nav/NavBar.tsx | 109 ++++++++++++--------- client/src/pages/voterInfo/addressForm.tsx | 46 +++++++-- 2 files changed, 102 insertions(+), 53 deletions(-) diff --git a/client/src/components/nav/NavBar.tsx b/client/src/components/nav/NavBar.tsx index 8b3f1e25..b5054d44 100644 --- a/client/src/components/nav/NavBar.tsx +++ b/client/src/components/nav/NavBar.tsx @@ -10,6 +10,7 @@ import StarIcon from '@mui/icons-material/Star'; import { useRouter } from 'next/navigation'; import { keyframes } from '@mui/system'; import { usePathname } from 'next/navigation'; +import Cookies from 'js-cookie'; const slideIn = keyframes` from { @@ -48,15 +49,20 @@ function NavBar() { const handleClick = (page: string) => { handleCloseNavMenu(); router.push(links[page]); - } - + }; - // Below is testing for active page link - const currentPath = usePathname(); - const isActive = (path: string | null) => { - return currentPath === path; - } + // Below is testing for active page link + const currentPath = usePathname(); + const isActive = (path: string | null) => { + return currentPath === path; + }; + const handleClearData = () => { + Cookies.remove('address'); + Cookies.remove('pollingInfo'); + Cookies.remove('cookieConsent'); + alert('All user data has been cleared.'); + }; return ( @@ -75,17 +81,18 @@ function NavBar() { fontSize: '20px', color: '#204cdc', textDecoration: 'none', - + }} onClick={() => { handleClick('Upcoming Elections'); }} - + > Boston Voter {/* Page links below */} + {/* This appears to be useless code */} - {/* REPLACE WITH STAR LOGO */} - + {/* REPLACE WITH STAR LOGO */} + { - handleClick('Upcoming Elections'); - }} > - Boston Voter - + onClick={() => { + handleClick('Upcoming Elections'); + }} > + Boston Voter + @@ -160,23 +167,35 @@ function NavBar() { key={page} onClick={() => handleClick(page)} className={`m-4 ${isActive(links[page]) ? 'border-b-4 border-red-600 text-blue-950 px-2 ' : ''}`} - - sx={{ - my: 2, - display: 'block', - transition: 'font-size 0.3s ease', - '&:hover': { - fontSize: '100%', - color: '#172554', - backgroundColor: 'transparent', - }, - }} + + sx={{ + my: 2, + display: 'block', + transition: 'font-size 0.3s ease', + '&:hover': { + fontSize: '100%', + color: '#172554', + backgroundColor: 'transparent', + }, + }} > {page} ))} + + {/* Clear Data Button */} + + + diff --git a/client/src/pages/voterInfo/addressForm.tsx b/client/src/pages/voterInfo/addressForm.tsx index ee7b86f7..fa4f1e30 100644 --- a/client/src/pages/voterInfo/addressForm.tsx +++ b/client/src/pages/voterInfo/addressForm.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Cookies from 'js-cookie'; -import { Button, Grid, TextField, Typography } from '@mui/material'; +import { Button, Checkbox, FormControlLabel, Grid, TextField } from '@mui/material'; import { deployedExpressURL, localExpressURL } from '@/common'; // Set base URL for Axios @@ -32,6 +32,7 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr const [street, setStreet] = useState(''); const [city, setCity] = useState(''); const [zip, setZip] = useState(''); + const [saveAddress, setSaveAddress] = useState(false); // Track checkbox state // load saved data from cookies into the component's state variables @@ -44,6 +45,7 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr setStreet(street); setCity(city); setZip(zip); + setSaveAddress(true); // Set checkbox to checked if an address is saved } if (savedPollingInfo) { @@ -51,12 +53,17 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr } }; - // save component state variables into cookies + // Save component state variables into cookies const saveCookieData = (street: string, city: string, zip: string, pollingInfo: PollingInfo) => { const consent = Cookies.get('cookieConsent'); - if (consent === 'accepted') { // Check if cookieConsent is 'accepted' - // Save address to cookie only if successful response (valid address) - Cookies.set('address', JSON.stringify({ street, city, zip })); + if (consent === 'accepted') { // Only save if consent is given + + if (saveAddress) { + // Save address to cookie only if successful response (valid address) + Cookies.set('address', JSON.stringify({ street, city, zip })); + } else { + Cookies.remove('address'); + } // Save polling information to cookie (expires in 7 days) Cookies.set('pollingInfo', JSON.stringify(pollingInfo), { expires: 7 }); @@ -69,6 +76,17 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr loadSavedCookieData(); }, []); + const handleCheckboxChange = (event: React.ChangeEvent) => { + const isChecked = event.target.checked; + setSaveAddress(isChecked); + + // If checkbox is unchecked, remove the saved address from cookies + if (!isChecked) { + Cookies.remove('address'); + } + }; + + // Call API when address is submitted const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); @@ -142,7 +160,7 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr onChange={(e) => setStreet(e.target.value)} required type="text" - sx={{ mb: 2 }} + sx={{ mb: 2, backgroundColor: 'white' }} /> @@ -153,7 +171,7 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr value={city} onChange={(e) => setCity(e.target.value)} type="text" - sx={{ mb: 2 }} + sx={{ mb: 2, backgroundColor: 'white' }} /> @@ -165,7 +183,19 @@ const AddressForm: React.FC = ({ setPollingInformation, setErr onChange={(e) => setZip(e.target.value)} required type="number" - sx={{ mb: 2 }} + sx={{ mb: 2, backgroundColor: 'white' }} + /> + + + + } + label="Remember Address" />