add ErrorAlert

MacKentoch · MacKentoch · commit ac5a641522d6 · 2016-12-13T05:11:13.000+01:00
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ReactJS Redux GraphQL Apollo Bootstrap Starter</title>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="ReactJS Redux GraphQL Apollo Bootstrap Starter">
+		<meta name="author" content="Erwan DATIN (MacKentoch)">
+  </head>
+  <body>
+    <section id="root"></section>
+    <script type="text/javascript" src="./assets/bundle.js"></script>
+  </body>
+</html>
diff --git a/src/app/components/alert/ErrorAlert.js b/src/app/components/alert/ErrorAlert.js
@@ -0,0 +1,57 @@
+import React, {
+  PropTypes
+}                 from 'react';
+import {
+  Motion,
+  spring,
+  presets
+}                 from 'react-motion';
+
+
+const ErrorAlert = ({ showAlert, errorTitle, errorMessage, onClose }) => (
+  <Motion style={{scale: spring(showAlert ? 1 : 0, presets.stiff)}}>
+    {
+      ({ scale }) => (
+        <div
+          className="alert alert-dismissible alert-danger"
+          style={{
+            WebkitTransform: `scale(${scale})`,
+            transform: `scale(${scale})`
+          }}>
+          <button
+            type="button"
+            className="close"
+            data-dismiss="alert"
+            onClick={onClose}>
+            &times;
+          </button>
+          {
+            errorTitle && errorTitle.length > 0 &&
+            <strong>
+              {errorTitle}
+            </strong>
+          }
+          {
+            <p>
+              {errorMessage}
+            </p>
+          }
+        </div>
+      )
+    }
+  </Motion>
+);
+
+
+ErrorAlert.propTypes = {
+  showAlert: PropTypes.bool,
+  errorTitle: PropTypes.string,
+  errorMessage: PropTypes.string,
+  onClose: PropTypes.func.isRequired
+};
+
+ErrorAlert.defaultProps = {
+  showAlert: false
+};
+
+export default ErrorAlert;
diff --git a/src/app/components/index.js b/src/app/components/index.js
@@ -1,9 +1,11 @@
 import Jumbotron          from './jumbotron/Jumbotron';
 import NavigationBar      from './navigation/NavigationBar';
 import BackToTop          from './backToTop/BackToTop';
+import ErrorAlert         from './alert/ErrorAlert';
 
 export {
   Jumbotron,
   NavigationBar,
-  BackToTop
+  BackToTop,
+  ErrorAlert
 };
diff --git a/src/app/config/index.js b/src/app/config/index.js
@@ -1,6 +1,6 @@
 export const appConfig = {
   // apollo client:
   apollo: {
-    networkInterface: '' // exemple: http://localhost:8080/graphql
+    networkInterface: 'https://us-west-2.api.scaphold.io/graphql/flawless-basketball' // exemple: http://localhost:8080/graphql
   }
 };
diff --git a/src/app/containers/login/Login.js b/src/app/containers/login/Login.js
@@ -55,7 +55,7 @@ const LoginWithMutation = graphql(
           )
           .catch(
             ({data: {error}})=> {
-              ownProps.onUserRegisterError(error);
+              ownProps.onUserLogError(error);
               ownProps.unsetMutationLoading();
               return Promise.reject();
             }
@@ -76,7 +76,9 @@ const mapStateToProps = (state) => {
     currentView:  state.views.currentView,
     // user Auth props:
     userIsAuthenticated: state.userAuth.isAuthenticated,
-    mutationLoading: state.userAuth.mutationLoading
+    mutationLoading: state.userAuth.mutationLoading,
+    // errors:
+    errors: state.userAuth.errors
   };
 };
 
diff --git a/src/app/redux/modules/userAuth.js b/src/app/redux/modules/userAuth.js
@@ -36,6 +36,7 @@ const initialState = {
   isAuthenticated: false,
   lastActionTime: null,
   mutationLoading: false,
+  errors: [],
   ...emptyUser
 };
 
@@ -53,7 +54,8 @@ export default function (state = initialState, action) {
       lastLogin: action.user.lastLogin,
       createdAt: action.user.createdAt,
       modifiedAt: action.user.modifiedAt,
-      lastRefreshTime: action.time
+      lastRefreshTime: action.time,
+      errors: []
     };
 
   case ERROR_USER_LOGGED_IN:
@@ -62,6 +64,8 @@ export default function (state = initialState, action) {
       ...state,
       lastActionTime: action.time,
       isAuthenticated: action.isAuthenticated,
+      // errors:
+      errors: [...action.errors],
       // user infos:
       id: initialState.id,
       username: initialState.username,
diff --git a/src/app/views/login/Login.js b/src/app/views/login/Login.js
@@ -5,6 +5,7 @@ import React, {
 import cx             from 'classnames';
 import shallowCompare from 'react-addons-shallow-compare';
 import { Link }       from 'react-router';
+import { ErrorAlert } from '../../components';
 
 class Login extends Component {
 
@@ -48,7 +49,8 @@ class Login extends Component {
       password
     } = this.state;
     const {
-      mutationLoading
+      mutationLoading,
+      errors
     } = this.props;
 
     return(
@@ -59,7 +61,12 @@ class Login extends Component {
         })}>
         <div className="row">
           <div className="col-md-4 col-md-offset-4">
-
+            <ErrorAlert
+              showAlert={errors.length > 0}
+              errorTitle={'Error'}
+              errorMessage={'login failed'}
+              onClose={()=>console.log('coming soon...')}
+            />
             <form
               className="form-horizontal"
               noValidate>
@@ -179,6 +186,7 @@ Login.propTypes= {
   // auth props:
   userIsAuthenticated: PropTypes.bool.isRequired,
   mutationLoading: PropTypes.bool.isRequired,
+  errors: PropTypes.array.isRequired,
 
   // apollo actions
   loginUser: PropTypes.func.isRequired,
diff --git a/test/redux/actions/views.spec.js b/test/redux/actions/views.spec.js
@@ -17,7 +17,6 @@ chai.use(dirtyChai);
 
 
 describe('redux - action creator "views"', () => {
-
   it('should return enterHome action object', () => {
     const enterHomeACTION = {
       type:         'ENTER_HOME_VIEW',
diff --git a/webpack.production.config.js b/webpack.production.config.js
@@ -3,7 +3,7 @@ const path          = require('path');
 const autoprefixer  = require('autoprefixer');
 const precss        = require('precss');
 
-const assetsDir       = path.resolve(__dirname, 'public/assets');
+const assetsDir       = path.resolve(__dirname, 'docs/assets');
 const nodeModulesDir  = path.resolve(__dirname, 'node_modules');
 
 const config = {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`export const appConfig = {`
`2`	`2`	`// apollo client:`
`3`	`3`	`apollo: {`
`4`		`- networkInterface: '' // exemple: http://localhost:8080/graphql`
	`4`	`+ networkInterface: 'https://us-west-2.api.scaphold.io/graphql/flawless-basketball' // exemple: http://localhost:8080/graphql`
`5`	`5`	`}`
`6`	`6`	`};`