Initial commit React Weather App

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+
+public/bundle.js

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);
+    });
+  }
+}

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(
+  <Router history={hashHistory}>
+    <Route path="/" component={Main}>
+      <Route path="about" component={About}/>
+      <Route path="examples" component={Examples}/>
+      <IndexRoute component={Weather}/>
+    </Route>
+  </Router>,
+  document.getElementById('app')
+);

app/components/About.jsx

@@ -0,0 +1,11 @@
+var React = require('react');
+
+var About = React.createClass({
+  render: function (){
+    return (
+      <h3>About Component</h3>
+    );
+  }
+});
+
+module.exports = About;

app/components/Examples.jsx

@@ -0,0 +1,11 @@
+var React = require('react');
+
+var Examples = React.createClass({
+  render: function () {
+    return (
+      <h3>Examples Component</h3>
+    );
+  }
+});
+
+module.exports = Examples;

app/components/Main.jsx

@@ -0,0 +1,17 @@
+var React = require('react');
+var Nav = require('Nav');
+
+var Main = React.createClass({
+  render: function () {
+    return (
+      <div>
+        <Nav/>
+        <h2>Main Component</h2>
+        {this.props.children}
+      </div>
+
+    );
+  }
+});
+
+module.exports = Main;

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 (
+      <div>
+        <h2>Nav Component</h2>
+        <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
+        <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
+        <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
+      </div>
+    );
+  }
+});
+
+module.exports = Nav;

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 <h3>Fetching weather...</h3>;
+      } else if (temp && location) {
+        return <WeatherMessage temp={temp} location={location}/>;
+      }
+    }
+
+    return (
+      <div>
+        <h3>Weather Component</h3>
+        <WeatherForm onSearch={this.handleSearch}/>
+        {renderMessage()}
+      </div>
+    )
+  }
+});
+
+module.exports = Weather;

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 (
+        <div>
+          <form onSubmit={this.onFormSubmit}>
+            <input type="text" ref="location"/>
+            <button>Get Weather</button>
+          </form>
+        </div>
+    );
+  }
+});
+
+module.exports = WeatherForm;

app/components/WeatherMessage.jsx

@@ -0,0 +1,13 @@
+var React = require('react');
+
+var WeatherMessage = React.createClass({
+  render: function () {
+    var {temp, location} = this.props;
+
+    return (
+      <h3>It's it {temp} in {location}.</h3>
+    )
+  }
+});
+
+module.exports = WeatherMessage;

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"
+  }
+}

public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8"/>
+</head>
+
+<body>
+  <div id="app"></div>
+
+  <script src="bundle.js"></script>
+</body>
+
+</html>

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');
+});

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)/
+      }
+    ]
+  }
+};