Redux Weather

package.json

@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^1.3.4",
+    "bootstrap": "^5.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.5",
     "react-scripts": "4.0.3",
+    "react-sparklines": "^1.7.0",
+    "redux": "^4.2.1",
+    "redux-promise": "^0.6.0",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/App.css

@@ -1,38 +1 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,23 +1,11 @@
-import logo from './logo.svg';
-import './App.css';
+import Search from "./components/search";
+import Table from "./components/table"
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="col-md-6 offset-md-3">
+      <Search />
+      <Table />
     </div>
   );
 }

src/actions/index.js

@@ -0,0 +1,13 @@
+import axios from "axios"
+const API_KEY = process.env.REACT_APP_API_KEY;
+export const FETCH_WEATHER = "FETCH_WEATHER";
+
+
+export function fetchWeather(query) {
+  const request = axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${query}&appid=${API_KEY}&units=imperial`)
+
+  return {
+    type: FETCH_WEATHER,
+    payload: request
+  };
+}

src/components/search.js

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { fetchWeather } from "../actions";
+
+const Search = () => {
+  const [query, setQuery] = useState('');
+  const dispatch = useDispatch();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    dispatch(
+      fetchWeather(query)
+    );
+
+    setQuery('');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+        <div className="input-group mt-5">
+          <input
+            type="text"
+            className="form-control mb-2"
+            placeholder="Get a five-day forecast in your favorite cities"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <button type="submit" className="btn btn-primary mb-2">
+            Submit
+          </button>
+        </div>
+      </form>
+  )
+}
+
+export default Search;

src/components/table.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import {
+  Sparklines,
+  SparklinesLine,
+  SparklinesReferenceLine,
+} from "react-sparklines";
+import _ from "lodash";
+
+const Table = () => {
+  const cities = useSelector(state => state.weather.cities);
+
+  function renderCities() {
+    if (cities.length > 0) {
+      return cities.map((city, index) => (
+        <tr key={index}>
+          <th scope="row" className="align-middle">
+            {city.name}
+          </th>
+          <td>
+            <Sparklines data={city.temp} width={100} height={60} margin={5}>
+              <SparklinesLine color="#ffc61a" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+            <p className="text-center">{Math.round(_.mean(city.temp))} F</p>
+          </td>
+          <td>
+            <Sparklines
+              data={city.pressure}
+              width={100}
+              height={65}
+              margin={5}
+            >
+              <SparklinesLine color="#00802b" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+            <p className="text-center">
+              {Math.round(_.mean(city.pressure))} hPa
+            </p>
+          </td>
+          <td>
+            <Sparklines
+              data={city.humidity}
+              width={100}
+              height={70}
+              margin={5}
+            >
+              <SparklinesLine color="#253e56" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+            <p className="text-center">
+              {Math.round(_.mean(city.humidity))} %
+            </p>
+          </td>
+        </tr>
+      ));
+    }
+  }
+
+  return (
+    <div>
+      <table className="table table-hover mt-3">
+        <thead>
+          <tr>
+            <th scope="col">City</th>
+            <th scope="col">Temperature (F)</th>
+            <th scope="col">Pressure (hPa)</th>
+            <th scope="col">Humidity (%)</th>
+          </tr>
+        </thead>
+        <tbody>{renderCities()}</tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;
+

src/index.js

@@ -2,16 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
+import reducers from "./reducers";
+import promise from "redux-promise";
+
+const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={createStoreWithMiddleware(reducers)}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import WeatherReducer from "./reducer-weather"
+
+const rootReducer = combineReducers({
+  weather: WeatherReducer,
+});
+
+export default rootReducer;

src/reducers/reducer-weather.js

@@ -0,0 +1,40 @@
+import { FETCH_WEATHER } from "../actions"
+
+const DEFAULT_STATE= {
+  cities: []
+};
+
+const weatherReducer = function (state = DEFAULT_STATE, action) {
+
+  switch (action.type) {    
+    case FETCH_WEATHER:
+      const data = action.payload.data;
+
+      const tempArray = [];
+      const pressureArray = [];
+      const humidityArray = [];
+
+      data.list.forEach(element => {
+        tempArray.push(element.main.temp);
+        pressureArray.push(element.main.pressure);
+        humidityArray.push(element.main.humidity);
+      });
+
+      const newCity = {
+        name: data.city.name,
+        temp: tempArray,
+        pressure: pressureArray,
+        humidity: humidityArray
+      }
+
+      const newCities = [newCity, ...state.cities];
+
+      return {
+        cities: newCities
+      }
+    default: 
+      return state;
+  }
+}
+
+export default weatherReducer;