Do things

src/components/atoms/LatLonFromLocationSearch.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { MetAPIVariables } from '../../queries/metApi';
-import { Button, Combobox, TextInputField, toaster } from 'evergreen-ui';
+import { Button, Combobox, FormField, TextInputField, toaster } from 'evergreen-ui';
 import { Address } from '../../types/Address';
 import debounce from 'lodash.debounce';
 
@@ -9,19 +9,19 @@ type LatLonInputSetProps = {
     setState: Dispatch<SetStateAction<MetAPIVariables>>;
 };
 
+type LabeledPosition = {
+    label: string;
+    lat: number;
+    lon: number;
+};
+
 const LatLonFromLocationSearch: React.FC<LatLonInputSetProps> = (props) => {
     const [state, setState] = useState<{ lat: string; lon: string }>({
         lat: String(props.state.lat),
         lon: String(props.state.lon),
     });
 
-    const [locations, setLocations] = useState<
-        {
-            label: string;
-            lat: number;
-            lon: number;
-        }[]
-    >([]);
+    const [locations, setLocations] = useState<LabeledPosition[]>([]);
 
     // To avoid problems with difficult digit entry for user
     useEffect(() => {
@@ -43,38 +43,38 @@ const LatLonFromLocationSearch: React.FC<LatLonInputSetProps> = (props) => {
     };
 
     const onInputChange = async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
-        const locationData = await fetch(
+        const rawLocationData = await fetch(
             `https://ws.geonorge.no/adresser/v1/sok?sok=${e.target.value}&treffPerSide=10`,
-        ).then((res) => res.json());
-        const locationList =
-            locationData.adresser.length > 0
-                ? locationData.adresser.map((address: Address) => {
-                      return {
-                          label: `${address.adressetekst} (${address.kommunenavn})`,
-                          lat: address.representasjonspunkt.lat,
-                          lon: address.representasjonspunkt.lon,
-                      };
-                  })
-                : [];
+        );
+        const locationData: { adresser: Array<Address> } = await rawLocationData.json();
+        const locationList = locationData.adresser.map((address) => {
+            return {
+                label: `${address.adressetekst} (${address.kommunenavn})`,
+                lat: address.representasjonspunkt.lat,
+                lon: address.representasjonspunkt.lon,
+            };
+        });
         setLocations(locationList);
     };
 
-    const selectionChanged = (address: { label: string; lat: number; lon: number }): void => {
+    const selectionChanged = (address: LabeledPosition | null): void => {
         if (address === null) return;
         setState({ lat: address.lat.toString(), lon: address.lon.toString() });
     };
 
     return (
         <>
-            <Combobox
-                items={locations}
-                placeholder="Adresse"
-                onInput={debounce(onInputChange, 500)}
-                itemToString={(item) => (item ? item.label : '')}
-                onChange={selectionChanged}
-            />
-            <TextInputField value={state.lat} label="Breddegrad" onChange={update('lat')} />
-            <TextInputField value={state.lon} label="Lengdegrad" onChange={update('lon')} />
+            <FormField label="Adresse" marginBottom="24px">
+                <Combobox
+                    items={locations}
+                    placeholder="Adresse"
+                    onInput={debounce(onInputChange, 500)}
+                    itemToString={(item) => item?.label ?? ''}
+                    onChange={selectionChanged}
+                />
+            </FormField>
+            <TextInputField disabled={true} value={state.lat} label="Breddegrad" onChange={update('lat')} />
+            <TextInputField disabled={true} value={state.lon} label="Lengdegrad" onChange={update('lon')} />
             <Button onClick={setToMyLocation}>Sett til min posisjon</Button>
         </>
     );