Skip to content

Commit

Permalink
Merge branch 'candidate-info' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
Remus287 committed Dec 14, 2024
2 parents f7dc3e0 + 6088a20 commit efb9cba
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 66 deletions.
Binary file added client/public/bva_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 19 additions & 5 deletions client/src/components/nav/NavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,10 @@ const links: Record<string, string> = {
'Drop Box Locations': '/dropBoxLocations'
};


function NavBar() {
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);

const router = useRouter()
const router = useRouter();

const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
Expand Down Expand Up @@ -69,8 +68,22 @@ function NavBar() {
<AppBar position="fixed" className="bg-gradient-custom shadow-none text-gray-800 my-0" style={{ zIndex: 1000, top: 0, width: '100%' }}>
<Container maxWidth="xl">
<Toolbar disableGutters>



{/* Boston Voter Logo */}
<Box sx={{ display: { xs: 'none', md: 'none', lg: 'flex' }, mr: 0 }}>
<img
src="/LogoTest.svg"
alt="Boston Voter Logo"
style={{ height: '60px', cursor: 'pointer', padding: 10 }}
onClick={() => handleClick('Upcoming Elections')}
/>
</Box>


{/* BELOW IS FOR STANDARD NAVBAR */}
<StarIcon sx={{ display: { xs: 'none', md: 'none', lg: 'flex' }, mr: 1, fontSize: '20px', color: '#204cdc' }} /> {/* REPLACE WITH STAR LOGO */}
{/* <StarIcon sx={{ display: { xs: 'none', md: 'none', lg: 'flex' }, mr: 1, fontSize: '20px', color: '#204cdc' }} />
<Typography
variant="h6"
noWrap
Expand All @@ -90,7 +103,8 @@ function NavBar() {
>
Boston Voter
</Typography>
</Typography> */}


{/* Page links below */}
{/* This appears to be useless code */}
Expand Down Expand Up @@ -202,5 +216,5 @@ function NavBar() {
</AppBar>
);
}
export default NavBar;

export default NavBar;
96 changes: 35 additions & 61 deletions client/src/pages/candidateInfo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
'use client';
import React, { useEffect, useState } from 'react';
import SubscribePopup from '../../components/subscribePopup/SubscribePopup';
import { CandidateAPI } from '@/common'; // use this instead of hardcoded link
import { useRouter } from 'next/router';

interface Candidate {
Expand Down Expand Up @@ -34,7 +32,6 @@ export default function CandidateInfo() {
electionType: '',
district: '',
});
const [showPopup, setShowPopup] = useState(false);

const router = useRouter();

Expand Down Expand Up @@ -74,21 +71,8 @@ export default function CandidateInfo() {
};

fetchCandidateData();

// Show popup after a delay (e.g., 1 seconds)
const popupTimer = setTimeout(() => {
setShowPopup(true);
}, 1000);

// Cleanup timer when component unmounts
return () => clearTimeout(popupTimer);

}, []);

const handleClosePopup = () => {
setShowPopup(false);
};

const handleCandidateClick = (name: string) => {
const formattedName = name.replace(/\s+/g, '').toLowerCase(); // Ensure it matches profile URL structure
router.push(`/candidateInfo/${formattedName}`); // Navigate to the candidate's profile page
Expand Down Expand Up @@ -124,81 +108,75 @@ export default function CandidateInfo() {
if (error) return <p>{error}</p>;

return (
<div style={{ display: 'flex', paddingTop: '120px' }}>
<div style={{ display: 'flex', paddingTop: '120px', paddingLeft: '60px' }}>
{/* Sidebar for Filters */}
<div style={{ width: '25%', padding: '20px', backgroundColor: '#f0f0f0', boxShadow: '2px 0 5px rgba(0, 0, 0, 0.1)' }}>
<h2>Filter Candidates</h2>

<div style={{ width: '25%', padding: '20px', backgroundColor: 'transparent'}}>
<h2 style={{color: '#1D4ED8', fontFamily: 'Inter', fontSize: '24px', fontStyle: 'normal', fontWeight: '700', lineHeight: '28px', letterSpacing: '0.1px', width: '390px', height: '28px', flexShrink: '0'}}>Filter Candidates</h2>
<div>
<label htmlFor="party-filter">Political Affiliation:</label>
<select id="party-filter" name="party" value={filters.party} onChange={handleFilterChange}>
<option value="">All</option>
{parties.map(party => (
<option key={party} value={party}>{party}</option>
))}
</select>
<label htmlFor="party-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', paddingTop:'30px', paddingLeft:'10px',paddingRight:'10px',paddingBottom:'10px', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>Political Affiliation:</label>
<select id="party-filter" name="party" value={filters.party} onChange={handleFilterChange} style={{ display: 'flex', height: '60px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF',width: '100%' }}><option value="">All</option>{parties.map(party => (<option key={party} value={party}>{party}</option>))}</select>
</div>

<div style={{ marginTop: '10px' }}>
<label htmlFor="election-filter">Election Type:</label>
<select id="election-filter" name="electionType" value={filters.electionType} onChange={handleFilterChange}>
<option value="">All</option>
<label htmlFor="election-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>Election Type:</label>
<select id="election-filter" name="electionType" value={filters.electionType} onChange={handleFilterChange} style={{width: '100%',display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF'}}>
<option value="">All</option>
{electionTypes.map(type => (
<option key={type} value={type}>{type}</option>
))}
</select>
</div>

<div style={{ marginTop: '10px' }}>
<label htmlFor="district-filter">District:</label>
<select id="district-filter" name="district" value={filters.district} onChange={handleFilterChange}>
<option value="">All</option>
<label htmlFor="district-filter" style={{display: 'flex', height: '26px', flexDirection: 'column', justifyContent: 'center', alignSelf: 'stretch', color: '#172554', fontFamily: 'Inter', fontSize: '20px', fontStyle: 'normal', fontWeight: '700', lineHeight: '24px', letterSpacing: '0.15px'}}>District:</label>
<select id="district-filter" name="district" value={filters.district} onChange={handleFilterChange} style={{width: '100%', display: 'flex', height: '60px', padding: '10px', alignItems: 'center', gap: '10px', alignSelf: 'stretch', borderRadius: '10px', background: '#FBFDFF'}}>
<option value="">All</option>
{districts.map(district => (
<option key={district} value={district}>{district}</option>
))}
</select>
</div>

{/* Reset Filters Button */}
<button
style={{
marginTop: '20px',
padding: '10px',
backgroundColor: '#007bff',
color: '#fff',
border: 'none',
borderRadius: '5px',
<button
style={{
marginTop: '20px',
padding: '10px',
backgroundColor: '#007bff',
color: '#fff',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
width: '100%',
}}
}}
onClick={handleResetFilters}
>
Reset Filters
</button>
</div>

{/* Main Content */}
<div style={{ width: '75%', padding: '20px' }}>
{filteredCandidates.length > 0 ? (
filteredCandidates.map(candidate => (
<div
key={candidate.id}
className="candidate-card"
style={{
<div
key={candidate.id}
className="candidate-card"
style={{
backgroundColor: 'White',
boxShadow: '0px 4px 5px rgba(0, 0, 0, 0.5)',
border: '2px solid #ccc',
padding: '10px',
margin: '10px',
border: '2px solid #ccc',
padding: '10px',
margin: '10px',
borderRadius: '5px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{candidate.attributes.PhotoURL && (
<img
src={candidate.attributes.PhotoURL}
alt={candidate.attributes.Name}
<img
src={candidate.attributes.PhotoURL}
alt={candidate.attributes.Name}
style={{ width: '80px', height: '80px', objectFit: 'cover', borderRadius: '5px', marginRight: '10px' }}
/>
)}
Expand All @@ -220,7 +198,7 @@ export default function CandidateInfo() {
</div>
</div>
</div>
<button
<button
style={{
backgroundColor: '#007bff',
color: '#fff',
Expand All @@ -240,10 +218,6 @@ export default function CandidateInfo() {
<p>No candidates match the selected filters.</p>
)}
</div>

{/* Subscribe Popup */}
{showPopup && <SubscribePopup onClose={handleClosePopup} />}

</div>
);
}

0 comments on commit efb9cba

Please sign in to comment.