Merge pull request #22 from BU-Spark/activeElementFix

Boston Voter App: Active element fix for internal linking buttons

client/src/components/button/ButtonFill.tsx

@@ -3,6 +3,7 @@
 import { Button, ButtonProps } from '@mui/material';
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import { useActivePage } from '@/contexts/ActivePageContext';
 
 // Button name, description, variant, and onClick event are customizable
 // Note that description and variant are optional
@@ -13,12 +14,22 @@ type Props = {
     className?: string;
 };
 
+const pageNameMap: Record<string, string> = {
+    '/votingOptions': 'Voting Options',
+    '/voterInfo': 'Your Voter Info',
+    '/ballotInfo': 'Ballot Info',
+    '/dropBoxLocations': 'Drop Box Locations',
+    '/upcomingElections': 'Upcoming Elections',
+};
 
 // By default, variant is contained
 const ButtonFill = ({ name, link, variant = "contained", className }: Props) => {
 
+    const { setActivePage } = useActivePage();
+
     const router = useRouter();
     const handleClick = (page: string) => {
+        setActivePage(pageNameMap[page]);
         router.push(page);
     }
 

client/src/components/nav/NavBar.tsx

@@ -8,6 +8,7 @@ import { AppBar, Box, Button, Tooltip, MenuItem, Toolbar, IconButton, Typography
 import MenuIcon from '@mui/icons-material/Menu';
 import StarIcon from '@mui/icons-material/Star';
 import { useRouter } from 'next/navigation';
+import { useActivePage } from '@/contexts/ActivePageContext';
 
 const pages = ['Upcoming Elections', 'Your Voter Info', 'Voting Options', 'Ballot Info', 'Drop Box Locations'];
 const links: Record<string, string> = {
@@ -21,7 +22,7 @@ const links: Record<string, string> = {
 
 function NavBar() {
   const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
-  const [activePage, setActivePage] = React.useState<string>('null');
+  const { activePage, setActivePage } = useActivePage();
 
   const router = useRouter()
 

client/src/contexts/ActivePageContext.tsx

@@ -0,0 +1,30 @@
+/* A context for setting the active page for navbar styling. Needed to allow
+ * buttons to also change the active page, so made a context.
+*/
+'use client';
+
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+
+interface ActivePageContextProps {
+  activePage: string;
+  setActivePage: (page: string) => void;
+}
+
+const ActivePageContext = createContext<ActivePageContextProps | undefined>(undefined);
+
+export const ActivePageProvider = ({ children }: { children: ReactNode }) => {
+  const [activePage, setActivePage] = useState<string>('Upcoming Elections');
+  return (
+    <ActivePageContext.Provider value={{ activePage, setActivePage }}>
+      {children}
+    </ActivePageContext.Provider>
+  );
+};
+
+export const useActivePage = () => {
+  const context = useContext(ActivePageContext);
+  if (context === undefined) {
+    throw new Error('useActivePage must be used within an ActivePageProvider');
+  }
+  return context;
+};

client/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import NavBar from '../components/nav/NavBar'; // Import the NavBar component
 import { AppProps } from 'next/app'; // Import AppProps from Next.js
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { ActivePageProvider } from '@/contexts/ActivePageContext';
 
 function MyApp({ Component, pageProps }: AppProps) {
     const router = useRouter();
@@ -22,10 +23,12 @@ function MyApp({ Component, pageProps }: AppProps) {
     }, [router.events]);
 
     return (
-        <div className='mx-4'>
-            <NavBar />
-            <Component {...pageProps} />
-        </div>
+        <ActivePageProvider>
+            {/* <div className='mx-4'> */}
+                {/* <NavBar /> */}
+                <Component {...pageProps} />
+            {/* </div> */}
+        </ActivePageProvider>
     );
 }
 

client/src/pages/ballotInfo/index.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import DropDown from './dropDown';
 import HelpIcon from '@mui/icons-material/Help';
 import BoxAddress from "./boxAddress";
+import NavBar from "@/components/nav/NavBar";
 
 
 
@@ -18,6 +19,7 @@ export default function BallotInfo() {
     };
     return (
         <div className=''>
+            <NavBar />
 
             <div className='p-4 text-center '>
                 <h1 className='text-blue-700 font-bold text-6xl '>Ballot Info</h1>

client/src/pages/dropBoxLocations/index.tsx

@@ -6,11 +6,13 @@ import BoxField from '@/components/box/BoxField';
 import SearchIcon from '@mui/icons-material/Search';
 import { Box } from '@mui/material';
 import Image from 'next/image'
+import NavBar from '@/components/nav/NavBar';
 
 
 export default function DropBoxLocations() {
     return (
         <div>
+            <NavBar />
             <div className='flex flex-col justify-center items-center p-4 text-center mb-10'>
                 <h1 className='text-blue-700 font-bold text-6xl '>Drop Box Locations</h1>
                 <h1 className='font-semibold text-xl p-5'>Find the nearest ballot drop-off station and early voting locations in your area</h1>

client/src/pages/index.tsx

@@ -0,0 +1,16 @@
+// pages/index.tsx
+'use client';
+
+import React from 'react';
+import NavBar from '../components/nav/NavBar';
+import UpcomingElections from '@/pages/upcomingElections'; // Ensure this is the correct import path
+
+const Home = () => {
+  return (
+    <div className="m-4">
+      <UpcomingElections />
+    </div>
+  );
+};
+
+export default Home;

client/src/pages/upcomingElections/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import ElectionDates from './electionDates'
 import ButtonFill from "@/components/button/ButtonFill";
 import ButtonFillEx from "@/components/button/ButtonFillEx";
+import NavBar from "@/components/nav/NavBar";
 
 
 export default function UpcomingElections() {
 
     return (
         <div className=''>
+            <NavBar />
             <div className='flex flex-col justify-center items-center p-4 text-center'>
                 <h1 className='text-blue-700 font-bold text-7xl '>LET&#39;S VOTE!</h1>
                 <p className='font-semibold text-xl p-5'>The most important information about Boston&#39;s municipal elections to help you navigate your voting journey</p>

client/src/pages/voterInfo/index.tsx

@@ -3,13 +3,15 @@ import Button from '@mui/material/Button';
 import '@/app/globals.css'
 import ButtonFill from '@/components/button/ButtonFill';
 import { useRouter } from 'next/router';
+import NavBar from '@/components/nav/NavBar';
 
 export default function VoterInfo() {
 
 
 
     return (
         <div>
+            <NavBar />
             <div className='flex flex-col justify-center items-center p-4 text-center my-4'>
                 <h1 className='text-blue-700 font-bold text-6xl '>Your Voter Info</h1>
                 <h1 className='font-semibold text-xl p-5 mt-2'>Here is everything you need to know about your <br />voter status and personal voting logistics!</h1>

client/src/pages/votingOptions/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import DropDownInfo from './DropDownInfo';
+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='text-blue-700 font-bold text-6xl '>Voting Options</h1>
                 <h1 className='font-semibold text-xl p-5'>Everything you need to know about your voting options made simple!</h1>