From c5e7c717f9a767a515fc8c9f8f308bac6a39210b Mon Sep 17 00:00:00 2001 From: Alexey Oplachko Date: Mon, 14 Mar 2022 19:41:15 +0200 Subject: [PATCH 1/6] WIP: Notifications --- src/App.js | 3 +- src/actions/createAlert.js | 14 ++++++++ src/components/MainView.js | 14 +++++++- src/components/StatusBar/StatusBar.js | 1 + src/plugins/notifications/index.js | 46 +++++++++++++++++++++++++++ src/plugins/queryhistory/index.js | 12 +++++-- src/store/createInitialState.js | 2 +- src/store/reducer.js | 3 ++ 8 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 src/actions/createAlert.js create mode 100644 src/plugins/notifications/index.js diff --git a/src/App.js b/src/App.js index b66a47b9..f7a49485 100644 --- a/src/App.js +++ b/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 ( - + diff --git a/src/actions/createAlert.js b/src/actions/createAlert.js new file mode 100644 index 00000000..9bfe520a --- /dev/null +++ b/src/actions/createAlert.js @@ -0,0 +1,14 @@ +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 + }) + dispatch({ + type: "ADD_NOTIFICATION", + payload: [...notifications] + }); +} \ No newline at end of file diff --git a/src/components/MainView.js b/src/components/MainView.js index 72b9ffa1..caa6c7cc 100644 --- a/src/components/MainView.js +++ b/src/components/MainView.js @@ -3,12 +3,24 @@ import LogView from "./LogView"; import StatusBar from "./StatusBar/StatusBar"; import LabelBrowser from "./LabelBrowser/LabelBrowser" import { UpdateStateFromQueryParams } from "./UpdateStateFromQueryParams"; +import {createAlert} from '../actions/createAlert'; +import { useDispatch } from 'react-redux'; +import { Notification } from "../plugins/notifications"; export default function MainView() { UpdateStateFromQueryParams() + + const dispatch = useDispatch() return (
- + + + diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js index 4bd9e342..5a066f46 100644 --- a/src/components/StatusBar/StatusBar.js +++ b/src/components/StatusBar/StatusBar.js @@ -177,6 +177,7 @@ export function StatusBarSelectors() { setOpen(!open) } const shareLink = (e) => { + console.log(store.getState()) e.preventDefault() const setSubmit = dispatch(setIsSubmit(true)) setTimeout(()=>{ diff --git a/src/plugins/notifications/index.js b/src/plugins/notifications/index.js new file mode 100644 index 00000000..2bced783 --- /dev/null +++ b/src/plugins/notifications/index.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from "react"; + +import { useSelector } from "react-redux"; +import {Snackbar, Alert} from "@mui/material"; + +export function Notification() { + const { alerts: notifications } = useSelector(state => state.notifications); + + const [notification, setNotification] = useState({ type: "info", message: "" }); + const [open, setOpen] = useState(false); + console.log('test notif') + useEffect(() => { + console.log(notifications) + if (notifications?.length > 0) { + setNotification(notifications[notifications.length - 1]); + setOpen(true); + } + }, [notifications]); + const handleClick = () => { + setOpen(true); + }; + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + + setOpen(false); + }; + + return ( +
+ + + {notification.message} + + +
+ ); +} \ No newline at end of file diff --git a/src/plugins/queryhistory/index.js b/src/plugins/queryhistory/index.js index 118b461c..57f5060c 100644 --- a/src/plugins/queryhistory/index.js +++ b/src/plugins/queryhistory/index.js @@ -37,7 +37,7 @@ import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; import Tooltip from "@mui/material/Tooltip"; - +import {Notification} from "../notifications" // Snackbar for clearing confirmation const Alert = forwardRef(function Alert(props, ref) { return ; @@ -723,12 +723,18 @@ const QueryHistoryDrawer = (props) => { settingTab={} closeButton={} /> - + {/* + /> */} { apiUrl: externalState.apiUrl || environment.apiUrl || '', isSubmit: externalState.isSubmit || false, chartType:'line', - + notifications: [{type:'info',message: 'test'}] } if (debug) console.log('🚧 LOGIC/ INITIAL STATE ::: ', state) return state diff --git a/src/store/reducer.js b/src/store/reducer.js index 30bdff2c..5b1c0002 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -42,6 +42,9 @@ const reducer = (state, action) => { return {...state, queryHistory: action.queryHistory}; case "SET_HISTORY_OPEN": return {...state, historyOpen: action.historyOpen}; + case "ADD_NOTIFICATION": + console.log(state, action) + return {...state, notification: action.notification}; default: return { ...state }; } From 7f7a618585acf78f034479e46ffed7b0809ed363 Mon Sep 17 00:00:00 2001 From: Alexey Oplachko Date: Tue, 15 Mar 2022 14:38:27 +0200 Subject: [PATCH 2/6] Notifications --- src/actions/index.js | 1 + src/components/MainView.js | 9 -- src/components/StatusBar/StatusBar.js | 35 +++---- src/plugins/daterangepicker/index.js | 2 +- src/plugins/notifications/consts.js | 6 ++ src/plugins/notifications/index.js | 4 +- src/plugins/queryhistory/index.js | 136 +++++--------------------- src/store/createInitialState.js | 2 +- src/store/reducer.js | 4 +- 9 files changed, 51 insertions(+), 148 deletions(-) create mode 100644 src/plugins/notifications/consts.js diff --git a/src/actions/index.js b/src/actions/index.js index 4293f8cd..6929c4f7 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -13,3 +13,4 @@ export * from "./setHistoryOpen"; export * from "./setApiError"; export * from "./errorHandler"; export * from "./setLabels"; +export * from "./createAlert"; \ No newline at end of file diff --git a/src/components/MainView.js b/src/components/MainView.js index caa6c7cc..ee56edf3 100644 --- a/src/components/MainView.js +++ b/src/components/MainView.js @@ -3,22 +3,13 @@ import LogView from "./LogView"; import StatusBar from "./StatusBar/StatusBar"; import LabelBrowser from "./LabelBrowser/LabelBrowser" import { UpdateStateFromQueryParams } from "./UpdateStateFromQueryParams"; -import {createAlert} from '../actions/createAlert'; -import { useDispatch } from 'react-redux'; import { Notification } from "../plugins/notifications"; export default function MainView() { UpdateStateFromQueryParams() - const dispatch = useDispatch() return (
- diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js index 5a066f46..40234dcd 100644 --- a/src/components/StatusBar/StatusBar.js +++ b/src/components/StatusBar/StatusBar.js @@ -4,7 +4,7 @@ import Logo from "./assets/cloki-logo.png"; import LinkIcon from '@mui/icons-material/Link'; import AdapterDateFns from "@mui/lab/AdapterDateFns"; import LocalizationProvider from "@mui/lab/LocalizationProvider"; -import { setApiError, setIsSubmit, setQueryLimit, setQueryStep, setStartTime, setStopTime, setTimeRangeLabel } from "../../actions"; +import { createAlert, setApiError, setIsSubmit, setQueryLimit, setQueryStep, setStartTime, setStopTime, setTimeRangeLabel } from "../../actions"; import isDate from "date-fns/isDate"; import { setApiUrl } from "../../actions/setApiUrl"; import { DateRangePicker } from "../../plugins/daterangepicker"; @@ -15,7 +15,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import store from '../../store/store' import loadLabels from "../../actions/LoadLabels"; import localUrl from "../../services/localUrl"; - +import { notificationTypes } from "../../plugins/notifications/consts"; export default function StatusBar() { return ( @@ -177,21 +177,20 @@ export function StatusBarSelectors() { setOpen(!open) } const shareLink = (e) => { - console.log(store.getState()) e.preventDefault() - const setSubmit = dispatch(setIsSubmit(true)) - setTimeout(()=>{ - navigator.clipboard.writeText(window.location.href).then(function () { - saveUrl.add({data:window.location.href,description:'From Shared URL'}) - setCopied(true) - setTimeout(() => { - setCopied(false) - dispatch(setIsSubmit(false)) - }, 1500) - }, function (err) { - console.err('error on copy', err) - }) - },200) + const setSubmit = dispatch(setIsSubmit(true)) + setTimeout(()=>{ + navigator.clipboard.writeText(window.location.href).then(function () { + saveUrl.add({data:window.location.href,description:'From Shared URL'}) + dispatch(createAlert({ + type: notificationTypes.success, + message: LINK_COPIED + })) + + }, function (err) { + console.err('error on copy', err) + }) + },200) } return ( @@ -200,10 +199,6 @@ export function StatusBarSelectors() {
- {copied && ( - {LINK_COPIED} - )} -