Custom date range limit, About page scroll button, update ISSUES_URL

server/src/settings.example.cfg

@@ -43,6 +43,6 @@ QUERY_SIZE = 50000
 
 [Github]
 TOKEN = __$GITHUB_TOKEN__
-ISSUES_URL = https://api.github.com/repos/hackforla/311-data/issues
+ISSUES_URL = https://api.github.com/repos/hackforla/311-data-support/issues
 PROJECT_URL = __$GITHUB_PROJECT_URL__
 SHA = __$GITHUB_SHA__

src/components/about/About.jsx

@@ -5,6 +5,7 @@ import { disableSplashPage } from '@reducers/ui';
 
 import { Link } from 'react-router-dom';
 import Button from '@components/common/Button';
+import Icon from '@components/common/Icon';
 
 import HeroImage from './HeroImage';
 import WhatIs311Data from './WhatIs311Data';
@@ -13,16 +14,36 @@ import HowItWorks from './HowItWorks';
 
 const About = ({
   disableSplash,
-}) => (
-  <div className="about-311">
-    <HeroImage />
-    <WhatIs311Data />
-    <HowItWorks />
-    <Link to="/">
-      <Button id="about-311" label="Let's Get Started" handleClick={disableSplash} />
-    </Link>
-  </div>
-);
+}) => {
+  const aboutRef = React.createRef();
+
+  const scrollTo = ref => {
+    ref.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    });
+  };
+
+  return (
+    <div className="about-311">
+      <HeroImage />
+      <div className="about-scroll-wrapper bounce">
+        <Icon
+          id="about-scroll"
+          icon="arrow-alt-circle-down"
+          handleClick={() => scrollTo(aboutRef)}
+          size="large"
+          iconSize="3x"
+        />
+      </div>
+      <WhatIs311Data ref={aboutRef} />
+      <HowItWorks />
+      <Link to="/">
+        <Button id="about-311" label="Let's Get Started" handleClick={disableSplash} />
+      </Link>
+    </div>
+  );
+};
 
 
 const mapDispatchToProps = dispatch => ({

src/components/about/WhatIs311Data.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import EmpowerLA from '@assets/empowerla.png';
 import HackforLA from '@assets/hackforla.png';
 import CFALogo from '@assets/cfa-logo.png';
 
-const WhatIs311Data = () => (
-  <div className="main-text">
+// eslint-disable-next-line react/display-name
+const WhatIs311Data = forwardRef((props, ref) => (
+  <div className="main-text" ref={ref}>
     <h1>What is 311 Data?</h1>
     <p>
       Each day, Los Angelenos report thousands of 311 requests all across LA to resolve
@@ -13,7 +14,7 @@ const WhatIs311Data = () => (
       Department of Transportation. The agency responds to the request, addresses it, and
       then closes it once it is fixed. The expansive amount of data associated with these
       311 requests is available online. However, it is difficult to make actionable at the
-      neighbourhood level.
+      neighborhood level.
     </p>
     <div className="logos columns level">
       <div className="column level-item">
@@ -49,6 +50,6 @@ const WhatIs311Data = () => (
       application built and maintained by volunteers throughout our community.
     </p>
   </div>
-);
+));
 
 export default WhatIs311Data;

src/components/main/menu/DateSelector/DateRangePicker.jsx

@@ -43,6 +43,24 @@ const DateRangePicker = ({
     setEndError(false);
   };
 
+  const calcMaxDate = start => {
+    const today = moment();
+    if (start) {
+      const maxDate = moment(start).add(1, 'year');
+      return maxDate.isBefore(today) ? maxDate.toDate() : today.toDate();
+    }
+    return today.toDate();
+  };
+
+  const calcMinDate = end => {
+    const min = moment('01/01/2015', 'MM/DD/YYYY');
+    if (end) {
+      const minDate = moment(end).subtract(1, 'year');
+      return minDate.isAfter(min) ? minDate.toDate() : min.toDate();
+    }
+    return min.toDate();
+  };
+
   return (
     <div
       id={id}
@@ -51,12 +69,20 @@ const DateRangePicker = ({
     >
       {/* ---------- Modal Card Header ---------- */}
       <header className="modal-card-head">
-        <h1>{ title }</h1>
+        <div className="modal-title has-text is-size-4 has-text-weight-bold">
+          { title }
+          <div className="has-text is-size-7 has-text-weight-normal">*limited to 1-year timespan</div>
+        </div>
         <Button
           id="date-picker-close-button"
           className="picker-close-button"
           icon="times"
-          handleClick={() => { clearErrors(); handleClick(); }}
+          handleClick={() => {
+            clearErrors();
+            handleClick();
+            updateLocalStart(null);
+            updateLocalEnd(null);
+          }}
         />
       </header>
 
@@ -73,8 +99,8 @@ const DateRangePicker = ({
                 selected={startDate}
                 startDate={startDate}
                 endDate={endDate}
-                minDate={moment('01/01/2015', 'MM/DD/YYYY').toDate()}
-                maxDate={moment().toDate()}
+                minDate={startDate || calcMinDate(endDate)}
+                maxDate={endDate || moment().toDate()}
                 selectsStart
                 showYearDropdown
                 showMonthDropdown
@@ -100,8 +126,8 @@ const DateRangePicker = ({
                 selected={endDate}
                 startDate={endDate}
                 endDate={endDate}
-                minDate={startDate}
-                maxDate={moment().toDate()}
+                minDate={startDate || calcMinDate(endDate)}
+                maxDate={endDate || calcMaxDate(startDate)}
                 showYearDropdown
                 showMonthDropdown
                 selectsEnd

src/styles/about/_about.scss

@@ -6,6 +6,44 @@
   padding-bottom: 100px;
   overflow-y: auto;
 
+  .about-scroll-wrapper {
+    border-radius: 50%;
+    background-color: $brand-text-color;
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    bottom: 25px;
+    left: calc(50% - 24px);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.50);
+
+    #icon-about-scroll {
+      cursor: pointer;
+      color: $brand-bg-color;
+    }
+
+    &.bounce {
+      animation: bounce 2s;
+      animation-delay: 2s;
+      animation-iteration-count: 3;
+    }
+
+    @keyframes bounce {
+      0%,
+      25%,
+      50%,
+      75%,
+      100% {
+        transform: translateY(0);
+      }
+      40% {
+        transform: translateY(-20px);
+      }
+      60% {
+        transform: translateY(-12px);
+      }
+    }
+  }
+
   #btn-about-311 {
     background-color: $brand-cta1-color;
     color: $brand-text-color;

src/styles/about/_howitworks.scss

@@ -1,5 +1,5 @@
 .how-it-works{
-  margin: 75px 15em 5em 15em;
+  margin: 35px 15em 35px 15em;
 
   h1 {
     text-align: center;

src/styles/menu/_daterangepicker.scss

@@ -5,13 +5,14 @@
   box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.5);
 
   .modal-card-head {
-    height: 50px;
+    height: 70px;
     border: none;
     border-radius: 0;
 
-    h1 {
-      margin-left: 18px;
+    .modal-title {
+      font-family: $brand-heading-family;
       margin-top: 18px;
+      margin-left: 18px;
     }
 
     .picker-close-button {