From 57d30774363adb07fca475039f773737d9cb6dbd Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 1 Apr 2022 22:36:04 +0200 Subject: [PATCH] fix date range picker styles --- .../components/AbsoluteSelector.js | 123 +++++ .../daterangepicker/components/Day.js | 2 +- .../daterangepicker/components/Month.js | 2 +- .../daterangepicker/components/Nav.js | 454 +++++++++--------- .../daterangepicker/components/TimeLabel.js | 35 ++ .../daterangepicker/components/styles.js | 4 +- .../daterangepicker/hooks/useOutsideRef.js | 13 +- .../components/daterangepicker/index.js | 86 +--- .../timepickerbutton/TimePickerButton.js | 21 + .../actions/setTimePickerOpen.js | 7 + .../timepickerbutton/styled/index.js | 6 + src/components/StatusBar/index.js | 4 + src/scss/base/body.scss | 9 + src/store/createInitialState.js | 1 + src/store/reducer.js | 46 +- 15 files changed, 488 insertions(+), 325 deletions(-) create mode 100644 src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js create mode 100644 src/components/StatusBar/components/daterangepicker/components/TimeLabel.js create mode 100644 src/components/StatusBar/components/timepickerbutton/TimePickerButton.js create mode 100644 src/components/StatusBar/components/timepickerbutton/actions/setTimePickerOpen.js create mode 100644 src/components/StatusBar/components/timepickerbutton/styled/index.js diff --git a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js new file mode 100644 index 00000000..92f31530 --- /dev/null +++ b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js @@ -0,0 +1,123 @@ +import styled from "@emotion/styled"; +import DateRangeIcon from "@mui/icons-material/DateRange"; +const SelectorsContainer = styled.div` + display: flex; + flex-direction: column; + margin: 4px; + .time-selector { + display: flex; + flex-direction: column; + padding: 5px; + + .label { + font-size: 0.85em; + color: #aaa; + width: 50px; + margin-left: 5px; + margin-bottom: 2px; + } + .input-group { + display: flex; + .date-time-range { + font-size: 1em; + width: 170px; + line-height: 1.5; + text-align: center; + color: #ddd; + } + button { + cursor:pointer; + display:flex; + align-items: center; + justify-content: center; + border:none; + padding:0px 8px; + margin:3px; + border-radius: 3px; + color: #eee; + background: #0c8181; + &:hover { + background: #159d9d; + } + + } + } + } +`; + +const AbsoluteSubmitButton = styled.button` + color: #eee; + background: #0c8181; + font-size: 0.85em; + font-weight: bold; + padding: 8px 0px; + line-height: 1.5; + border: none; + border-radius: 3px; + transition: 0.2s all; + margin: 10px; + margin-top: 40px; + cursor: pointer; + &:hover { + background: #159d9d; + } +`; + +export default function AbsoluteSelector({ + getEditedStartDate, + getEditedEndDate, + handleStart, + handleStop, + onTimeRangeSet, + calendarOpen, + setCalendarOpen, +}) { + return ( + +
+ {"From"} +
+ handleStart(e, false)} + onBlur={(e) => handleStart(e, true)} + /> + +
+
+ +
+ {"To"} +
+ handleStop(e, false)} + onBlur={(e) => handleStop(e, true)} + /> + +
+
+ { + onTimeRangeSet(e); + }} + > + {"Apply Time Range"} + + + ); +} diff --git a/src/components/StatusBar/components/daterangepicker/components/Day.js b/src/components/StatusBar/components/daterangepicker/components/Day.js index aefb9b74..e568d4d0 100644 --- a/src/components/StatusBar/components/daterangepicker/components/Day.js +++ b/src/components/StatusBar/components/daterangepicker/components/Day.js @@ -51,4 +51,4 @@ const Day = props => { ); }; -export default withStyles(DayStyles)(Day); \ No newline at end of file +export default withStyles(DayStyles)(Day); diff --git a/src/components/StatusBar/components/daterangepicker/components/Month.js b/src/components/StatusBar/components/daterangepicker/components/Month.js index 3236ed3c..87763871 100644 --- a/src/components/StatusBar/components/daterangepicker/components/Month.js +++ b/src/components/StatusBar/components/daterangepicker/components/Month.js @@ -35,7 +35,7 @@ const theme = createTheme({ const styles = (theme) => createStyles({ root: { - width: 290, + width: 260, background: '#262626' }, weekDaysContainer: { diff --git a/src/components/StatusBar/components/daterangepicker/components/Nav.js b/src/components/StatusBar/components/daterangepicker/components/Nav.js index a86b568b..5e8a5865 100644 --- a/src/components/StatusBar/components/daterangepicker/components/Nav.js +++ b/src/components/StatusBar/components/daterangepicker/components/Nav.js @@ -1,256 +1,270 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from "react"; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import { createTheme } from '@mui/material/styles'; -import { ThemeProvider } from '@mui/material/styles'; -import createStyles from '@mui/styles/createStyles'; -import { withStyles } from '@mui/styles' -import { format, differenceInCalendarMonths, isValid, isDate, isSameSecond, isBefore } from "date-fns"; +import Paper from "@mui/material/Paper"; +import Grid from "@mui/material/Grid"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import { createTheme } from "@mui/material/styles"; +import { ThemeProvider } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import { withStyles } from "@mui/styles"; +import { + format, + differenceInCalendarMonths, + isValid, + isDate, + isSameSecond, + isBefore, +} from "date-fns"; import ArrowRightAlt from "@mui/icons-material/ArrowRightAlt"; import Month from "./Month"; import Ranges from "./Ranges"; -import CloseIcon from '@mui/icons-material/Close'; +import CloseIcon from "@mui/icons-material/Close"; import { DATE_TIME_RANGE, MARKERS } from "../consts"; import { useDispatch } from "react-redux"; -import { setStartTime, setStopTime, setTimeRangeLabel } from '../../../../../actions'; -import { findRangeByLabel } from '../utils'; - +import { + setStartTime, + setStopTime, + setTimeRangeLabel, +} from "../../../../../actions"; +import { findRangeByLabel } from "../utils"; +import AbsoluteSelector from "./AbsoluteSelector"; const styles = (theme) => - createStyles({ - header: { - padding: "10px 35px" - }, - headerItem: { - flex: 1, - textAlign: "center" - }, - divider: { - borderLeft: `1px solid action`, - marginBottom: 20 + createStyles({ + header: { + padding: "10px", + justifyContent:"space-between" + }, + headerItem: { + + textAlign: "center", + }, + dateComplete:{ + fontSize:".85em", }, - container: { - - position: 'absolute', - zIndex: 1000, - top: 95, - right: 10 - - }, - applyButton: { - color: 'white', - background: '#4f4f4f', - border: '1px solid #4f4f4f', - padding: '6px 8px', - borderRadius: '3px', - marginLeft: '10px', - cursor: 'pointer' - } - }); + divider: { + borderLeft: `1px solid action`, + marginBottom: 20, + }, + container: { + position: "absolute", + zIndex: 1000, + top: 95, + right: 10, + display:'flex' + }, + applyButton: { + color: "white", + background: "#4f4f4f", + border: "1px solid #4f4f4f", + padding: "6px 8px", + borderRadius: "3px", + marginLeft: "10px", + cursor: "pointer", + }, + }); const theme = createTheme({ - palette: { - mode: 'dark' - } -}) -const PickerNav = props => { - const { - classes, - ranges, - dateRange, - minDate, - maxDate, - firstMonth, - setFirstMonth, - secondMonth, - setSecondMonth, - setDateRange, - helpers, - handlers - } = props; - const canNavigateCloser = differenceInCalendarMonths(secondMonth, firstMonth) >= 2; - const commonProps = { dateRange, minDate, maxDate, helpers, handlers }; - const dispatch = useDispatch() - const [editedStartDate, setEditedStartDate] = useState(dateRange.dateStart) - const [editedEndDate, setEditedEndDate] = useState(dateRange.dateEnd) - const [rangeLabel] = useState(dateRange.label) + palette: { + mode: "dark", + }, +}); +const PickerNav = (props) => { + const { + classes, + ranges, + dateRange, + minDate, + maxDate, + firstMonth, + setFirstMonth, + secondMonth, + setSecondMonth, + setDateRange, + helpers, + handlers, + } = props; + + const [calendarOpen,setCalendarOpen] = useState(false) + const canNavigateCloser = + differenceInCalendarMonths(secondMonth, firstMonth) >= 2; + const commonProps = { dateRange, minDate, maxDate, helpers, handlers }; + const dispatch = useDispatch(); + const [editedStartDate, setEditedStartDate] = useState(dateRange.dateStart); + const [editedEndDate, setEditedEndDate] = useState(dateRange.dateEnd); + const [rangeLabel] = useState(dateRange.label); useEffect(() => { if (rangeLabel) { const newRange = findRangeByLabel(rangeLabel); setEditedStartDate(newRange.dateStart); setEditedEndDate(newRange.dateEnd); - } - },[setEditedEndDate, setEditedStartDate, rangeLabel]) - const handleStopInputChange = (event, isBlur) => { - event.preventDefault() - const value = new Date(event.target.value); + } + }, [setEditedEndDate, setEditedStartDate, rangeLabel]); + const handleStopInputChange = (event, isBlur) => { + event.preventDefault(); + const value = new Date(event.target.value); if (isBlur && isValid(value)) { - setEditedEndDate(value) + setEditedEndDate(value); } else { - setEditedEndDate(event.target.value) + setEditedEndDate(event.target.value); } - } - const handleStartInputChange = (event, isBlur) => { - event.preventDefault() - const value = new Date(event.target.value); - if (isBlur && isValid(value)) { - setEditedStartDate(value); + }; + const handleStartInputChange = (event, isBlur) => { + event.preventDefault(); + const value = new Date(event.target.value); + if (isBlur && isValid(value)) { + setEditedStartDate(value); } else { - setEditedStartDate(event.target.value) + setEditedStartDate(event.target.value); } - } + }; - - const onTimeRangeSet = (e) => { - e.preventDefault() - const startDate = new Date(editedStartDate) - const endDate = new Date(editedEndDate) - if (isDate(startDate) && !isSameSecond(dateRange.dateStart, startDate)) { - dispatch(setStartTime(startDate)); + const onTimeRangeSet = (e) => { + e.preventDefault(); + const startDate = new Date(editedStartDate); + const endDate = new Date(editedEndDate); + if ( + isDate(startDate) && + !isSameSecond(dateRange.dateStart, startDate) + ) { + dispatch(setStartTime(startDate)); setEditedStartDate(startDate); - } - if (isValid(endDate) && !isSameSecond(dateRange.dateEnd, endDate)) { - dispatch(setStopTime(endDate)); + } + if (isValid(endDate) && !isSameSecond(dateRange.dateEnd, endDate)) { + dispatch(setStopTime(endDate)); setEditedEndDate(endDate); - } - const isValidDate = isValid(endDate) && isDate(startDate) - const isValidInterval = isBefore(startDate, endDate) - const isChanged = (!isSameSecond(dateRange.dateStart, startDate) || !isSameSecond(dateRange.dateEnd, endDate)) - if ( isValidDate && isValidInterval && isChanged) { - dispatch(setTimeRangeLabel('')) - setDateRange({dateStart: startDate, dateEnd: endDate}) - saveDateRange({dateStart: startDate, dateEnd: endDate}); - props.onClose(e) - } else if (!isValidInterval) { + } + const isValidDate = isValid(endDate) && isDate(startDate); + const isValidInterval = isBefore(startDate, endDate); + const isChanged = + !isSameSecond(dateRange.dateStart, startDate) || + !isSameSecond(dateRange.dateEnd, endDate); + if (isValidDate && isValidInterval && isChanged) { + dispatch(setTimeRangeLabel("")); + setDateRange({ dateStart: startDate, dateEnd: endDate }); + saveDateRange({ dateStart: startDate, dateEnd: endDate }); + props.onClose(e); + } else if (!isValidInterval) { // TODO: Add a warning/error on screen when we get to it - console.error('Invalid time range') + console.error("Invalid time range"); } - } - + }; + const saveDateRange = (range) => { localStorage.setItem(DATE_TIME_RANGE, JSON.stringify(range)); - } - const getEditedStartDate = () => { - return isValid(editedStartDate) ? format(editedStartDate, 'yyy-MM-dd HH:mm:ss') : editedStartDate - } - const getEditedEndDate = () => { - return isValid(editedEndDate) ? format(editedEndDate, 'yyy-MM-dd HH:mm:ss') : typeof editedEndDate !== 'undefined' ? editedEndDate : "" - } - - return ( - - - - - - - - { - props.onClose(e) - }} - aria-label={"close"}> - - - - -
-
- {"From"} - handleStartInputChange(e, false)} - onBlur={(e) => handleStartInputChange(e, true)} - /> -
+ }; + const getEditedStartDate = () => { + return isValid(editedStartDate) + ? format(editedStartDate, "yyy-MM-dd HH:mm:ss") + : editedStartDate; + }; + const getEditedEndDate = () => { + return isValid(editedEndDate) + ? format(editedEndDate, "yyy-MM-dd HH:mm:ss") + : typeof editedEndDate !== "undefined" + ? editedEndDate + : ""; + }; -
- {'To'} - handleStopInputChange(e, false)} - onBlur={(e) => handleStopInputChange(e, true)} - /> -
- -
- - - - - - - - - - - - - - - {dateRange?.dateStart && isValid(dateRange?.dateStart) ? format(dateRange?.dateStart, "MMMM dd, yyyy") : "Start Date"} - - - - - - - - {dateRange?.dateEnd && isValid(dateRange?.dateEnd) ? format(dateRange?.dateEnd, "MMMM dd, yyyy") : "End Date"} - - - - - - -
- + + { calendarOpen && ( + +
+ - - -
- - - - - + /> + )} + + + + + { + props.onClose(e); + }} + aria-label={"close"} + > + + - - ); -}; + + + -export default withStyles(styles)(PickerNav); \ No newline at end of file + + +
+ {dateRange?.dateStart && + isValid(dateRange?.dateStart) + ? format( + dateRange?.dateStart, + "MMMM dd, yyyy" + ) + : "Start Date"} +
+ + + + + +
+ {dateRange?.dateEnd && + isValid(dateRange?.dateEnd) + ? format( + dateRange?.dateEnd, + "MMMM dd, yyyy" + ) + : "End Date"} +
+ + + + + +
+ + + + + + + ); +}; +// open month only at +export default withStyles(styles)(PickerNav); diff --git a/src/components/StatusBar/components/daterangepicker/components/TimeLabel.js b/src/components/StatusBar/components/daterangepicker/components/TimeLabel.js new file mode 100644 index 00000000..904dc817 --- /dev/null +++ b/src/components/StatusBar/components/daterangepicker/components/TimeLabel.js @@ -0,0 +1,35 @@ +import styled from "@emotion/styled"; +import { format, isValid } from "date-fns"; + +const TimeLabelCont = styled.div` + display: flex; + flex-direction: column; + justify-content: "center"; + padding: "3px"; + .time-span { + text-align: center; + } +`; + +export default function TimeLabel({ dateRange }) { + return ( + <> + + + {isValid(dateRange.dateStart) + ? format(dateRange.dateStart, "yyyy/MM/dd HH:mm:ss") + : dateRange.dateStart} + + + to + + {isValid(dateRange.dateEnd) + ? format(dateRange.dateEnd, "yyyy/MM/dd HH:mm:ss") + : typeof dateRange.dateEnd !== "undefined" + ? dateRange.dateEnd + : ""} + + + + ); +} diff --git a/src/components/StatusBar/components/daterangepicker/components/styles.js b/src/components/StatusBar/components/daterangepicker/components/styles.js index 2166f104..0a1b4ce9 100644 --- a/src/components/StatusBar/components/daterangepicker/components/styles.js +++ b/src/components/StatusBar/components/daterangepicker/components/styles.js @@ -13,8 +13,8 @@ export const DayStyles = () => display: "flex" }, button: { - height: 36, - width: 36, + height: 30, + width: 30, padding: 0 }, buttonText: { diff --git a/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.js b/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.js index f16737ce..776ab96e 100644 --- a/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.js +++ b/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.js @@ -1,18 +1,19 @@ import { useEffect, useRef, useState } from "react"; +import { setRangeOpen } from '../../../../../actions/setRangeOpen'; +import { useDispatch } from 'react-redux'; -export default function useOutsideRef(initialIsVisible) { - const [isComponentVisible, setIsComponentVisible] = - useState(initialIsVisible); +export default function useOutsideRef() { + const dispatch = useDispatch() const ref = useRef(null); const handleHideDateRange = (event) => { if (event.key === "Escape") { - setIsComponentVisible(false); + dispatch(setRangeOpen(false)); } }; const handleClickOutside = (event) => { if (ref.current && !ref.current.contains(event.target)) { - setIsComponentVisible(false); + dispatch(setRangeOpen(false)); } }; useEffect(() => { @@ -25,5 +26,5 @@ export default function useOutsideRef(initialIsVisible) { document.removeEventListener("click", handleClickOutside, true); }; }); - return { ref, isComponentVisible, setIsComponentVisible }; + return { ref }; } diff --git a/src/components/StatusBar/components/daterangepicker/index.js b/src/components/StatusBar/components/daterangepicker/index.js index 7336bd09..486cf61c 100644 --- a/src/components/StatusBar/components/daterangepicker/index.js +++ b/src/components/StatusBar/components/daterangepicker/index.js @@ -41,16 +41,13 @@ import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined"; import { Tooltip } from "@mui/material"; import loadLogs from "../../../../actions/loadLogs"; import { setLabelsBrowserOpen } from "../../../../actions/setLabelsBrowserOpen"; +import TimeLabel from "./components/TimeLabel"; export function DateRangePickerMain(props) { const today = Date.now(); - const { - isOpen, - minDate, - maxDate, - } = props; + const { isOpen, minDate, maxDate } = props; - const startTs = useSelector( store => store.start) - const stopTs = useSelector( store => store.stop) + const startTs = useSelector((store) => store.start); + const stopTs = useSelector((store) => store.stop); const initialDateRange = () => { try { const ls = JSON.parse(localStorage.getItem(DATE_TIME_RANGE)); @@ -70,7 +67,6 @@ export function DateRangePickerMain(props) { } }; - const minDateValid = parseOptionalDate(minDate, addYears(today, -10)); const maxDateValid = parseOptionalDate(maxDate, addYears(today, 10)); const [intialFirstMonth, initialSecondMonth] = getValidatedMonths( @@ -100,12 +96,8 @@ export function DateRangePickerMain(props) { const { dateStart, dateEnd } = dateRange; - const { ref, isComponentVisible, setIsComponentVisible } = - useOutsideRef(true); + const { ref } = useOutsideRef(true); - useEffect(() => { - setIsComponentVisible(rangeOpen); - }, [rangeOpen]); const setFirstMonthValidated = (date) => { if (isBefore(date, secondMonth)) { @@ -197,9 +189,6 @@ export function DateRangePickerMain(props) { ); }; - - - const dateButtonStyles = { border: "none", height: "21px", @@ -223,7 +212,6 @@ export function DateRangePickerMain(props) { onMonthNavigate, }; - function onChange({ dateStart, dateEnd, label }) { const isStart = isDate(dateStart); const isEnd = isDate(dateEnd); @@ -237,69 +225,17 @@ export function DateRangePickerMain(props) { e.preventDefault(); if (rangeOpen === true) { onClose(e); - setIsComponentVisible(false); + } else { dispatch(setRangeOpen(true)); - setIsComponentVisible(true); + } }; - - return (
- - - {isValid(dateRange.dateStart) - ? format( - dateRange.dateStart, - "yyyy/MM/dd HH:mm:ss" - ) - : dateRange.dateStart} - - - to - - - {isValid(dateRange.dateEnd) - ? format( - dateRange.dateEnd, - "yyyy/MM/dd HH:mm:ss" - ) - : typeof dateRange.dateEnd !== - "undefined" - ? dateRange.dateEnd - : ""} - - - - ) : ( - "" - ) - } + title={timeLabel ? : ""} > - {isComponentVisible ? ( + {rangeOpen ? (
diff --git a/src/scss/base/body.scss b/src/scss/base/body.scss index e63e8daf..8a3cb938 100644 --- a/src/scss/base/body.scss +++ b/src/scss/base/body.scss @@ -4,6 +4,15 @@ body { margin: 0 auto; padding: 0 auto; overflow: hidden; + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background: #616161; + } } html { background:$grey-dark; diff --git a/src/store/createInitialState.js b/src/store/createInitialState.js index b47771b7..9ab3a5aa 100644 --- a/src/store/createInitialState.js +++ b/src/store/createInitialState.js @@ -31,6 +31,7 @@ const initialState = () => { rangeOpen: false, labelsBrowserOpen: true, settingsMenuOpen:false, + timePickerOpen: false, historyOpen: false, apiErrors: '', urlQueryParams: externalState || {}, diff --git a/src/store/reducer.js b/src/store/reducer.js index 290c0b32..f48329a9 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -1,4 +1,4 @@ -const reducer = (state, action) => { +const reducer = (state, action) => { switch (action.type) { case "SET_LABELS": return { ...state, labels: action.labels }; @@ -15,42 +15,44 @@ const reducer = (state, action) => { case "SET_TIME_RANGE_LABEL": return { ...state, label: action.label }; case "SET_QUERY_LIMIT": - return { ...state, limit: action.limit }; + return { ...state, limit: action.limit }; case "SET_RANGE_OPEN": - return { ...state, rangeOpen: action.rangeOpen}; + return { ...state, rangeOpen: action.rangeOpen }; case "SET_BROWSER_OPEN": - return {...state, labelsBrowserOpen: action.labelsBrowserOpen}; + return { ...state, labelsBrowserOpen: action.labelsBrowserOpen }; case "SET_SETTINGS_MENU_OPEN": - return {...state, settingsMenuOpen: action.settingsMenuOpen}; - case "SET_QUERY" : - return {...state, query: action.query}; + return { ...state, settingsMenuOpen: action.settingsMenuOpen }; + case "SET_TIME_PICKER_OPEN": + return { ...state, timePickerOpen: action.timePickerOpen }; + case "SET_QUERY": + return { ...state, query: action.query }; case "SET_QUERY_STEP": - return { ...state, step: action.step}; + return { ...state, step: action.step }; case "SET_API_URL": - return { ...state, apiUrl: action.apiUrl}; + return { ...state, apiUrl: action.apiUrl }; case "SET_API_ERRORS": - return {...state, apiErrors: action.apiErrors}; + return { ...state, apiErrors: action.apiErrors }; case "SET_URL_QUERY_PARAMS": - return {...state, urlQueryParams: action.urlQueryParams}; + return { ...state, urlQueryParams: action.urlQueryParams }; case "SET_URL_LOCATION": - return {...state, urlLocation: action.urlLocation}; - case "SET_IS_SUBMIT": - return {...state, isSubmit: action.isSubmit}; + return { ...state, urlLocation: action.urlLocation }; + case "SET_IS_SUBMIT": + return { ...state, isSubmit: action.isSubmit }; case "SET_MATRIX_DATA": - return {...state, matrixData: action.matrixData}; + return { ...state, matrixData: action.matrixData }; case "SET_CHART_TYPE": - return {...state, chartType: action.setChartType}; + return { ...state, chartType: action.setChartType }; case "SET_QUERY_HISTORY": - return {...state, queryHistory: action.queryHistory}; + return { ...state, queryHistory: action.queryHistory }; case "SET_LINKS_HISTORY": - return {...state, linksHistory: action.linksHistory}; + return { ...state, linksHistory: action.linksHistory }; case "SET_HISTORY_OPEN": - return {...state, historyOpen: action.historyOpen}; + return { ...state, historyOpen: action.historyOpen }; case "ADD_NOTIFICATION": - return {...state, notifications: action.payload}; + return { ...state, notifications: action.payload }; case "REMOVE_NOTIFICATION": - return {...state, notifications: action.payload}; - + return { ...state, notifications: action.payload }; + default: return { ...state }; }