refactor: clarify frontend module ownership

src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts

@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react";
-import { useParams, useSearchParams } from "react-router";
+import { useState } from "react";
+import { useParams } from "react-router";
 
 import {
 	type BrokerageEvent,
 	useBrokerageEvents,
 } from "@/entities/brokerage-event";
 import { useScreenSync } from "@/features/tbank-connection";
-import { isValidPeriod } from "@/shared/lib";
+import { isValidPeriod, useUrlPeriod } from "@/shared/lib";
 
 type AccountEventsPageViewModel
 	= | {
@@ -29,18 +29,12 @@ type AccountEventsPageViewModel
 
 function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
 	const { accountId = "" } = useParams();
-	const [searchParameters, setSearchParameters] = useSearchParams();
-	const urlFrom = searchParameters.get("from");
-	const urlTo = searchParameters.get("to");
-	const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo);
 
-	const appliedFrom = isValidUrlPeriod
-		? urlFrom
-		: null;
-
-	const appliedTo = isValidUrlPeriod
-		? urlTo
-		: null;
+	const {
+		from: appliedFrom,
+		setParameters: setSearchParameters,
+		to: appliedTo,
+	} = useUrlPeriod();
 
 	const [draftPeriod, setDraftPeriod] = useState<[
 		null | string,
@@ -48,13 +42,6 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
 	]>([appliedFrom, appliedTo]);
 
 	const [draftFrom, draftTo] = draftPeriod;
-	useEffect(() => {
-		if (isValidUrlPeriod) return;
-		const normalized = new URLSearchParams(searchParameters);
-		normalized.delete("from");
-		normalized.delete("to");
-		setSearchParameters(normalized, { replace: true });
-	}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
 
 	const scope = JSON.stringify([accountId, appliedFrom, appliedTo]);
 	const [previousScope, setPreviousScope] = useState(scope);

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx

@@ -12,7 +12,10 @@ import {
 import { DatePickerInput } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
 
-import { BrokerageEventCard } from "@/entities/brokerage-event";
+import {
+	BrokerageEventCard,
+	brokerageEventKey,
+} from "@/entities/brokerage-event";
 import { formatSnapshotTime } from "@/shared/lib";
 
 import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
@@ -33,15 +36,7 @@ const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
 				{props.events.map(event => (
 					<BrokerageEventCard
 						event={event}
-						key={JSON.stringify([
-							event.account?.id,
-							event.type,
-							event.date,
-							event.instrumentUid,
-							event.figi,
-							event.ticker,
-							event.logoName,
-						])}
+						key={brokerageEventKey(event)}
 					/>
 				))}
 			</Stack>