From 94757c1d78b8aecd778ee33bc852f058cc5ea915 Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Fri, 13 Jan 2017 16:16:04 -0800 Subject: [PATCH] Initial commit React Weather App --- .gitignore | 3 ++ app/api/openWeatherMap.jsx | 20 +++++++++++++ app/app.jsx | 18 ++++++++++++ app/components/About.jsx | 11 +++++++ app/components/Examples.jsx | 11 +++++++ app/components/Main.jsx | 17 +++++++++++ app/components/Nav.jsx | 17 +++++++++++ app/components/Weather.jsx | 49 +++++++++++++++++++++++++++++++ app/components/WeatherForm.jsx | 26 ++++++++++++++++ app/components/WeatherMessage.jsx | 13 ++++++++ package.json | 26 ++++++++++++++++ public/index.html | 14 +++++++++ server.js | 10 +++++++ webpack.config.js | 33 +++++++++++++++++++++ 14 files changed, 268 insertions(+) create mode 100644 .gitignore create mode 100644 app/api/openWeatherMap.jsx create mode 100644 app/app.jsx create mode 100644 app/components/About.jsx create mode 100644 app/components/Examples.jsx create mode 100644 app/components/Main.jsx create mode 100644 app/components/Nav.jsx create mode 100644 app/components/Weather.jsx create mode 100644 app/components/WeatherForm.jsx create mode 100644 app/components/WeatherMessage.jsx create mode 100644 package.json create mode 100644 public/index.html create mode 100644 server.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a74eea5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules + +public/bundle.js diff --git a/app/api/openWeatherMap.jsx b/app/api/openWeatherMap.jsx new file mode 100644 index 0000000..5877cb4 --- /dev/null +++ b/app/api/openWeatherMap.jsx @@ -0,0 +1,20 @@ +var axios = require('axios'); + +const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=37916edc2b2b7a2f53fa8965e5d53db6&units=imperial'; + +module.exports = { + getTemp: function (location) { + var encodedLocation = encodeURIComponent(location); + var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`; + + return axios.get(requestUrl).then(function (res) { + if (res.data.cod && res.data.message) { + throw new Error(res.data.message); + } else { + return res.data.main.temp; + } + }, function(err) { + throw new Error(err.response.data.message); + }); + } +} diff --git a/app/app.jsx b/app/app.jsx new file mode 100644 index 0000000..551a79c --- /dev/null +++ b/app/app.jsx @@ -0,0 +1,18 @@ +var React = require('react'); +var ReactDOM = require('react-dom'); +var {Route, Router, IndexRoute, hashHistory} = require('react-router'); +var Main = require('Main'); +var Weather = require('Weather'); +var About = require('About'); +var Examples = require('Examples'); + +ReactDOM.render( + + + + + + + , + document.getElementById('app') +); diff --git a/app/components/About.jsx b/app/components/About.jsx new file mode 100644 index 0000000..e714dea --- /dev/null +++ b/app/components/About.jsx @@ -0,0 +1,11 @@ +var React = require('react'); + +var About = React.createClass({ + render: function (){ + return ( +

About Component

+ ); + } +}); + +module.exports = About; diff --git a/app/components/Examples.jsx b/app/components/Examples.jsx new file mode 100644 index 0000000..9e80c09 --- /dev/null +++ b/app/components/Examples.jsx @@ -0,0 +1,11 @@ +var React = require('react'); + +var Examples = React.createClass({ + render: function () { + return ( +

Examples Component

+ ); + } +}); + +module.exports = Examples; diff --git a/app/components/Main.jsx b/app/components/Main.jsx new file mode 100644 index 0000000..f09d630 --- /dev/null +++ b/app/components/Main.jsx @@ -0,0 +1,17 @@ +var React = require('react'); +var Nav = require('Nav'); + +var Main = React.createClass({ + render: function () { + return ( +
+
+ + ); + } +}); + +module.exports = Main; diff --git a/app/components/Nav.jsx b/app/components/Nav.jsx new file mode 100644 index 0000000..84c9be7 --- /dev/null +++ b/app/components/Nav.jsx @@ -0,0 +1,17 @@ +var React = require('react'); +var {Link, IndexLink} = require('react-router'); + +var Nav = React.createClass({ + render: function (){ + return ( +
+

Nav Component

+ Get Weather + About + Examples +
+ ); + } +}); + +module.exports = Nav; diff --git a/app/components/Weather.jsx b/app/components/Weather.jsx new file mode 100644 index 0000000..fcf383d --- /dev/null +++ b/app/components/Weather.jsx @@ -0,0 +1,49 @@ +var React = require('react'); +var WeatherForm = require('WeatherForm'); +var WeatherMessage = require('WeatherMessage'); +var openWeatherMap = require('openWeatherMap'); + +var Weather = React.createClass({ + getInitialState: function () { + return { + isLoading: false + } + }, + handleSearch: function (location) { + var that = this; + + this.setState({isLoading: true}); + + openWeatherMap.getTemp(location).then(function (temp) { + that.setState({ + location: location, + temp: temp, + isLoading: false + }); + }, function (errorMessage) { + that.setState({isLoading: false}); + alert(errorMessage); + }); + }, + render: function () { + var {isLoading, temp, location} = this.state; + + function renderMessage () { + if (isLoading) { + return

Fetching weather...

; + } else if (temp && location) { + return ; + } + } + + return ( +
+

Weather Component

+ + {renderMessage()} +
+ ) + } +}); + +module.exports = Weather; diff --git a/app/components/WeatherForm.jsx b/app/components/WeatherForm.jsx new file mode 100644 index 0000000..fa13706 --- /dev/null +++ b/app/components/WeatherForm.jsx @@ -0,0 +1,26 @@ +var React = require('react'); + +var WeatherForm = React.createClass({ + onFormSubmit: function (e) { + e.preventDefault(); + + var location = this.refs.location.value; + + if (location.length > 0) { + this.refs.location.value = ''; + this.props.onSearch(location); + } + }, + render: function () { + return ( +
+
+ + +
+
+ ); + } +}); + +module.exports = WeatherForm; diff --git a/app/components/WeatherMessage.jsx b/app/components/WeatherMessage.jsx new file mode 100644 index 0000000..e7f09a7 --- /dev/null +++ b/app/components/WeatherMessage.jsx @@ -0,0 +1,13 @@ +var React = require('react'); + +var WeatherMessage = React.createClass({ + render: function () { + var {temp, location} = this.props; + + return ( +

It's it {temp} in {location}.

+ ) + } +}); + +module.exports = WeatherMessage; diff --git a/package.json b/package.json new file mode 100644 index 0000000..e552968 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "boilerplate", + "version": "1.0.0", + "description": "Simple react app", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Raghu", + "license": "MIT", + "dependencies": { + "axios": "^0.15.3", + "express": "^4.14.0", + "react": "^0.14.7", + "react-dom": "^0.14.7", + "react-router": "^2.0.0" + }, + "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", + "babel-preset-es2015": "^6.5.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-0": "^6.5.0", + "webpack": "^1.12.13" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..156ef8f --- /dev/null +++ b/public/index.html @@ -0,0 +1,14 @@ + + + + + + + + +
+ + + + + diff --git a/server.js b/server.js new file mode 100644 index 0000000..0158fea --- /dev/null +++ b/server.js @@ -0,0 +1,10 @@ +var express = require('express'); + +// Create our app +var app = express(); + +app.use(express.static('public')); + +app.listen(3000, function () { + console.log('Express server is up on port 3000'); +}); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..8926255 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,33 @@ +module.exports = { + entry: './app/app.jsx', + output: { + path: __dirname, + filename: './public/bundle.js' + }, + resolve: { + root: __dirname, + alias: { + Main: 'app/components/Main.jsx', + Nav: 'app/components/Nav.jsx', + Weather: 'app/components/Weather.jsx', + WeatherForm: 'app/components/WeatherForm.jsx', + WeatherMessage: 'app/components/WeatherMessage.jsx', + About: 'app/components/About.jsx', + Examples: 'app/components/Examples.jsx', + openWeatherMap: 'app/api/openWeatherMap.jsx' + }, + extensions: ['', '.js', '.jsx'] + }, + module: { + loaders: [ + { + loader: 'babel-loader', + query: { + presets: ['react', 'es2015', 'stage-0'] + }, + test: /\.jsx?$/, + exclude: /(node_modules|bower_components)/ + } + ] + } +};