commit before moving to flexbox

components/representatives.js

@@ -1,4 +1,18 @@
-import styles from '../styles/blog.module.scss';
+import styles from '../styles/congress.module.scss';
+
+function Card({ individual }) {
+    return (
+        <>
+            <div className={styles.repInfo} style={{borderColor: (individual.bio.party == "Republican") ? "red" : "blue"}}>
+                <img src={individual.picture} alt="" className={styles.photo} />
+                <div className={styles.text}>
+                    <p>{individual.type} {individual.bio.full_name} - {individual.bio.party}</p>
+                    <p>{individual.typeSince} - Current</p>
+                </div>
+            </div>
+        </>
+    );
+}
 
 export default function Representatives({ rep }) {
     try {
@@ -7,21 +21,12 @@ export default function Representatives({ rep }) {
         return (
             <>
                 <h1 className={styles.header}>{rep.house.state} {rep.name} Representatives:</h1>
-                <div className={styles.blog}>
-                    <div className={styles.repInfo} style={{borderColor: (rep.house.bio.party == "Republican") ? "red" : "blue"}}>
-                        <img src={rep.house.picture} alt="" className={styles.photo} />
-                        <h2 className={styles.text}>{rep.house.type} {rep.house.bio.full_name} - {rep.house.bio.party}</h2>
-                    </div>
+                <div>
+                    <Card individual={rep.house} />
                     { hasSenators ? 
                         <div>
-                            <div className={styles.repInfo} style={{borderColor: (rep.senate1.bio.party == "Republican") ? "red" : "blue"}}>
-                                <img src={rep.senate1.picture} alt="" className={styles.photo} />
-                                <h2 className={styles.text}>{rep.senate1.type} {rep.senate1.bio.full_name} - {rep.senate1.bio.party}</h2>
-                            </div>
-                            <div className={styles.repInfo} style={{borderColor: (rep.senate2.bio.party == "Republican") ? "red" : "blue"}}>
-                                <img src={rep.senate2.picture} alt="" className={styles.photo} />
-                                <h2 className={styles.text}>{rep.senate2.type} {rep.senate2.bio.full_name} - {rep.senate2.bio.party}</h2>
-                            </div>
+                            <Card individual={rep.senate1} />
+                            <Card individual={rep.senate2} />
                         </div>
                         :
                         <></>
@@ -32,7 +37,7 @@ export default function Representatives({ rep }) {
     // return emptiness if no rep is passed through
     } catch(err) {
         return (
-            <> </>
+            <> Sorry, try another address </>
         );
     }
 }

pages/_app.js

@@ -22,7 +22,6 @@ export default function MyApp({ Component, pageProps }) {
 
           <Component {...pageProps} />
 
-          <Footer />
         </div>
     );
 }

pages/congress/index.js

@@ -1,15 +1,18 @@
 import Link from 'next/link';
 import dayjs from 'dayjs';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
-import styles from '../../styles/blog.module.scss';
+import styles from '../../styles/congress.module.scss';
 
 import Representatives from '../../components/representatives.js';
 
 export default function Congress() {
     const [address, setAddress] = useState("");
     const [rep, setRep] = useState("");
+    const router = useRouter();
+    const { query } = router;
 
     // let rep;
 
@@ -18,16 +21,23 @@ export default function Congress() {
         let res = await fetch(`https://api.ethancedwards.com/congress/v1/${address}`)
         let info = await res.json();
 
-        setRep(info);
-        console.log('we are here');
+        // puts the address parameter into the URL
+        const queryParams = new URLSearchParams(`address=${address}`).toString();
+        router.push(`/congress?${queryParams}`);
 
-        // event.target.submit()
+        setRep(info);
     }
 
+    useEffect(() => {
+        if (query.address) {
+            setAddress(query.address);
+        }
+    }, [query]);
+
     return (
         <>
             <Head>
-                <title>Congress Search</title>
+                <title>Congress</title>
             </Head>
 
 
@@ -40,6 +50,7 @@ export default function Congress() {
                 <input type="submit" value="Submit" />
             </form>
             <hr />
+
             <div> 
                 { rep ? <Representatives rep={rep} /> : <div className={styles.text}> Please input an address... </div> }
             </div>

styles/congress.module.scss

@@ -0,0 +1,54 @@
+.header {
+    // background: #363EEB;
+    // background: #363EEB;
+    margin: 20px;
+    padding: 10px;
+    border-radius: 50px;
+}
+
+.text {
+  margin: 20px;
+  padding: 10px;
+}
+
+.repInfo {
+  border-style: solid;
+  border-color: black;
+  padding: 5px;
+  margin: 5px;
+  display: grid;
+  // grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: 1fr 4fr;
+  grid-auto-rows: 1;
+
+  .photo {
+    grid-column: 1;
+    // width: 10%;
+    // height: auto;
+    border-style: solid;
+    border-color: black;
+  }
+
+  .text {
+    // padding: 0;
+    margin: 0;
+    grid-column: 2 / 3;
+  }
+}
+
+@media (width <= 800px) {
+  .repInfo {
+    padding: 5px;
+    // margin: 0;
+
+    .photo {
+      // width: 80%;
+      // height: 80%;
+      padding: 0;
+      // margin: 0;
+    }
+
+    .text {
+    }
+  }
+}