Skip to content

Commit

Permalink
Merge pull request #43 from BU-Spark/strapiFeatureJason
Browse files Browse the repository at this point in the history
Strapi feature jason
  • Loading branch information
jasonjiang9142 authored Jun 24, 2024
2 parents df769fc + c214eeb commit cc67b19
Show file tree
Hide file tree
Showing 9 changed files with 150 additions and 44 deletions.
1 change: 1 addition & 0 deletions client/src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ function MyApp({ Component, pageProps }: AppProps) {

return (
<ActivePageProvider >
<NavBar />
<div className=' '>
<Component {...pageProps} />
</div>
Expand Down
106 changes: 106 additions & 0 deletions client/src/pages/ballotInfo/[candidate].tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { use, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { localCandidateAPI, deployedCandidateAPI } from '@/common';
import { all } from 'axios';

interface CandidateAttributes {
CampaignSiteLink: string | null;
District: string;
ElectionName: string;
LinkedinLink: string | null;
Name: string;
Party: string;
Role: string;
createdAt: string;
publishedAt: string;
updatedAt: string;
}

interface CandidateDataObject {
id: number;
attributes: CandidateAttributes;
}

interface Candidate {
attributes: CandidateAttributes;
}

export default function Candidate() {
const router = useRouter();

const [candidateName, setCandidateName] = useState<string>('');
const [allCandidateData, setAllCandidateData] = useState<CandidateDataObject[]>([])
const [candidateData, setCandidateData] = useState<CandidateAttributes | null>(null);

useEffect(() => {
if (!router.isReady) return;

const { candidate } = router.query;
candidate && setCandidateName(candidate as string);

}, [router.isReady]);

useEffect(() => {
const getData = async () => {
try {
const response = await fetch(localCandidateAPI, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (response.ok) {
const data = (await response.json()).data;
setAllCandidateData(data)
}
} catch (e) {
console.log(e);
}
};

getData();

}, []);

useEffect(() => {
if (candidateName && allCandidateData) {
const normalizedInput = (input: string) => input.replace(/\s+/g, '').toLowerCase();
const foundCandidateData = allCandidateData.find((candidateData: any) =>
normalizedInput(candidateData.attributes.Name) === normalizedInput(candidateName)
);
if (foundCandidateData) {
setCandidateData(foundCandidateData.attributes);
} else {
setCandidateData(null); // Handle case where candidate is not found
}
}

}, [allCandidateData, candidateName]);

useEffect(() => {
console.log(candidateData);
}, [candidateData])


return (
<div className="max-w-2xl mx-auto p-4 bg-white shadow-lg rounded-lg">
<h1 className="text-3xl font-bold mb-4">Candidate: {candidateName}</h1>
{candidateData ? (
<div className="border-t border-gray-200 pt-4">
<p className="text-lg mb-2"><span className="font-semibold">Party:</span> {candidateData.Party}</p>
<p className="text-lg mb-2"><span className="font-semibold">District:</span> {candidateData.District}</p>
<p className="text-lg mb-2"><span className="font-semibold">Election Name:</span> {candidateData.ElectionName}</p>
{candidateData.CampaignSiteLink && (
<p className="text-lg mb-2"><span className="font-semibold">Campaign Site:</span> <a href={candidateData.CampaignSiteLink} className="text-blue-500">{candidateData.CampaignSiteLink}</a></p>
)}
{candidateData.LinkedinLink && (
<p className="text-lg mb-2"><span className="font-semibold">LinkedIn:</span> <a href={candidateData.LinkedinLink} className="text-blue-500">{candidateData.LinkedinLink}</a></p>
)}
<p className="text-lg mb-2"><span className="font-semibold">Role:</span> {candidateData.Role}</p>
</div>
) : (
<p className="text-lg">Loading candidate data...</p>
)}
</div>
);
}
2 changes: 1 addition & 1 deletion client/src/pages/ballotInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ export default function BallotInfo() {


return (

<div>
<NavBar />
<div className="bg-oval-wrapper flex flex-col justify-center">
{/* Header */}
<div className='flex flex-col justify-center items-center p-4 text-center my-4'>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,9 @@ export default function CandidateData() {
// Filter candidates and add to hash table
if (allCandidateData.length > 0 && districtNum) {
allCandidateData.forEach((candidateDataObject: CandidateDataObject) => {
if (candidateDataObject.attributes.District.trim() === districtNum && candidateDataObject.attributes.ElectionName.trim() === selectedElection?.trim()) {
const candidateDistrict = candidateDataObject.attributes.District.trim();
const candidateElection = candidateDataObject.attributes.ElectionName.trim();
if ((candidateDistrict === districtNum || candidateDistrict === 'All Districts') && candidateElection === selectedElection?.trim()) {
const candidate: Candidate = {
attributes: candidateDataObject.attributes
};
Expand Down
3 changes: 2 additions & 1 deletion client/src/pages/ballotInfo/whatsOnTheBallot/peopleCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const PeopleCard = ({ name, affiliation, picture, link }: Props) => {

const router = useRouter();
const handleClick = (page: string) => {
router.push(page);
const candidatePath = `/ballotInfo/${name.replace(/\s+/g, '')}`;
router.push(candidatePath);
}

return (
Expand Down
7 changes: 3 additions & 4 deletions client/src/pages/dropBoxLocations/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import ButtonFillEx from '@/components/button/ButtonFillEx';
export default function DropBoxLocations() {
return (
<div>
<NavBar />

{/* Header */}
<div className='flex flex-col justify-center items-center p-4 text-center'>
Expand All @@ -18,15 +17,15 @@ export default function DropBoxLocations() {


{/* ArcGIS Map */}
<div className='flex flex-row justify-center items-center p-4 m-6' >
<iframe src="https://tuftsgis.maps.arcgis.com/apps/instant/media/index.html?appid=9a84a0d949274b559b800b9ffc043b04" width="1000" height="600" style={{border: 0}} allowFullScreen>iFrames are not supported on this page.</iframe>
<div className='flex flex-row justify-center items-center p-4 m-6' >
<iframe src="https://tuftsgis.maps.arcgis.com/apps/instant/media/index.html?appid=9a84a0d949274b559b800b9ffc043b04" width="1000" height="600" style={{ border: 0 }} allowFullScreen>iFrames are not supported on this page.</iframe>
</div>


{/* Early voting button */}
<div className='flex flex-col justify-center items-center p-4 m-10'>
<p className='md:w-3/4 lg:w-3/4 sm:w-1/2 text-xl text-center font-semibold'>Need to know the early voting locations? They are typically available 1-2 weeks before the early voting period starts for an election. See the link below to find the location nearest to you.</p>
<ButtonFillEx name='Early Voting Locations' link='https://www.boston.gov/departments/elections/early-voting-boston#map--737516' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200'/>
<ButtonFillEx name='Early Voting Locations' link='https://www.boston.gov/departments/elections/early-voting-boston#map--737516' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200' />
</div>


Expand Down
1 change: 0 additions & 1 deletion client/src/pages/upcomingElections/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export default function UpcomingElections() {

return (
<div>
<NavBar />

{/* Header */}
<div className='flex flex-wrap justify-center items-center p-4 text-center my-4'>
Expand Down
69 changes: 34 additions & 35 deletions client/src/pages/voterInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,53 +13,52 @@ import ButtonFillEx from '@/components/button/ButtonFillEx';
export default function VoterInfo() {
return (
<div>
<NavBar />
{/* Header */}
<div className="bg-oval-wrapper flex flex-col justify-center">
<div className='flex flex-col justify-center items-center p-4 text-center my-4'>
<h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Your Voter Info</h1>
<h1 className='font-semibold text-2xl p-5 mt-2' >Here is everything you need to know about your <br />voter status and personal voting logistics!</h1>
<p className='text-xl mt-10'>Can&#39;t vote in person or want to vote early?</p>
<ButtonFill name='Early Voting Options' link='/votingOptions' className='p-4 mt-4 rounded-full bg-blue-700 text-white border-blue-800 ' />
</div>
<div className='flex flex-col justify-center items-center p-4 text-center my-4'>
<h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Your Voter Info</h1>
<h1 className='font-semibold text-2xl p-5 mt-2' >Here is everything you need to know about your <br />voter status and personal voting logistics!</h1>
<p className='text-xl mt-10'>Can&#39;t vote in person or want to vote early?</p>
<ButtonFill name='Early Voting Options' link='/votingOptions' className='p-4 mt-4 rounded-full bg-blue-700 text-white border-blue-800 ' />
</div>


{/* County (fixed for all Boston voters) */}
<div className='flex flex-col justify-center items-center p-4 my-6'>
<h1 className='font-semibold text-center my-4 text-2xl'>Basic Voter Info</h1>
<div className='grid grid-cols-4 mt-1'>
<div className='md:col-span-1 hidden md:block'>
</div>
<div className="space-y-4 mx-10 my-1 p-8 rounded-2xl shadow-xl border border-gray-200 col-span-4 lg:col-span-2 bg-blue-100">
<div className="space-y-4 w-full px-4">
<div className="w-full px-4 text-center">
<p className='text-xl text-black-600 '>County: Suffolk</p>
{/* County (fixed for all Boston voters) */}
<div className='flex flex-col justify-center items-center p-4 my-6'>
<h1 className='font-semibold text-center my-4 text-2xl'>Basic Voter Info</h1>
<div className='grid grid-cols-4 mt-1'>
<div className='md:col-span-1 hidden md:block'>
</div>
<div className="space-y-4 mx-10 my-1 p-8 rounded-2xl shadow-xl border border-gray-200 col-span-4 lg:col-span-2 bg-blue-100">
<div className="space-y-4 w-full px-4">
<div className="w-full px-4 text-center">
<p className='text-xl text-black-600 '>County: Suffolk</p>
</div>
</div>
</div>
</div>
<div className='md:col-span-1 hidden md:block'>
<div className='md:col-span-1 hidden md:block'>
</div>
</div>
</div>
</div>


{/* Polling location address form */}
<div className='flex flex-col justify-center items-center p-4 my-6'>
<h1 className='font-semibold text-left mb-2 text-2xl' >Polling Location</h1>
<p className='text-lg my-2 text-center md:w-1/2 lg:w-1/2 italic'>Reminder: You can vote at any polling location during the early voting period, but you <strong>MUST</strong> vote at the location below during election day based on your address.</p>
<AddressForm />
</div>
{/* Polling location address form */}
<div className='flex flex-col justify-center items-center p-4 my-6'>
<h1 className='font-semibold text-left mb-2 text-2xl' >Polling Location</h1>
<p className='text-lg my-2 text-center md:w-1/2 lg:w-1/2 italic'>Reminder: You can vote at any polling location during the early voting period, but you <strong>MUST</strong> vote at the location below during election day based on your address.</p>
<AddressForm />
</div>

<div className='flex flex-col justify-center items-center p-4 text-center my-6'>
<h1 className='font-semibold text-xl md:w-1/2 lg:w-1/2'>Curious about your voting status? Check it here!</h1>
<ButtonFillEx name='Registration Status' link='https://www.sec.state.ma.us/voterregistrationsearch/' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200' />
</div>
<div className='flex flex-col justify-center items-center p-4 text-center my-6'>
<h1 className='font-semibold text-xl md:w-1/2 lg:w-1/2'>Curious about your voting status? Check it here!</h1>
<ButtonFillEx name='Registration Status' link='https://www.sec.state.ma.us/voterregistrationsearch/' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200' />
</div>

{/* Footer */}
<div className='flex flex-col justify-center items-center p-4 text-center my-6'>
<h1 className='font-semibold text-lg md:w-1/4 lg:w-1/4 sm:w-1/2'>Now that you know where you can vote, let&#39;s explore exactly who and what you are voting for.</h1>
<ButtonFill name='Ballot Info' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
</div>
{/* Footer */}
<div className='flex flex-col justify-center items-center p-4 text-center my-6'>
<h1 className='font-semibold text-lg md:w-1/4 lg:w-1/4 sm:w-1/2'>Now that you know where you can vote, let&#39;s explore exactly who and what you are voting for.</h1>
<ButtonFill name='Ballot Info' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
</div>
</div>
</div>
)
Expand Down
1 change: 0 additions & 1 deletion client/src/pages/votingOptions/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import NavBar from '@/components/nav/NavBar';
const VotingOptions = () => {
return (
<div className=''>
<NavBar />
<div className='flex flex-col justify-center items-center p-4 text-center mb-10'>
<h1 className='pb-2 text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Voting Options</h1>
<h1 className='font-semibold text-2xl p-5'>Everything you need to know about your voting options made simple!</h1>
Expand Down

0 comments on commit cc67b19

Please sign in to comment.