Redux-weather redo

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+src/dummy.json

package.json

@@ -3,17 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^8.0.2",
     "react-scripts": "4.0.3",
+    "react-sparklines": "^1.7.0",
+    "redux": "^4.2.0",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-promise": "^0.6.0",
+    "save-dev": "^0.0.1-security",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/App.js

@@ -1,25 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+//App component which acts as a container for all other components
+import React from "react";
+import SearchBar from "./container/search_bar";
+import WeatherList from "./container/weather_list"
 
-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>
+const App = () =>{
+  return(
+    <div className="col-md-8 offset-md-2">
+      <SearchBar />
+      <br></br>
+      <WeatherList />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App;

src/actions/index.js

@@ -0,0 +1,47 @@
+import axios from "axios";
+import _ from "lodash"
+
+export const FETCH_CITYWEATHER = "FETCH_CITYWEATHER";
+//const API_KEY = process.env.REDUX_APP_WEATHER_API_KEY;
+const ROOT_URL = "https://api.openweathermap.org/data/2.5";
+const API_KEY = "d2ebbe84afd80c9a2267505ea9c93841";
+
+//function which returns type and payload
+export function fetchCityWeather(city) {
+  //promise and catch
+  const request = axios.get(`${ROOT_URL}/forecast?q=${city}&units=imperial&appid=${API_KEY}`)
+  .then(request=> {
+    const fiveDayData = (data) => {
+      const temp = [];
+      const pressure = [];
+      const humidity = [];
+
+      data.data.list.forEach(element => {
+        temp.push(element.main.temp);
+        pressure.push(element.main.pressure);
+        humidity.push(element.main.humidity);
+      })
+
+      return({
+        city: request.data.city.name.toUpperCase(),
+        temp: temp,
+        pressure: pressure,
+        humidity: humidity,
+        tempAve: _.round(_.mean(temp)),
+        pressureAve: _.round(_.mean(pressure)),
+        humidityAve: _.round(_.mean(humidity))
+      })
+    }
+
+    return fiveDayData(request)
+  })
+  .catch(err=> {
+    console.log(`City not found. Input a valid city! ${err}`)
+    alert(`City not found. Input a valid city! \n${err}`)
+  })
+
+  return {
+    type: FETCH_CITYWEATHER,
+    payload: request,
+  }
+}

src/components/header.js

@@ -0,0 +1,17 @@
+//Header component function. Will return and display Redux Weather at the top.
+const Header = (props) => {
+  return (
+    <div>
+      <div className="jumbotron text-center">
+        <div className="container">
+          <h1 className="jumbotron-heading">Redux Weather</h1>
+        </div>
+      </div>
+      <div className="container">
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default Header;

src/container/search_bar.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react"
+import { useDispatch, useSelector } from "react-redux";
+import _ from "lodash"
+import { fetchCityWeather } from "../actions";
+
+//funciton component that renders the searchbar
+const SearchBar = () => {
+  //useSelector function hook allows component to extract data from Redux store state
+  const weatherPosts = useSelector(state => state.weatherPosts)
+  //usedispatch function hook returns dispatch function from redux store. Used to dispatch actions.
+  const dispatch = useDispatch();
+
+  const [cityState, setCity] = useState("")
+
+  const handleSearchButtonClick = (e) => {
+    e.preventDefault();
+    setCity('');
+    //variable which searches for input value inside of an array of objects. Returns in an arraay matched objects that contain value to component state.
+    const filteredCity = _.filter(weatherPosts, (obj) => cityState.toUpperCase() === obj.city)
+    //checking for input matches to redux state
+    weatherPosts.length === 0 ? dispatch(fetchCityWeather(cityState))
+    :filteredCity.length === 0 ? dispatch(fetchCityWeather(cityState))
+    :alert("City already listed!");
+  }
+
+  return (
+    <div className="input-group">
+      <input value={cityState} onChange={(e)=>setCity(e.target.value)} type="search" className="form-control rounded" placeholder="Enter a City" aria-label="Search" aria-describedby="search-addon" />
+      <button value={cityState} type="button" className="btn btn-outline-primary" onClick={handleSearchButtonClick}>search</button>
+    </div>
+  )
+}
+
+export default SearchBar

src/container/weather_list.js

@@ -0,0 +1,58 @@
+import { useSelector } from "react-redux";
+import { Sparklines,SparklinesLine,SparklinesReferenceLine } from 'react-sparklines';
+
+//component which returns list of weather that contains 5 day charts for temp, pressure, and humidity
+const WeatherList = () =>{
+  //useSelector function allows component to extract data from Redux store state
+  const weatherPosts = useSelector(state => state.weatherPosts)
+
+  //function used to return JSX for the charts that takes the 5 day data values
+  const renderChart = (dataValues, color, specificCurrentWeatherMetric, symbol) => {
+    return(
+      <div>
+        <Sparklines limit={5} svgWidth={250} svgHeight={75} margin={5} data={dataValues}>
+          <SparklinesLine color={color}/>
+          <SparklinesReferenceLine type="mean" />
+        </Sparklines>
+        <div className="text-center">{specificCurrentWeatherMetric} {symbol}</div>
+      </div>
+    )
+  }
+
+  //function used return JSX row that contains all the charts and name of the city. Only render if state has objects.
+  const RenderRow = () => { 
+    if(weatherPosts.length>0){
+      return weatherPosts.map((currentWeatherPost, index)=>{
+        return(
+          <tr key={index}>
+            <th>{currentWeatherPost.city}</th>
+            <td >{renderChart(currentWeatherPost.temp, 'blue', currentWeatherPost.tempAve, "\u2109")}</td>
+            <td >{renderChart(currentWeatherPost.pressure, 'green', currentWeatherPost.pressureAve, "\u3371")}</td>
+            <td >{renderChart(currentWeatherPost.humidity, 'red', currentWeatherPost.humidityAve, "%")}</td>
+          </tr>
+        )
+      })
+    } 
+    else {
+      return (<tr><th>No Weather to Show</th></tr>)
+    }
+  }
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th scope="col">City</th>
+          <th className="text-center" scope="col">Temperature</th>
+          <th className="text-center" scope="col">Pressure</th>
+          <th className="text-center" scope="col">Humidity</th>
+        </tr>
+      </thead>
+      <tbody>
+      <RenderRow />
+      </tbody>
+    </table>
+  )
+}
+
+export default WeatherList;

src/index.js

@@ -1,17 +1,23 @@
-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 promise from "redux-promise"
+//provider gives application access to redux store
+import { Provider } from "react-redux";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+import Header from "./components/header.js"
+import App from "./App";
+import reducers from "./reducers"
+
+//making sure actions wait for promise to be fulfulled before we pass the data to the reducer
+const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
 
-// 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();
+ReactDOM.render(
+  <Provider store={createStoreWithMiddleware(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}>
+    <Header>
+      <App component={App}/>
+    </Header>
+  </Provider>,
+  document.getElementById("root")
+);

src/reducers/index.js

@@ -0,0 +1,9 @@
+import {combineReducers } from "redux";
+import WeatherPostsReducer from "./reducer_weather"
+
+//combines all our reducers to have a redux state available when using hook useSelector and change state by useDispatch
+const rootReducer = combineReducers({
+  weatherPosts: WeatherPostsReducer,
+})
+
+export default rootReducer;

src/reducers/reducer_weather.js

@@ -0,0 +1,18 @@
+import {FETCH_CITYWEATHER} from "../actions";
+
+//list of reducers which return an array of objects that contain the 5 day weather for a city.
+const weatherPostsReducer = (state = [], action) => {
+  switch (action.type) {
+    case FETCH_CITYWEATHER:
+      if(action.payload === undefined){
+        return state;
+      }
+      else{
+        return [action.payload,...state];
+      }
+    default:
+      return state;
+  }
+}
+
+export default weatherPostsReducer