notrab · vipinlahoti · Dec 19, 2018 · Jan 3, 2019 · Jan 10, 2019 · Jan 25, 2019
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NODE_PATH=src/
diff --git a/package.json b/package.json
@@ -10,20 +10,29 @@
     "eject": "react-scripts eject",
     "precommit": "pretty-quick --staged"
   },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "connected-react-router": "^6.2.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-helmet": "^5.2.0",
+    "react-intl": "^2.8.0",
+    "react-redux": "^6.0.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.1.3",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "serve": "^10.1.1"
+  },
   "devDependencies": {
-    "prettier": "1.16.1",
-    "react-scripts": "2.1.3"
+    "prettier": "^1.16.1"
   },
-  "dependencies": {
-    "connected-react-router": "4.5.0",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
-    "react-redux": "5.1.1",
-    "react-router": "4.3.1",
-    "react-router-dom": "4.3.1",
-    "redux": "4.0.1",
-    "redux-thunk": "2.3.0",
-    "sanitize.css": "7.0.3",
-    "serve": "10.1.1"
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }
diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>React App</title>
 </head>
 
 <body>
@@ -40,4 +39,4 @@
     -->
 </body>
 
-</html>
+</html>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -0,0 +1,15 @@
+/**
+ * Header
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Header = () =>
+  <header>
+    <Link to="/">Home</Link>
+    <Link to="/about-us">About</Link>
+    <Link to="/todo">Todo</Link>
+  </header>
+
+export default Header;
diff --git a/src/components/ItemList/index.js b/src/components/ItemList/index.js
@@ -0,0 +1,16 @@
+/**
+ * ItemList
+ */
+
+import React from 'react';
+
+const ItemList = ({ items }) => (
+  <div>
+    {items.map(item => (
+      <div key={item.id}>
+        {item.title}
+      </div>
+    ))}
+  </div>
+)
+export default ItemList;
diff --git a/src/containers/Todo/actions.js b/src/containers/Todo/actions.js
@@ -0,0 +1,42 @@
+/**
+ * Todo actions
+ */
+
+import axios from 'axios';
+import { getBaseUrl } from 'utils/request';
+import * as Constants from './constants';
+
+export const getTodo = () => {
+  return dispatch => {
+    dispatch(getTodoRequest());
+
+    axios
+      .get(getBaseUrl(), {})
+      .then(response => {
+        dispatch(getTodoRequestSuccess(response.data));
+      })
+      .catch(error => {
+        dispatch(getTodoRequestFailure(error.message));
+      });
+  };
+};
+
+export const getTodoRequest = () => {
+  return {
+    type: Constants.GET_TODO_REQUEST
+  }
+}
+
+export const getTodoRequestSuccess = (todo = []) => {
+  return {
+    type: Constants.GET_TODO_REQUEST_SUCCESS,
+    todo,
+  };
+}
+
+export const getTodoRequestFailure = error => {
+  return {
+    type: Constants.GET_TODO_REQUEST_FAILURE,
+    error,
+  };
+}
diff --git a/src/containers/Todo/constants.js b/src/containers/Todo/constants.js
@@ -0,0 +1,7 @@
+/**
+ * Todo Constants
+ */
+
+export const GET_TODO_REQUEST = 'Todo/GET_TODO_REQUEST';
+export const GET_TODO_REQUEST_SUCCESS = 'Todo/GET_TODO_REQUEST_SUCCESS';
+export const GET_TODO_REQUEST_FAILURE = 'Todo/GET_TODO_REQUEST_FAILURE';
diff --git a/src/containers/Todo/index.js b/src/containers/Todo/index.js
@@ -0,0 +1,60 @@
+/**
+ * Todo page
+ */
+
+import React, { PureComponent } from 'react';
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+
+import { getTodo } from './actions';
+import ItemList from 'components/ItemList';
+
+class Todo extends PureComponent {
+  static propTypes = {
+    getTodo: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    this.props.getTodo();
+  }
+
+  render() {
+    return (
+      <div>
+        <Helmet>
+          <title>Todo Page</title>
+          <meta
+            name="todo"
+            content="Description of Todo Page"
+          />
+        </Helmet>
+
+        <h1><FormattedMessage id="todo.title"/></h1>
+
+        {this.props.todo.map((item, i) => (
+          <ItemList items={item} key={i}/>
+        ))}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = ({ todoReducer }) => ({
+  todo: todoReducer.todo
+})
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      getTodo
+    },
+    dispatch
+  )
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Todo)
diff --git a/src/containers/Todo/reducer.js b/src/containers/Todo/reducer.js
@@ -0,0 +1,32 @@
+import * as Constants from './constants';
+
+const initialState = {
+  todo: [],
+  error: false
+}
+
+function todoReducer (state = initialState, action) {
+  switch (action.type) {
+    case Constants.GET_TODO_REQUEST:
+      return {
+        ...state,
+      }
+
+    case Constants.GET_TODO_REQUEST_SUCCESS:
+      return {
+        ...state,
+        todo: [...state.todo, action.todo],
+      }
+
+    case Constants.GET_TODO_REQUEST_FAILURE:
+      return {
+        ...state,
+        error: action.error
+      }
+
+    default:
+      return state
+  }
+}
+
+export default todoReducer;
diff --git a/src/containers/about/index.js b/src/containers/about/index.js
@@ -1,10 +1,23 @@
-import React from 'react'
+/**
+ * About-us page
+ */
 
-const About = () => (
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { FormattedMessage } from 'react-intl';
+
+const About = () =>
   <div>
-    <h1>About Page</h1>
-    <p>Did you get here via Redux?</p>
+    <Helmet>
+      <title>About Page</title>
+      <meta
+        name="description"
+        content="Description of About Page"
+      />
+    </Helmet>
+
+    <h1><FormattedMessage id="about.title"/></h1>
+    <p><FormattedMessage id="about.description"/></p>
   </div>
-)
 
 export default About
diff --git a/src/containers/app/index.js b/src/containers/app/index.js
@@ -1,20 +1,35 @@
-import React from 'react'
-import { Route, Link } from 'react-router-dom'
-import Home from '../home'
-import About from '../about'
+/**
+ * App Layout
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { Switch, Route } from 'react-router-dom';
+
+import Header from 'components/Header';
+import Home from 'containers/Home';
+import About from 'containers/About';
+import Todo from 'containers/Todo';
 
 const App = () => (
   <div>
-    <header>
-      <Link to="/">Home</Link>
-      <Link to="/about-us">About</Link>
-    </header>
+    <Helmet
+      titleTemplate="%s"
+      defaultTitle="React Redux Boilerplate"
+    >
+      <meta name="description" content="A React Redux Boilerplate application" />
+    </Helmet>
+
+    <Header/>
 
     <main>
-      <Route exact path="/" component={Home} />
-      <Route exact path="/about-us" component={About} />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route exact path="/about-us" component={About} />
+        <Route exact path="/todo" component={Todo} />
+      </Switch>
     </main>
   </div>
-)
+);
 
-export default App
+export default App;
diff --git a/src/containers/home/actions.js b/src/containers/home/actions.js
@@ -0,0 +1,53 @@
+import * as Constant from './constants';
+
+export const increment = () => {
+  return dispatch => {
+    dispatch({
+      type: Constant.INCREMENT_REQUESTED
+    })
+
+    dispatch({
+      type: Constant.INCREMENT
+    })
+  }
+}
+
+export const incrementAsync = () => {
+  return dispatch => {
+    dispatch({
+      type: Constant.INCREMENT_REQUESTED
+    })
+
+    return setTimeout(() => {
+      dispatch({
+        type: Constant.INCREMENT
+      })
+    }, 3000)
+  }
+}
+
+export const decrement = () => {
+  return dispatch => {
+    dispatch({
+      type: Constant.DECREMENT_REQUESTED
+    })
+
+    dispatch({
+      type: Constant.DECREMENT
+    })
+  }
+}
+
+export const decrementAsync = () => {
+  return dispatch => {
+    dispatch({
+      type: Constant.DECREMENT_REQUESTED
+    })
+
+    return setTimeout(() => {
+      dispatch({
+        type: Constant.DECREMENT
+      })
+    }, 3000)
+  }
+}
diff --git a/src/containers/home/constants.js b/src/containers/home/constants.js
@@ -0,0 +1,4 @@
+export const INCREMENT_REQUESTED = 'Home/INCREMENT_REQUESTED';
+export const INCREMENT = 'Home/INCREMENT';
+export const DECREMENT_REQUESTED = 'Home/DECREMENT_REQUESTED';
+export const DECREMENT = 'Home/DECREMENT';
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ @@
           work correctly both with client-side routing and a non-root public URL.
           Learn how to configure a non-root public URL by running `npm run build`.
         -->
-      <title>React App</title>
     </head>
     <body>
@@ Expand All / @@ -40,4 +39,4 @@ @@
         -->
     </body>
-    </html>
+    </html>