Skip to content

Commit

Permalink
updated addressForm with white background and save checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@Remus287
Remus287 committed Nov 3, 2024
1 parent a43322a commit 0cd77c7
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 53 deletions.
109 changes: 64 additions & 45 deletions client/src/components/nav/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 (
<AppBar position="fixed" className="bg-gradient-custom shadow-none text-gray-800 my-0" style={{ zIndex: 1000, top: 0, width: '100%' }}>
Expand All @@ -75,17 +81,18 @@ function NavBar() {
fontSize: '20px',
color: '#204cdc',
textDecoration: 'none',

}}
onClick={() => {
handleClick('Upcoming Elections');
}}

>
Boston Voter
</Typography>

{/* Page links below */}
{/* This appears to be useless code */}
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'flex', lg: 'none' } }}>
<IconButton
size="large"
Expand Down Expand Up @@ -126,32 +133,32 @@ function NavBar() {

{/* BELOW IS FOR RESPONSIVE NAVBAR (CONDENSED DROP DOWN) */}
<Box sx={{
display: 'flex',
justifyContent: 'flex-end', // Align items to the right
alignItems: 'center', // Center items vertically
}}>
<StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '20px', color: '#204cdc', justifyContent: 'flex-end', }} /> {/* REPLACE WITH STAR LOGO */}
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
mr: 2,
display: { xs: 'flex', md: 'flex', lg: 'none' },
flexGrow: 1,
fontWeight: 700,
fontSize: '20px',
color: '#204cdc',
textDecoration: 'none',
justifyContent: 'flex-end',
}}
display: 'flex',
justifyContent: 'flex-end', // Align items to the right
alignItems: 'center', // Center items vertically
}}>
<StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '20px', color: '#204cdc', justifyContent: 'flex-end', }} /> {/* REPLACE WITH STAR LOGO */}
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
mr: 2,
display: { xs: 'flex', md: 'flex', lg: 'none' },
flexGrow: 1,
fontWeight: 700,
fontSize: '20px',
color: '#204cdc',
textDecoration: 'none',
justifyContent: 'flex-end',
}}

onClick={() => {
handleClick('Upcoming Elections');
}} >
Boston Voter
</Typography>
onClick={() => {
handleClick('Upcoming Elections');
}} >
Boston Voter
</Typography>
</Box>

<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'none', lg: 'flex' }, justifyContent: 'right' }}>
Expand All @@ -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}
</Button>
))}
</Box>

{/* Clear Data Button */}
<Box sx={{ flexGrow: 0, ml: 2 }}>
<Button
variant="outlined"
color="error"
onClick={handleClearData}
sx={{ textTransform: 'none' }}
>
Clear User Data
</Button>
</Box>
</Toolbar>
</Container>
</AppBar>
Expand Down
46 changes: 38 additions & 8 deletions client/src/pages/voterInfo/addressForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -32,6 +32,7 @@ const AddressForm: React.FC<AddressFormProps> = ({ 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
Expand All @@ -44,19 +45,25 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
setStreet(street);
setCity(city);
setZip(zip);
setSaveAddress(true); // Set checkbox to checked if an address is saved
}

if (savedPollingInfo) {
setPollingInformation(JSON.parse(savedPollingInfo));
}
};

// 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 });
Expand All @@ -69,6 +76,17 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
loadSavedCookieData();
}, []);

const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
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();
Expand Down Expand Up @@ -142,7 +160,7 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
onChange={(e) => setStreet(e.target.value)}
required
type="text"
sx={{ mb: 2 }}
sx={{ mb: 2, backgroundColor: 'white' }}
/>
</Grid>
<Grid item xs={12}>
Expand All @@ -153,7 +171,7 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
value={city}
onChange={(e) => setCity(e.target.value)}
type="text"
sx={{ mb: 2 }}
sx={{ mb: 2, backgroundColor: 'white' }}
/>
</Grid>
<Grid item xs={12}>
Expand All @@ -165,7 +183,19 @@ const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setErr
onChange={(e) => setZip(e.target.value)}
required
type="number"
sx={{ mb: 2 }}
sx={{ mb: 2, backgroundColor: 'white' }}
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={
<Checkbox
checked={saveAddress}
onChange={handleCheckboxChange}
color="primary"
/>
}
label="Remember Address"
/>
</Grid>
</Grid>
Expand Down

0 comments on commit 0cd77c7

Please sign in to comment.