bloominstituteoftechnology · abelmore33 · Jun 8, 2023 · Jun 8, 2023 · Jun 9, 2023 · Jun 9, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@testing-library/user-event": "13.5.0",
-    "axios": "0.24.0",
+    "axios": "^0.24.0",
     "cors": "2.8.5",
     "css-loader": "^6.5.1",
     "express": "4.17.1",
@@ -45,6 +45,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "5.2.0",
     "redux": "^4.1.2",
+    "redux-thunk": "^2.4.2",
     "sass": "^1.32.8",
     "style-loader": "^3.3.1",
     "styled-components": "5.3.3",

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,36 @@
-import React from 'react';
-import './App.css';
+import React from "react";
+import ZipCodeForm from "./components/ZipCodeForm";
 
-function App() {
+import { getZipCode } from "./actions";
+
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import "./App.css";
+import ZipCodeFormat from "./components/ZipCodeFormat";
+
+function App(props) {
+  const { loading, zipCodeData, error, getZipCode } = props;
+  useEffect(() => {
+    getZipCode();
+  }, []);
   return (
     <div className="App">
-      Async Redux Project
+      <h1>Zip Code Data</h1>
+      <ZipCodeForm />
+      {error !== "" && <h3>{error}</h3>}
+      {loading ? (
+        <h2>Gathering Data...</h2>
+      ) : (
+        <ZipCodeFormat zipCodes={zipCodeData} />
+      )}
     </div>
   );
 }
-
-export default App;
+const mapStateToProps = (state) => {
+  return {
+    loading: state.loading,
+    zipCodeData: state.zipCodeData,
+    error: state.error,
+  };
+};
+export default connect(mapStateToProps, { getZipCode })(App);
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,25 @@
+import axios from "axios";
+export const FETCH_START = "FETCH_START";
+export const SUCCESSFUL_FETCH = "SUCCESSFUL_FETCH";
+
+export const getZipCode = (newZipCode) => {
+  return (dispatch) => {
+    dispatch({ type: FETCH_START });
+    axios
+      .get(`https://api.zippopotam.us/us/${newZipCode}`)
+      .then((res) => {
+        dispatch({ type: SUCCESSFUL_FETCH, payload: res.data });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+};
+
+export const fetchStart = () => {
+  return { type: FETCH_START };
+};
+
+export const successfulFetch = (zipCodeData) => {
+  return { type: SUCCESSFUL_FETCH, payload: zipCodeData };
+};
diff --git a/src/components/ZipCodeForm.js b/src/components/ZipCodeForm.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { getZipCode } from "../actions";
+
+function ZipCodeForm(props) {
+  const [zipCode, setZipCode] = useState("");
+  const handleChange = (evt) => {
+    evt.preventDefault();
+    setZipCode(evt.target.value);
+  };
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    props.getZipCode(zipCode);
+    console.log("clicked");
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="zipCodeSearch">ZipCode Search</label>
+        <input
+          type="input"
+          name="zipCodeSearch"
+          id="zipCodeSearch"
+          onChange={handleChange}
+        />
+        <button>Find Data</button>
+      </div>
+    </form>
+  );
+}
+
+const mapStateToProps = (state) => {
+  zipCodeData: state.zipCodeData;
+};
+export default connect(null, { getZipCode })(ZipCodeForm);
diff --git a/src/components/ZipCodeFormat.js b/src/components/ZipCodeFormat.js
@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import { zipCodeData } from "../zipCodeData/zipCodeData";
+function ZipCodeFormat(props) {
+  const { zipCodes } = props;
+
+  return (
+    <div>
+      <h1>Zip Code: {zipCodes["post code"]}</h1>
+      <h2>City: {zipCodes.places.map((city) => city["place name"])}</h2>
+      <h2>State: {zipCodes.places.map((state) => state.state)}</h2>
+      <h2>Latitude: {zipCodes.places.map((latitude) => latitude.latitude)}</h2>
+      <h2>
+        Longitude: {zipCodes.places.map((latitude) => latitude.longitude)}
+      </h2>
+    </div>
+  );
+}
+
+export default ZipCodeFormat;
diff --git a/src/index.html b/src/index.html
@@ -1,21 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"
+    />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+    <title>ZIP CODE DATA</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-  <title>Lambda Movie Selector</title>
-</head>
-
-<body>
-  <div id="root"></div>
-</body>
-
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,20 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import App from './App';
-import './index.css';
+import { Provider } from "react-redux";
+import { applyMiddleware, createStore } from "redux";
+import thunk from "redux-thunk";
+
+import reducer from "./reducer";
+import App from "./App";
+
+import "./index.css";
+
+const store = createStore(reducer, applyMiddleware(thunk));
 
 ReactDOM.render(
-  <App />,
-  document.getElementById('root')
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
 );
diff --git a/src/reducer/index.js b/src/reducer/index.js
@@ -0,0 +1,30 @@
+import { zipCodeData } from "../zipCodeData/zipCodeData";
+import { FETCH_START, SUCCESSFUL_FETCH } from "../actions";
+
+const initialState = {
+  zipCodeData: zipCodeData,
+  loading: false,
+  error: "",
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_START:
+      return {
+        ...state,
+        loading: true,
+        error: "",
+      };
+    case SUCCESSFUL_FETCH:
+      return {
+        ...state,
+        loading: false,
+        zipCodeData: action.payload,
+        error: "",
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;
diff --git a/src/zipCodeData/zipCodeData.js b/src/zipCodeData/zipCodeData.js
@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export const zipCodeData = {
+  "post code": "33162",
+  country: "United States",
+  "country abbreviation": "US",
+  places: [
+    {
+      "place name": "Miami",
+      longitude: "-80.183",
+      state: "Florida",
+      "state abbreviation": "FL",
+      latitude: "25.9286",
+    },
+  ],
+};