From eb481d98f8ab7e81e0764ae227fd5db2adef7645 Mon Sep 17 00:00:00 2001
From: Alif Rahman <alifrahman2023@gmail.com>
Date: Tue, 17 Sep 2024 23:49:27 -0400
Subject: [PATCH 1/2] might be over

---
 src/App.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6478b09..3a61120 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,7 +6,23 @@ function City(props) {
 }
 
 function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+  const [input, setInput] = useState('');
+
+  const handleChange = (event) => {
+    setInput(event.target.value);
+  }
+
+  return <>
+    <span> Zip Code: </span>
+    <form class = "search-bar">
+      <input
+        type="text"
+        value={inputValue}
+        onChange = {handleChange}
+        placeholder = "Enter some text"
+      />
+    </form>
+  </>;
 }
 
 function App() {

From 460cf154831b672325c27f0aa18346f06369831a Mon Sep 17 00:00:00 2001
From: Alif Rahman <alifrahman2023@gmail.com>
Date: Wed, 18 Sep 2024 18:28:00 -0400
Subject: [PATCH 2/2] give up

---
 src/App.jsx | 109 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 87 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 3a61120..84b532c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,45 +1,110 @@
 import { useState } from "react";
 import "./App.css";
 
-function City(props) {
-  return <div>This is the City component</div>;
+function LocationCard({
+  region,
+  latitude,
+  longitude,
+  population,
+  totalIncome,
+  locationName,
+}) {
+  return (
+    <div className="card my-5">
+      <div className="card-header">{locationName}</div>
+      <div className="card-body">
+        <ul className="p-8 my-3">
+          <li>Region: {region}</li>
+          <li>
+            Coordinates: ({latitude}, {longitude})
+          </li>
+          <li>Estimated Population: {population}</li>
+          <li>Total Income: {totalIncome}</li>
+        </ul>
+      </div>
+    </div>
+  );
 }
 
-function ZipSearchField(props) {
-  const [input, setInput] = useState('');
+function ZipCodeInput({ onLookup }) {
+  const [inputValue, setInputValue] = useState("");
 
-  const handleChange = (event) => {
-    setInput(event.target.value);
-  }
+  const handleInputChange = (event) => {
+    const formattedZip = event.target.value.replace(/\D+/g, "").slice(0, 5);
+    setInputValue(formattedZip);
+    console.log("Zip Code changed to:", formattedZip);
+
+    if (formattedZip.length === 5 && !isNaN(parseInt(formattedZip))) {
+      onLookup(formattedZip);
+    }
+  };
 
-  return <>
-    <span> Zip Code: </span>
-    <form class = "search-bar">
+  return (
+    <label className="d-flex align-center py-4 px-1" htmlFor="zip-input">
+      <b className="py-2 w-25">Enter Zip:</b>
       <input
-        type="text"
+        id="zip-input"
+        className="form-control p-1 rounded max-w"
+        placeholder="Try 10016"
         value={inputValue}
-        onChange = {handleChange}
-        placeholder = "Enter some text"
+        onChange={handleInputChange}
       />
-    </form>
-  </>;
+    </label>
+  );
 }
 
-function App() {
+async function fetchLocationData(zipCode, onSuccess) {
+  try {
+    const response = await fetch(
+      `https://ctp-zip-code-api.onrender.com/zip/${zipCode}`
+    );
+
+    if (!response.ok) {
+      console.error(
+        `Error fetching data for ZIP: ${zipCode}, Status: ${response.status}`
+      );
+      onSuccess([]);
+      return;
+    }
+
+    const contentType = response.headers.get("content-type");
+    if (contentType && contentType.indexOf("application/json") !== -1) {
+      const data = await response.json();
+      console.log("Data fetched successfully:", data);
+      onSuccess(data);
+    } else {
+      console.error("Unexpected content type, expected JSON.");
+      onSuccess([]);
+    }
+  } catch (error) {
+    console.error("Fetch error:", error);
+    onSuccess([]);
+  }
+}
+
+function ZipApp() {
+  const [locationList, setLocationList] = useState([]);
+
+  const searchLocation = (zipCode) => {
+    console.log("Fetching data for zip code:", zipCode);
+    fetchLocationData(zipCode, setLocationList);
+  };
+
   return (
     <div className="App">
       <div className="App-header">
-        <h1>Zip Code Search</h1>
+        <h1>Find Location by Zip Code</h1>
       </div>
-      <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <ZipSearchField />
+      <div className="mx-auto py-4 px-1" style={{ maxWidth: 400 }}>
+        <ZipCodeInput onLookup={searchLocation} />
         <div>
-          <City />
-          <City />
+          {locationList.length > 0
+            ? locationList.map((location) => <LocationCard {...location} />)
+            : "No locations found"}
         </div>
       </div>
     </div>
   );
 }
 
-export default App;
+export default ZipApp;