add files

.gitignore

@@ -21,3 +21,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json
+package.json
+
+

package.json

@@ -6,9 +6,17 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^1.2.1",
+    "bootstrap": "^5.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.41.0",
+    "react-hooks": "^1.0.1",
+    "react-redux": "^8.0.5",
     "react-scripts": "4.0.3",
+    "react-sparklines": "^1.7.0",
+    "redux": "^4.2.0",
+    "redux-promise": "^0.6.0",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

src/App.js

@@ -1,5 +1,5 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
   return (

src/actions/index.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export const FETCH_WEATHER = "FETCH_WEATHER";
+
+export function fetchWeather(city) {
+  return axios
+    .get(
+      `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=imperial&appid=9ee788adf1c5adbf88a7e15599e681a2`
+    )
+    .then((response) => {
+      return {
+        type: FETCH_WEATHER,
+        payload: response,
+      };
+    })
+    .catch((error) => {
+      alert("Invalid Input");
+    });
+}

src/components/header.js

@@ -0,0 +1,9 @@
+const container = (props) => {
+  return (
+    <div className="container col-md-8 text-center">
+      <div className="container">{props.children}</div>
+    </div>
+  );
+};
+
+export default container;

src/components/weather-index.js

@@ -0,0 +1,97 @@
+import { useDispatch, useSelector } from "react-redux";
+import { fetchWeather } from "../actions";
+import { useForm } from "react-hook-form";
+import _ from "lodash";
+
+import {
+  Sparklines,
+  SparklinesReferenceLine,
+  SparklinesLine,
+} from "react-sparklines";
+
+const WeatherIndex = () => {
+  const { register, handleSubmit } = useForm();
+  const weathers = useSelector((state) => state.weathers);
+  const dispatch = useDispatch();
+
+  const onSubmit = (data) => {
+    dispatch(fetchWeather(data.cityName));
+  };
+
+  //averages data from api
+  const getAverage = (values, target) => {
+    const valuesArray = values.map((item) => item.main[target]);
+    return parseInt(
+      valuesArray.reduce((acc, v) => acc + v) / valuesArray.length
+    );
+  };
+
+  //creates graphs
+  const renderGraph = (values, target, color, symbol) => {
+    const valuesArray = values.map((item) => item.main[target]);
+    const avgValue = getAverage(values, target);
+    return (
+      <div style={{ width: "300px" }}>
+        <Sparklines data={valuesArray} width={300} height={200} margin={5}>
+          <SparklinesLine color={color} />
+          <SparklinesReferenceLine type="avg" />
+        </Sparklines>
+        <p className="text-center">
+          {avgValue} {symbol}
+        </p>
+      </div>
+    );
+  };
+
+  //maps weather data
+  function renderWeatherRows() {
+    if (!_.isEmpty(weathers.weather)) {
+      const renderedRows = weathers.weather.map((item) => (
+        <tr key={item.city.name}>
+          <th scope="row">{item.city.name}</th>
+          <td>{renderGraph(item.list, "temp", "orange", "F")}</td>
+          <td>{renderGraph(item.list, "pressure", "green", "hPa")}</td>
+          <td>{renderGraph(item.list, "humidity", "grey", "%")}</td>
+        </tr>
+      ));
+      return renderedRows;
+    }
+    return (
+      <tr>
+        <td>No weather to show</td>
+      </tr>
+    );
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)} className="mt-5 mb-4">
+        <div className="input-group">
+          <input
+            {...register("cityName")}
+            className="form-control"
+            placeholder="Get a five-day forecast in your favorite city"
+          />
+          <div>
+            <button className="btn btn-secondary" type="submit">
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+      <table className="table">
+        <thead>
+          <tr>
+            <th scope="col">City</th>
+            <th scope="col">Temperatue (F)</th>
+            <th scope="col">Pressure (hPa)</th>
+            <th scope="col">Humidity (%)</th>
+          </tr>
+        </thead>
+        <tbody>{renderWeatherRows()}</tbody>
+      </table>
+    </div>
+  );
+};
+
+export default WeatherIndex;

src/index.js

@@ -1,17 +1,22 @@
-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.css";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { createStore, applyMiddleware } from "redux";
+import { Provider } from "react-redux";
+import promise from "redux-promise";
+
+import WeatherIndex from "./components/weather-index";
+import Container from "./components/header";
+import reducers from "./reducers";
+
+const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  <Provider store={createStoreWithMiddleware(reducers)}>
+    <Container>
+      <WeatherIndex />
+    </Container>
+  </Provider>,
+  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 "./weather-reducer";
+
+const rootReducer = combineReducers({
+  weathers: WeatherReducer,
+});
+
+export default rootReducer;

src/reducers/weather-reducer.js

@@ -0,0 +1,20 @@
+import { FETCH_WEATHER } from "../actions";
+
+const setDefaultState = () => {
+  return {
+    weather: [],
+  };
+};
+
+const weatherReducer = function (state = setDefaultState(), action) {
+  switch (action.type) {
+    case FETCH_WEATHER:
+      return {
+        weather: [...state.weather, action.payload.data],
+      };
+    default:
+      return state;
+  }
+};
+
+export default weatherReducer;