diff --git a/README.md b/README.md index ca60fdfd69..43d1a243d5 100644 --- 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 index c3452f25e3..45fa111d7d 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + diff --git a/package.json b/package.json index 102a759b94..03cd98710f 100644 --- 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": "git@github.com: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 index e69de29bb2..eda1cf361b 100644 --- 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 + }; + +} \ No newline at end of file diff --git a/src/components/app.js b/src/components/app.js index 58614b02cf..814541fadd 100644 --- 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 ( -
React simple starter
+
+ + +
); } } diff --git a/src/containers/SearchBar.js b/src/containers/SearchBar.js new file mode 100644 index 0000000000..989ad04b50 --- /dev/null +++ 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( +
+ + + + +
+ ); + } +} + +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 new file mode 100644 index 0000000000..0f44c51268 --- /dev/null +++ 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 ( + + + {data.city.name} + + {desc[0]} + + + + + + +
{average(temp)}
+ + + + + + + +
{average(pressure)}
+ + + + + + + +
{average(humidity)}
+ + + + ); + + } + + render(){ + + + return( + + + + + + + + + + + + {this.props.weather.map(this.renderList)} + +
CityDesciptionTemparature (C°)Pressure(hpa)Humidity(%)
+ ); + } + +} + +function mapStateToProps(state){ + return{ + weather: state.weather + } +} +export default connect(mapStateToProps)(WeatherList); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 69d577acd1..906f91ad66 100644 --- 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( diff --git a/src/reducers/Weather_Reducer.js b/src/reducers/Weather_Reducer.js new file mode 100644 index 0000000000..33c8c62ae8 --- /dev/null +++ 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 index d12506f382..6c8fdc44ea 100644 --- 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 index e69de29bb2..c8d4bc62fd 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,3 @@ +.input-group { + margin: 25px 0px; +}