Merge pull request #64 from metrico/alexey-notifications

Added generic notification component + multi-notifications
refs and fixes #60

src/App.js

@@ -2,9 +2,10 @@ import { Provider } from "react-redux";
 import MainView from "./components/MainView";
 import store from './store/store';
 export default function App() {
+
 		return (
 			<Provider store={store}>
-
+                
 				<MainView/>
 
 			</Provider>

src/actions/createAlert.js

@@ -0,0 +1,15 @@
+import store from '../store/store';
+
+export const createAlert = ( action) => (dispatch) => {
+    console.log(action)
+    const notifications = store.getState().notifications
+    notifications.push({
+        message: action.message,
+        type: action.type,
+        visible: true
+    })
+    dispatch({
+        type: "ADD_NOTIFICATION",
+        payload: [...notifications]
+    });
+}

src/actions/index.js

@@ -13,3 +13,5 @@ export * from "./setHistoryOpen";
 export * from "./setApiError";
 export * from "./errorHandler";
 export * from "./setLabels";
+export * from "./createAlert";
+export * from "./removeAlert";

src/actions/removeAlert.js

@@ -0,0 +1,10 @@
+import store from '../store/store';
+
+export const removeAlert = ( index) => (dispatch) => {
+    let notifications = store.getState().notifications
+    notifications[index].visible = false;
+    dispatch({
+        type: "REMOVE_NOTIFICATION",
+        payload: [...notifications]
+    });
+}

src/components/MainView.js

@@ -3,18 +3,21 @@ import  LogView  from "./LogView";
 import  StatusBar  from "./StatusBar/StatusBar";
 import LabelBrowser from "./LabelBrowser/LabelBrowser"
 import { UpdateStateFromQueryParams } from "./UpdateStateFromQueryParams";
+import { Notification } from "../plugins/notifications";
 export default function MainView() {
 
   UpdateStateFromQueryParams()
+
     return (
         <div className={"log-search"}>
-
+                
         <StatusBar/>
 
         <LabelBrowser/>
 
         <LogView />
 
+        <Notification/>
     </div>
     )
 }

src/components/StatusBar/StatusBar.js

@@ -5,6 +5,7 @@ import LinkIcon from "@mui/icons-material/Link";
 import AdapterDateFns from "@mui/lab/AdapterDateFns";
 import LocalizationProvider from "@mui/lab/LocalizationProvider";
 import {
+    createAlert,
     setApiError,
     setIsSubmit,
     setQueryLimit,
@@ -25,6 +26,7 @@ import loadLabels from "../../actions/LoadLabels";
 import localUrl from "../../services/localUrl";
 import setLinksHistory from "../../actions/setLinksHistory";
 import { Tooltip } from "@mui/material";
+import { notificationTypes } from "../../plugins/notifications/consts";
 
 export default function StatusBar() {
     return (
@@ -191,11 +193,10 @@ export function StatusBarSelectors() {
                         dispatch(setLinksHistory(storedUrl));
                     }
 
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                        dispatch(setIsSubmit(false));
-                    }, 1500);
+                    dispatch(createAlert({
+                        type: notificationTypes.success,
+                        message: LINK_COPIED
+                    }))
                 },
                 function (err) {
                     console.err("error on copy", err);

src/plugins/daterangepicker/index.js

@@ -232,7 +232,7 @@ useEffect(()=>{
                             </span>
 
                         </span>
-                    </React.Fragment> : undefined
+                    </React.Fragment> : ''
                     }>
                 <button style={dateButtonStyles}
                     onClick={openButtonHandler} className={'date-time-selector'}

src/plugins/notifications/consts.js

@@ -0,0 +1,6 @@
+export const notificationTypes = {
+    info: 'info',
+    warning: 'warning',
+    error: 'error',
+    success: 'success'
+}

src/plugins/notifications/index.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+
+import { useSelector, useDispatch } from "react-redux";
+import { Alert} from "@mui/material";
+import { removeAlert } from "../../actions";
+
+
+
+export function Notification() {  
+    const { notifications } = useSelector(state => state);
+    const dispatch = useDispatch();
+    const handleClose = (index) => {
+        dispatch(removeAlert(index))
+    };
+    const Expire = props => {
+        useEffect(() => {
+          setTimeout(() => {
+              dispatch(removeAlert(props.index))
+          }, props.delay);
+        }, [props]);
+
+        return <div>{props.children}</div>;
+      };
+
+    return (
+        <div className={'alertWrapper'}>
+            {
+                notifications.map((notification, index) => {
+                    if (notification.visible) {
+                        return <Expire key={index} delay='5000' index={index}>
+                            <div className={'alert'}>
+                                <Alert
+                                elevation={6}
+                                variant="filled"
+                                onClose={() => handleClose(index)}
+                                severity={notification.type}
+                                sx={{ width: "100%" }}
+                                >
+                                    {notification.message}
+                                </Alert>
+                            </div>
+                        </Expire>
+                    } else {
+                        return undefined;
+                    }
+                }
+                )
+            }
+        </div>
+    );
+}