Work session 12/16: Address some bugs in form submit behavior

Co-authored-by: wertheis <[email protected]> Co-authored-by: James Calingo <[email protected]> Co-authored-by: Yulia Sam <[email protected]> Co-authored-by: Nick Griffiths <[email protected]>
codeforboston · Dec 17, 2024 · 99feebe · 99feebe
1 parent a699934
commit 99feebe
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 27 deletions.
diff --git a/src/AddressBox.tsx b/src/AddressBox.tsx
@@ -1,5 +1,5 @@
 import { APIProvider, useMapsLibrary } from "@vis.gl/react-google-maps";
-import { CSSProperties, useEffect, useRef } from "react";
+import { CSSProperties, forwardRef, useEffect, useRef } from "react";
 
 type Props = {
     style?: CSSProperties,
@@ -8,12 +8,13 @@ type Props = {
     value?: string
     onChange?: React.ChangeEventHandler<HTMLInputElement>
     onPlaceChanged?: (place: google.maps.places.PlaceResult) => void
+    name?: string
 }
 
-const AutocompleteInput = (props_: Props) => {
+const AutocompleteInput = forwardRef<HTMLInputElement, Props>((props_, ref) => {
     const { onPlaceChanged, ...props } = props_;
     const places = useMapsLibrary('places');
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLInputElement | undefined>(undefined);
 
     useEffect(() => {
         if (!places || !inputRef.current) 
@@ -24,31 +25,57 @@ const AutocompleteInput = (props_: Props) => {
             strictBounds: true,
             bounds: {
                 south: 42.23286,
-                east: -71.22737,
+                west: -71.22737,
                 north: 42.50599,
-                west: -70.89242
+                east: -70.89242
             }
         });
 
         // 'place_changed' event fires when user selects a place from the drop-down list of autosuggestions. For reference, see:
         // https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed
         p.addListener('place_changed', () => {
+            // eslint-disable-next-line no-debugger
+            // debugger;
+
             const place = p.getPlace();
             onPlaceChanged?.(place);
-        })
+        });
     }, [places, onPlaceChanged]);
 
+    // const onKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback((event) => {
+    //     // check that key is ENTER
+    //     if (event.key === 'Enter' ) {
+    //         // eslint-disable-next-line no-debugger
+    //         const autocompleteContainers = document.getElementsByClassName("pac-container")
+    //         console.log(autocompleteContainers);
+    //          if (autocompleteContainers[0]?.computedStyleMap().get('display') === 'block') {
+    //             event.preventDefault();
+    //             event.stopPropagation();
+    //          }
+
+    //         // check that autocomplete is showing
+    //     }
+    // }, [])
+
     return (
-        <input ref={inputRef} {...props} />
+        <input ref={(input) => {
+            inputRef.current = input || undefined;
+            if (ref) {
+                if (typeof ref === 'function')
+                    ref(input);
+                else
+                    ref.current = input
+            }
+        }} {...props} />
     )
-}
+})
 
-const AddressBox = (props: Props) => {
+const AddressBox = forwardRef<HTMLInputElement, Props>((props, ref) => {
     return (
         <APIProvider apiKey="AIzaSyDwmsT7zb6teXmmQj37OcwCKtP4S8R26Ks">
-            <AutocompleteInput {...props} />
+            <AutocompleteInput {...props} ref={ref} />
         </APIProvider>
     )
-}
+})
 
 export default AddressBox;
diff --git a/src/EligiblePage.tsx b/src/EligiblePage.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 
 type Props = React.PropsWithChildren<object>;
 
+const JoinTodayUrl = 'https://app.loanspq.com/xa/xpressApp.aspx?enc=Kw21Wblm1yxpjJabdoZaD-Gr_IHl-C8fchODgpSxXjXxSPGFrEl4jSeBYt4aHlqZ_hVg_J5c4ST0o0u4NRrvqXWvff49QjYj346K93kVe7U&_gl=1*se66a5*_gcl_au*MTQ3NTg0NDEyLjE3MTc0MTY3OTI.*_ga*MTA5OTEzNjYxNy4xNzE3NDE2Nzky*_ga_TW1V1ZP5ET*MTcxNzQyNzE3OC4zLjEuMTcxNzQzMDU3Ni4wLjAuMA';
+const FFAUrl = 'https://financialfitnessassociation.org'
+
 const EligiblePage: React.FC<Props> = () => {
     return (
         <>
@@ -20,8 +23,8 @@ const EligiblePage: React.FC<Props> = () => {
                 <li>Your mobile phone</li>
             </ul>
             <div className='elig-button-wrapper'>
-            <button className='elig-button' type='button' onClick={() => location.href = "#"}>{'Join Today! >'}</button>
-            <a href='#' className='elig-a'>Learn More About Memberships</a>
+            <button className='elig-button' type='button'>{'Join Today! >'}</button>
+            <a href='https://harvardfcu.org/membership/join/' className='elig-a'>Learn More About Memberships</a>
         </div>
         </>
     )

diff --git a/src/NotEligiblePage.tsx b/src/NotEligiblePage.tsx
@@ -25,10 +25,11 @@ const NotEligiblePage: React.FC<Props> = (props: Props) => {
             <div>
             <h4 className='elig-h4'>Financial Fitness Association</h4>
             <p className='elig-p'>
-                If you become a member of the Financial Fitness Association, then you automatically qualify for membership at Harvard FCY. Harvard FCU will even cover the $8 annual membership fee for the first year!
+                If you become a member of the Financial Fitness Association, then you automatically qualify for membership at Harvard FCU. Harvard FCU will even cover the $8 annual membership fee for the first year!
             </p>
             <button className={'elig-button elig-button-secondary'} type='button' onClick={() => location.href = '#'}>
                 {'FFA Learn More >'}
+                {/* https://financialfitnessassociation.org */}
             </button>
             </div>
 

diff --git a/src/SearchPage.tsx b/src/SearchPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { geocode, lookupCoords } from './util/census';
 import { CensusApiResponse, EligibilityAppStates } from './types';
 import EligibleTracts from './data/tracts';
@@ -14,15 +14,16 @@ type Props = {
 
 const SearchPage: React.FC<Props> = (props: Props) => {
   const { setPageState } = props;
-  const [inputValue, setInputValue] = useState<string>("");
+  // const [inputValue, setInputValue] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null)
   // const [censusApiResponse, setCensusApiResponse] = useState<CensusApiResponse | null>(null);
   // const addressIsEligible = !!(censusApiResponse && findEligibleAddress(censusApiResponse));
 
   // Update the input value on text change
-  const handleInputChange = (newValue: string) => {
-    console.log(newValue);
-    setInputValue(newValue);
-  }
+  // const handleInputChange = (newValue: string) => {
+  //   console.log(newValue);
+  //   setInputValue(newValue);
+  // }
 
   // Update the input value on fetching the address
   const handlePlaceChange = useCallback((place: google.maps.places.PlaceResult) => {
@@ -33,21 +34,25 @@ const SearchPage: React.FC<Props> = (props: Props) => {
     place.address_components?.forEach(component => {
       if (addressComponentsToDisplay.includes(component.types[0])) addressPieces.push(component.long_name);
     })
-    setInputValue(addressPieces.join(', '));
+    if (inputRef.current){
+        inputRef.current.value = addressPieces.join(', ');
+      }
+    // setInputValue(addressPieces.join(', '));
   }, [])
 
   // Handle the form submission for geocoding request
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
-    if (!inputValue) {
+    const address = inputRef.current?.value || ''
+    if (!address) {
       // alert("Please input an address.")
       setPageState("no_address");
       return
     }
     setPageState("loading");
     try {
       // Retrieve geocoding data for the given address
-      const censusApiResponse = await geocode({ address: inputValue });
+      const censusApiResponse = await geocode({ address });
       // Find out if address is eligible and update the page state
       // TO-DO: refactor into a function (see Use My Location)
       const addressIsEligible = !!(censusApiResponse && findEligibleAddress(censusApiResponse));
@@ -88,12 +93,13 @@ const SearchPage: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} >
         <label className='elig-label'>Street Address</label>
         <AddressBox className='elig-input' 
-                    value={inputValue} placeholder='Enter your address here...' 
-                    onChange={event => handleInputChange(event.target.value)} 
-                    onPlaceChanged={handlePlaceChange} />
+                    placeholder='Enter your address here...' 
+                    onPlaceChanged={handlePlaceChange}
+                    name='address'
+                    ref={inputRef} />
         <div className='elig-button-wrapper'>
           <button className='elig-button' type='submit'>Search Address</button>
           <button className={'elig-button elig-button-secondary'} type='button'