add card links and bill info links

ethancedwards8 · Nov 30, 2024 · 2f5d83d · 2f5d83d
1 parent 661ac78
commit 2f5d83d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/components/representatives.js b/components/representatives.js
@@ -4,17 +4,18 @@ import Link from 'next/link';
 function Card({ individual }) {
     return (
         <>
-
+            <Link href={{ pathname: `/congress/${individual.references.bioguide_id}`}}><a className={styles.link}>
             <div className={styles.repInfo} style={{borderColor: (individual.bio.party == "Republican") ? "red" : "blue"}}>
-                <Link href={{ pathname: `/congress/${individual.references.bioguide_id}`}}><img src={individual.picture} alt="" className={styles.photo} /></Link>
+                <img src={individual.picture} alt="" className={styles.photo} />
                 <div className={styles.text}>
-                    <Link href={{ pathname: `/congress/${individual.references.bioguide_id}`}}><a className={styles.link}><h2>{individual.type} {individual.bio.full_name}</h2></a></Link>
+                    <h2>{individual.type} {individual.bio.full_name}</h2>
                     <p>Party: {individual.bio.party}</p>
                     <p>Serving since: {individual.typeSince}</p>
                     <p>Bills Sponsored: {individual.sponsoredLegislationCount}</p>
                     <p>Bills Cosponsored: {individual.cosponsoredLegislationCount}</p>
                 </div>
             </div>
+            </a></Link>
         </>
     );
 }

diff --git a/pages/congress/[repID].js b/pages/congress/[repID].js
@@ -3,11 +3,28 @@ import { useState, useEffect } from 'react';
 import Head from 'next/head';
 import styles from '../../styles/congress.module.scss';
 
+function BillLink({ billObject }) {
+    let linkDict = new Object();
+    linkDict['HR'] = 'house-bill';
+    linkDict['HRES'] = 'house-resolution';
+    linkDict['HJRES'] = 'house-joint-resolution';
+    linkDict['S'] = 'senate-bill';
+    linkDict['SRES'] = 'senate-resolution';
+    linkDict['SJRES'] = 'senate-joint-resolution';
+
+    return (
+        <a className={styles.link} href={`https://congress.gov/bill/${billObject.congress}th-congress/${linkDict[billObject.type]}/${billObject.number}`}>
+            <div><b>{billObject.type} {billObject.number}</b> {billObject.title}</div></a>
+    );
+}
+
 export default function LearnMore({ repInfo }) {
     let billArray = repInfo.sponsoredLegislation.recent.concat(repInfo.cosponsoredLegislation.recent);
     billArray = billArray.sort((a, b) => b.introducedDate - a.introducedDate)
     billArray.length = 6;
 
+    let isHouse = repInfo.terms[repInfo.terms.length - 1].hasOwnProperty("district");
+
     return (
         <>
             <Head>
@@ -27,14 +44,14 @@ export default function LearnMore({ repInfo }) {
                 <div className={styles.servingSince}>
                     <div className={styles.box}>
                         <h2>Office Term:</h2>
-                        <p>{repInfo.state} {repInfo.type} since {repInfo.typeSince}</p>
+                        <p>{repInfo.state} {isHouse ? <>HD-{repInfo.terms[repInfo.terms.length - 1].district}</> : <></>} {repInfo.type} since {repInfo.typeSince}</p>
                     </div>
                 </div>
 
                 <h3>Recent Bills:</h3>
                 <div className={styles.recentLegislation}>
                     {billArray.map((bill) => (
-                        <div><b>{bill.type} {bill.number}</b> {bill.title}</div>
+                        <BillLink billObject={bill} />
                     ))}
                 </div>
             </div>

diff --git a/styles/congress.module.scss b/styles/congress.module.scss
@@ -8,7 +8,7 @@
 }
 
 .link {
-    text-decoration: underline;
+    text-decoration: none;
     color: #363EEB;
 }
 
@@ -28,19 +28,22 @@
   justify-content: space-evenly;
 }
 
+.photo {
+  border-style: solid;
+  border-color: black;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  height: 225px;
+}
+
 .repInfo {
+  color: black;
   border-style: solid;
   border-color: black;
   padding: 5px;
   margin: 5px;
 
-  .photo {
-    border-style: solid;
-    border-color: black;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
 
   .text {
     // padding: 0;
@@ -50,6 +53,10 @@
   }
 }
 
+.repInfo:hover {
+  background-color: lightgrey;
+}
+
 .infoPage {
   margin: 30px;
   display: grid;