[DRAFT] added state and facility mailing guides, connecting with GSheets API

src/components/app/App.css

@@ -5,6 +5,8 @@
   --main-primary-dark: #042c7a;
   --main-cta-color: #4884f8;
   --main-lightblue-color: #ebf8ff;
+  --main-grey: #656a6f;
+  --main-lightgrey: #d0d0d4;
   --main-black: #232624;
 }
 
@@ -69,10 +71,17 @@ a:hover {
   background-color: var(--main-primary-dark);
 }
 
+.lightgrey {
+  color: var(--main-lightgrey);
+}
 .blue {
   color: var(--main-primary-color);
 }
 
+.grey {
+  color: var(--main-grey);
+}
+
 .bg-lightblue {
   background-color: var(--main-lightblue-color);
 }
@@ -102,6 +111,14 @@ h1 {
   font-size: 16px;
 }
 
+.p6 {
+  font-size: 14px;
+}
+
+.p7 {
+  font-size: 13px;
+}
+
 @media (min-width: 768px) {
   h1 {
     font-size: 48px;
@@ -132,6 +149,13 @@ h1 {
   max-width: 90%;
 }
 
+.w-33 {
+  max-width: 33%;
+}
+
+.top-2 {
+  top: 2em;
+}
 .secondary-btn {
   border: var(--main-primary-color) 1px solid !important;
   color: var(--main-primary-color) !important;

src/components/app/App.tsx

@@ -10,9 +10,11 @@ import Footer from "./footer/Footer";
 import HowItWorks from "./pages/HowItWorks";
 import Ambassadors from "./pages/Ambassadors";
 import GetInvolved from "./pages/GetInvolved";
-
+import StateMailingGuide from "./pages/StateMailingGuide";
 import { HashRouter as Router, Route, Switch } from "react-router-dom";
 import { trackPageOpen, load, page } from "../../utils/analytics";
+import { US_STATES } from "../../utils/us_states";
+import FacilityGuide from "./pages/FacilityGuide";
 
 const App: React.FC = () => {
   useEffect(() => {
@@ -32,6 +34,21 @@ const App: React.FC = () => {
         <Route path="/ambassadors" component={Ambassadors} />
         <Route path="/mission" component={Mission} />
         <Route path="/get-involved" component={GetInvolved} />
+        {US_STATES.map((item) => (
+          <Route
+            key={item.abbreviation}
+            path={`/${item.abbreviation}`}
+            exact
+            component={StateMailingGuide}
+          />
+        ))}
+        {US_STATES.map((item) => (
+          <Route
+            key={item.abbreviation}
+            path={`/${item.abbreviation}/:facilityName`}
+            component={FacilityGuide}
+          />
+        ))}
         <Route path="/" component={Landing} />
       </Switch>
       <Footer />

src/components/app/cards/AuthorCard.css

@@ -0,0 +1,4 @@
+.author-img {
+  height: 60px;
+  width: 60px;
+}

src/components/app/cards/AuthorCard.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Image from "react-bootstrap/Image";
+import "./AuthorCard.css";
+
+const AuthorCard = () => {
+  return (
+    <div className="d-flex flex-row align-items-center">
+      <Image
+        roundedCircle
+        src={require("../../../assets/team/lara.jpeg")}
+        className="author-img"
+      />
+      <div className="d-flex flex-column ml-3">
+        <span className="bold p6">Written by Lara Schull</span>
+        <span className="grey p7">Updated July 9, 2020</span>
+      </div>
+    </div>
+  );
+};
+export default AuthorCard;

src/components/app/cards/CtaCard.css

@@ -0,0 +1,5 @@
+.cta-card-wrapper {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px -5px;
+  padding: 3em;
+  width: 100%;
+}

src/components/app/cards/CtaCard.tsx

@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from "react";
+import { Home, Send, Heart } from "react-feather";
+import "./CtaCard.css";
+import Button from "react-bootstrap/Button";
+
+const CtaCard: FunctionComponent = () => {
+  return (
+    <div className="cta-card-wrapper">
+      <span className="font-weight-bold p4">
+        A nonprofit that helps you stay in touch with your loved one for free.
+      </span>
+
+      <div className="d-flex flex-row mt-3">
+        <Send className="blue" size={48} />
+        <p className="ml-3">
+          We've helped <b>{process.env.REACT_APP_FAMILY_COUNT}</b> families send
+          over <b>20,000</b> letters.
+        </p>
+      </div>
+      <div className="d-flex flex-row mt-3">
+        <Home className="blue" size={48} />
+        <p className="ml-3">
+          We serve all jails, facilities and detention centers.
+        </p>
+      </div>
+      <div className="d-flex flex-row mt-3">
+        <Heart className="blue" size={48} />
+        <p className="ml-3">
+          Our <b>award winning</b> nonprofit's help is 100% free.
+        </p>
+      </div>
+      <Button className="bg-blue" size="lg" block>
+        Get Started
+      </Button>
+    </div>
+  );
+};
+export default CtaCard;

src/components/app/cards/JobCard.tsx

@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "./JobCard.css";
 
-interface JobProps {
-  title: string;
-  description: string;
-  type: string;
-}
-
 const JobCard = ({ title, description, type }) => {
   const applyLink =
     type === "volunteer"

src/components/app/cards/SummaryCard.css

@@ -0,0 +1,23 @@
+.summary {
+  padding: 0px 0px 1em;
+  margin: 0px auto 2em;
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgb(240, 241, 242);
+  border-image: initial;
+  background: rgb(255, 255, 255);
+}
+
+.summary b {
+  font-size: 18px;
+  position: relative;
+  top: -0.8em;
+  background: rgb(255, 255, 255);
+  padding: 0.25em 1em;
+  margin: 0px 1em;
+}
+
+.summary p {
+  padding: 0px 2em;
+  margin: 1em 0px 1.5em;
+}

src/components/app/cards/SummaryCard.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+import "./SummaryCard.css";
+
+interface SummaryCardProps {
+  locality: string;
+}
+
+const SummaryCard: FunctionComponent<SummaryCardProps> = ({ locality }) => {
+  return (
+    <div className="summary">
+      <b>Summary</b>
+      <p>
+        Is your loved one in a facility in {locality}? With our mobile app, you
+        can write letters and send photos for free.
+      </p>
+    </div>
+  );
+};
+
+export default SummaryCard;

src/components/app/facepile/Facepile.css

@@ -0,0 +1,10 @@
+.facepile-img {
+  height: 25px;
+  width: 25px;
+  object-fit: cover;
+  margin-right: -0.5rem;
+}
+
+.facepile-caption {
+  font-size: 13px;
+}

src/components/app/facepile/Facepile.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Image from "react-bootstrap/Image";
+import "./Facepile.css";
+import { Link } from "react-router-dom";
+
+const Facepile = () => {
+  const images = [
+    require("../../../assets/ambassadors/Anna-Jones-California.png"),
+    require("../../../assets/ambassadors/Carolyn-Vargas-New-York.png"),
+    require("../../../assets/ambassadors/Connie-Mcbride-Virginia.png"),
+    require("../../../assets/ambassadors/Jessica-Ruiz-Oklahoma.png"),
+    require("../../../assets/ambassadors/Rachel-Wade-New-York.png"),
+  ];
+
+  return (
+    <div className="d-flex flex-row align-items-center">
+      {images.map((img) => (
+        <Image src={img} roundedCircle className="facepile-img" />
+      ))}
+      <span className="ml-3 facepile-caption">
+        <b>{process.env.REACT_APP_FAMILY_COUNT}</b> families have sent free
+        letters to their loved ones using Ameelio.{" "}
+        <Link className="blue facepile-caption" to="/">
+          Learn More
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default Facepile;

src/components/app/pages/FacilityGuide.tsx

@@ -0,0 +1,80 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+// import "./FacilityGuide.css";
+import { getGuideData } from "../../../utils/utils";
+import Spinner from "react-bootstrap/Spinner";
+import Facepile from "../facepile/Facepile";
+import SummaryCard from "../cards/SummaryCard";
+import AuthorCard from "../cards/AuthorCard";
+
+export interface FacilityItem {
+  state: string;
+  facility: string;
+  description: string;
+  address: string;
+  telephone: string;
+  mailing: string;
+  route: string;
+}
+
+const FacilityGuide = ({
+  location,
+}: RouteComponentProps<{}, any, FacilityItem | any>) => {
+  const [facility, setFacility] = useState(
+    location.state ? location.state.data : null
+  );
+  const [route, _] = useState(location.pathname.split("/")[2]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getGuideData(route, "facility");
+
+      setFacility(data.length > 0 ? data[0] : null);
+    }
+    if (!facility) {
+      fetchData();
+    }
+  }, [facility, route]);
+
+  // For this use case, dangerouslySetInnerHTML seems safe given that we are the only with edit access to the markup being passed down
+  // The flag is primarily to alert users of the vulnearbility to XSS scripting
+  // Source: https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
+  return (
+    <div className="d-flex flex-column align-items-center py-5">
+      {facility ? (
+        <div>
+          {" "}
+          <p className="lightgray">{facility.state}</p>
+          <h1
+            dangerouslySetInnerHTML={{ __html: facility.facility }}
+            className=""
+          />
+          <Facepile />
+          <hr />
+          <AuthorCard />
+          <div className="mt-5">
+            <SummaryCard locality={facility.facility} />
+          </div>
+          <section className="mb-3">
+            <h2>Physical Address</h2>
+            <p dangerouslySetInnerHTML={{ __html: facility.address }} />
+          </section>
+          <section className="mb-3">
+            <h2>Telephone</h2>
+            <p dangerouslySetInnerHTML={{ __html: facility.telephone }} />
+          </section>
+          <section className="mb-3">
+            <h2>Mailing Address</h2>
+            <div dangerouslySetInnerHTML={{ __html: facility.mailing }} />
+          </section>
+        </div>
+      ) : (
+        <div className="vh-100">
+          <Spinner animation="border" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FacilityGuide;