From 5425cd39f6c84196de29b818a411ed8827d75a69 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Sun, 28 Apr 2024 23:32:40 +0530 Subject: [PATCH 01/12] Added: date range input component using ShadCN's date picker component --- apps/backoffice-v2/src/Router/Router.tsx | 2 +- .../DateRangePicker/DateRangePicker.tsx | 79 +++++++++++++++++++ .../organisms/Calendar/Calendar.tsx | 62 +++++++++++++++ .../common/hooks/useHomeLogic/useHomeLogic.ts | 21 +++++ .../Home.tsx => pages/Home/Home.page.tsx} | 39 +++++---- .../Home/home-search-schema.ts | 0 6 files changed, 187 insertions(+), 16 deletions(-) create mode 100644 apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx create mode 100644 apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx create mode 100644 apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts rename apps/backoffice-v2/src/{common/components/atoms/Home/Home.tsx => pages/Home/Home.page.tsx} (56%) rename apps/backoffice-v2/src/{common/components/atoms => pages}/Home/home-search-schema.ts (100%) diff --git a/apps/backoffice-v2/src/Router/Router.tsx b/apps/backoffice-v2/src/Router/Router.tsx index e27e5cb15a..6d1c906f95 100644 --- a/apps/backoffice-v2/src/Router/Router.tsx +++ b/apps/backoffice-v2/src/Router/Router.tsx @@ -21,7 +21,7 @@ import { NotFoundRedirect } from '@/pages/NotFound/NotFound'; import { TransactionMonitoringAlerts } from '@/pages/TransactionMonitoringAlerts/TransactionMonitoringAlerts.page'; import { TransactionMonitoring } from '@/pages/TransactionMonitoring/TransactionMonitoring'; import { TransactionMonitoringAlertsAnalysisPage } from '@/pages/TransactionMonitoringAlertsAnalysis/TransactionMonitoringAlertsAnalysis.page'; -import { Home } from '../common/components/atoms/Home/Home'; +import { Home } from '@/pages/Home/Home.page'; import { Statistics } from '@/pages/Statistics/Statistics.page'; import { Workflows } from '@/pages/Workflows/Workflows.page'; diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx new file mode 100644 index 0000000000..9f1e43ec8b --- /dev/null +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useState, useRef } from 'react'; +import { CalendarIcon } from '@radix-ui/react-icons'; +import { formatDate } from '@/common/utils/format-date'; +import { DateRange } from 'react-day-picker'; +import { addMonths } from 'date-fns'; +import { ctw } from '@/common/utils/ctw/ctw'; +import { Button } from '../../atoms/Button/Button'; +import { Calendar } from '../../organisms/Calendar/Calendar'; +import { Popover, PopoverContent, PopoverTrigger } from '@ballerine/ui'; + +type DateRangePickerProps = { + onChange: (range: { start: Date | null; end: Date | null }) => void; + value: { start: Date | null; end: Date | null }; +}; + +export function DateRangePicker( + { onChange, value }: DateRangePickerProps, + { className }: React.HTMLAttributes, +) { + const currentDate = new Date(); + const [date, setDate] = useState({ + from: new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()), + to: addMonths( + new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 1), + 1, + ), + }); + const prevDateRef = useRef(date); + + useEffect(() => { + if (date !== prevDateRef.current) { + onChange({ + start: date?.from || null, + end: date?.to || null, + }); + prevDateRef.current = date; + } + }, [date, onChange]); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx new file mode 100644 index 0000000000..21cb6df05c --- /dev/null +++ b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; +import { ctw } from '@/common/utils/ctw/ctw'; +import { DayPicker } from 'react-day-picker'; +import { buttonVariants } from '../../atoms/Button/Button'; + +export type CalendarProps = React.ComponentProps; + +function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { + return ( + .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md' + : '[&:has([aria-selected])]:rounded-md', + ), + day: ctw( + buttonVariants({ variant: 'ghost' }), + 'h-8 w-8 p-0 font-normal aria-selected:opacity-100', + ), + day_range_start: 'day-range-start', + day_range_end: 'day-range-end', + day_selected: + 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', + day_today: 'bg-accent text-accent-foreground', + day_outside: + 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', + day_disabled: 'text-muted-foreground opacity-50', + day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground', + day_hidden: 'invisible', + ...classNames, + }} + components={{ + IconLeft: ({ ...props }) => , + IconRight: ({ ...props }) => , + }} + {...props} + /> + ); +} +Calendar.displayName = 'Calendar'; + +export { Calendar }; diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts new file mode 100644 index 0000000000..c056dc9da0 --- /dev/null +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -0,0 +1,21 @@ +import { useSearchParams } from 'react-router-dom'; +import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams'; +import { HomeSearchSchema } from '@/pages/Home/home-search-schema'; + +export const useHomeLogic = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const [dateRange, setDateRange] = useZodSearchParams(HomeSearchSchema); + + const handleDateRangeChange = (range: any) => { + const from = range?.start?.toISOString() || ''; + const to = range?.end?.toISOString() || ''; + + setSearchParams({ from, to }); + setDateRange({ from, to }); + }; + + return { + dateRange, + handleDateRangeChange, + }; +}; diff --git a/apps/backoffice-v2/src/common/components/atoms/Home/Home.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx similarity index 56% rename from apps/backoffice-v2/src/common/components/atoms/Home/Home.tsx rename to apps/backoffice-v2/src/pages/Home/Home.page.tsx index 062425bc0c..8ada9c45e2 100644 --- a/apps/backoffice-v2/src/common/components/atoms/Home/Home.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -1,15 +1,15 @@ import React, { FunctionComponent, useEffect } from 'react'; -import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { NavLink, Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom'; import { t } from 'i18next'; -import { useAuthenticatedUserQuery } from '../../../../domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; -import { UserAvatar } from '../UserAvatar/UserAvatar'; +import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; +import { UserAvatar } from '@/common/components/atoms/UserAvatar/UserAvatar'; import { Tabs } from '@/common/components/organisms/Tabs/Tabs'; import { TabsList } from '@/common/components/organisms/Tabs/Tabs.List'; import { TabsTrigger } from '@/common/components/organisms/Tabs/Tabs.Trigger'; import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content'; import { useLocale } from '@/common/hooks/useLocale/useLocale'; -import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams'; -import { HomeSearchSchema } from './home-search-schema'; +import { DateRangePicker } from '@/common/components/molecules/DateRangePicker/DateRangePicker'; +import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic'; export const Home: FunctionComponent = () => { const { data: session } = useAuthenticatedUserQuery(); @@ -17,7 +17,7 @@ export const Home: FunctionComponent = () => { const locale = useLocale(); const { pathname } = useLocation(); const navigate = useNavigate(); - const [dateRange, setDateRange] = useZodSearchParams(HomeSearchSchema); + const { dateRange, handleDateRangeChange } = useHomeLogic(); useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { @@ -29,16 +29,25 @@ export const Home: FunctionComponent = () => { return (
-
- +
+ +

+ {t(`home.greeting`)} + {firstName && ` ${firstName}`} +

+
+ handleDateRangeChange(range)} + value={{ + start: dateRange.from ? new Date(dateRange.from) : null, + end: dateRange.to ? new Date(dateRange.to) : null, + }} /> -

- {t(`home.greeting`)} - {firstName && ` ${firstName}`} -

diff --git a/apps/backoffice-v2/src/common/components/atoms/Home/home-search-schema.ts b/apps/backoffice-v2/src/pages/Home/home-search-schema.ts similarity index 100% rename from apps/backoffice-v2/src/common/components/atoms/Home/home-search-schema.ts rename to apps/backoffice-v2/src/pages/Home/home-search-schema.ts From 3bbef7403d3e64999861f8d070efbae85b291b99 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Fri, 3 May 2024 20:30:31 +0530 Subject: [PATCH 02/12] Changes: applied to necessary files with suggested code --- .../DateRangePicker/DateRangePicker.tsx | 63 +++++++------------ .../organisms/Calendar/Calendar.tsx | 10 +-- .../common/hooks/useHomeLogic/useHomeLogic.ts | 15 +++-- .../src/pages/Home/Home.page.tsx | 11 ++-- 4 files changed, 45 insertions(+), 54 deletions(-) diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx index 9f1e43ec8b..7f1b2947df 100644 --- a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -1,41 +1,32 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useState, ComponentProps } from 'react'; import { CalendarIcon } from '@radix-ui/react-icons'; import { formatDate } from '@/common/utils/format-date'; import { DateRange } from 'react-day-picker'; -import { addMonths } from 'date-fns'; +import dayjs from 'dayjs'; import { ctw } from '@/common/utils/ctw/ctw'; import { Button } from '../../atoms/Button/Button'; import { Calendar } from '../../organisms/Calendar/Calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@ballerine/ui'; -type DateRangePickerProps = { - onChange: (range: { start: Date | null; end: Date | null }) => void; - value: { start: Date | null; end: Date | null }; +type TDateRangePickerProps = { + onChange: ComponentProps['onSelect']; + value: ComponentProps['value']; + className: ComponentProps<'div'>['className']; }; -export function DateRangePicker( - { onChange, value }: DateRangePickerProps, - { className }: React.HTMLAttributes, -) { +export function DateRangePicker({ onChange, value, className }: TDateRangePickerProps) { const currentDate = new Date(); const [date, setDate] = useState({ from: new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()), - to: addMonths( - new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 1), - 1, - ), + to: dayjs(new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 1)) + .add(1, 'month') + .toDate(), }); - const prevDateRef = useRef(date); - useEffect(() => { - if (date !== prevDateRef.current) { - onChange({ - start: date?.from || null, - end: date?.to || null, - }); - prevDateRef.current = date; - } - }, [date, onChange]); + const handleDateChange = (selection: DateRange | undefined) => { + setDate(selection); + onChange(selection); + }; return (
@@ -44,32 +35,26 @@ export function DateRangePicker( diff --git a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx index 21cb6df05c..e4f4362a9f 100644 --- a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx +++ b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx @@ -5,8 +5,12 @@ import { DayPicker } from 'react-day-picker'; import { buttonVariants } from '../../atoms/Button/Button'; export type CalendarProps = React.ComponentProps; - -function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { +export function Calendar({ + className, + classNames, + showOutsideDays = true, + ...props +}: CalendarProps) { return ( { - const [searchParams, setSearchParams] = useSearchParams(); - const [dateRange, setDateRange] = useZodSearchParams(HomeSearchSchema); + const [searchParams, setSearchParams] = useZodSearchParams(HomeSearchSchema); - const handleDateRangeChange = (range: any) => { + const handleDateRangeChange: ComponentProps['onChange'] = (range: { + start: { toISOString: () => string }; + end: { toISOString: () => string }; + }) => { const from = range?.start?.toISOString() || ''; const to = range?.end?.toISOString() || ''; setSearchParams({ from, to }); - setDateRange({ from, to }); }; return { - dateRange, + from: searchParams.from || '', + to: searchParams.to || '', handleDateRangeChange, }; }; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index 8ada9c45e2..d3e5385cbc 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, useEffect } from 'react'; -import { NavLink, Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom'; +import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'; import { t } from 'i18next'; import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; import { UserAvatar } from '@/common/components/atoms/UserAvatar/UserAvatar'; @@ -17,7 +17,7 @@ export const Home: FunctionComponent = () => { const locale = useLocale(); const { pathname } = useLocation(); const navigate = useNavigate(); - const { dateRange, handleDateRangeChange } = useHomeLogic(); + const { handleDateRangeChange, from, to } = useHomeLogic(); useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { @@ -42,11 +42,12 @@ export const Home: FunctionComponent = () => {
handleDateRangeChange(range)} + onChange={handleDateRangeChange} value={{ - start: dateRange.from ? new Date(dateRange.from) : null, - end: dateRange.to ? new Date(dateRange.to) : null, + start: from ? new Date(from) : null, + end: to ? new Date(to) : null, }} + className={'
'} />
From fb7c3ddf5f00f7eab4db2ebed706c1458a10acd1 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Sun, 5 May 2024 17:16:15 +0530 Subject: [PATCH 03/12] Changes: Applied to take a try with just onChange as a prop. --- .../DateRangePicker/DateRangePicker.tsx | 31 ++++++------------- .../common/hooks/useHomeLogic/useHomeLogic.ts | 9 ++---- .../src/pages/Home/Home.page.tsx | 11 ++----- 3 files changed, 15 insertions(+), 36 deletions(-) diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx index 7f1b2947df..6243d2396c 100644 --- a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -1,35 +1,21 @@ -import React, { useState, ComponentProps } from 'react'; +import React, { useState } from 'react'; import { CalendarIcon } from '@radix-ui/react-icons'; import { formatDate } from '@/common/utils/format-date'; -import { DateRange } from 'react-day-picker'; -import dayjs from 'dayjs'; import { ctw } from '@/common/utils/ctw/ctw'; import { Button } from '../../atoms/Button/Button'; import { Calendar } from '../../organisms/Calendar/Calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@ballerine/ui'; +import { DateRange } from 'react-day-picker'; type TDateRangePickerProps = { - onChange: ComponentProps['onSelect']; - value: ComponentProps['value']; - className: ComponentProps<'div'>['className']; + onChange: (range: DateRange | undefined) => void; }; -export function DateRangePicker({ onChange, value, className }: TDateRangePickerProps) { - const currentDate = new Date(); - const [date, setDate] = useState({ - from: new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()), - to: dayjs(new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 1)) - .add(1, 'month') - .toDate(), - }); - - const handleDateChange = (selection: DateRange | undefined) => { - setDate(selection); - onChange(selection); - }; +export function DateRangePicker({ onChange }: TDateRangePickerProps) { + const [date, setDate] = useState(); return ( -
+
- '} - /> +
From 280a205a80ec7d87075d8c135908545200db09f3 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Mon, 6 May 2024 23:17:30 +0530 Subject: [PATCH 04/12] Changes: Updated the files with necessary props --- .../DateRangePicker/DateRangePicker.tsx | 17 ++++++++++------- .../components/organisms/Calendar/Calendar.tsx | 12 ++++++------ apps/backoffice-v2/src/pages/Home/Home.page.tsx | 8 ++++++-- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx index 6243d2396c..b6c63cfbf4 100644 --- a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, ComponentProps, useEffect } from 'react'; import { CalendarIcon } from '@radix-ui/react-icons'; import { formatDate } from '@/common/utils/format-date'; import { ctw } from '@/common/utils/ctw/ctw'; @@ -8,14 +8,17 @@ import { Popover, PopoverContent, PopoverTrigger } from '@ballerine/ui'; import { DateRange } from 'react-day-picker'; type TDateRangePickerProps = { - onChange: (range: DateRange | undefined) => void; + onChange: ComponentProps['onSelect']; + value: ComponentProps['value']; + className: ComponentProps<'div'>['className']; }; -export function DateRangePicker({ onChange }: TDateRangePickerProps) { +export const DateRangePicker = ({ onChange, value, className }: TDateRangePickerProps) => { const [date, setDate] = useState(); + console.log(value); return ( -
+
); -} +}; diff --git a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx index e4f4362a9f..821ef713e5 100644 --- a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx +++ b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx @@ -1,16 +1,16 @@ -import * as React from 'react'; +import React from 'react'; import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; import { ctw } from '@/common/utils/ctw/ctw'; -import { DayPicker } from 'react-day-picker'; +import { DayPicker, DayPickerRangeProps } from 'react-day-picker'; import { buttonVariants } from '../../atoms/Button/Button'; -export type CalendarProps = React.ComponentProps; -export function Calendar({ +export type CalendarProps = DayPickerRangeProps; +export const Calendar = ({ className, classNames, showOutsideDays = true, ...props -}: CalendarProps) { +}: CalendarProps) => { return ( ); -} +}; Calendar.displayName = 'Calendar'; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index 2b49f9d4ea..0429e40272 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -17,7 +17,7 @@ export const Home: FunctionComponent = () => { const locale = useLocale(); const { pathname } = useLocation(); const navigate = useNavigate(); - const { handleDateRangeChange } = useHomeLogic(); + const { handleDateRangeChange, from, to } = useHomeLogic(); useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { @@ -41,7 +41,11 @@ export const Home: FunctionComponent = () => { {firstName && ` ${firstName}`}
- +
From 3f99f8d93c9a1b04130ff4969a233276806fdcfe Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Tue, 7 May 2024 18:58:11 +0530 Subject: [PATCH 05/12] Updated: Applied suggested changes --- .../molecules/DateRangePicker/DateRangePicker.tsx | 11 +++++------ .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 8 ++++---- apps/backoffice-v2/src/pages/Home/Home.page.tsx | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx index b6c63cfbf4..2aa951c9df 100644 --- a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -1,4 +1,4 @@ -import React, { useState, ComponentProps, useEffect } from 'react'; +import React, { useState, ComponentProps } from 'react'; import { CalendarIcon } from '@radix-ui/react-icons'; import { formatDate } from '@/common/utils/format-date'; import { ctw } from '@/common/utils/ctw/ctw'; @@ -9,13 +9,12 @@ import { DateRange } from 'react-day-picker'; type TDateRangePickerProps = { onChange: ComponentProps['onSelect']; - value: ComponentProps['value']; + value: ComponentProps['selected']; className: ComponentProps<'div'>['className']; }; export const DateRangePicker = ({ onChange, value, className }: TDateRangePickerProps) => { const [date, setDate] = useState(); - console.log(value); return (
@@ -25,7 +24,7 @@ export const DateRangePicker = ({ onChange, value, className }: TDateRangePicker id="date" variant={'outline'} className={ctw('w-[300px] justify-start text-left font-normal', { - 'text-muted-foreground': !date, + 'text-muted-foreground': !value && !date, })} > @@ -43,9 +42,9 @@ export const DateRangePicker = ({ onChange, value, className }: TDateRangePicker initialFocus mode="range" selected={date} - onSelect={(selection: DateRange | undefined) => { + onSelect={selection => { setDate(selection); - onChange ?? onChange(selection); + onChange?.(selection); }} numberOfMonths={2} /> diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index 301bd1eb6f..99311c0e1e 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -7,15 +7,15 @@ export const useHomeLogic = () => { const [searchParams, setSearchParams] = useZodSearchParams(HomeSearchSchema); const handleDateRangeChange: ComponentProps['onChange'] = range => { - const from = range?.from?.toISOString() || ''; - const to = range?.to?.toISOString() || ''; + const from = range?.from?.toISOString() || undefined; + const to = range?.to?.toISOString() || undefined; setSearchParams({ from, to }); }; return { - from: searchParams.from || '', - to: searchParams.to || '', + from: searchParams.from || undefined, + to: searchParams.to || undefined, handleDateRangeChange, }; }; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index 0429e40272..26456d3dd4 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -43,7 +43,7 @@ export const Home: FunctionComponent = () => {
From 38644b7d689519a1a247c0fb28b27e67a6ce187a Mon Sep 17 00:00:00 2001 From: Omri Levy Date: Wed, 8 May 2024 00:02:27 +0300 Subject: [PATCH 06/12] fix(backoffice-v2): addressed pr comments --- apps/backoffice-v2/package.json | 1 + .../DateRangePicker/DateRangePicker.tsx | 30 ++++++++----------- .../src/pages/Home/Home.page.tsx | 3 +- .../src/pages/Home/home-search-schema.ts | 10 ++----- pnpm-lock.yaml | 21 ++++++++++--- .../workflows-service/prisma/data-migrations | 2 +- 6 files changed, 34 insertions(+), 33 deletions(-) diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json index d50bf70bc0..0ff82a78d8 100644 --- a/apps/backoffice-v2/package.json +++ b/apps/backoffice-v2/package.json @@ -95,6 +95,7 @@ "msw": "^1.0.0", "qs": "^6.11.2", "react": "^18.2.0", + "react-day-picker": "^8.10.1", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", "react-i18next": "^12.1.4", diff --git a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx index 2aa951c9df..9f8f93cd52 100644 --- a/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx +++ b/apps/backoffice-v2/src/common/components/molecules/DateRangePicker/DateRangePicker.tsx @@ -1,21 +1,18 @@ -import React, { useState, ComponentProps } from 'react'; +import React, { ComponentProps } from 'react'; import { CalendarIcon } from '@radix-ui/react-icons'; import { formatDate } from '@/common/utils/format-date'; import { ctw } from '@/common/utils/ctw/ctw'; import { Button } from '../../atoms/Button/Button'; import { Calendar } from '../../organisms/Calendar/Calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@ballerine/ui'; -import { DateRange } from 'react-day-picker'; type TDateRangePickerProps = { - onChange: ComponentProps['onSelect']; - value: ComponentProps['selected']; - className: ComponentProps<'div'>['className']; + onChange: NonNullable['onSelect']>; + value: NonNullable['selected']>; + className?: ComponentProps<'div'>['className']; }; export const DateRangePicker = ({ onChange, value, className }: TDateRangePickerProps) => { - const [date, setDate] = useState(); - return (
@@ -24,28 +21,25 @@ export const DateRangePicker = ({ onChange, value, className }: TDateRangePicker id="date" variant={'outline'} className={ctw('w-[300px] justify-start text-left font-normal', { - 'text-muted-foreground': !value && !date, + 'text-muted-foreground': !value, })} > - - {date?.from && date?.to && ( + + {value?.from && value?.to && ( <> - {formatDate(date.from, 'LLL dd, y')} - {formatDate(date.to, 'LLL dd, y')} + {formatDate(value.from, 'LLL dd, y')} - {formatDate(value.to, 'LLL dd, y')} )} - {date?.from && !date?.to && formatDate(date.from, 'LLL dd, y')} - {!date?.from && !date?.to && Pick a date} + {value?.from && !value?.to && formatDate(value.from, 'LLL dd, y')} + {!value?.from && !value?.to && Pick a date} { - setDate(selection); - onChange?.(selection); - }} + selected={value} + onSelect={onChange} numberOfMonths={2} /> diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index 26456d3dd4..cfa3a1ea6d 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -43,8 +43,7 @@ export const Home: FunctionComponent = () => {
diff --git a/apps/backoffice-v2/src/pages/Home/home-search-schema.ts b/apps/backoffice-v2/src/pages/Home/home-search-schema.ts index 85d91f7459..7cfbf0d822 100644 --- a/apps/backoffice-v2/src/pages/Home/home-search-schema.ts +++ b/apps/backoffice-v2/src/pages/Home/home-search-schema.ts @@ -1,14 +1,8 @@ import { z } from 'zod'; export const HomeSearchSchema = z.object({ - from: z - .string() - .optional() - .transform(val => (val ? new Date(val) : undefined)), - to: z - .string() - .optional() - .transform(val => (val ? new Date(val) : undefined)), + from: z.string().datetime().optional(), + to: z.string().datetime().optional(), }); export type DateRange = z.infer; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd4bb96eda..e82dc794bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -195,6 +195,9 @@ importers: react: specifier: ^18.2.0 version: 18.2.0 + react-day-picker: + specifier: ^8.10.1 + version: 8.10.1(date-fns@2.30.0)(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -8513,7 +8516,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@4.9.5) typescript: 4.9.5 - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) dev: true /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.1.6)(vite@4.5.3): @@ -14122,7 +14125,7 @@ packages: react: 18.2.0 react-docgen: 6.0.4 react-dom: 18.2.0(react@18.2.0) - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -28288,6 +28291,16 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-day-picker@8.10.1(date-fns@2.30.0)(react@18.2.0): + resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} + peerDependencies: + date-fns: ^2.28.0 || ^3.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + date-fns: 2.30.0 + react: 18.2.0 + dev: false + /react-docgen-typescript@2.2.2(typescript@4.9.5): resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: @@ -32483,7 +32496,7 @@ packages: kolorist: 1.8.0 sirv: 2.0.3 ufo: 1.3.2 - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - rollup - supports-color @@ -32500,7 +32513,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globrex: 0.1.2 tsconfck: 2.1.2(typescript@4.9.5) - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - supports-color - typescript diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations index ba704ed1de..983fe5e921 160000 --- a/services/workflows-service/prisma/data-migrations +++ b/services/workflows-service/prisma/data-migrations @@ -1 +1 @@ -Subproject commit ba704ed1dec6f80d0a5fdae9583ccdb0c8487297 +Subproject commit 983fe5e9217a87db133091e942fb51c69ce3bfeb From df183e91d794df6b8858e8509adbb1dea0af60d9 Mon Sep 17 00:00:00 2001 From: Omri Levy Date: Thu, 9 May 2024 00:38:11 +0300 Subject: [PATCH 07/12] refactor(backoffice-v2): simplified undefined values --- .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 10 +++++----- services/workflows-service/prisma/data-migrations | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index 99311c0e1e..e9cecb5fbe 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -4,18 +4,18 @@ import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSear import { HomeSearchSchema } from '@/pages/Home/home-search-schema'; export const useHomeLogic = () => { - const [searchParams, setSearchParams] = useZodSearchParams(HomeSearchSchema); + const [{ from, to }, setSearchParams] = useZodSearchParams(HomeSearchSchema); const handleDateRangeChange: ComponentProps['onChange'] = range => { - const from = range?.from?.toISOString() || undefined; - const to = range?.to?.toISOString() || undefined; + const from = range?.from?.toISOString(); + const to = range?.to?.toISOString(); setSearchParams({ from, to }); }; return { - from: searchParams.from || undefined, - to: searchParams.to || undefined, + from, + to, handleDateRangeChange, }; }; diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations index 983fe5e921..dc03cc5998 160000 --- a/services/workflows-service/prisma/data-migrations +++ b/services/workflows-service/prisma/data-migrations @@ -1 +1 @@ -Subproject commit 983fe5e9217a87db133091e942fb51c69ce3bfeb +Subproject commit dc03cc59980b6a285ed8a5f10beb2e6cfcea80e2 From 543a475508b5f19146ee60f0d46ede4cfdee9e9e Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Thu, 9 May 2024 16:12:32 +0530 Subject: [PATCH 08/12] Changes: Applied to seperate the business logic annd presentation data within home-page --- .../common/hooks/useHomeLogic/useHomeLogic.ts | 30 ++++++++++++++- .../src/pages/Home/Home.page.tsx | 38 +++++++++---------- 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index e9cecb5fbe..ea7b02e2d2 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -1,10 +1,30 @@ -import { ComponentProps } from 'react'; +import { ComponentProps, useEffect } from 'react'; import { DateRangePicker } from '@/common/components/molecules/DateRangePicker/DateRangePicker'; import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams'; import { HomeSearchSchema } from '@/pages/Home/home-search-schema'; +import { t } from 'i18next'; +import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; +import { useLocale } from '@/common/hooks/useLocale/useLocale'; +import { useLocation, useNavigate } from 'react-router-dom'; export const useHomeLogic = () => { + const locale = useLocale(); + const { pathname } = useLocation(); + const navigate = useNavigate(); const [{ from, to }, setSearchParams] = useZodSearchParams(HomeSearchSchema); + const { data: session } = useAuthenticatedUserQuery(); + const { firstName, fullName, avatarUrl } = session?.user || {}; + const queryParams = from || to ? `?from=${from}&to=${to}` : ''; + const statisticsLink = `/${locale}/home/statistics${queryParams}`; + const workflowsLink = `/${locale}/home/workflows${queryParams}`; + + useEffect(() => { + if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { + return; + } + + navigate(`/${locale}/home/statistics`); + }, [pathname, locale, navigate]); const handleDateRangeChange: ComponentProps['onChange'] = range => { const from = range?.from?.toISOString(); @@ -16,6 +36,14 @@ export const useHomeLogic = () => { return { from, to, + t, + firstName, + fullName, + avatarUrl, + statisticsLink, + workflowsLink, + pathname, + locale, handleDateRangeChange, }; }; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index cfa3a1ea6d..1938b83465 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -1,31 +1,27 @@ -import React, { FunctionComponent, useEffect } from 'react'; -import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom'; -import { t } from 'i18next'; -import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; +import React, { FunctionComponent } from 'react'; +import { NavLink, Outlet } from 'react-router-dom'; import { UserAvatar } from '@/common/components/atoms/UserAvatar/UserAvatar'; import { Tabs } from '@/common/components/organisms/Tabs/Tabs'; import { TabsList } from '@/common/components/organisms/Tabs/Tabs.List'; import { TabsTrigger } from '@/common/components/organisms/Tabs/Tabs.Trigger'; import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content'; -import { useLocale } from '@/common/hooks/useLocale/useLocale'; import { DateRangePicker } from '@/common/components/molecules/DateRangePicker/DateRangePicker'; import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic'; export const Home: FunctionComponent = () => { - const { data: session } = useAuthenticatedUserQuery(); - const { firstName, fullName, avatarUrl } = session?.user || {}; - const locale = useLocale(); - const { pathname } = useLocation(); - const navigate = useNavigate(); - const { handleDateRangeChange, from, to } = useHomeLogic(); - - useEffect(() => { - if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { - return; - } - - navigate(`/${locale}/home/statistics`); - }, [pathname, locale, navigate]); + const { + handleDateRangeChange, + from, + to, + t, + firstName, + fullName, + avatarUrl, + statisticsLink, + workflowsLink, + pathname, + locale, + } = useHomeLogic(); return (
@@ -50,10 +46,10 @@ export const Home: FunctionComponent = () => { - Statistics + Statistics - Workflows + Workflows From ad738e04d0303bfa12b4b3617436154ce6b4ca88 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Tue, 14 May 2024 16:13:44 +0530 Subject: [PATCH 09/12] Applied: Suggested changes to useHomeLogic --- .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index ea7b02e2d2..b311720d67 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -9,14 +9,13 @@ import { useLocation, useNavigate } from 'react-router-dom'; export const useHomeLogic = () => { const locale = useLocale(); - const { pathname } = useLocation(); + const { pathname, search } = useLocation(); const navigate = useNavigate(); const [{ from, to }, setSearchParams] = useZodSearchParams(HomeSearchSchema); const { data: session } = useAuthenticatedUserQuery(); const { firstName, fullName, avatarUrl } = session?.user || {}; - const queryParams = from || to ? `?from=${from}&to=${to}` : ''; - const statisticsLink = `/${locale}/home/statistics${queryParams}`; - const workflowsLink = `/${locale}/home/workflows${queryParams}`; + const statisticsLink = `/${locale}/home/statistics${search}`; + const workflowsLink = `/${locale}/home/workflows${search}`; useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { From 6f4033dbfd78b42a8835d9a4366a6222aea85fa6 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Thu, 16 May 2024 17:40:40 +0530 Subject: [PATCH 10/12] Updated: Fixed the active state of tabs using defaultTabValue --- .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 5 +++-- apps/backoffice-v2/src/pages/Home/Home.page.tsx | 11 +++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index b311720d67..c4e21ad73f 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -16,6 +16,8 @@ export const useHomeLogic = () => { const { firstName, fullName, avatarUrl } = session?.user || {}; const statisticsLink = `/${locale}/home/statistics${search}`; const workflowsLink = `/${locale}/home/workflows${search}`; + const isStatisticsActive = pathname === `/${locale}/home/statistics`; + const defaultTabValue = isStatisticsActive ? statisticsLink : workflowsLink; useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { @@ -41,8 +43,7 @@ export const useHomeLogic = () => { avatarUrl, statisticsLink, workflowsLink, - pathname, - locale, + defaultTabValue, handleDateRangeChange, }; }; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index 1938b83465..b45e8a0fad 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -19,8 +19,7 @@ export const Home: FunctionComponent = () => { avatarUrl, statisticsLink, workflowsLink, - pathname, - locale, + defaultTabValue, } = useHomeLogic(); return ( @@ -43,16 +42,16 @@ export const Home: FunctionComponent = () => { />
- + - + Statistics - + Workflows - + From 8fff1a64169471db1c6ad31ed160882eb11e1940 Mon Sep 17 00:00:00 2001 From: Shashank Vishwakarma Date: Thu, 16 May 2024 18:16:45 +0530 Subject: [PATCH 11/12] Changes: Applied suggested file changes --- .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index c4e21ad73f..f9ea23a8d1 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -16,8 +16,7 @@ export const useHomeLogic = () => { const { firstName, fullName, avatarUrl } = session?.user || {}; const statisticsLink = `/${locale}/home/statistics${search}`; const workflowsLink = `/${locale}/home/workflows${search}`; - const isStatisticsActive = pathname === `/${locale}/home/statistics`; - const defaultTabValue = isStatisticsActive ? statisticsLink : workflowsLink; + const defaultTabValue = `${pathname}${search}`; useEffect(() => { if (pathname !== `/${locale}` && pathname !== `/${locale}/home`) { From 34ed40111d15642de20374389960802cc37aa1b3 Mon Sep 17 00:00:00 2001 From: Omri Levy Date: Sun, 19 May 2024 16:52:34 +0300 Subject: [PATCH 12/12] updated useHomeLogic exports --- .../src/common/hooks/useHomeLogic/useHomeLogic.ts | 6 ++---- apps/backoffice-v2/src/pages/Home/Home.page.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts index f9ea23a8d1..97046cb2cd 100644 --- a/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts +++ b/apps/backoffice-v2/src/common/hooks/useHomeLogic/useHomeLogic.ts @@ -2,7 +2,6 @@ import { ComponentProps, useEffect } from 'react'; import { DateRangePicker } from '@/common/components/molecules/DateRangePicker/DateRangePicker'; import { useZodSearchParams } from '@/common/hooks/useZodSearchParams/useZodSearchParams'; import { HomeSearchSchema } from '@/pages/Home/home-search-schema'; -import { t } from 'i18next'; import { useAuthenticatedUserQuery } from '@/domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery'; import { useLocale } from '@/common/hooks/useLocale/useLocale'; import { useLocation, useNavigate } from 'react-router-dom'; @@ -26,7 +25,7 @@ export const useHomeLogic = () => { navigate(`/${locale}/home/statistics`); }, [pathname, locale, navigate]); - const handleDateRangeChange: ComponentProps['onChange'] = range => { + const onDateRangeChange: ComponentProps['onChange'] = range => { const from = range?.from?.toISOString(); const to = range?.to?.toISOString(); @@ -36,13 +35,12 @@ export const useHomeLogic = () => { return { from, to, - t, firstName, fullName, avatarUrl, statisticsLink, workflowsLink, defaultTabValue, - handleDateRangeChange, + onDateRangeChange, }; }; diff --git a/apps/backoffice-v2/src/pages/Home/Home.page.tsx b/apps/backoffice-v2/src/pages/Home/Home.page.tsx index b45e8a0fad..4d60e9e178 100644 --- a/apps/backoffice-v2/src/pages/Home/Home.page.tsx +++ b/apps/backoffice-v2/src/pages/Home/Home.page.tsx @@ -7,13 +7,13 @@ import { TabsTrigger } from '@/common/components/organisms/Tabs/Tabs.Trigger'; import { TabsContent } from '@/common/components/organisms/Tabs/Tabs.Content'; import { DateRangePicker } from '@/common/components/molecules/DateRangePicker/DateRangePicker'; import { useHomeLogic } from '@/common/hooks/useHomeLogic/useHomeLogic'; +import { t } from 'i18next'; export const Home: FunctionComponent = () => { const { - handleDateRangeChange, + onDateRangeChange, from, to, - t, firstName, fullName, avatarUrl, @@ -37,17 +37,17 @@ export const Home: FunctionComponent = () => {
- + Statistics - + Workflows