Merge pull request #18 from IuliiaSam/search-page-bug-fixes

Hack Night 2/11/25

src/AddressBox.tsx

@@ -22,7 +22,7 @@ const AutocompleteInput = forwardRef<HTMLInputElement, Props>((props_, ref) => {
             return;
 
         // instantiate a Place prediction widget that attaches to input field
-        const p = new places.Autocomplete(inputRef.current, {
+        const placesWidget = new places.Autocomplete(inputRef.current, {
             strictBounds: true,
             bounds: {
                 south: 42.23286,
@@ -34,11 +34,8 @@ const AutocompleteInput = forwardRef<HTMLInputElement, Props>((props_, ref) => {
 
         // '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();
+        placesWidget.addListener('place_changed', () => {
+            const place = placesWidget.getPlace();
             onPlaceChanged?.(place);
         });
     }, [places, onPlaceChanged]);
@@ -50,14 +47,15 @@ const AutocompleteInput = forwardRef<HTMLInputElement, Props>((props_, ref) => {
                 if (typeof ref === 'function')
                     ref(input);
                 else
-                    ref.current = input
+                    ref.current = input;
             }
         }} {...props} />
     )
 })
 
 const AddressBox = forwardRef<HTMLInputElement, Props>((props, ref) => {
     return (
+        // TO-DO: create a .env file to store the apiKey in
         <APIProvider apiKey="AIzaSyDwmsT7zb6teXmmQj37OcwCKtP4S8R26Ks">
             <AutocompleteInput {...props} ref={ref} />
         </APIProvider>

src/App.tsx

@@ -7,7 +7,7 @@ import EligiblePage from './EligiblePage';
 import NotEligiblePage from './NotEligiblePage';
 import LoadingPage from './LoadingPage';
 import ErrorPage from './ErrorPage';
-import NoAddressPageHeading from './NoAddressPageHeading';
+import IncorrectAddressPageHeading from './IncorrectAddressPageHeading';
 import SearchPageHeading from './SearchPageHeading';
 
 // Main App component
@@ -22,10 +22,13 @@ function App() {
           <SearchPage setPageState={setEligibilityAppState}/>
         </>
       case 'loading':
-        return <LoadingPage/>
-      case 'no_address':
         return <>
-          <NoAddressPageHeading/>
+          <SearchPageHeading/>
+          <LoadingPage/>
+        </>
+      case 'incorrect_address':
+        return <>
+          <IncorrectAddressPageHeading/>
           <SearchPage setPageState={setEligibilityAppState}/>
         </>
       case 'eligible':

src/EligiblePage.tsx

@@ -6,6 +6,7 @@ const joinTodayUrl = 'https://app.loanspq.com/xa/xpressApp.aspx?enc=Kw21Wblm1yxp
 const learnMoreAboutMemberships = 'https://harvardfcu.org/membership/join/'
 
 const EligiblePage: React.FC<Props> = () => {
+    // TO-DO: success svg is not displayed on page
     return (
         <>
             <h3 id='elig-h3'>

src/NoAddressPageHeading.tsx → src/IncorrectAddressPageHeading.tsx

@@ -5,8 +5,8 @@ type Props = React.PropsWithChildren<object>;
 const NoAddressPageHeading: React.FC<Props> = () => {
   return (
     <>
-      <h3 id='elig-h3'>It looks like the address you entered is incorrect. Re-enter your address to try again</h3>
-      <p className='elig-p'>{'(Image of a face with a raised eyebrow goes here)'}</p>
+      <h3 id='elig-h3'>It looks like the address you entered is invalid or incorrect. Re-enter your address to try again</h3>
+      <div className='elig-wonder-svg'></div>
     </>
   )
 }

src/LoadingPage.tsx

@@ -5,15 +5,10 @@ import LoadingImage from '../assets/loading.gif';
 type Props = React.PropsWithChildren<object>;
 
 const LoadingPage: React.FC<Props> = () => {
-  // TO-DO: add spinner
   return (
-    <>
-      <h3 id='elig-h3'>Do you live, work, worship, or attend school in one of our qualified census tracts?</h3>
-      <p className='elig-p'>If so, you might be eligible for membership with us! Enter your address below to check and see if you qualify!</p>
-      <div className="loading">
+    <div className="loading">
       <img src={LoadingImage} />
-      </div>
-    </>
+    </div>
   )
 }
 

src/SearchPage.tsx

@@ -14,66 +14,60 @@ type Props = {
 
 const SearchPage: React.FC<Props> = (props: Props) => {
   const { setPageState } = props;
-  // 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);
-  // }
 
   // Update the input value on fetching the address
   const handlePlaceChange = useCallback((place: google.maps.places.PlaceResult) => {
     // Parse a given Autocomplete prediction
-    // TO-DO: refactor to use place.fetchFields()?
+    // TO-DO: check if it makes sense to refactor it using place.fetchFields()
     const addressComponentsToDisplay = ['street_number', 'route', 'neighborhood', 'locality', 'postal_code'];
     const addressPieces: string[] = [];
+    // TO-DO: refactor to use code in Find My Location
+    // if street address is empty, get address by coordinates
     place.address_components?.forEach(component => {
       if (addressComponentsToDisplay.includes(component.types[0])) addressPieces.push(component.long_name);
     })
-    if (inputRef.current){
+    if (inputRef.current && addressPieces.length){
         inputRef.current.value = addressPieces.join(', ');
       }
-    // setInputValue(addressPieces.join(', '));
   }, [])
 
   // Handle the form submission for geocoding request
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
-    const address = inputRef.current?.value || ''
-    if (!address) {
-      // alert("Please input an address.")
-      setPageState("no_address");
-      return
+
+    const address = inputRef.current?.value || '';
+
+    if (address.length <= 1) {
+      setPageState("incorrect_address");
+      return;
     }
     setPageState("loading");
     try {
       // Retrieve geocoding data for the given address
       const censusApiResponse = await geocode({ address });
-      // console.log('matchedAddress', censusApiResponse.result.addressMatches[0].matchedAddress);
-
+
       // 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));
       setPageState(addressIsEligible ? "eligible" : "not_eligible");
     }
     catch (error) {
-      console.error(error)
-      setPageState("error")
+      console.error(error);
+      setPageState("error");
     }
   }
 
   // Process Census API response and find eligible address, if any.
   function findEligibleAddress(result: CensusApiResponse) {
     const addressMatches = result.result.addressMatches;
-    console.log('addressMatches', addressMatches);
+
+    // TO-DO: set state to incorrect_address when addressMatches array is empty
+    // if (addressMatches.length == 0) {
+    //   setPageState("incorrect_address"); // error state
+    // }
 
     for (const address of addressMatches) { // Check if there is at least one address match and that it contains Census Tract information
       const tractData = address.geographies["Census Tracts"];
-      console.log('tractData: ', tractData);
 
       // Verify that Census Tract information is available
       if (tractData && tractData.length > 0) {
@@ -123,7 +117,6 @@ const SearchPage: React.FC<Props> = (props: Props) => {
               if (inputRef.current)
                 inputRef.current.value = matched.formatted_address;
 
-              // console.log();
               const censusApiResponse = await lookupCoords({ 
                 lng: position.coords.longitude,
                 lat: position.coords.latitude,

src/index.css

@@ -210,6 +210,13 @@ div.loading {
   transform: rotate(-10deg);
 }
 
+.elig-wonder-svg {
+  background-image: url("./assets/HFCU_Emotes_RGB_Full Color_Wonder.svg");
+  background-size: 110%;
+  width: 70px;
+  height: 70px;
+}
+
 .elig-a {
   color: var(--primary-color);
   align-self: center;

src/types.ts

@@ -100,4 +100,4 @@ export type CensusCoordsApiResponse = {
     }
 }
 
-export type EligibilityAppStates = "search" | "loading" | "eligible" | "not_eligible" | "error" | "no_address";
+export type EligibilityAppStates = "search" | "loading" | "eligible" | "not_eligible" | "error" | "incorrect_address";