From 6b26b4b4c6bca986ae8acee7b0c0231caaf6b0b7 Mon Sep 17 00:00:00 2001 From: opoliarush Date: Tue, 29 Oct 2024 23:15:24 +0200 Subject: [PATCH 1/2] fixed comments --- .../GlobalErrorsList/DaysFilter/index.tsx | 44 +++++++++++-------- .../GlobalErrorsList/DaysFilter/styles.ts | 21 +++++++-- .../GlobalErrorsList/DaysFilter/types.ts | 4 ++ src/store/errors/errorsSlice.ts | 3 +- 4 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx b/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx index 4840f842b..13b144555 100644 --- a/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx +++ b/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx @@ -15,7 +15,7 @@ import { DaysFilterProps } from "./types"; const MAX_VALUE = 14; const MIN_VALUE = 1; - +const DEFAULT_VALUE = 7; const DEFAULT_LIST_OPTIONS = [7, 14]; const getOptionLabel = (days: number) => `${days} ${formatUnit(days, "Day")}`; @@ -23,17 +23,15 @@ const getOptionLabel = (days: number) => `${days} ${formatUnit(days, "Day")}`; export const DaysFilter = ({ onChanged }: DaysFilterProps) => { const [isDateMenuOpen, setIsDateMenuOpen] = useState(false); const [selectedDays, setSelectedDays] = useState(); - const [currentValue, setCurrentValue] = useState(); - const previousSelectedDays = usePrevious(selectedDays); - const handleSelectionChange = useCallback( - (days: number) => { - const value = selectedDays === days ? undefined : days; - setSelectedDays(value); - setCurrentValue(value); - setIsDateMenuOpen(false); - }, - [selectedDays] + const [currentValue, setCurrentValue] = useState( + DEFAULT_VALUE ); + const previousSelectedDays = usePrevious(selectedDays); + const handleSelectionChange = useCallback((days: number) => { + setSelectedDays(days); + setCurrentValue(days); + setIsDateMenuOpen(false); + }, []); const daysFilterMenuItems = useMemo( () => @@ -48,11 +46,11 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { useEffect(() => { if (previousSelectedDays !== selectedDays) { - onChanged(selectedDays); + onChanged(selectedDays ?? DEFAULT_VALUE); } }, [selectedDays, previousSelectedDays, onChanged]); - const handleSortingMenuButtonClick = () => { + const handleMenuButtonClick = () => { sendUserActionTrackingEvent( trackingEvents.GLOBAL_ERRORS_VIEW_DATES_FILTERS_CHANGE ); @@ -67,7 +65,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { !newValue || Number.isNaN(intValue) ? undefined : intValue > MAX_VALUE - ? selectedDays + ? currentValue : intValue; sendUserActionTrackingEvent( @@ -101,7 +99,12 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { sendUserActionTrackingEvent( trackingEvents.GLOBAL_ERRORS_DAYS_FILTER_APPLY_BTN_CLICKED ); - setSelectedDays(currentValue); + + if (!currentValue) { + setCurrentValue(DEFAULT_VALUE); + } else { + setSelectedDays(currentValue); + } setIsDateMenuOpen(false); }; @@ -117,16 +120,19 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { } + icon={() => } onClick={handleDecrement} /> } + icon={() => } onClick={handleIncrement} /> Last days @@ -151,7 +157,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { )} label={selectedDays ? getOptionLabel(selectedDays) : "Dates"} buttonType={"secondary"} - onClick={handleSortingMenuButtonClick} + onClick={handleMenuButtonClick} /> ); diff --git a/src/components/Errors/GlobalErrorsList/DaysFilter/styles.ts b/src/components/Errors/GlobalErrorsList/DaysFilter/styles.ts index b37d2ba1f..7c051d487 100644 --- a/src/components/Errors/GlobalErrorsList/DaysFilter/styles.ts +++ b/src/components/Errors/GlobalErrorsList/DaysFilter/styles.ts @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { bodyRegularTypography, footnoteRegularTypography @@ -6,7 +6,7 @@ import { import { NewButton } from "../../../common/v3/NewButton"; import { TextField } from "../../../common/v3/TextField"; import { Popup } from "../../../Navigation/common/Popup"; -import { DaysButtonProps } from "./types"; +import { CounterInputProps, DaysButtonProps } from "./types"; export const ButtonIconContainer = styled.div` color: ${({ theme }) => theme.colors.v3.icon.tertiary}; @@ -57,12 +57,27 @@ export const Counter = styled.div` align-items: center; `; -export const CounterInput = styled(TextField)` +export const CounterInput = styled(TextField)` ${footnoteRegularTypography} padding: 4px; + ${({ theme, $isActive }) => + $isActive + ? css` + color: ${theme.colors.v3.text.link}; + border: 1px solid ${theme.colors.v3.surface.brandPrimary}; + ` + : undefined}; input { max-width: 16px; + text-align: center; + + ${({ theme, $isActive }) => + $isActive + ? css` + color: ${theme.colors.v3.text.link}; + ` + : undefined}; } `; diff --git a/src/components/Errors/GlobalErrorsList/DaysFilter/types.ts b/src/components/Errors/GlobalErrorsList/DaysFilter/types.ts index 8e124dfc7..a983544a6 100644 --- a/src/components/Errors/GlobalErrorsList/DaysFilter/types.ts +++ b/src/components/Errors/GlobalErrorsList/DaysFilter/types.ts @@ -31,3 +31,7 @@ export interface DaysButtonProps extends ButtonProps { export interface DaysFilterProps { onChanged: (days?: number) => void; } + +export interface CounterInputProps { + $isActive: boolean; +} diff --git a/src/store/errors/errorsSlice.ts b/src/store/errors/errorsSlice.ts index 6b8215b01..1f7416261 100644 --- a/src/store/errors/errorsSlice.ts +++ b/src/store/errors/errorsSlice.ts @@ -72,7 +72,8 @@ export const globalErrorsInitialState = { errorTypes: null }, globalErrorsViewMode: ViewMode.All, - globalErrorsSelectedFilters: selectedFiltersInitialState + globalErrorsSelectedFilters: selectedFiltersInitialState, + globalErrorsLastDays: 7 }; export const initialState: ErrorsState = { From 39c73e346f8353465144b32ec70966c2cd121522 Mon Sep 17 00:00:00 2001 From: opoliarush Date: Wed, 30 Oct 2024 12:42:43 +0200 Subject: [PATCH 2/2] extract constant --- .../Errors/GlobalErrorsList/DaysFilter/index.tsx | 13 +++++++------ src/store/errors/errorsSlice.ts | 3 ++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx b/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx index 13b144555..0a549e073 100644 --- a/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx +++ b/src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx @@ -1,5 +1,6 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"; import { usePrevious } from "../../../../hooks/usePrevious"; +import { DAYS_FILTER_DEFAULT_VALUE } from "../../../../store/errors/errorsSlice"; import { isUndefined } from "../../../../typeGuards/isUndefined"; import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent"; import { formatUnit } from "../../../../utils/formatUnit"; @@ -15,17 +16,17 @@ import { DaysFilterProps } from "./types"; const MAX_VALUE = 14; const MIN_VALUE = 1; -const DEFAULT_VALUE = 7; + const DEFAULT_LIST_OPTIONS = [7, 14]; const getOptionLabel = (days: number) => `${days} ${formatUnit(days, "Day")}`; export const DaysFilter = ({ onChanged }: DaysFilterProps) => { const [isDateMenuOpen, setIsDateMenuOpen] = useState(false); - const [selectedDays, setSelectedDays] = useState(); - const [currentValue, setCurrentValue] = useState( - DEFAULT_VALUE + const [selectedDays, setSelectedDays] = useState( + DAYS_FILTER_DEFAULT_VALUE ); + const [currentValue, setCurrentValue] = useState(); const previousSelectedDays = usePrevious(selectedDays); const handleSelectionChange = useCallback((days: number) => { setSelectedDays(days); @@ -46,7 +47,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { useEffect(() => { if (previousSelectedDays !== selectedDays) { - onChanged(selectedDays ?? DEFAULT_VALUE); + onChanged(selectedDays ?? DAYS_FILTER_DEFAULT_VALUE); } }, [selectedDays, previousSelectedDays, onChanged]); @@ -101,7 +102,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => { ); if (!currentValue) { - setCurrentValue(DEFAULT_VALUE); + setCurrentValue(DAYS_FILTER_DEFAULT_VALUE); } else { setSelectedDays(currentValue); } diff --git a/src/store/errors/errorsSlice.ts b/src/store/errors/errorsSlice.ts index 1f7416261..4120eaf83 100644 --- a/src/store/errors/errorsSlice.ts +++ b/src/store/errors/errorsSlice.ts @@ -6,6 +6,7 @@ import { } from "../../components/Errors/GlobalErrorsList/types"; export const PAGE_SIZE = 10; +export const DAYS_FILTER_DEFAULT_VALUE = 7; export enum GLOBAL_ERROR_SORTING_CRITERION { CRITICALITY = "Criticality", @@ -73,7 +74,7 @@ export const globalErrorsInitialState = { }, globalErrorsViewMode: ViewMode.All, globalErrorsSelectedFilters: selectedFiltersInitialState, - globalErrorsLastDays: 7 + globalErrorsLastDays: DAYS_FILTER_DEFAULT_VALUE }; export const initialState: ErrorsState = {