Friday, 6:30-9:00pm section | Instructor: Donato Cruz | TA: Elie Paul / Edgardo Molina

src/App.jsx

@@ -1,12 +1,60 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./App.css";
 
 function City(props) {
-  return <div>This is the City component</div>;
+  return (
+    <div style={{ border: "1px solid black", padding: "10px", margin: "10px 0" }}>
+      <h5>{props.City}, {props.State}</h5>
+      <p>State: {props.State}</p>
+      <p>Location: ({props.Lat}, {props.Long})</p>
+      <p>Population (estimated): {props.EstimatedPopulation}</p>
+      <p>Total Wages: {props.TotalWages}</p>
+    </div>
+  );
 }
 
 function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+  const [inputText, setInputText] = useState('');
+  const [isValidZip, setIsValidZip] = useState(false);
+  const [cityRecords, setCityRecords] = useState([]);
+
+  const validateZip = (zip) => /^\d{5}$/.test(zip);
+  const handleInputChange = (event) => {
+    const zip = event.target.value;
+    setInputText(zip);
+    setIsValidZip(validateZip(zip));
+  }
+
+  useEffect (() => {
+    if (isValidZip) {
+      const fetchCityRecords = async () => {
+        try {
+          const response = await fetch(`https://ctp-zip-code-api.onrender.com/zip/${inputText}`);
+          const cityData = await response.json();
+          if (cityData.length > 0) {
+            setCityRecords(cityData);
+          } else {
+            setCityRecords([]);
+            console.log('No city data found for this zip code.');
+          }
+        } catch (error) {
+          console.error('Error fetching city data: ', error);
+        }
+      }
+
+      fetchCityRecords();
+    } else {
+      setCityRecords([]);
+    }
+  }, [isValidZip, inputText]);
+
+  return (
+    <div>
+      <p>Zip Code:</p>
+      <input type="text" value={inputText} onChange={handleInputChange} />
+      {cityRecords.length > 0 ? cityRecords.map((record) => <City key={record.City} {...record}/>) : <p>No results found</p>}
+    </div>
+  );
 }
 
 function App() {
@@ -17,10 +65,6 @@ function App() {
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
         <ZipSearchField />
-        <div>
-          <City />
-          <City />
-        </div>
       </div>
     </div>
   );