merge function component fixes

codeforboston · Jul 14, 2021 · 0aab915 · 0aab915
1 parent 6311ffd
commit 0aab915
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/src/pages/prescreen-1a.tsx b/src/pages/prescreen-1a.tsx
@@ -6,7 +6,7 @@ import * as ObsFuncs from "../library/observable-functions";
 import { colors } from "../constants";
 import dayjs from "dayjs";
 
-import { UserState, useUserState } from "../library/user-state-context";
+import { useUserState } from "../library/user-state-context";
 import { useUserStateActions } from "../library/user-state-actions-context";
 
 import { TextBlock, SEO, Card, WarningBox, H2 } from "../components";
@@ -28,11 +28,6 @@ const H4 = styled.h4`
   margin: 5px 0;
 `;
 
-interface Prescreen1aProps {
-  userState: UserState;
-  userStateActions: UserStateActions;
-}
-
 const Prescreen1a = () => {
   const userState = useUserState();
   const userStateActions = useUserStateActions();
@@ -51,6 +46,11 @@ const Prescreen1a = () => {
       userStateActions.setYear62(year62);
       let fullRetirementAge = 0;
 
+      /*
+        TODO: use the getFullRetirementAge from whichever calculator is picked
+       so we dont need to update the tables by hand
+       use the raw value because of the delay in setting local/session storage.
+       */
       fullRetirementAge = await ObsFuncs.getFullRetirementDateSimple(value);
       setRetireDate(value, fullRetirementAge);
     } else if (value === null) {
@@ -60,6 +60,8 @@ const Prescreen1a = () => {
   };
 
   const setRetireDate = async (dateOfBirth: Date, retireAge: number) => {
+    /* dayjs cannot .add() fractional years that we put into the tables 
+    but only months, so let us use rounded months. */
     const retireAgeInRoundedMonths = Math.round((await retireAge) * 12);
     const retireDate = dayjs(dateOfBirth).add(retireAgeInRoundedMonths, "month").toDate();
     userStateActions.setRetireDate(retireDate);
@@ -69,7 +71,7 @@ const Prescreen1a = () => {
     <div>
       <SEO title='Pre-Screen 1a' keywords={[`gatsby`, `application`, `react`]} />
       <H2>Step 1: Background Information</H2>
-      <TextBlock>To calculate your Social Security benefit, please input the following dates.</TextBlock>
+      <TextBlock>To calculate your Social Security benefit, please provide your birthdate.</TextBlock>
       <Card>
         <H4>Birthdate</H4>
         <StyledDatePicker
@@ -117,8 +119,4 @@ const Prescreen1a = () => {
   );
 };
 
-export default function Prescreen1aWrapper() {
-  const userStateActions = useUserStateActions();
-  const userState = useUserState();
-  return <Prescreen1a userState={userState} userStateActions={userStateActions} />;
-}
+export default Prescreen1a;
diff --git a/src/pages/prescreen-1b.tsx b/src/pages/prescreen-1b.tsx
@@ -43,20 +43,14 @@ const Link = styled.a`
   overflow-wrap: break-word;
 `;
 
-interface Prescreen1bProps {
-  userState: UserState;
-  userStateActions: UserStateActions;
-}
 
-function Prescreen1b() {
+const Prescreen1b = () => {
   const earningsSelectRef = React.createRef<HTMLDivElement>();
   const howToRef = React.createRef<HTMLDivElement>();
   const earningsRecordRef = React.createRef<HTMLDivElement>();
 
-  const {
-    userState: { birthDate, haveEarnings, haveSSAAccount, earningsFormat },
-    userStateActions: { setHaveEarnings, setHaveSSAAccount, setEarningsFormat },
-  } = {userState: useUserState(), userStateActions: useUserStateActions()} ; 
+  const { birthDate, haveEarnings, haveSSAAccount, earningsFormat } = useUserState();
+  const {  setHaveEarnings, setHaveSSAAccount, setEarningsFormat } = useUserStateActions();
 
   function scrollToElement(ref: React.RefObject<HTMLDivElement>) {
     if (gatsbyScrollWhenFinish) {
@@ -322,8 +316,4 @@ function Prescreen1b() {
   );
 }
 
-export default function Prescreen1bWrapper(): JSX.Element {
-  const userState = useUserState();
-  const userStateActions = useUserStateActions();
-  return <Prescreen1b userState={userState} userStateActions={userStateActions} />;
-}
+export default Prescreen1b;
diff --git a/src/pages/prescreen-1c.tsx b/src/pages/prescreen-1c.tsx
@@ -16,8 +16,8 @@ import {
   ContentContainer,
   AnswerInputDiscouragePlaceholder,
 } from "../components";
-import { PensionEnum, useUserState, UserState } from "../library/user-state-context";
-import { useUserStateActions, UserStateActions } from "../library/user-state-actions-context";
+import { PensionEnum, useUserState } from "../library/user-state-context";
+import { useUserStateActions } from "../library/user-state-actions-context";
 import { gatsbyScrollWhenFinish } from "../constants/config";
 
 const StyledDatePicker = styled(DatePicker)`
@@ -41,24 +41,20 @@ const TopQuestionAndTitle = styled.div`
   }
 `;
 
-interface Prescreen1cProps {
-  userState: UserState;
-  userStateActions: UserStateActions;
-}
-
-const Prescreen1c = (props: Prescreen1cProps) => {
+const Prescreen1c = () => {
   const pensionTypeRef = React.createRef<HTMLDivElement>();
   const pensionAmountRef = React.createRef<HTMLDivElement>();
 
+  const { isEmploymentCovered,
+    pensionDateAwarded,
+    pensionAmount,
+    pensionOrRetirementAccount } = useUserState();
   const {
-    userState: { isEmploymentCovered, pensionDateAwarded, pensionAmount, pensionOrRetirementAccount },
-    userStateActions: {
-      setPensionDateAwarded,
-      setIsEmploymentCovered,
-      setPensionOrRetirementAccount,
-      setPensionAmount,
-    },
-  } = props;
+    setPensionDateAwarded,
+    setIsEmploymentCovered,
+    setPensionOrRetirementAccount,
+    setPensionAmount,
+  } = useUserStateActions();
 
   function scrollToElement(ref: React.RefObject<HTMLDivElement>) {
     if (gatsbyScrollWhenFinish) {
@@ -220,8 +216,4 @@ const Prescreen1c = (props: Prescreen1cProps) => {
   );
 };
 
-export default function Prescreen1cWrapper(): JSX.Element {
-  const userState = useUserState();
-  const userStateActions = useUserStateActions();
-  return <Prescreen1c userState={userState} userStateActions={userStateActions} />;
-}
+export default Prescreen1c;