From 7651930796bf47da8187c4463d3111d33e8fc8fe Mon Sep 17 00:00:00 2001
From: Leeran Farin <leeran7@gmail.com>
Date: Wed, 22 Sep 2021 02:17:19 -0400
Subject: [PATCH 1/2] finished lab

---
 zip-search/src/App.css | 35 ++++++++++++++++++++++++++
 zip-search/src/App.js  | 57 +++++++++++++++++++++++++++++++++++++-----
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/zip-search/src/App.css b/zip-search/src/App.css
index e90e8d7..42cbd7a 100644
--- a/zip-search/src/App.css
+++ b/zip-search/src/App.css
@@ -4,3 +4,38 @@
   color: white;
   text-align: center;
 }
+#zip{
+  margin-left: 8px;
+  text-align: center;
+}
+.zip{
+  padding-top: 60px;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 500;
+}
+.city{
+  justify-content: center;
+  margin: 20px;
+  border: 2px solid #f3f3f3;
+  width: 400px;
+}
+.container{
+  width: 400px;
+}
+.city-name{
+  text-align: center;
+  background-color: #888;
+  color: white;
+  padding: 10px
+}
+.results{
+  padding-top: 30px ;
+  display: flex;
+  justify-content: center;
+}
+li{
+  margin: 2px;
+  padding: 5px
+}
\ No newline at end of file
diff --git a/zip-search/src/App.js b/zip-search/src/App.js
index 91e9361..aa2f7a3 100644
--- a/zip-search/src/App.js
+++ b/zip-search/src/App.js
@@ -3,25 +3,70 @@ import './App.css';
 
 
 function City(props) {
-  return (<div>This is the City component</div>);
+  return (
+    <div class="city">
+      <div class="city-name">{props.name}</div>
+      <div class="container">
+        <ul>
+          <li>State: {props.state}</li>
+          <li>Location: ({props.lat}, {props.long})</li>
+          <li>Population: {props.population}</li>
+          <li>Total Wages: {props.wages}</li>
+        </ul>
+      </div>
+    </div>
+  );
 }
 
 function ZipSearchField(props) {
-  return (<div>This is the ZipSearchField component</div>);
+  return (
+    <div class="zip">
+      <label for="zip">Enter a zip-code:</label>
+      <input id="zip" name="zip" maxLength={5} type="text" placeholder="Enter a zip-code" onChange={props.changeHandler}/>
+    </div>
+  );
 }
 
 
 class App extends Component {
+  state = {
+    cities: [],
+    zip: '',
+    activateFetch: false
+  }
+  updateZip = async (e) => {
+    await this.setState({ zip: e.target.value });
+    if(this.state.zip.length - 1 === 4){
+      this.updateCities();
+      console.log(this.state.cities);
+    } else {
+      this.setState({ cities: [] }); //resets state once character is less than 5
+    }
+  }
+  updateCities = async () => {
+    await fetch(`http://ctp-zip-api.herokuapp.com/zip/${this.state.zip}`)
+      .then( res => res.json())
+      .then( data => this.setState({ cities: data }));
+  }
   render() {
+    console.log(this.state.cities);
     return (
       <div className="App">
         <div className="App-header">
           <h2>Zip Code Search</h2>
         </div>
-        <ZipSearchField />
-        <div>
-          <City />
-          <City />
+        <ZipSearchField zip={this.state.zip} changeHandler={this.updateZip} />
+        <div class="results">
+          {
+            this.state.cities.length === 0 ?
+              <div><p>No Results</p></div>
+                :
+              <div>
+                {
+                  this.state.cities.map(city => <City name={city.LocationText} state={city.State} lat={city.Lat} long={city.Long} wages={city.TotalWages} population={city.EstimatedPopulation} />)
+                }
+              </div>
+          }
         </div>
       </div>
     );

From 5adceb476cd9e33e7a93426041c66528e5ee5361 Mon Sep 17 00:00:00 2001
From: Leeran Farin <leeran7@gmail.com>
Date: Wed, 6 Oct 2021 17:51:40 -0400
Subject: [PATCH 2/2] added city-search

---
 .DS_Store                | Bin 0 -> 6148 bytes
 city-search              |   1 +
 zip-search/src/App.js    |   5 ++---
 zip-search/src/index.css |   3 +++
 4 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 .DS_Store
 create mode 160000 city-search

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..473dbb118c5ec67d6ea3ea353bc171ee1ac9bc88
GIT binary patch
literal 6148
zcmeHK%}T>S5T30$L`$XM#pAw!Lf;^kco+Ht+E!YjA;F)E7vlr?2EKxz&!9)alXss%
z@T}kL3^gIG-bBg_%zm5s+1-2znG6xR{>8XQ)Fq-A%Gg@Rut3<)+K`r7*y(tU*`zlZ
z<yp~)G{b*ofS+ANyELH_I<Gyy_UmTVm*r_XoaIB<;+Kb;&*!Vhy}Ez=qraF|-i^*1
zQfY%Ov1>s)bVkQ?M5i>OY4r@9+o!u_an<u6=KkY4oM+*hS^j;t-(suh+<HGixQQ`f
z3>X6|#{g<JOWYQ;(HJlWjDa}={C)6H#ze6c44)1Rp#=a&FbBb$dkN0*iiu(=2oJ<b
zDo|3Lwir&*VfPxBD3*efPEMN-r#n0CP+Zs@>-!K+E)lfR7%&Fv46Mmzm+Sxj^8UY`
zWLL(3F|bk$xF{W@ecY1P*2c|ot@Y4DC=17xg7XwiLMcWpm*Q<`5ZFCWfQe!$2n)o1
N1Og2<7z2OGz!ynjQX>EW

literal 0
HcmV?d00001

diff --git a/city-search b/city-search
new file mode 160000
index 0000000..8ec32ff
--- /dev/null
+++ b/city-search
@@ -0,0 +1 @@
+Subproject commit 8ec32ffed07f2533793d1c98112da3d24d57ac98
diff --git a/zip-search/src/App.js b/zip-search/src/App.js
index aa2f7a3..59a6f39 100644
--- a/zip-search/src/App.js
+++ b/zip-search/src/App.js
@@ -27,7 +27,6 @@ function ZipSearchField(props) {
   );
 }
 
-
 class App extends Component {
   state = {
     cities: [],
@@ -46,10 +45,10 @@ class App extends Component {
   updateCities = async () => {
     await fetch(`http://ctp-zip-api.herokuapp.com/zip/${this.state.zip}`)
       .then( res => res.json())
-      .then( data => this.setState({ cities: data }));
+      .then( data => this.setState({ cities: data }))
+      .catch( error => console.log(error));
   }
   render() {
-    console.log(this.state.cities);
     return (
       <div className="App">
         <div className="App-header">
diff --git a/zip-search/src/index.css b/zip-search/src/index.css
index e69de29..4c2dc71 100644
--- a/zip-search/src/index.css
+++ b/zip-search/src/index.css
@@ -0,0 +1,3 @@
+#none {
+    padding-top: 200px;
+}
\ No newline at end of file