Merge pull request #281 from linesbetween/i267-more-scroll

Add scroll-down-when-finished feature feature to all applicable pages

Author: thadk

src/pages/prescreen-1b.tsx

@@ -57,21 +57,25 @@ interface Prescreen1bProps {
 }
 
 class Prescreen1b extends React.Component<Prescreen1bProps> {
+  private earningsSelectRef = React.createRef<HTMLDivElement>();
+  private howToRef = React.createRef<HTMLDivElement>();
+  private earningsRecordRef= React.createRef<HTMLDivElement>();
+
   constructor(props: Prescreen1bProps) {
-    super(props);
-    this.earningsSelectRef = React.createRef();
-    this.howToRef = React.createRef();
-    this.earningsRecordRef = React.createRef();
+    super(props);  
     this.showFileUpload = this.showFileUpload.bind(this);
     this.showManualTable = this.showManualTable.bind(this);
     this.scrollToElement = this.scrollToElement.bind(this);
   }
 
-  scrollToElement(ref) {
+  scrollToElement(ref: React.RefObject<HTMLDivElement>){
     if (gatsbyScrollWhenFinish) {
-      setTimeout(() => {
-        ref.current.scrollIntoView({ behavior: 'smooth', block: 'start'  });
-      }, 100)
+      const node = ref.current;
+        setTimeout(() => {
+          if(node) {
+          node.scrollIntoView({ behavior: 'smooth', block: 'start'});
+          }
+        }, 100);
     }
   }
 

src/pages/prescreen-1c.tsx

@@ -46,6 +46,25 @@ interface Prescreen1cProps {
 }
 
 class Prescreen1c extends React.Component<Prescreen1cProps> {
+
+  private pensionTypeRef = React.createRef<HTMLDivElement>();
+  private pensionAmountRef = React.createRef<HTMLDivElement>();
+
+  constructor(props: Prescreen1cProps) {
+    super(props);
+  }
+
+  scrollToElement(ref: React.RefObject<HTMLDivElement>) { 
+      setTimeout(() => { 
+        if(ref && ref.current) {
+        ref.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'});
+        }
+      },100);
+   
+  }
+
   handleDateAwardedChange = (value: Date) => {
     const {userStateActions: {setPensionDateAwarded}} = this.props
     setPensionDateAwarded(value)
@@ -106,6 +125,7 @@ class Prescreen1c extends React.Component<Prescreen1cProps> {
                   value="true"
                   checked={isEmploymentCovered === true}
                   onChange={this.handleSelection}
+                  onClick={() => this.scrollToElement(this.pensionTypeRef)}
                 />
                 <LabelText>Yes</LabelText>
               </AnswerBox>
@@ -134,22 +154,30 @@ class Prescreen1c extends React.Component<Prescreen1cProps> {
             </CardGlossaryContainer>
             {isEmploymentCovered && (
             <CardGlossaryContainer>
-              <Card>
+              <Card ref={this.pensionTypeRef}>
                 <QuestionText>
                 Do you have a pension or retirement account from
 the work you did that does not show up on your
 Social Security record?
                 </QuestionText>
                 <AnswerBox>
-                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.PENSION} onChange={this.handleSelection} checked={pensionOrRetirementAccount === PensionEnum.PENSION} />
+                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.PENSION}
+                  onChange={this.handleSelection}
+                  onClick={() => this.scrollToElement(this.pensionAmountRef)}
+                  checked={pensionOrRetirementAccount === PensionEnum.PENSION} />
                   <LabelText>Monthly pension</LabelText>
                 </AnswerBox>
                 <AnswerBox>
-                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.LUMPSUM} onChange={this.handleSelection} checked={pensionOrRetirementAccount === PensionEnum.LUMPSUM} />
+                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.LUMPSUM}
+                  onChange={this.handleSelection} 
+                  onClick={() => this.scrollToElement(this.pensionAmountRef)}
+                  checked={pensionOrRetirementAccount === PensionEnum.LUMPSUM} />
                   <LabelText>Retirement account</LabelText>
                 </AnswerBox>
                 <AnswerBox>
-                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.NONEOFABOVE} onChange={this.handleSelection} checked={pensionOrRetirementAccount === PensionEnum.NONEOFABOVE} />
+                  <RadioButton type="radio" name="pensionOrRetirementAccount" value={PensionEnum.NONEOFABOVE} 
+                  onChange={this.handleSelection} 
+                  checked={pensionOrRetirementAccount === PensionEnum.NONEOFABOVE} />
                   <LabelText>None of the above</LabelText>
                 </AnswerBox>
               </Card>
@@ -166,7 +194,7 @@ Social Security record?
               <>
               <Card>
                 <label>
-                  <QuestionText>
+                  <QuestionText ref={this.pensionAmountRef}>
                     Please enter the amount of your monthly pension or lump sum retirement account.
                   </QuestionText>
                   <AnswerInputDiscouragePlaceholder

src/pages/prescreen-1d.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useRef} from "react";
 import styled from "@emotion/styled";
 import DatePicker from "react-datepicker";
 import { colors } from "../constants";
@@ -107,6 +107,11 @@ const Prescreen1d = ({}) => {
     birthDate,
   } = useUserState();
 
+  const estimateTypeRef = useRef<HTMLDivElement>(null);
+  const wageIncreaseRef = useRef<HTMLDivElement>(null);
+  const trendRef = useRef<HTMLDivElement>(null);
+  const futureEarningRef = useRef<HTMLDivElement>(null);
+
   const handleSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectValueString = e.target.value;
     switch (e.target.name) {
@@ -127,6 +132,18 @@ const Prescreen1d = ({}) => {
         setExpectedPercentageWageIncrease(parseFloat(selectValueString));
     }
   };
+
+  const scrollToElement = (ref: React.RefObject<HTMLDivElement>) => {
+    const node = ref.current;
+    if(node){
+      setTimeout(() => { 
+        node.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'});
+      }, 100);
+    }
+  }
+
   return (
     <React.Fragment>
       <SEO title="Prescreen 1D" keywords={[`gatsby`, `application`, `react`]} />
@@ -152,7 +169,7 @@ const Prescreen1d = ({}) => {
               />
             </Card>
             <Card>
-              <QuestionText>
+              <QuestionText ref={estimateTypeRef}>
                 How would you like to estimate your future earnings?
               </QuestionText>
               <AnswerBox>
@@ -165,6 +182,7 @@ const Prescreen1d = ({}) => {
                     awiTrendOrManualPrediction ===
                     FutureAwiPredictionEnum.PERCENTAGE
                   }
+                  onClick={() => scrollToElement(wageIncreaseRef)} 
                 />
                 <LabelText>Use Percentage Only</LabelText>
               </AnswerBox>
@@ -177,6 +195,7 @@ const Prescreen1d = ({}) => {
                   checked={
                     awiTrendOrManualPrediction === FutureAwiPredictionEnum.TREND
                   }
+                  onClick={() => scrollToElement(wageIncreaseRef)}
                 />
                 <LabelText>
                   Use Percentage plus
@@ -193,6 +212,7 @@ const Prescreen1d = ({}) => {
                     awiTrendOrManualPrediction ===
                     FutureAwiPredictionEnum.MANUAL
                   }
+                  onClick={() => scrollToElement(futureEarningRef)}
                 />
                 <LabelText>Predict it myself</LabelText>
               </AnswerBox>
@@ -212,13 +232,14 @@ const Prescreen1d = ({}) => {
         {(awiTrendOrManualPrediction === FutureAwiPredictionEnum.PERCENTAGE ||
           awiTrendOrManualPrediction === FutureAwiPredictionEnum.TREND) && (
           <CardGlossaryContainer>
-            <Card>
+            <Card ref={wageIncreaseRef}>
               <QuestionText>Percent wage increase</QuestionText>
               <AnswerInputDiscouragePlaceholder
                 name="expectedPercentageWageIncrease"
                 defaultValue={expectedPercentageWageIncrease ?? undefined}
                 placeholder={"0.01"}
                 onChange={handleSelection}
+                // TODO: onFinish, scroll
               ></AnswerInputDiscouragePlaceholder>
               {isNaN(expectedPercentageWageIncrease) && <WarningBox>Please enter a number.</WarningBox>}
             </Card>
@@ -227,7 +248,7 @@ const Prescreen1d = ({}) => {
         {awiTrendOrManualPrediction &&
           awiTrendOrManualPrediction === FutureAwiPredictionEnum.TREND && (
             <CardGlossaryContainer>
-              <Card>
+              <Card ref={trendRef}>
                 <QuestionText>
                   Which trend would you like to use to predict your future
                   earnings?
@@ -303,7 +324,7 @@ const Prescreen1d = ({}) => {
         }
         {awiTrendOrManualPrediction === FutureAwiPredictionEnum.MANUAL && (
           <>
-            <Card>
+            <Card ref={futureEarningRef}>
               <label>
                 <QuestionText>Future Earnings</QuestionText>
               </label>