add error states for address search

src/Components/BreadCrumbs/BreadCrumbs.tsx

@@ -12,7 +12,6 @@ type BreadCrumbs = {
 
 export const BreadCrumbs: React.FC<BreadCrumbs> = ({ address }) => {
   const location = useLocation();
-  console.log(location);
   const crumbs = makeBreadCrumbs(location.pathname, address);
 
   const crumbpath = crumbs.flatMap((crumb, index, array) => {

src/Components/GeoSearchInput/GeoSearchInput.scss

@@ -2,6 +2,7 @@
 @import "../../colors.scss";
 
 .geo-search {
+  width: 100%;
   // the focus outline shifts the layout a bit, so trying to counter this (still a bit of flicker, but better)
   .jfcl-dropdown__control {
     margin-bottom: 2px;

src/Components/GeoSearchInput/GeoSearchInput.tsx

@@ -11,13 +11,25 @@ import { formatGeosearchAddress } from "../../helpers";
 type GeoSearchInputProps = {
   initialAddress?: Address;
   onChange: (selectedAddress: Address) => void;
+  invalid: boolean;
+  setInvalid: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const GeoSearchInput: React.FC<GeoSearchInputProps> = ({
   initialAddress,
   onChange,
+  invalid,
+  setInvalid,
 }) => {
   const [results, setResults] = useState<GeoSearchFeature[]>([]);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const placeholder = (
+    <>
+      <Icon icon="locationDot" />
+      Enter your address
+    </>
+  );
 
   const requester = useMemo(
     () =>
@@ -47,16 +59,18 @@ export const GeoSearchInput: React.FC<GeoSearchInputProps> = ({
   });
 
   return (
-    <>
+    <div className="geo-search">
       <Dropdown
         className="geo-search"
         options={options}
-        placeholder={
-          <>
-            <Icon icon="locationDot" />
-            Enter your address
-          </>
-        }
+        placeholder={!isFocused && placeholder}
+        invalid={!isFocused && invalid}
+        invalidText="You must enter an address"
+        onFocus={() => {
+          setInvalid(false);
+          setIsFocused(true);
+        }}
+        onBlur={() => setIsFocused(false)}
         filterOption={null}
         onInputChange={(value: string) => {
           requester.changeSearchRequest(value);
@@ -89,6 +103,6 @@ export const GeoSearchInput: React.FC<GeoSearchInputProps> = ({
           }
         }}
       />
-    </>
+    </div>
   );
 };

src/Components/Pages/Home/Home.scss

@@ -5,10 +5,16 @@
 #home-page {
   .geo-search-form {
     display: inline-flex;
+    align-items: end;
     gap: 1.5rem; // 24px
     width: 100%;
+    height: 6.25rem; // 100px
     max-width: $contentBoxWidth;
-    margin-top: 3rem; // 48px
+    margin-top: 0.875rem; // 14px
+
+    .jfcl-input-header__label {
+      display: none;
+    }
     .jfcl-dropdown {
       width: 100%;
     }

src/Components/Pages/Home/Home.tsx

@@ -27,25 +27,32 @@ export const Home: React.FC = () => {
   const [address, setAddress] = useSessionStorage<Address>("address");
   const [, , removeFormFields] = useSessionStorage<FormFields>("fields");
   const [geoAddress, setGeoAddress] = useState<Address>();
+  const [inputInvalid, setInputInvalid] = useState(false);
   const { trigger } = useSendGceData();
 
+  console.log({ inputInvalid });
+
   const handleAddressSearch = async () => {
-    if (geoAddress) {
-      setAddress(geoAddress);
-      const postData: GCEPostData = {
-        bbl: geoAddress.bbl,
-        house_number: geoAddress.houseNumber,
-        street_name: geoAddress.streetName,
-        borough: geoAddress.borough,
-        zipcode: geoAddress.zipcode,
-      };
-      try {
-        const userResp = (await trigger(postData)) as GCEUser;
-        setUser(userResp);
-      } catch (error) {
-        console.log({ "tenants2-error": error });
-      }
+    if (!geoAddress) {
+      console.log("no-address");
+      setInputInvalid(true);
+      return;
+    }
+    setAddress(geoAddress);
+    const postData: GCEPostData = {
+      bbl: geoAddress.bbl,
+      house_number: geoAddress.houseNumber,
+      street_name: geoAddress.streetName,
+      borough: geoAddress.borough,
+      zipcode: geoAddress.zipcode,
+    };
+    try {
+      const userResp = (await trigger(postData)) as GCEUser;
+      setUser(userResp);
+    } catch (error) {
+      console.log({ "tenants2-error": error });
     }
+
     removeFormFields();
     navigate("confirm_address");
   };
@@ -54,7 +61,12 @@ export const Home: React.FC = () => {
     <div id="home-page">
       <Header title="Learn if you're covered by Good Cause Eviction law in NYC">
         <div className="geo-search-form">
-          <GeoSearchInput initialAddress={address} onChange={setGeoAddress} />
+          <GeoSearchInput
+            initialAddress={address}
+            onChange={setGeoAddress}
+            invalid={inputInvalid}
+            setInvalid={setInputInvalid}
+          />
           <Button labelText="Get started" onClick={handleAddressSearch} />
         </div>
       </Header>