Skip to content

Commit 661ac78

Browse files
ethancedwards8ethancedwards8
committed
large commit to start downward path on congress project
1 parent f57ecd4 commit 661ac78

File tree

7 files changed

+122
-46
lines changed

7 files changed

+122
-46
lines changed

‎components/header.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export default function Header() {
77
<nav className={styles.nav}>
88
<div className={`${styles.logo} ${styles.navlink}`}><Link href="/" passHref><a>Ethan Carter Edwards</a></Link></div>
99
<ul>
10-
<div className={styles.navlink}><li><Link href="/" passHref><a>Home</a></Link></li></div>
11-
<div className={styles.navlink}><li><Link href="/blog" passHref><a>Blog</a></Link></li></div>
12-
<div className={styles.navlink}><li><Link href="/podcast" passHref><a>Podcast</a></Link></li></div>
13-
<div className={styles.navlink}><li><Link href="/congress" passHref><a>Congress</a></Link></li></div>
14-
<div className={styles.navlink}><li><Link href="/about" passHref><a>About</a></Link></li></div>
10+
<div className={styles.navlink}><li><Link href="/" passHref>Home</Link></li></div>
11+
<div className={styles.navlink}><li><Link href="/blog" passHref>Blog</Link></li></div>
12+
<div className={styles.navlink}><li><Link href="/podcast" passHref>Podcast</Link></li></div>
13+
<div className={styles.navlink}><li><Link href="/congress" passHref>Congress</Link></li></div>
14+
<div className={styles.navlink}><li><Link href="/about" passHref>About</Link></li></div>
1515
</ul>
1616
</nav>
1717
</div>

‎components/representatives.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import styles from '../styles/congress.module.scss';
2+
import Link from 'next/link';
23

34
function Card({ individual }) {
45
return (
56
<>
7+
68
<div className={styles.repInfo} style={{borderColor: (individual.bio.party == "Republican") ? "red" : "blue"}}>
7-
<img src={individual.picture} alt="" className={styles.photo} />
9+
<Link href={{ pathname: `/congress/${individual.references.bioguide_id}`}}><img src={individual.picture} alt="" className={styles.photo} /></Link>
810
<div className={styles.text}>
9-
<h2>{individual.type} {individual.bio.full_name}</h2>
11+
<Link href={{ pathname: `/congress/${individual.references.bioguide_id}`}}><a className={styles.link}><h2>{individual.type} {individual.bio.full_name}</h2></a></Link>
1012
<p>Party: {individual.bio.party}</p>
1113
<p>Serving since: {individual.typeSince}</p>
1214
<p>Bills Sponsored: {individual.sponsoredLegislationCount}</p>
@@ -21,6 +23,7 @@ export default function Representatives({ rep }) {
2123
try {
2224
// <!-- only display senators if they exist for the address -->
2325
let hasSenators = rep.hasOwnProperty("senate1")
26+
2427
return (
2528
<>
2629
<h1 className={styles.header}>{rep.house.state} {rep.name} Representatives:</h1>

‎pages/congress/[bioguide_id].js

-24
This file was deleted.

‎pages/congress/[repID].js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useRouter } from 'next/router';
2+
import { useState, useEffect } from 'react';
3+
import Head from 'next/head';
4+
import styles from '../../styles/congress.module.scss';
5+
6+
export default function LearnMore({ repInfo }) {
7+
let billArray = repInfo.sponsoredLegislation.recent.concat(repInfo.cosponsoredLegislation.recent);
8+
billArray = billArray.sort((a, b) => b.introducedDate - a.introducedDate)
9+
billArray.length = 6;
10+
11+
return (
12+
<>
13+
<Head>
14+
<title>{repInfo.type} {repInfo.directOrderName}</title>
15+
</Head>
16+
<div className={styles.infoPage}>
17+
<img src={repInfo.depiction.imageUrl} alt="" className={styles.photo} />
18+
<div className={styles.infoCentral}>
19+
<h1>{repInfo.type} {repInfo.directOrderName}</h1>
20+
<p>{repInfo.partyHistory[0].partyName} Party - {repInfo.state}</p>
21+
<h2>Lawmaking Information:</h2>
22+
<div>
23+
<p>Bills Sponsored: {repInfo.sponsoredLegislation.count}</p>
24+
<p>Bills Co-Sponsored: {repInfo.cosponsoredLegislation.count}</p>
25+
</div>
26+
</div>
27+
<div className={styles.servingSince}>
28+
<div className={styles.box}>
29+
<h2>Office Term:</h2>
30+
<p>{repInfo.state} {repInfo.type} since {repInfo.typeSince}</p>
31+
</div>
32+
</div>
33+
34+
<h3>Recent Bills:</h3>
35+
<div className={styles.recentLegislation}>
36+
{billArray.map((bill) => (
37+
<div><b>{bill.type} {bill.number}</b> {bill.title}</div>
38+
))}
39+
</div>
40+
</div>
41+
</>
42+
);
43+
}
44+
45+
export async function getServerSideProps({ params: { repID } }) {
46+
const res = await fetch(`https://api.ethancedwards.com/congress/v1/member/${repID}`);
47+
const repInfo = await res.json();
48+
49+
return {
50+
props: {
51+
repInfo
52+
}
53+
}
54+
}

‎pages/congress/index.js

+2-14
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,14 @@ export default function Congress() {
1818

1919
const handleSubmit = async (event) => {
2020
event.preventDefault()
21-
let res = await fetch(`https://api.ethancedwards.com/congress/v1/${address}`)
21+
let res = await fetch(`https://api.ethancedwards.com/congress/v1/address/${address}`)
2222
let info = await res.json();
2323

2424
// puts the address parameter into the URL
2525
const queryParams = new URLSearchParams(`address=${address}`).toString();
2626
router.push(`/congress?${queryParams}`);
2727

28+
2829
setRep(info);
2930
}
3031

@@ -58,16 +59,3 @@ export default function Congress() {
5859
</>
5960
);
6061
}
61-
62-
// export async function getServerSideProps() {
63-
// // local development
64-
// // const res = { quote: "Quote", author: "Author" };
65-
// // const quotes = res;
66-
67-
// // production
68-
// const res = await fetch(`https://api.ethancedwards.com/congress/v1/1600+Pennsylvania+Avenue+NW+Washington+DC+20500`);
69-
// const rep = await res.json();
70-
71-
// return { props: { rep } };
72-
73-
// }

‎pages/podcast.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Blog({ episodes }) {
1414

1515
<div className={styles.podcast}>
1616
<h1 className={styles.header}>Welcome to The Ridge Podcast</h1>
17-
<p>Here you can find conversations on Appalachia history and culture.</p>
17+
<p>Here you can find conversations on Appalachian history and culture.</p>
1818
</div>
1919
<h1 className={styles.header}>List of episodes:</h1>
2020
<div className={styles.blog}>

‎styles/congress.module.scss

+55
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
text-align: center;
88
}
99

10+
.link {
11+
text-decoration: underline;
12+
color: #363EEB;
13+
}
14+
15+
.link:hover {
16+
color: #1C86FF;
17+
}
18+
1019
.text {
1120
margin: 20px;
1221
padding: 10px;
@@ -41,6 +50,52 @@
4150
}
4251
}
4352

53+
.infoPage {
54+
margin: 30px;
55+
display: grid;
56+
grid-template-columns: 1.5fr 6fr 1.5fr;
57+
grid-auto-rows: minxmax(100px, auto);
58+
59+
img {
60+
border-style: solid;
61+
border-color: black;
62+
padding: 0px;
63+
margin: 7px;
64+
grid-column: 1;
65+
grid-row: 1;
66+
}
67+
68+
.infoCentral {
69+
grid-column: 2;
70+
grid-row: 1;
71+
72+
}
73+
74+
.servingSince {
75+
text-align: center;
76+
grid-column: 3;
77+
grid-row: 1;
78+
79+
.box {
80+
// background-color: pink;
81+
p {
82+
padding: 0px;
83+
margin: 0px;
84+
}
85+
}
86+
}
87+
88+
h3 {
89+
grid-column: 1;
90+
grid-row: 2;
91+
}
92+
93+
.recentLegislation {
94+
grid-column: 2;
95+
grid-row: 2;
96+
}
97+
}
98+
4499
@media (width <= 800px) {
45100
.allReps {
46101
flex-direction: column;

0 commit comments

Comments
 (0)