├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
├── screenshot.png
└── src
├── actions
└── actionCreators.js
├── components
├── .tern-port
├── App.js
├── Home.js
├── Main.js
└── SimpleForm.js
├── index.js
├── reducers
├── index.js
└── weather.js
├── sagas
└── sagas.js
└── store.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # testing
7 | coverage
8 |
9 | # production
10 | build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redux-forms-example-weather
2 |
3 | An example project using [redux-form](https://github.com/erikras/redux-form) and [redux-saga](https://github.com/redux-saga/redux-saga).
4 |
5 | 
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-template",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.8.4"
7 | },
8 | "dependencies": {
9 | "react": "^15.4.1",
10 | "react-dom": "^15.4.1",
11 | "react-redux": "^5.0.1",
12 | "react-router": "^3.0.0",
13 | "react-router-redux": "^4.0.7",
14 | "redux": "^3.6.0",
15 | "redux-form": "^6.4.3",
16 | "redux-saga": "^0.13.0",
17 | "semantic-ui-react": "^0.63.1",
18 | "superagent": "^3.3.1"
19 | },
20 | "scripts": {
21 | "start": "react-scripts start",
22 | "build": "react-scripts build",
23 | "test": "react-scripts test --env=jsdom",
24 | "eject": "react-scripts eject"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/redux-forms-example-weather/0a8dd464d194f0d78f9caa7863c03fefbd5b1350/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
17 | React App
18 |
19 |
20 |
21 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/redux-forms-example-weather/0a8dd464d194f0d78f9caa7863c03fefbd5b1350/screenshot.png
--------------------------------------------------------------------------------
/src/actions/actionCreators.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benawad/redux-forms-example-weather/0a8dd464d194f0d78f9caa7863c03fefbd5b1350/src/actions/actionCreators.js
--------------------------------------------------------------------------------
/src/components/.tern-port:
--------------------------------------------------------------------------------
1 | 61626
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import { bindActionCreators } from 'redux';
2 | import { connect } from 'react-redux';
3 | import * as actionCreators from '../actions/actionCreators';
4 |
5 | import Main from './Main';
6 |
7 | function mapStateToProps(state) {
8 | return {
9 | form: state.form,
10 | weather: state.weather
11 | }
12 | }
13 |
14 | function mapDispatchToProps(dispatch) {
15 | return bindActionCreators(actionCreators, dispatch);
16 | }
17 |
18 | const App = connect(mapStateToProps, mapDispatchToProps)(Main);
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SimpleForm from './SimpleForm';
3 | import { Header } from 'semantic-ui-react';
4 |
5 |
6 | class Home extends Component {
7 |
8 | constructor(props) {
9 | super(props);
10 |
11 | this.yahooWidget = this.yahooWidget.bind(this);
12 | }
13 |
14 | yahooWidget() {
15 | const query = this.props.weather.query;
16 | if (query && query.results) {
17 | let html = query.results.channel.item.description;
18 | // remove
19 | html = html.replace(/()/g, '');
20 | return (
21 |
22 |
23 |
24 | {query.results.channel.description}
25 |
26 |
27 |
37 |
38 | {this.yahooWidget()}
39 |
40 | );
41 | }
42 | }
43 |
44 | export default Home;
45 |
46 |
--------------------------------------------------------------------------------
/src/components/Main.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import { Link } from 'react-router';
4 | import { Header, Container } from 'semantic-ui-react'
5 |
6 | class Main extends Component {
7 | render() {
8 | return (
9 |
10 |
13 | {React.cloneElement(this.props.children, this.props)}
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Main;
20 |
21 |
--------------------------------------------------------------------------------
/src/components/SimpleForm.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Field, reduxForm, SubmissionError } from 'redux-form'
3 | import { Input, Button, Message } from 'semantic-ui-react';
4 |
5 | class SimpleForm extends Component {
6 |
7 | locationInput({ input, meta: { touched, error }, ...custom }) {
8 | const hasError = touched && error !== undefined;
9 | return (
10 |
11 | {hasError &&
12 |
16 | }
17 |
23 |
24 | );
25 | }
26 |
27 | submit({ location }, dispatch) {
28 | return new Promise((resolve, reject) => {
29 | dispatch({
30 | type: 'FETCH_WEATHER',
31 | location,
32 | resolve,
33 | reject
34 | });
35 | }).catch((error) => {
36 | throw new SubmissionError(error);
37 | });
38 | }
39 |
40 |
41 | render() {
42 | const { handleSubmit } = this.props;
43 | return (
44 |
49 | );
50 | }
51 | }
52 |
53 | const validate = values => {
54 | const errors = {}
55 | if (!values.location || values.location.trim() === '') {
56 | errors.location = 'Location required'
57 | }
58 | return errors
59 | }
60 |
61 |
62 | export default reduxForm({
63 | form: 'simple',
64 | validate
65 | })(SimpleForm)
66 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './components/App';
5 | import Home from './components/Home';
6 |
7 | import { Router, Route, IndexRoute } from 'react-router';
8 | import { Provider } from 'react-redux'
9 | import store, { history } from './store';
10 |
11 |
12 | const router = (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 |
22 | ReactDOM.render(
23 | router,
24 | document.getElementById('root')
25 | );
26 |
--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { routerReducer } from 'react-router-redux';
3 | import { reducer as formReducer } from 'redux-form'
4 |
5 | import weather from './weather';
6 |
7 | const rootReducer = combineReducers({
8 | form: formReducer,
9 | routing: routerReducer,
10 | weather
11 | });
12 |
13 | export default rootReducer;
14 |
--------------------------------------------------------------------------------
/src/reducers/weather.js:
--------------------------------------------------------------------------------
1 | function weather(state = {}, action) {
2 | switch(action.type) {
3 | case 'WEATHER_FETCHED':
4 | return action.result;
5 | default:
6 | return state;
7 | }
8 | }
9 |
10 | export default weather;
11 |
--------------------------------------------------------------------------------
/src/sagas/sagas.js:
--------------------------------------------------------------------------------
1 | import { takeEvery } from 'redux-saga';
2 | import { fork, call, put } from 'redux-saga/effects';
3 | import request from 'superagent';
4 |
5 | function getWeather(location) {
6 | const url = `https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D"${location}")&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys`;
7 | return request
8 | .get(url)
9 | .then((data) => {
10 | return JSON.parse(data.text);
11 | });
12 | }
13 |
14 | function* callGetWeather({location, resolve, reject}) {
15 | const result = yield call(getWeather, location);
16 | console.log(result);
17 | if (result.query.results) {
18 | yield put({type: "WEATHER_FETCHED", result});
19 | yield call(resolve);
20 | } else {
21 | yield call(reject, {location: 'No data for that location'});
22 | }
23 | }
24 |
25 | function* getWeatherSaga() {
26 | yield* takeEvery("FETCH_WEATHER", callGetWeather);
27 | }
28 |
29 | export default function* root() {
30 | yield [
31 | fork(getWeatherSaga)
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import { syncHistoryWithStore } from 'react-router-redux';
3 | import { browserHistory } from 'react-router'
4 |
5 | import createSagaMiddleware from 'redux-saga'
6 | import mySaga from './sagas/sagas'
7 |
8 | import rootReducer from './reducers/index';
9 |
10 | const defaultState = {};
11 |
12 | const sagaMiddleware = createSagaMiddleware();
13 |
14 | const store = createStore(rootReducer, defaultState, applyMiddleware(sagaMiddleware));
15 |
16 | sagaMiddleware.run(mySaga)
17 |
18 | export const history = syncHistoryWithStore(browserHistory, store);
19 |
20 | export default store;
21 |
22 |
--------------------------------------------------------------------------------