re-added newsletter popup to candidate info page; updated playwright …

…version
BU-Spark · Dec 17, 2024 · 278eba2 · 278eba2
1 parent 87c8981
commit 278eba2
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 47 deletions.
diff --git a/client/src/pages/candidateInfo/index.tsx b/client/src/pages/candidateInfo/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import SubscribePopup from '../../components/subscribePopup/SubscribePopup';
 
 interface Candidate {
     id: number;
@@ -27,6 +28,7 @@ export default function CandidateInfo() {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [filteredCandidates, setFilteredCandidates] = useState<Candidate[]>([]);
+    const [showPopup, setShowPopup] = useState(false);
     const [filters, setFilters] = useState({
         party: '',
         electionType: '',
@@ -71,8 +73,22 @@ export default function CandidateInfo() {
         };
 
         fetchCandidateData();
+
+
+        // Show popup after a delay (e.g., 10 seconds)
+        const popupTimer = setTimeout(() => {
+            setShowPopup(true);
+        }, 10000);
+
+        // 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
@@ -110,73 +126,73 @@ export default function CandidateInfo() {
     return (
         <div style={{ display: 'flex', paddingTop: '120px', paddingLeft: '60px' }}>
             {/* Sidebar for Filters */}
-            <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 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" 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>
+                    <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" 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>
+                    <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" 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>
+                    <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' }}
                                         />
                                     )}
@@ -198,7 +214,7 @@ export default function CandidateInfo() {
                                         </div>
                                     </div>
                                 </div>
-                                <button 
+                                <button
                                     style={{
                                         backgroundColor: '#007bff',
                                         color: '#fff',
@@ -218,6 +234,12 @@ export default function CandidateInfo() {
                     <p>No candidates match the selected filters.</p>
                 )}
             </div>
+
+
+            {/* Subscribe Popup */}
+            {showPopup && <SubscribePopup onClose={handleClosePopup} />}
+
+
         </div>
     );
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "@mui/material": "^5.16.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.1"
   },
   "scripts": {}