diff --git a/src/components/AlertMessage.js b/src/components/AlertMessage.js new file mode 100644 index 0000000000000000000000000000000000000000..7d5073128b6498499dda99b31831c9e0e841751c --- /dev/null +++ b/src/components/AlertMessage.js @@ -0,0 +1,75 @@ +import React, { Component } from 'react'; +import { Message, Container } from 'semantic-ui-react'; +import { connect } from 'react-redux'; +import { dismissMessage } from '../actions/messages'; + +const messages = [ + { + type: 'success', + icon: 'thumbs up', + title: 'Sikeres mĹąvelet', + success: true, + warning: false, + error: false, + }, + { + type: 'warning', + icon: 'warning', + title: 'FigyelmeztetĂŠs', + success: false, + warning: true, + error: false, + }, + { + type: 'error', + icon: 'times circle', + title: 'Sikertelen mĹąvelet', + success: false, + warning: false, + error: true, + }, +]; + +class AlertMessage extends Component { + constructor (props) { + super(props); + this.state = { + timeout: null, + } + } +componentWillReceiveProps() { + clearTimeout(this.state.timeout); + const time = setTimeout(() => { + this.props.dismissMessage(); + }, 4000); + this.setState({ timeout: time }); + } + + render() { + const { visible, messageType, text } = this.props.message; + const messageProps = messages.find(item => item.type === messageType); + return ( + <Container style={{ margin: '1.5em', paddingLeft: '1.5em' }}> + { messageProps ? + <Message + icon={messageProps.icon} + visible={visible} + header={messageProps.title} + content={text} + positive={messageProps.success} + warning={messageProps.warning} + negative={messageProps.error} + /> + : + null + } + </Container> + ); + } +} + +const mapStateToProps = ({ message }) => ({ + message +}); + +export default connect(mapStateToProps, { dismissMessage })(AlertMessage) diff --git a/src/components/App.js b/src/components/App.js index cdc6a8ad1efca9d19e7fc5b321b2304ea7b07d9e..11d1171015f1b3147d65792d5092ff69bb7daa6f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -2,11 +2,13 @@ import React from 'react'; import Header from './Header'; import Main from './Main'; import Footer from './Footer'; +import AlertMessage from './AlertMessage'; const App = () => ( <div style={{ minHeight: '100%', position: 'relative' }}> <Header className='header'> <main id='main' style={{ minHeight: '100%', position: 'relative' }}> + <AlertMessage /> <Main /> </main> </Header> diff --git a/src/reducers/MessageReducer.js b/src/reducers/MessageReducer.js new file mode 100644 index 0000000000000000000000000000000000000000..e0016ce0c7068b0d452e2d57adc966a16e21b0a7 --- /dev/null +++ b/src/reducers/MessageReducer.js @@ -0,0 +1,14 @@ +import { SHOW_MESSAGE, DISMISS_MESSAGE } from '../actions/types'; + +const INITIAL_STATE = {}; + +export default (state = INITIAL_STATE, action) => { + switch (action.type) { + case SHOW_MESSAGE: + return { text: action.text, messageType: action.messageType, visible: true }; + case DISMISS_MESSAGE: + return { text: '', type: '', visible: false }; + default: + return state; + } +}; diff --git a/src/reducers/index.js b/src/reducers/index.js index 2464c572a060e17e375effcb11717ebbc430f479..1f8be7a4d4557deff3fd3a5384861edfcf7d5d98 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -11,6 +11,7 @@ import TraineeReducer from './TraineeReducer'; import NoteReducer from './NoteReducer'; import CorrectSolutionReducer from './CorrectSolutionReducer'; import EditTaskReducer from './EditTaskReducer'; +import MessageReducer from './MessageReducer'; const rootReducer = combineReducers({ user: UserReducer, @@ -25,6 +26,7 @@ const rootReducer = combineReducers({ events: EventReducer, trainees: TraineeReducer, notes: NoteReducer, + message: MessageReducer, }); export default rootReducer;