Skip to content

Commit

Permalink
added sample ballot and dynamic routing, styling also finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@Remus287
Remus287 committed Oct 26, 2024
1 parent f9af2b6 commit f8d93cb
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 115 deletions.
Binary file added client/public/sample_ballot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 49 additions & 79 deletions client/src/pages/voterInfo/addressForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,77 @@
/* Form asking for user address and getting polling location from Google Civic
* API. Note: API key is in .env file
*/

import React, { useState } from 'react';
import axios from 'axios';
import { Button, Grid, TextField, Typography } from '@mui/material';
import { Streetview } from '@mui/icons-material';
import { deployedExpressURL, localExpressURL } from '@/common';


// Set base URL for Axios
const api = axios.create({
baseURL: localExpressURL, // Point this to server URL
});

interface PollingInfo {
location: string | null;
street: string | null;
city: string | null;
state: string | null;
zip: string | null;
room: string | null;
instructions: string | null;

ward: number | null;
precinct: number | null;

}

const AddressForm: React.FC = () => {
// Functions and variables to set polling data
interface AddressFormProps {
setPollingInformation: (info: PollingInfo) => void;
setError: (error: string | null) => void;
}

const AddressForm: React.FC<AddressFormProps> = ({ setPollingInformation, setError }) => {
const [street, setStreet] = useState('');
const [city, setCity] = useState('');
const [zip, setZip] = useState('');
const [pollingLocation, setPollingLocation] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [pollingStreet, setPollingStreet] = useState<string | null>(null);
const [pollingCity, setPollingCity] = useState<string | null>(null);
const [pollingState, setPollingState] = useState<string | null>(null);
const [pollingZip, setPollingZip] = useState<string | null>(null);

const [pollingRoom, setPollingRoom] = useState<string | null>(null);
const [pollingInstructions, setPollingInstructions] = useState<string | null>(null);

// const [pollingHours, setPollingHours] = useState<string | null>(null);

// Call API when address is submitted
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();

// Reset past data
event.preventDefault();
setPollingLocation(null);
setPollingStreet(null);
setPollingCity(null);
setPollingState(null);
setPollingZip(null);
setPollingRoom(null);
setPollingInstructions(null);
// setPollingHours(null);
setPollingInformation({
location: null,
street: null,
city: null,
state: null,
zip: null,
room: null,
instructions: null,

ward: null,
precinct: null,
});
setError(null);

// Set address
const address = `${street}, ${city}, ${zip}`;

try {
const response = await api.get('/api/precinct_info', {
params: { address },
});

const data = response.data.properties;

// Set polling location and hours or error if no polls
if (data.USER_Ward != "" && data.USER_Precinct != "") {
setPollingLocation(data.USER_Location2);
setPollingStreet(data.USER_Location3);
setPollingCity(data.USER_City);
setPollingState(data.USER_State);
setPollingZip(data.USER_ZipCode);

setPollingRoom(data.USER_Voting_Roo);
setPollingInstructions(data.USER_HP_Entrance);
// setPollingHours(data.pollingLocations[0].pollingHours);
if (data.USER_Ward !== "" && data.USER_Precinct !== "") {
setPollingInformation({
location: data.USER_Location2,
street: data.USER_Location3,
city: data.USER_City,
state: data.USER_State,
zip: data.USER_ZipCode,
room: data.USER_Voting_Roo,
instructions: data.USER_HP_Entrance,

ward: data.USER_Ward,
precinct: data.USER_Precinct
});
} else {
setError('Invalid Address or Address Format or Unsupported Location');
}
Expand All @@ -76,11 +80,8 @@ const AddressForm: React.FC = () => {
}
};

// Address form and displayed polling location
return (
<div className='flex flex-col justify-center items-center p-4 my-6 flex-wrap'>

{/* Address form */}
<div className='flex flex-col justify-center items-center p-4 my-0 flex-wrap'>
<form onSubmit={handleSubmit} style={{ width: '100%', maxWidth: 600 }}>
<Grid container spacing={1}>
<Grid item xs={12}>
Expand All @@ -91,7 +92,7 @@ const AddressForm: React.FC = () => {
value={street}
onChange={(e) => setStreet(e.target.value)}
required
type="text" // Street input as text
type="text"
sx={{ mb: 2 }}
/>
</Grid>
Expand All @@ -102,7 +103,7 @@ const AddressForm: React.FC = () => {
fullWidth
value={city}
onChange={(e) => setCity(e.target.value)}
type="text" // City input as text
type="text"
sx={{ mb: 2 }}
/>
</Grid>
Expand All @@ -114,7 +115,7 @@ const AddressForm: React.FC = () => {
value={zip}
onChange={(e) => setZip(e.target.value)}
required
type="number" // Zip code input as number
type="number"
sx={{ mb: 2 }}
/>
</Grid>
Expand All @@ -125,37 +126,6 @@ const AddressForm: React.FC = () => {
</Button>
</div>
</form>


{/* Polling location if found, error if not */}
{(pollingLocation || error) && (
<div className='grid grid-cols-4 mt-8'>
<div className='md:col-span-1 hidden md:block'>
</div>
<div className="space-y-4 lg:mx-10 md:mx-20 px-4 py-8 rounded-2xl shadow-2xl border border-gray-200 col-span-4 lg:col-span-2 bg-white">
<div className="space-y-4 w-full px-4">
<div className="w-full px-4 text-left text-xl">
{pollingLocation && (
<div>
<p>{pollingLocation}</p>
<p>{pollingStreet}</p>
<p>{pollingCity}, {pollingState}</p>
<p>{pollingZip}</p>
<br /><p><strong>Polling Instructions:</strong></p>
<br /><p><strong>{pollingRoom}</strong></p>
<p><strong>{pollingInstructions}</strong></p>
</div>
)}
{error && (
<Typography variant="h6" color="error">{error}</Typography>
)}
</div>
</div>
</div>
<div className='md:col-span-1 hidden md:block'>
</div>
</div>
)}
</div>
);
};
Expand Down
Loading

0 comments on commit f8d93cb

Please sign in to comment.