StephenGrider · mariored22 · Apr 24, 2018
diff --git a/README.md b/README.md
@@ -1,25 +1,12 @@
-# ReduxSimpleStarter
+React-Redux Weather Web App
 
-Interested in learning [Redux](https://www.udemy.com/react-redux/)?
+This web app is used to display acccurate weather information based on user's input for five days
 
-### Getting Started
+This app uses OpenWeatherApi to retrieve the weather information for 5 days
 
-There are two methods for getting started with this repo.
+This app uses axios for asynchronous network calls
 
-#### Familiar with Git?
-Checkout this repo, install dependencies, then start the gulp process with the following:
+Redux promise is used as a middleware to promise the network request.
 
-```
-> git clone https://github.com/StephenGrider/ReduxSimpleStarter.git
-> cd ReduxSimpleStarter
-> npm install
-> npm start
-```
+SET-UP:
 
-#### Not Familiar with Git?
-Click [here](https://github.com/StephenGrider/ReactStarter/releases) then download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:
-
-```
-> npm install
-> npm start
-```
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/style/style.css">
     <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <script src="https://maps.googleapis.com/maps/api/js"></script>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -1,12 +1,14 @@
 {
-  "name": "redux-simple-starter",
+  "name": "weather-react",
   "version": "1.0.0",
-  "description": "Simple starter package for Redux with React and Babel support",
+  "description":
+    "Simple starter package for Redux with React and Babel support",
   "main": "index.js",
   "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
   "scripts": {
     "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
+    "test":
+      "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
     "test:watch": "npm run test -- --watch"
   },
   "author": "",
@@ -26,12 +28,17 @@
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "babel-preset-stage-1": "^6.1.18",
-    "lodash": "^3.10.1",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-redux": "4.3.0",
-    "react-router": "^2.0.1",
-    "redux": "^3.0.4"
-  }
+    "axios": "0.18.0",
+    "babel-preset-stage-1": "6.24.1",
+    "bootstrap": "4.1.0",
+    "lodash": "4.17.5",
+    "react": "16.3.1",
+    "react-dom": "16.3.1",
+    "react-google-maps": "9.4.5",
+    "react-redux": "5.0.7",
+    "react-sparklines": "1.7.0",
+    "redux": "3.7.2",
+    "redux-promise": "0.5.3"
+  },
+  "keywords": []
 }
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const API_KEY = 'aba4541ae1393f56652bc7b4a3332ce7';
+
+const URL = `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;
+
+
+export function Weather(city){
+  const mainUrl =` ${URL}&q=${city },us`;
+
+
+  const request = axios.get(mainUrl);
+
+  return{
+
+    type: "FETCH_WEATHER",
+    payload: request
+  };
+
+}
diff --git a/src/components/app.js b/src/components/app.js
@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
+import SearchBar from '../containers/SearchBar';
+import WeatherList from '../containers/Weather_list';
 
 export default class App extends Component {
   render() {
     return (
-      <div>React simple starter</div>
+      <div> 
+        <SearchBar />
+        <WeatherList />
+      </div>
     );
   }
 }
diff --git a/src/containers/SearchBar.js b/src/containers/SearchBar.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+import {Weather} from '../actions/index'
+import {bindActionCreators} from 'redux';
+class SearchBar extends Component{
+
+  constructor(){
+    super();
+
+    this.state = {term: ''};
+  }
+
+  onchange(e){
+    this.setState({term: e.target.value})
+  }
+  onSubmit(e){
+    e.preventDefault();
+    this.props.Weather(this.state.term);
+    this.setState({term : ''})
+  }
+
+  render(){
+    return(
+      <form onSubmit={this.onSubmit.bind(this)}  className = "input-group"  >
+        <input value={this.state.term} onChange={this.onchange.bind(this)} className="form-control" placeholder="Enter the city name or zip code" />
+      <span className = " input-group-btn">
+      <button className = "btn btn-primary" type = "submit" >Search</button>
+      </span>
+      </form>
+    );
+  }
+}
+
+function mapDispatchToProps(dispatch){
+  return bindActionCreators ({Weather}, dispatch);
+}
+
+export default connect(null, mapDispatchToProps)(SearchBar);
+
diff --git a/src/containers/Weather_list.js b/src/containers/Weather_list.js
@@ -0,0 +1,90 @@
+import React , {Component } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { Sparklines, SparklinesLine, SparklinesSpots, SparklinesBars, SparklinesReferenceLine } from 'react-sparklines';
+
+class WeatherList extends Component{
+
+  renderList(data) {
+      console.log(data);
+      const temp = data.list.map( weather => weather.main.temp - 273.15 );
+
+
+      const pressure = data.list.map( weather => weather.main.pressure );
+
+      const humidity = data.list.map(function (weather) {
+        return weather.main.humidity;
+      });
+
+       function average(data){
+          return _.round(_.sum(data)/data.length);
+        }
+
+      const desc = data.list.map(des => des.weather.map(de => de.description )
+      );
+
+      return (
+
+                <tr key = {data.city.name}>
+                <td> {data.city.name}</td>
+                <td>
+            {desc[0]}
+                </td>
+                <td>
+            <Sparklines data={temp} svgHeight={80} svgWidth={180} >
+             <SparklinesLine color = "orange" />
+             <SparklinesReferenceLine type="avg" />
+            </Sparklines>
+            <div>{average(temp)} </div>
+                </td>
+
+                <td>
+            <Sparklines data={pressure} svgHeight={80} svgWidth={180}  limit={20}>
+              <SparklinesLine color = "green" />
+              <SparklinesReferenceLine type="avg" />
+            </Sparklines>
+            <div>{average(pressure)} </div>
+                </td>
+
+                <td>
+            <Sparklines data={humidity} svgHeight={80} svgWidth={180}  limit={10} >
+              <SparklinesReferenceLine type="avg" />
+              <SparklinesBars color="#0a83d8" />
+            </Sparklines>
+            <div>{average(humidity)} </div>
+                </td>
+
+                </tr> 
+      );
+
+  }
+
+  render(){
+
+
+         return(
+      <table className = "table table-hover">
+        <thead>
+        <tr>
+          <th>City</th>
+          <th>Desciption</th>
+          <th>Temparature (C&deg;)</th>
+          <th>Pressure(hpa)</th>
+          <th>Humidity(%)</th>
+          </tr>
+        </thead>
+        <tbody>
+            {this.props.weather.map(this.renderList)}
+        </tbody>
+      </table>
+    );
+  }
+
+}
+
+function mapStateToProps(state){
+  return{
+    weather: state.weather
+  }
+}
+export default connect(mapStateToProps)(WeatherList);
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
+import ReduxPromise from 'redux-promise';
 
 import App from './components/app';
 import reducers from './reducers';
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
 
 ReactDOM.render(
   <Provider store={createStoreWithMiddleware(reducers)}>

diff --git a/src/reducers/Weather_Reducer.js b/src/reducers/Weather_Reducer.js
@@ -0,0 +1,11 @@
+  import {Weather} from '../actions/index';
+
+export default function( state = [], action){
+  switch (action.type){
+    case 'FETCH_WEATHER':
+     //return [ action.payload.data , ...state ]
+      return action.payload.data ? [action.payload.data, ...state] : state ;
+
+  }
+  return state;
+}
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux';
+import WeatherReducer from './Weather_Reducer';
 
 const rootReducer = combineReducers({
-  state: (state = {}) => state
+
+  weather: WeatherReducer
 });
 
 export default rootReducer;
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,3 @@
+.input-group {
+  margin: 25px 0px;
+}