Create AlertMessage component instead of using alert boxes, create reducer for it

src/components/AlertMessage.js

+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)

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>

src/reducers/MessageReducer.js

+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;
+  }
+};

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;