tabs work

ProgressiveMass · Apr 10, 2019 · 87557da · 87557da
1 parent fe4544e
commit 87557da
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 17 deletions.
diff --git a/functions/index.js b/functions/index.js
@@ -13,7 +13,6 @@ const corsOptions = {
     /^https:\/\/progressive-mass.firebaseapp.com\/*/,
     /^https:\/\/scorecard.progressivemass.com\/*/,
     /^https:\/\/progressive-mass-test.firebaseapp.com\/*/,
-    /^http:\/\/localhost:.{4}/
   ],
 }
 

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -23,7 +23,7 @@ const makePage = ({ chamber, pageData, createPage, legislatorId }) => {
 // create individual legislator pages
 exports.createPages = async function({ actions: { createPage } }) {
   ;[
-    // { chamber: 'senate', legislators: senateLegislators },
+    { chamber: 'senate', legislators: senateLegislators },
     { chamber: 'house', legislators: houseLegislators },
   ].map(({ chamber, legislators }) => {
     legislators.forEach(({ id: legislatorId }) => {

diff --git a/src/components/legislator/YourLegislatorTabs.js b/src/components/legislator/YourLegislatorTabs.js
@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from 'react'
+import { Link } from 'gatsby'
 import qs from 'query-string'
 
-const YourLegislatorTabs = () => {
+const YourLegislatorTabs = ({ currentLegislator }) => {
+  const urlId = currentLegislator.replace('ocd-person/', '')
+
   const [search, setSearch] = useState({})
 
   useEffect(() => {
@@ -14,26 +17,34 @@ const YourLegislatorTabs = () => {
 
   const selectedClass = 'RRT__tab--selected'
   return (
-    <div className="mt-5 d-md-flex">
+    <div className="mt-5 d-md-flex your-legislator-tabs">
       <div
         className={`RRT__tab RRT__tab--first ${
           search.yourRep ? selectedClass : ''
-        }?yourSenator=${search.yourSenator}`}
+        }`}
       >
-        <a
-          href={
-            search.yourRep
-              ? '#'
-              : `/legislator/${search.yourSenator}?yourRep=${search.yourRep}`
-          }
-        >
-          Your Senator
-        </a>
+        {search.yourRep ? (
+          'Your Senator'
+        ) : (
+          <Link to={`/legislator/${search.yourSenator}?yourRep=${urlId}`}>
+            Your Senator
+          </Link>
+        )}
       </div>
       <div className={`RRT__tab ${search.yourSenator ? selectedClass : ''}`}>
-        <a href={search.yourSenator ? '#' : `/legislator/${search.yourRep}`}>
-          Your House Rep
-        </a>
+        {search.yourSenator ? (
+          'Your Rep'
+        ) : (
+          <Link
+            to={
+              search.yourSenator
+                ? '#'
+                : `/legislator/${search.yourRep}?yourSenator=${urlId}`
+            }
+          >
+            Your House Rep
+          </Link>
+        )}
       </div>
     </div>
   )

diff --git a/src/styles/_my-legislators.scss b/src/styles/_my-legislators.scss
@@ -16,3 +16,26 @@
     padding-left: 0;
   }
 }
+
+.your-legislator-tabs {
+  .RRT__tab--selected {
+    background-color: $gray-200;
+  }
+  .RRT__tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: $headings-font-family;
+    padding: 0;
+    a {
+      padding: 1rem;
+      display: block;
+      width: 100%;
+      height: 100%;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+}