Merge pull request #38 from chingu-voyages/address-validation

Address validation

client/components/form/AddressInput.jsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  Input,
+  Container,
+  TextField,
+  MenuItem,
+  Stack,
+  Button,
+  Alert,
+} from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+
+export default function AddressInput() {
+  const [addresses, setAddresses] = useState([]);
+  const [providedAddress, setProvidedAddress] = useState({
+    hse_nbr: "",
+    hse_dir: "",
+    str_nm: "",
+    str_sfx: "",
+    zip_cd: "",
+  });
+  const [isAddressFound, setIsAddressFound] = useState(false);
+
+  const handleChange = (e) => {
+    setProvidedAddress({
+      ...providedAddress,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  async function fetchAddresses() {
+    try {
+      const response = await fetch(
+        `https://data.lacity.org/resource/4ca8-mxuh.json?hse_nbr=${providedAddress.hse_nbr}&hse_dir_cd=${providedAddress.hse_dir}&str_nm=${providedAddress.str_nm}&str_sfx_cd=${providedAddress.str_sfx}&zip_cd=${providedAddress.zip_cd}`
+      );
+      const data = await response.json();
+      setAddresses(data);
+      setIsAddressFound(true);
+    } catch (error) {
+      console.error("Error fetching addresses:", error);
+    }
+  }
+
+  return (
+    <FormControl>
+      <Container>
+        <Stack direction="row" spacing={2} padding={0}>
+          <TextField
+            id="hse_nbr"
+            name="hse_nbr"
+            label="House Number"
+            variant="outlined"
+            value={providedAddress.hse_nbr}
+            onChange={handleChange}
+          />
+          <TextField
+            id="hse_dir"
+            name="hse_dir"
+            select
+            label="Direction"
+            defaultValue=""
+            value={providedAddress.hse_dir}
+            helperText="if applicable"
+            onChange={handleChange}
+          >
+            <MenuItem value=""></MenuItem>
+            <MenuItem value="N">North</MenuItem>
+            <MenuItem value="E">East</MenuItem>
+            <MenuItem value="W">West</MenuItem>
+            <MenuItem value="S">South</MenuItem>
+          </TextField>
+          <TextField
+            id="str_nm"
+            name="str_nm"
+            label="Street Name"
+            variant="outlined"
+            value={providedAddress.str_nm}
+            onChange={handleChange}
+          />
+          <TextField
+            id="str_sfx"
+            name="str_sfx"
+            label="Suffix"
+            variant="outlined"
+            value={providedAddress.str_sfx}
+            onChange={handleChange}
+          />
+          <TextField
+            id="zip_cd"
+            label="Zip Code"
+            name="zip_cd"
+            variant="outlined"
+            value={providedAddress.zip_cd}
+            onChange={handleChange}
+          />
+        </Stack>
+        <Button variant="contained" onClick={fetchAddresses}>
+          Validate
+        </Button>
+        {isAddressFound ? (
+          <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
+            Address verified
+          </Alert>
+        ) : (
+          <Alert severity="error">Address not found.</Alert>
+        )}
+      </Container>
+    </FormControl>
+  );
+}

client/components/form/Form.jsx

@@ -12,6 +12,7 @@ import {
   Snackbar,
 } from "@mui/material";
 import { Button } from "@mui/material";
+import AddressInput from "./AddressInput";
 import TimeRangeInput from "./TimeRangeInput";
 import { requestAppt } from "@/actions/form";
 
@@ -49,7 +50,7 @@ export default function Form() {
   const [lateTime, setLateTime] = useState(
     dayjs().hour(10).minute(0).second(0)
   );
-  const [address, setAddress] = useState("");
+  const [address, setAddress] = useState([]);
   // error state
   const [errorMsg, setErrorMsg] = useState("");
   const [errorPath, setErrorPath] = useState("");
@@ -164,22 +165,7 @@ export default function Form() {
           )}
         </FormControl>
 
-        <FormControl>
-          <InputLabel htmlFor="address">Address</InputLabel>
-          <Input
-            id="address"
-            aria-describedby="address-error-text"
-            value={address}
-            onChange={(event) => {
-              setAddress(event.currentTarget.value);
-            }}
-          />
-          {errorPath && errorPath === "address" && (
-            <FormHelperText id="address-error-text" error>
-              {errorMsg}
-            </FormHelperText>
-          )}
-        </FormControl>
+        <AddressInput />
 
         <TimeRangeInput
           earlyTime={earlyTime}

client/components/form/TimeRangeInput.jsx

@@ -1,12 +1,6 @@
 import { useState } from "react";
 import dayjs from "dayjs";
-import {
-  Box,
-  FormHelperText,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Box, FormHelperText, Stack, Typography } from "@mui/material";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";

client/package.json

@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.61",
     "@mui/icons-material": "^6.1.7",
     "@mui/material": "^6.1.6",
     "@mui/material-nextjs": "^6.1.6",