From 938c9eb4a535308212cff28b35193e7cd7be4ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=A2=E3=83=8F=E3=83=A1=E3=83=83=E3=83=89?=
 <154572400+Mbensassi2026@users.noreply.github.com>
Date: Tue, 8 Oct 2024 17:49:09 -0400
Subject: [PATCH] Update App.jsx

---
 src/App.jsx | 68 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6478b09..8b5693e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,25 +1,77 @@
 import { useState } from "react";
 import "./App.css";
 
-function City(props) {
-  return <div>This is the City component</div>;
+function City({ city }) {
+  return (
+    <div style={{ flex: 1, marginTop: 8 }}>
+      <div
+        style={{
+          borderStyle: 'solid',
+          borderWidth: 1,
+          borderColor: 'lightgray',
+          borderRadius: 8,
+        }}
+      >
+        <h4
+          style={{
+            padding: 5,
+            backgroundColor: 'lightgray',
+            borderTopRightRadius: 8,
+            borderTopLeftRadius: 8,
+          }}
+        >
+          {city.LocationText}
+        </h4>
+        <div style={{ padding: 30 }}>
+          <ul>
+            <li>State: {city.State}</li>
+            <li>Location: ({city.Lat}, {city.Long})</li>
+            <li>Population (estimated): {city.EstimatedPopulation}</li>
+            <li>Total Wages: {city.TotalWages}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+function ZipSearchField({ setCityData }) {
+  const fetchZipcodes = (zipcode) => {
+    fetch(`https://ctp-zip-code-api.onrender.com/zip/${zipcode}`)
+      .then((response) => response.json())
+      .then((data) => setCityData(data))
+      .catch(() => setCityData(null));
+  };
+
+  const onChange = () => {
+    const zip = document.getElementById("zipcode");
+    fetchZipcodes(zip.value);
+  };
+
+  return (
+    <div>
+      <div onChange={onChange}>
+        <label htmlFor="zipcode">Zip Code:</label>
+        <input id="zipcode" type="text" name="zipcode" />
+      </div>
+    </div>
+  );
 }
 
 function App() {
+  const [cityData, setCityData] = useState();
+
   return (
     <div className="App">
       <div className="App-header">
         <h1>Zip Code Search</h1>
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <ZipSearchField />
-        <div>
-          <City />
-          <City />
+        <ZipSearchField setCityData={setCityData} />
+        <div style={{ flex: 1 }}>
+          {cityData && cityData.length > 0
+            ? cityData.map((city, index) => <City key={index} city={city} />)
+            : null}
         </div>
       </div>
     </div>