From 710750f200d35715fd69bc0013b4499c49bb9b63 Mon Sep 17 00:00:00 2001
From: LinxinJiang <70239443+LinxinJiang@users.noreply.github.com>
Date: Fri, 8 Oct 2021 06:47:52 -0700
Subject: [PATCH 1/2] update

---
 zip-search/src/App.js | 60 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/zip-search/src/App.js b/zip-search/src/App.js
index 91e9361..83f801c 100644
--- a/zip-search/src/App.js
+++ b/zip-search/src/App.js
@@ -2,26 +2,74 @@ import React, { Component } from 'react';
 import './App.css';
 
 
-function City(props) {
-  return (<div>This is the City component</div>);
+function City( {data} ) {
+  return (
+    <div>
+      City Name: { data.City }
+      <br />
+      State: { data.State }
+      <ul>
+        <li>Population: { data.EstimatedPopulation}</li>
+      </ul>
+    </div>
+  );
 }
 
+
+
 function ZipSearchField(props) {
-  return (<div>This is the ZipSearchField component</div>);
+  return (
+    /*
+    <div>
+      Zip Code:
+      <input type="text" onChange={ props.changeHandler }></input>
+    </div>
+    */
+    <div>
+      <input onChange={ (e) => props.handleChange(e)} />
+    </div>
+  );
 }
 
 
 class App extends Component {
+
+  state = {
+    zipCode: '',
+    cities: [],
+  }
+
+  zipChange = (event) => {
+    this.setState({ zipCode: event.target.value })
+
+    if(event.target.value.length === 5){
+      fetch('https://ctp-zip-api.herokuapp.com/zip/'+event.target.value)
+      .then(res => res.json())
+      .then(cities => {
+        console.log(cities)
+        this.setState( { cities } );
+      })
+      .catch(err => {
+          this.setState({ cities:[] })
+      })
+    }else{
+      this.setState({ cities:[] })
+    }
+  }
+
   render() {
     return (
       <div className="App">
         <div className="App-header">
           <h2>Zip Code Search</h2>
         </div>
-        <ZipSearchField />
+        <ZipSearchField handleChange={ (e) => this.zipChange(e) }/>
+        <div>Current Zip code is: { this.state.zipCode }</div>
         <div>
-          <City />
-          <City />
+          { this.state.cities.length === 0 ? <h1>No Result</h1> : null }
+          { this.state.cities.map(city => <City data={city} />) }
+          
+          
         </div>
       </div>
     );

From 54b4ac20ee074fcc683a67780ca12c3954681578 Mon Sep 17 00:00:00 2001
From: LinxinJiang <70239443+LinxinJiang@users.noreply.github.com>
Date: Fri, 8 Oct 2021 07:12:47 -0700
Subject: [PATCH 2/2] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 92067a2..0c39318 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+# CITY search lab is finished, but github wouldn't allow me to do git push. I will submit again later
+
 # Zip Code React Lab
 
 In this exercise, you will create two React apps: