Bilal Changes 11/3

frontend/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-social-icons": "^5.15.0",
+    "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
@@ -43,6 +44,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "firebase": "^9.23.0",
     "react-router-dom": "^6.8.1",
     "react-social-icons": "^5.15.0",

frontend/src/App.css

@@ -46,3 +46,29 @@
   padding: 6px;
   cursor: pointer;
 }
+
+.accordion {
+  max-width: 2000px;
+  margin: 2rem auto;
+}
+
+.accordion-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: white;
+}
+
+.accordion-title:hover {
+  background-color: #a79a96;
+}
+
+.accordion-title,
+.accordion-content {
+  padding: 1rem;
+}
+
+.accordion-content {
+  background-color: white;
+}

frontend/src/App.js

@@ -8,6 +8,8 @@ import Navbar from "./components/Navbar";
 import Leadership from "./Leadership";
 import Parties from "./Parties";
 // import Contact from "./contact"
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import ConstitutionReact from "./ConstitutionReact";
 import { AuthProvider } from "./firebase/auth";
 import { firebaseInit } from "./firebase/firebase";
@@ -38,6 +40,7 @@ function App() {
         <Navbar />
         <RouterProvider router={router} />
         <Footnote />
+        <ToastContainer position="bottom-right"/>
       </main>
     </AuthProvider>
   );

frontend/src/Constitution.js

@@ -16,6 +16,7 @@ function Collapsible() {
             </div>
         </div>
     );
+
 }
 function App() {
     return (

frontend/src/ConstitutionReact.js

@@ -1,8 +1,12 @@
-import './App.css';
+// import { useState } from 'react';
+// import './App.css';
+// import Constitution from "./components/Constitution";
+import React from 'react';
+import Accordion from './components/Accordion';
 import constitution from "./data/constitution.json";
-import Constitution from "./components/Constitution";
 
-function ConstitutionReact() {
+
+const ConstitutionReact = () => {
     return (
         <div className="px-24">
             <div className="mt-32 justify-center">
@@ -13,20 +17,19 @@ function ConstitutionReact() {
                     Brown Political Union
                 </h3>
             </div>
-            <div className="mt-20">
-                {constitution
-                    .map((cont, i) => {
-                        return (
-                            <Constitution
-                                key={i}
-                                head={cont.header}
-                                content={cont.info}
-                            />
-                        );
-                    })}
+            <div>
+            <h1>The BPU follows a set of principles to guide the organization's mission, brand, and purpose.</h1>
+            <div className="accordion">
+                {constitution.map(({ header, info }) => (
+                <Accordion title={header} content={info} />
+                ))}
+            </div>
             </div>
-        </div>
-    );
+        </div> 
+    )
 }
 
-export default ConstitutionReact;
+export default ConstitutionReact;
+
+
+

frontend/src/components/AboutUs.jsx

@@ -1,4 +1,4 @@
-const AboutSection = ({ subtitle, title, description, image, reverse }) => {
+const AboutSection = ({ subtitle, title, description, image, reverse, alt }) => {
   return (
     <section
       className={`flex flex-col-reverse ${
@@ -13,6 +13,7 @@ const AboutSection = ({ subtitle, title, description, image, reverse }) => {
       <img
         className="object-cover rounded-md h-auto w-52 drop-shadow-lg"
         src={image}
+        alt={alt}
       />
     </section>
   );
@@ -32,6 +33,7 @@ const AboutUs = () => {
     <div className="mt-40 pb-16 mx-auto max-w-screen-md px-8">
       <AboutSection
         subtitle={"About BPU"}
+        alt={"Picture of the US Capitol"}
         title={"We are a non-partisan student run organization."}
         description={
           "The Brown Political Union is a nonpartisan student-run organization dedicated to providing a forum for respectful political discourse on campus. From discussions on important policy issues to speaker series to social debate and election watch night events, the BPU is the best place on campus to talk politics in a cordial and low-stress environment."
@@ -42,6 +44,7 @@ const AboutUs = () => {
       <AboutSection
         subtitle={"Our Vision"}
         title={"We aim to promote facts."}
+        alt={"Picture of the handles on the Brown Gates"}
         description={
           "We believe in advancing student understanding of foreign and domestic policy by promoting facts, seeking nuance, and challenging preconceptions. Above all, the BPU works to bridge partisan divides and foster respect for the freedom of speech among the Brown student community."
         }

frontend/src/components/Accordion.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import Section from "./Section";
+
+const Accordion = ({ title, content }) => {
+  const [isActive, setIsActive] = useState(false);
+
+  return (
+    <div className="accordion-item">
+      <div className="accordion-title" onClick={() => setIsActive(!isActive)}>
+        <div>{title}</div>
+        <div>{isActive ? '-' : '+'}</div>
+      </div>
+      {isActive && <div className="accordion-content">
+      {content.map((sub_content, i) => {
+                    return (
+                        <Section
+                            key = {i}
+                            section={sub_content.section}
+                            data={sub_content.data}
+                        />
+                    );
+                })}
+      </div>}
+    </div>
+  );
+};
+
+export default Accordion;

frontend/src/components/Admin.jsx

@@ -19,7 +19,7 @@ const Dashboard = () => {
       <div>
           <section>
               <h3 className="font-bold text-3xl text-center">Admin Dashboard</h3>
-              <h3 className="font-bold text-3xl">Events : </h3>
+              <h3 className="font-bold text-3xl">Events: </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
                   {events.map((data) => {
                       return (
@@ -32,7 +32,7 @@ const Dashboard = () => {
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
                   <ModifiableAddEventCard/>
               </div>
-              <h3 className="font-bold text-3xl">Parties : </h3>
+              <h3 className="font-bold text-3xl">Parties: </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
                   {parties.map((data) => {
                       return (
@@ -45,7 +45,7 @@ const Dashboard = () => {
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
                   <ModifiableAddPartiesCard/>
               </div>
-              <h3 className="font-bold text-3xl my-5">Leadership : </h3>
+              <h3 className="font-bold text-3xl my-5">Leadership: </h3>
               <div className="grid pb-16 mx-auto px-8 grid-cols-1 gap-8">
                   {leaders.map((data) => {
                       return (

frontend/src/components/Event.jsx

@@ -4,7 +4,7 @@ const Event = ({ image, virtual, title, description, where, when }) => {
   return (
     <div className="flex flex-col md:flex-row mb-12 drop-shadow-lg">
       <div className="flex mr-16 justify-center align-center w-full md:w-auto">
-        <img className="object-cover md:h-96 w-full md:w-96 rounded-md" src={image} />
+        <img className="object-cover md:h-96 w-full md:w-96 rounded-md" src={image} alt="" />
       </div>
       <div className="flex flex-col my-4 md:my-10 w-full justify-center">
         <p className="text-slate-600">{virtual ? "Virtual" : "In-Person"}</p>
@@ -21,10 +21,10 @@ const Event = ({ image, virtual, title, description, where, when }) => {
               where
             )}
           </p>
-          <p>
+          <div>
             <span className="font-bold">When: </span>
             {format(when.toDate(), 'h:mm a, E MMM d, yyyy')}
-          </p>
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/Events.jsx

@@ -4,7 +4,7 @@ import { useCollection } from "../firebase/hooks/useCollection";
 const EventCard = ({ image, virtual, title, description, where, when }) => {
   return (
     <div className="bg-gray-200 rounded-md">
-      <img className="object-cover rounded-t-md" src={image} />
+      <img className="object-cover rounded-t-md" src={image} alt=""/>
       <div className="pt-2 pb-4 px-4">
         <h3 className="font-bold text-2xl mb-0">{title}</h3>
         <p className="text-slate-600 mb-2">{virtual ? "Virtual" : "In-Person"}</p>
@@ -55,7 +55,11 @@ const Events = () => {
   const [upcoming, setUpcoming] = useState(true);
   const currentDate = new Date();
   const events = useCollection("events");
-
+  const filteredEvents = events.filter((event) => {
+    return upcoming
+      ? event.when.toDate() > currentDate
+      : event.when.toDate() < currentDate;
+  });
   return (
     <div>
       <div className="mt-40 mx-auto max-w-screen-md px-8">
@@ -67,21 +71,15 @@ const Events = () => {
         </section>
       </div>
       <div className="grid pb-16 mx-auto max-w-screen-lg px-8 grid-cols-3 gap-8">
-        {events
-          .filter((event) =>
-            upcoming
-              ? event.when.toDate() > currentDate
-              : event.when.toDate() <= currentDate
-          )
-          .map((event, i) => {
+        {filteredEvents.length > 0 ? filteredEvents.map((event) => {
             return (
               <EventCard
-                key={i}
+                key={event.id}
                 {...event}
                 when={event.when.toDate().toDateString()}
               />
             );
-          })}
+          }) : <p className="text-center">No events to show</p>}
       </div>
     </div>
   );

frontend/src/components/Footnote.jsx

@@ -2,54 +2,59 @@ import { SocialIcon } from 'react-social-icons';
 
 const Footnote = () => {
     return (
-        <section className="h-72 bg-gray-200">
-            <div className="float-left inline-block pl-10 pt-12">
-                <div className="text-5xl text-[#650202] font-bold">
-                    BPU
-                </div>
-                <div className="h-5">
-
-                </div>
-                <div className="text-l text-[#650202]">
-                    The Brown Political Union is a nonpartisan student-run organization
-                </div>
-                <div className="text-l text-[#650202]">
-                    dedicated to providing a forum for respectful political.
-                </div>
-                <div className="text-l text-[#650202]">
-                    discourse on campus.
-                </div>
-                <div className="mt-6">
-                    <div className="float-left">
-                        <SocialIcon url="https://facebook.com" fgColor="white" />
-                    </div>
-                    <div className="ml-4 float-left">
-                        <SocialIcon url="https://instagram.com" fgColor="white"/>
-                    </div>
-                </div>
+      <section className="h-72 bg-gray-200">
+        <div className="float-left inline-block pl-10 pt-12">
+          <div className="flex items-center space-x-3">
+            <a
+              className="w-12 text-3xl md:text-5xl text-white font-bold"
+              href="/"
+            >
+              <img
+                src={require("../data/BPU Logo Official Brown.png")}
+                alt={"BPU"}
+              />
+            </a>
+            <div className="text-5xl text-[#650202] font-bold">BPU</div>
+          </div>
+          <div className="h-5"></div>
+          <div className="text-l text-[#650202]">
+            The Brown Political Union is a nonpartisan student-run organization
+          </div>
+          <div className="text-l text-[#650202]">
+            dedicated to providing a forum for respectful political.
+          </div>
+          <div className="text-l text-[#650202]">discourse on campus.</div>
+          <div className="mt-6">
+            <div className="float-left">
+            <SocialIcon url="https://www.facebook.com/profile.php?id=100089568716535&mibextid=LQQJ4d" fgColor="white" />
             </div>
-
-            <div className="float-right grid grid-rows-2 grid-flow-col gap-6 pt-12 pr-20">
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    About Us
-                </div>
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    Events
-                </div>
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    Constitution
-                </div>
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    Parties
-                </div>
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    Leadership
-                </div>
-                <div className="text-2xl text-[#650202] font-bold inline-block">
-                    Contact
-                </div>
+            <div className="ml-4 float-left">
+                <SocialIcon url="https://www.instagram.com/brownpoliticalunion/" fgColor="white"/>
             </div>
-        </section>
+          </div>
+        </div>
+
+        <div className="float-right grid grid-rows-2 grid-flow-col gap-6 pt-12 pr-20">
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+            About Us
+          </div>
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+            Events
+          </div>
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+            Constitution
+          </div>
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+            Parties
+          </div>
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+            Leadership
+          </div>
+          <div className="text-2xl text-[#650202] font-bold inline-block">
+          <a href="https://docs.google.com/forms/d/e/1FAIpQLSdSC_VzIloUZ37vlAICG21CtEdShoidBJuHIbnGSh-PIBNzbA/viewform">Contact</a>
+          </div>
+        </div>
+      </section>
     );
 }