Jack Mallers
7 years ago
20 changed files with 187 additions and 36 deletions
@ -0,0 +1,24 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { MdClose } from 'react-icons/lib/md' |
||||
|
import styles from './GlobalError.scss' |
||||
|
|
||||
|
const GlobalError = ({ error, clearError }) => ( |
||||
|
<div className={`${styles.container} ${!error && styles.closed}`}> |
||||
|
<div className={styles.content}> |
||||
|
<div className={styles.close} onClick={clearError}> |
||||
|
<MdClose /> |
||||
|
</div> |
||||
|
<h2>{error}</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
|
||||
|
|
||||
|
GlobalError.propTypes = { |
||||
|
error: PropTypes.string, |
||||
|
clearError: PropTypes.func.isRequired |
||||
|
} |
||||
|
|
||||
|
export default GlobalError |
@ -0,0 +1,34 @@ |
|||||
|
@import '../../variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
position: absolute; |
||||
|
z-index: 1001; |
||||
|
background: $red; |
||||
|
color: $white; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
padding: 20px; |
||||
|
transition: all 0.25s ease; |
||||
|
|
||||
|
&.closed { |
||||
|
max-height: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
position: relative; |
||||
|
|
||||
|
.close { |
||||
|
position: absolute; |
||||
|
top: calc(50% - 8px); |
||||
|
right: 10%; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 20px; |
||||
|
letter-spacing: 1.5px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,3 @@ |
|||||
|
import GlobalError from './GlobalError' |
||||
|
|
||||
|
export default GlobalError |
@ -0,0 +1,45 @@ |
|||||
|
// ------------------------------------
|
||||
|
// Initial State
|
||||
|
// ------------------------------------
|
||||
|
const initialState = { |
||||
|
error: null |
||||
|
} |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Constants
|
||||
|
// ------------------------------------
|
||||
|
export const SET_ERROR = 'SET_ERROR' |
||||
|
export const CLEAR_ERROR = 'CLEAR_ERROR' |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Actions
|
||||
|
// ------------------------------------
|
||||
|
export function setError(error) { |
||||
|
return { |
||||
|
type: SET_ERROR, |
||||
|
error |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function clearError() { |
||||
|
return { |
||||
|
type: CLEAR_ERROR |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Action Handlers
|
||||
|
// ------------------------------------
|
||||
|
const ACTION_HANDLERS = { |
||||
|
[SET_ERROR]: (state, { error }) => ({ ...state, error }), |
||||
|
[CLEAR_ERROR]: () => (initialState) |
||||
|
} |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Reducer
|
||||
|
// ------------------------------------
|
||||
|
export default function errorReducer(state = initialState, action) { |
||||
|
const handler = ACTION_HANDLERS[action.type] |
||||
|
|
||||
|
return handler ? handler(state, action) : state |
||||
|
} |
Loading…
Reference in new issue