Add better alerts for ok / error messages

package.json

@@ -15,6 +15,7 @@
         "jwt-decode": "^2.1.0",
         "react": "^15.3.2",
         "react-bootstrap": "^0.30.6",
+        "react-bootstrap-sweetalert": "^3.0.0",
         "react-dom": "^15.3.2",
         "react-loading": "^0.0.9",
         "react-redux": "^4.4.6",

src/public/js/actions/actionCreators.js

@@ -1,21 +1,30 @@
 import { configureAxios, request } from '../requests'
 
 // ======================
-//         Errors
+//         Alerts
 // ======================
 
-export function addError(message) {
+export function addAlertError(message) {
   return {
-    type: 'ADD_ERROR',
+    type: 'ADD_ALERT_ERROR',
     payload: {
       message,
     }
   }
 }
 
-export function dismissError() {
+export function addAlertOk(message) {
   return {
-    type: 'DISMISS_ERROR',
+    type: 'ADD_ALERT_OK',
+    payload: {
+      message,
+    }
+  }
+}
+
+export function dismissAlert() {
+  return {
+    type: 'DISMISS_ALERT',
   }
 }
 
@@ -44,14 +53,15 @@ export function loginUser(username, password) {
         username: username,
         password: password,
       },
-    )
+    ),
   )
 }
 
 export function updateUser(config) {
   return request(
     'USER_UPDATE',
-    configureAxios().post('/users/edit', config)
+    configureAxios().post('/users/edit', config),
+    "User updated",
   )
 }
 

src/public/js/app.js

@@ -27,7 +27,7 @@ import store, { history } from './store'
 
 // Components
 import NavBar from './components/navbar'
-import Error from './components/errors'
+import Alert from './components/alerts/alert'
 import MovieList from './components/movies/list'
 import ShowList from './components/shows/list'
 import ShowDetails from './components/shows/details'
@@ -43,7 +43,7 @@ class Main extends React.Component {
     return (
       <div>
         <NavBar {...this.props}/>
-        <Error {...this.props}/>
+        <Alert {...this.props}/>
         <div className="container-fluid">
           {React.cloneElement(this.props.children, this.props)}
         </div>
@@ -57,7 +57,7 @@ function mapStateToProps(state) {
     movieStore: state.movieStore,
     showStore: state.showStore,
     userStore: state.userStore,
-    errors: state.errors,
+    alerts: state.alerts,
   }
 }
 

src/public/js/components/alerts/alert.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import SweetAlert from 'react-bootstrap-sweetalert';
+
+export default function Alert(props) {
+  if (!props.alerts.show) {
+    return null
+  }
+
+  return (
+    <SweetAlert
+      type={props.alerts.type}
+      onConfirm={props.dismissAlert}
+      title={props.alerts.message}
+    />
+  )
+}

src/public/js/components/errors.js

@@ -1,19 +0,0 @@
-import React from 'react'
-
-export default function Error(props) {
-  if (!props.errors.message) {
-    return null
-  }
-  return (
-    <div className="row">
-      <div className="col-md-6 col-md-offset-3 col-xs-12">
-        <div className="alert alert-warning">
-          <button type="button" className="close" onClick={props.dismissError}>
-            <span>&times;</span>
-          </button>
-          <p>{props.errors.message}</p>
-        </div>
-      </div>
-    </div>
-  )
-}

src/public/js/reducers/alerts.js

@@ -0,0 +1,30 @@
+const defaultState = {
+  show: false,
+  message: "",
+  type: "",
+};
+
+export default function Alert(state = defaultState, action) {
+  switch (action.type) {
+    case 'ADD_ALERT_ERROR':
+      return Object.assign({}, state, {
+        message: action.payload.message,
+        show: true,
+        type: "error",
+      })
+    case 'ADD_ALERT_OK':
+      return Object.assign({}, state, {
+        message: action.payload.message,
+        show: true,
+        type: "success",
+      })
+    case 'DISMISS_ALERT':
+      return Object.assign({}, state, {
+        message: "",
+        show: false,
+        type: "",
+      })
+    default:
+      return state;
+  }
+}

src/public/js/reducers/errors.js

@@ -1,12 +0,0 @@
-export default function error(state = {}, action) {
-  switch (action.type) {
-    case 'ADD_ERROR':
-      return Object.assign({}, state, {
-        message: action.payload.message,
-      })
-    case 'DISMISS_ERROR':
-      return {};
-    default:
-      return state;
-  }
-}

src/public/js/reducers/index.js

@@ -4,7 +4,7 @@ import { routerReducer } from 'react-router-redux'
 import movieStore from './movies'
 import showStore from './shows'
 import userStore from './users'
-import errors from './errors'
+import alerts from './alerts'
 
 // Use combine form form react-redux-form, it's a thin wrapper arround the
 // default combinedReducers provided with React. It allows the forms to be
@@ -14,7 +14,7 @@ const rootReducer = combineForms({
   movieStore,
   showStore,
   userStore,
-  errors,
+  alerts,
 })
 
 export default rootReducer;

src/public/js/requests.js

@@ -16,7 +16,7 @@ export function configureAxios(headers = {}) {
 
 // This function takes en event prefix to dispatch evens during the life of the
 // request, it also take a promise (axios request)
-export function request(eventPrefix, promise) {
+export function request(eventPrefix, promise, successMessage = null) {
   // Events
   const pending = `${eventPrefix}_PENDING`;
   const fulfilled = `${eventPrefix}_FULFILLED`;
@@ -30,7 +30,7 @@ export function request(eventPrefix, promise) {
       if (response.data.status === 'error')
       {
         dispatch({
-          type: 'ADD_ERROR',
+          type: 'ADD_ALERT_ERROR',
           payload: {
             message: response.data.message,
           }
@@ -40,6 +40,14 @@ export function request(eventPrefix, promise) {
         type: fulfilled,
         payload: response.data,
       })
+      if (successMessage) {
+        dispatch({
+          type: 'ADD_ALERT_OK',
+          payload: {
+            message: successMessage,
+          },
+        })
+      }
     })
     .catch(error => {
       // Unauthorized
@@ -49,7 +57,7 @@ export function request(eventPrefix, promise) {
         })
       }
       dispatch({
-        type: 'ADD_ERROR',
+        type: 'ADD_ALERT_ERROR',
         payload: {
           message: error.response.data,
         }

src/public/less/app.less

@@ -42,3 +42,7 @@ body {
 .navbar {
     opacity: 0.95;
 }
+
+div.sweet-alert > h2 {
+    color: @body-bg;
+}

yarn.lock

@@ -3077,6 +3077,12 @@ react-bootstrap:
     uncontrollable "^4.0.1"
     warning "^3.0.0"
 
+react-bootstrap-sweetalert:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-bootstrap-sweetalert/-/react-bootstrap-sweetalert-3.0.0.tgz#65378a42f37845676acf98e8c43ce4a61f23306f"
+  dependencies:
+    object-assign "^4.1.0"
+
 react-dom@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"