Starting redux

Author: rodriguezmanu

.editorconfig

@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

package.json

@@ -6,6 +6,7 @@
     "bootstrap": "^4.1.3",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
+    "react-bootstrap": "^0.32.3",
     "react-dom": "^16.4.2",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

src/App.css

@@ -0,0 +1,11 @@
+export const SIGNUP_REQUEST = 'SIGNUP_REQUEST';
+export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS';
+export const SIGNUP_FAILURE = 'SIGNUP_FAILURE';
+
+export const LOGIN_REQUEST = 'LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'LOGIN_FAILURE';
+
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
+export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';

src/App.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+  Link
+} from 'react-router-dom';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Login from '../login/Login';
+import Signup from '../signup/Signup';
+// import PrivateRoute from '../privateRoute/PrivateRoute';
+import { logout } from '../../actions/user.actions';
+
+class App extends React.PureComponent {
+
+  static propTypes = {
+    user: PropTypes.shape({}).isRequired,
+    logout: PropTypes.func.isRequired
+  }
+
+  /**
+   * Logout Handler
+   */
+  logoutHandler = () => {
+    const { logout } = this.props;
+    logout();
+  };
+
+  render() {
+    const { user } = this.props;
+
+    return (
+      <Router>
+        <div>
+          <nav className="navbar navbar-expand-lg navbar-light bg-light">
+            <div className="navbar-brand">APP</div>
+            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></span>
+            </button>
+            <div className="collapse navbar-collapse" id="navbarNav">
+              <ul className="navbar-nav">
+                <li className="nav-item">
+                  <div className="nav-item nav-link">
+                    <Link to="/login">Login</Link>
+                  </div>
+                </li>
+                <li className="nav-item">
+                  <div className="nav-item nav-link">
+                    <Link to="/signup">Signup</Link>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </nav>
+          <div className="page-container">
+            <Switch>
+              <Route exact path="/login" component={Login} />
+              <Route path="/signup" component={Signup} />
+              <Redirect to="/login" />
+            </Switch>
+          </div>
+        </div>
+      </Router>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  user: state.user
+});
+
+const mapDispatchToProps = {
+  logout
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/App.test.js

@@ -1,8 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
 import registerServiceWorker from './registerServiceWorker';
+import App from './containers/main/App';
+import configureStore from './store/configureStore';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const store = configureStore();
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root'),
+);
 registerServiceWorker();

src/constants/actionTypes.js

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+
+import user from './user.reducer';
+
+const rootReducer = combineReducers({
+  user
+});
+
+export default rootReducer;

src/containers/main/App.js

@@ -0,0 +1,60 @@
+import {
+  SIGNUP_REQUEST,
+  SIGNUP_SUCCESS,
+  SIGNUP_FAILURE,
+  LOGIN_REQUEST,
+  LOGIN_SUCCESS,
+  LOGIN_FAILURE,
+  LOGOUT_SUCCESS,
+  LOGOUT_FAILURE,
+} from '../constants/actionTypes';
+
+const user = (state = { isFetching: false }, action) => {
+  switch (action.type) {
+    case SIGNUP_REQUEST:
+      return {
+        ...state,
+        isFetching: true,
+      };
+    case SIGNUP_SUCCESS:
+      return {
+        ...state,
+        isFetching: true,
+      };
+    case SIGNUP_FAILURE:
+      return {
+        ...state,
+        isFetching: false
+      };
+    case LOGIN_REQUEST:
+      return {
+        ...state,
+        isFetching: true
+      };
+    case LOGIN_SUCCESS:
+      return {
+        ...state,
+        data: action.data,
+        isAuth: true,
+        isFetching: false
+      };
+    case LOGIN_FAILURE:
+      return {
+        ...state,
+        isAuth: false,
+        isFetching: false
+      };
+    case LOGOUT_SUCCESS:
+      return {};
+    case LOGOUT_FAILURE:
+      return {
+        ...state,
+        isAuth: true,
+        isFetching: false,
+      };
+    default:
+      return state;
+  }
+};
+
+export default user;

src/index.css

@@ -0,0 +1,26 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import logger from 'redux-logger';
+import rootReducer from '../reducers';
+
+const configureStore = (preloadedState) => {
+  const store = createStore(
+    rootReducer,
+    preloadedState,
+    composeWithDevTools(
+      applyMiddleware(thunk, logger),
+    ),
+  );
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      store.replaceReducer(rootReducer);
+    });
+  }
+
+  return store;
+};
+
+export default configureStore;

src/index.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
+}

src/logo.svg

@@ -0,0 +1,18 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+
+const configureStore = (preloadedState) => {
+  const store = createStore(
+    rootReducer,
+    preloadedState,
+    compose(
+      applyMiddleware(thunk),
+    ),
+  );
+
+
+  return store;
+};
+
+export default configureStore;