diff --git a/package.json b/package.json index 680f3bf..1ea38c0 100644 --- a/package.json +++ b/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", diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js index 9e96a87..9f2e8c5 100644 --- a/src/public/js/actions/actionCreators.js +++ b/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", ) } diff --git a/src/public/js/app.js b/src/public/js/app.js index bcd32ce..2032747 100644 --- a/src/public/js/app.js +++ b/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 (
- +
{React.cloneElement(this.props.children, this.props)}
@@ -57,7 +57,7 @@ function mapStateToProps(state) { movieStore: state.movieStore, showStore: state.showStore, userStore: state.userStore, - errors: state.errors, + alerts: state.alerts, } } diff --git a/src/public/js/components/alerts/alert.js b/src/public/js/components/alerts/alert.js new file mode 100644 index 0000000..bcb46ae --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/public/js/components/errors.js b/src/public/js/components/errors.js deleted file mode 100644 index 6cd9f94..0000000 --- a/src/public/js/components/errors.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -export default function Error(props) { - if (!props.errors.message) { - return null - } - return ( -
-
-
- -

{props.errors.message}

-
-
-
- ) -} diff --git a/src/public/js/reducers/alerts.js b/src/public/js/reducers/alerts.js new file mode 100644 index 0000000..c6a0f97 --- /dev/null +++ b/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; + } +} diff --git a/src/public/js/reducers/errors.js b/src/public/js/reducers/errors.js deleted file mode 100644 index fcc5b8a..0000000 --- a/src/public/js/reducers/errors.js +++ /dev/null @@ -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; - } -} diff --git a/src/public/js/reducers/index.js b/src/public/js/reducers/index.js index 3d0d277..9e8f6e6 100644 --- a/src/public/js/reducers/index.js +++ b/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; diff --git a/src/public/js/requests.js b/src/public/js/requests.js index 87c8bda..cf64b98 100644 --- a/src/public/js/requests.js +++ b/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, } diff --git a/src/public/less/app.less b/src/public/less/app.less index 121e568..0c4afa8 100644 --- a/src/public/less/app.less +++ b/src/public/less/app.less @@ -42,3 +42,7 @@ body { .navbar { opacity: 0.95; } + +div.sweet-alert > h2 { + color: @body-bg; +} diff --git a/yarn.lock b/yarn.lock index 7cc1e53..a1fd710 100644 --- a/yarn.lock +++ b/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"