Fix merge conflicts

codeforboston · Feb 19, 2021 · 957b6e8 · 957b6e8
2 parents 7e66ab2 + 37f61bf
commit 957b6e8
Show file tree

Hide file tree

Showing 28 changed files with 667 additions and 374 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,6 +5,7 @@
         "es2021": true,
         "node": true
     },
+    "parser": "babel-eslint",
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended"
@@ -13,7 +14,8 @@
         "ecmaFeatures": {
             "jsx": true
         },
-        "ecmaVersion": 12
+        "ecmaVersion": 12,
+        "sourceType": "module"
     },
     "plugins": [
         "react"

diff --git a/README.md b/README.md
@@ -20,6 +20,8 @@ open http://127.0.0.1:3002/
 ## Deployment
 The `main` branch is automatically deployed to Code for Boston's AWS Elastic Beanstalk instance.
 
+## Issue Tracking
+Project Issues are tracked on [Trello](https://trello.com/b/BGnTPDSi/vaccinatema).
 
 ## Folder Structure
 ### `components`
@@ -31,4 +33,4 @@ The `main` branch is automatically deployed to Code for Boston's AWS Elastic Bea
 While we are in the process of porting the frontend to React, we keep the pages in a subdirectory, `dev`, so they can be accessed at `/dev/foo` while the existing EJS pages can still be accessed at `/foo`.
 
 ### `views`
-`views` contains EJS files that will eventually be replaced with the React pages from `pages`.
+`views` contains EJS files that will eventually be replaced with the React pages from `pages`.
diff --git a/app.js b/app.js
@@ -95,7 +95,7 @@ if (cluster.isMaster) {
 
         server.use('/robots.txt', function (req, res) {
             res.type('text/plain');
-            res.send('User-agent: *\nDisallow: /');
+            res.send('User-agent: *\nAllow: /');
         });
 
         server.get('/', function(req, res) {

diff --git a/components/Footer.js b/components/Footer.js
@@ -1,7 +1,8 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEnvelopeSquare } from "@fortawesome/free-solid-svg-icons";
-import { faTwitter, faFacebookSquare, faInstagram, faLinkedin } from "@fortawesome/free-brands-svg-icons";
-import { EmailShareButton, FacebookShareButton, LinkedinShareButton, TwitterShareButton, } from "react-share";
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelopeSquare } from '@fortawesome/free-solid-svg-icons';
+import { faTwitter, faFacebookSquare, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { EmailShareButton, FacebookShareButton, LinkedinShareButton, TwitterShareButton, } from 'react-share';
 
 import Logo from './subcomponents/Logo';
 import EmailLink from './subcomponents/EmailLink';
@@ -17,65 +18,66 @@ import EmailLink from './subcomponents/EmailLink';
 
 
 const Footer = () => {
-  return(
-    <div className="footer">
-      <div className="footer-box">
-        <Logo/>
-        <div className="logo-sub-text">
+    return(
+        <div className="footer">
+            <div className="footer-box">
+                <Logo/>
+                <div className="logo-sub-text">
           Made by volunteers
-          <br/>
+                    <br/>
           with <span>❤</span> in Boston
-        </div>
-        <h4 className="social-header">Share</h4>
-        <div className="social-container">
-          <TwitterShareButton url="http://vaccinatema.com/"
-                              hashtags={["covid19vaccine", "GetTheShot", "vaccinateMA"]} via="ma_covid">
-            <FontAwesomeIcon icon={faTwitter} />
-          </TwitterShareButton>
-          <FacebookShareButton url="http://vaccinatema.com/"
-                               hashtag="#GetTheShot">
-            <FontAwesomeIcon icon={faFacebookSquare} />
-          </FacebookShareButton>
-          <a href="https://www.instagram.com/vaccinate_ma/" target="_blank">
-            <FontAwesomeIcon icon={faInstagram} />
-          </a>
-          <EmailShareButton url="http://vaccinatema.com/"
-                            subject="Helping Massachusetts Residents Get Vaccinated"
-                            body="Check COVID-19 vaccine availability from 100+ local and retail sites across the
+                </div>
+                <h4 className="social-header">Share</h4>
+                <div className="social-container">
+                    <TwitterShareButton url="http://vaccinatema.com/"
+                        hashtags={['covid19vaccine', 'GetTheShot', 'vaccinateMA']} via="ma_covid">
+                        <FontAwesomeIcon icon={faTwitter} />
+                    </TwitterShareButton>
+                    <FacebookShareButton url="http://vaccinatema.com/"
+                        hashtag="#GetTheShot">
+                        <FontAwesomeIcon icon={faFacebookSquare} />
+                    </FacebookShareButton>
+                    <a href="https://www.instagram.com/vaccinate_ma/" target="_blank" rel="noreferrer">
+                        <FontAwesomeIcon icon={faInstagram} />
+                    </a>
+                    <EmailShareButton url="http://vaccinatema.com/"
+                        subject="Helping Massachusetts Residents Get Vaccinated"
+                        body="Check COVID-19 vaccine availability from 100+ local and retail sites across the
                             commonwealth.">
-            <FontAwesomeIcon icon={faEnvelopeSquare} />
-          </EmailShareButton>
-          <LinkedinShareButton url="http://vaccinatema.com/">
-            <FontAwesomeIcon icon={faLinkedin} />
-          </LinkedinShareButton>
-        </div>
-      </div>
-      <div className="footer-box">
-        <h4>Get involved</h4>
-        <p>Email us at{" "}<EmailLink/>{" "}if you'd like to help out.</p>
-        <h4>Feedback</h4>
-        <p>
+                        <FontAwesomeIcon icon={faEnvelopeSquare} />
+                    </EmailShareButton>
+                    <LinkedinShareButton url="http://vaccinatema.com/">
+                        <FontAwesomeIcon icon={faLinkedin} />
+                    </LinkedinShareButton>
+                </div>
+            </div>
+            <div className="footer-box">
+                <h4>Get involved</h4>
+                <p>Email us at{' '}<EmailLink/>{' '}if you&apos;d like to help out.</p>
+                <h4>Feedback</h4>
+                <p>
           Like the site? Found a bug? Have a feature idea?
-          Get a vaccine from info you found here?{" "}
-          <a
-            href="https://docs.google.com/forms/d/e/1FAIpQLSel9cjb4X0Zv5zuygWx9UnXpXrP2INJTrOW7j9MNXNdv7lKnw/viewform"
-            target="_blank"
-          >
+          Get a vaccine from info you found here?{' '}
+                    <a
+                        href="https://docs.google.com/forms/d/e/1FAIpQLSel9cjb4X0Zv5zuygWx9UnXpXrP2INJTrOW7j9MNXNdv7lKnw/viewform"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
             Let us know on this feedback form
-          </a>
-        </p>
-      </div>
-      <div className="footer-box">
-        <h4>Disclaimer</h4>
-        <p>
+                    </a>
+                </p>
+            </div>
+            <div className="footer-box">
+                <h4>Disclaimer</h4>
+                <p>
           This site was put together by volunteers using our best efforts to assemble readily available data from
           public sources. This site does not provide medical advice, nor does it provide any type of technical advice.
           vaccinatema.com is not responsible for any errors or omissions.
-        </p>
-      </div>
+                </p>
+            </div>
 
-    </div>
-  );
-}
+        </div>
+    );
+};
 
 export default Footer;
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,19 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
 import Seo from './Seo';
 import NavHeader from './NavHeader';
 import Footer from './Footer';
 
 export default function Layout({
-  children,
-  pageTitle = '',
+    children,
+    pageTitle = '',
 }) {
-  return (
-    <div className="container">
-        <Seo pageTitle={pageTitle} />
-        <NavHeader />
-        <div className="main-content">
-            {children}
+    return (
+        <div className="container">
+            <Seo pageTitle={pageTitle} />
+            <NavHeader />
+            <div className="main-content">
+                {children}
+            </div>
+            <Footer />
         </div>
-        <Footer />
-    </div>
-  )
-}
+    );
+}
+
+Layout.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ]),
+    pageTitle: PropTypes.string,
+};
diff --git a/components/NavHeader.js b/components/NavHeader.js
@@ -7,38 +7,38 @@ import Logo from './subcomponents/Logo';
 // TODO: remove "/dev" after promoting to root (in hrefs and renderLinkClass)
 
 const NavHeader = () => {
-  const router = useRouter()
+    const router = useRouter();
 
-  const renderLinkClass = (nav) => {
-    const path = nav === "home" ? "/dev" : nav;
-    if (router.pathname.match(`${path}$`)) {
-      return "active";
-    } else {
-      return "";
-    }
-  };
+    const renderLinkClass = (nav) => {
+        const path = nav === 'home' ? '/dev' : nav;
+        if (router.pathname.match(`${path}$`)) {
+            return 'active';
+        } else {
+            return '';
+        }
+    };
 
-  return(
-    <div className="header">
-      <Navbar collapseOnSelect expand="lg">
-        <Navbar.Brand href="#"><Logo/></Navbar.Brand>
-        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-        <Navbar.Collapse id="responsive-navbar-nav">
-          <Nav className="mr-auto">
-            <NavDropdown title="Language" id="collasible-nav-dropdown">
-              <NavDropdown.Item>Coming Soon</NavDropdown.Item>
-            </NavDropdown>
-          </Nav>
-          <Nav>
-            <Nav.Link className={renderLinkClass("home")} href="/dev">Search</Nav.Link>
-            <Nav.Link className={renderLinkClass("eligibility")} href="/dev/eligibility">Eligibility</Nav.Link>
-            <Nav.Link className={renderLinkClass("FAQ")} href="/dev/FAQ">FAQ</Nav.Link>
-            <Nav.Link className={renderLinkClass("press")} href="/dev/press">Press</Nav.Link>
-          </Nav>
-        </Navbar.Collapse>
-      </Navbar>
-    </div>
-  );
-}
+    return(
+        <div className="header">
+            <Navbar collapseOnSelect expand="lg">
+                <Navbar.Brand href="#"><Logo/></Navbar.Brand>
+                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+                <Navbar.Collapse id="responsive-navbar-nav">
+                    <Nav className="mr-auto">
+                        <NavDropdown title="Language" id="collasible-nav-dropdown">
+                            <NavDropdown.Item>Coming Soon</NavDropdown.Item>
+                        </NavDropdown>
+                    </Nav>
+                    <Nav>
+                        <Nav.Link className={renderLinkClass('home')} href="/dev">Search</Nav.Link>
+                        <Nav.Link className={renderLinkClass('eligibility')} href="/dev/eligibility">Eligibility</Nav.Link>
+                        <Nav.Link className={renderLinkClass('FAQ')} href="/dev/FAQ">FAQ</Nav.Link>
+                        <Nav.Link className={renderLinkClass('press')} href="/dev/press">Press</Nav.Link>
+                    </Nav>
+                </Navbar.Collapse>
+            </Navbar>
+        </div>
+    );
+};
 
 export default NavHeader;
diff --git a/components/Pin.js b/components/Pin.js
@@ -1,10 +1,12 @@
+import React from 'react';
+
 const Pin = () => (
-    <svg height="18" viewBox="0 0 21 21" width="18" xmlns="http://www.w3.org/2000/svg" class="mr-1">
-        <g fill="none" fill-rule="evenodd" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 2)">
+    <svg height="18" viewBox="0 0 21 21" width="18" xmlns="http://www.w3.org/2000/svg" className="mr-1">
+        <g fill="none" fillRule="evenodd" stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" transform="translate(4 2)">
             <path d="m6.5 16.5407715c4-4.4500928 6-7.78586659 6-10.00732153 0-3.33218241-2.6862915-6.03344997-6-6.03344997s-6 2.70126756-6 6.03344997c0 2.22145494 2 5.55722873 6 10.00732153z"></path>
             <circle cx="6.5" cy="6.5" r="2.5"></circle>
         </g>
     </svg>
-)
+);
 
 export default Pin;
diff --git a/components/Seo.js b/components/Seo.js
@@ -1,16 +1,22 @@
-import Head from 'next/head'
+import React from 'react';
+import Head from 'next/head';
+import PropTypes from 'prop-types';
 
 export default function SEO({ pageTitle }) {
-  return (
-    <Head>
-      <title>{`${pageTitle} | Vaccinate MA`}</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta name="description" content="A site to help Massachusetts residents find a vaccine" />
-      <meta name="author" content="MA Volunteers" />
-      <link rel="shortcut icon" type="image/x-icon" href="ma_logo.png" />
-      <meta property="og:title" content="Helping Massachusetts residents get vaccinated" />
-      <meta property="og:image" content="ma_logo.png"/>
-    </Head>
-  )
+    return (
+        <Head>
+            <title>{`${pageTitle} | Vaccinate MA`}</title>
+            <meta charSet="utf-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <meta name="description" content="A site to help Massachusetts residents find a vaccine" />
+            <meta name="author" content="MA Volunteers" />
+            <link rel="shortcut icon" type="image/x-icon" href="ma_logo.png" />
+            <meta property="og:title" content="Helping Massachusetts residents get vaccinated" />
+            <meta property="og:image" content="ma_logo.png"/>
+        </Head>
+    );
 }
+
+SEO.propTypes = {
+    pageTitle: PropTypes.string,
+};
diff --git a/components/Site.js b/components/Site.js
@@ -1,24 +1,37 @@
-import Pin from "./Pin"
+import React from 'react';
+import PropType from 'prop-types';
+
+import Pin from './Pin';
 
 const Site = ({data}) => (
     <li className="list-group-item">
-    <h4>{data.locationName}</h4>
-    <div>
-        <div className="site_address mb-2 flex flex-row items-center">
-            <Pin />
-            <a id="site_address_1" className="underline" href={"https://maps.google.com/?q=" + data.address} target="_blank">{data.address}</a>
-        </div>
+        <h4>{data.locationName}</h4>
         <div>
-            <div id="latest_report_1">Latest report: {data.lastUpdated}</div>
-            <dt>Details</dt>
-            <dd id="details_1">{data.populationsServed}</dd>
-            <dt>Availability</dt>
-            <dd id="latest_info_1">{data.vaccineAvailability}</dd>
-            <dt>Book Now</dt>
-            <dd id="book_1">{data.bookAppointmentInformation}</dd>
+            <div className="site_address mb-2 flex flex-row items-center">
+                <Pin />
+                <a id="site_address_1" className="underline" href={'https://maps.google.com/?q=' + data.address} target="_blank" rel="noreferrer">{data.address}</a>
+            </div>
+            <div>
+                <div id="latest_report_1">Latest report: {data.lastUpdated}</div>
+                <dt>Details</dt>
+                <dd id="details_1">{data.populationsServed}</dd>
+                <dt>Availability</dt>
+                <dd id="latest_info_1">{data.vaccineAvailability}</dd>
+                <dt>Book Now</dt>
+                <dd id="book_1">{data.bookAppointmentInformation}</dd>
+            </div>
         </div>
-    </div>
     </li>
 );
 
 export default Site;
+
+Site.propTypes = {
+    data: {
+        address: PropType.string,
+        lastUpdated: PropType.string,
+        populationsServed: PropType.string,
+        vaccineAvailability: PropType.string,
+        bookAppointmentInformation: PropType.string,
+    },
+};