refactor: simplify auth and instrument pages

src/pages/stock/ui/StockPage/components/StockDividends.view.tsx

@@ -11,25 +11,30 @@ import {
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
-import { InstrumentSection as StockSection } from "@/features/instrument-details";
-import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
+import type { StockDividends as Dividends } from "@/entities/stock";
 
-import type { StockPageVm } from "../StockPage.vm";
+import { InstrumentSection, type SectionState } from "@/features/instrument-details";
+import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib";
 
 import classes from "../StockPage.module.css";
 
-type StockEventsProps = { vm: StockPageVm };
+type StockDividendsProps = {
+	dividends?: Dividends;
+	pastDividends: Dividends["dividends"];
+	state: SectionState;
+	upcoming: Dividends["dividends"];
+};
 
-const StockDividends: FC<StockEventsProps> = (props) => {
-	const { vm } = props;
+const StockDividends: FC<StockDividendsProps> = (props) => {
+	const { dividends, pastDividends, state, upcoming } = props;
 	const { t } = useTranslation();
 
 	let upcomingContent;
 
-	if (vm.dividends) {
-		if (vm.upcoming.length > 0) {
+	if (dividends) {
+		if (upcoming.length > 0) {
 			upcomingContent = (
-				vm.upcoming.map(event => (
+				upcoming.map(event => (
 					<div
 						className={classes.dividend}
 						key={JSON.stringify([
@@ -104,7 +109,7 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 		else {
 			upcomingContent = (
 				<Text c="dimmed">
-					{t("stock.noUpcoming", { to: formatDate(vm.dividends.to) })}
+					{t("stock.noUpcoming", { to: formatDate(dividends.to) })}
 				</Text>
 			);
 		}
@@ -112,10 +117,10 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 
 	let pastDividendsContent;
 
-	if (vm.pastDividends.length > 0) {
+	if (pastDividends.length > 0) {
 		pastDividendsContent = (
 			<Stack gap="sm">
-				{vm.pastDividends.map(event => (
+				{pastDividends.map(event => (
 					<Paper
 						key={JSON.stringify([
 							event.recordDate,
@@ -166,11 +171,11 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 	}
 
 	return (
-		<StockSection state={vm.dividendsState} title={t("stock.upcoming")}>
-			{!!vm.dividends && (
+		<InstrumentSection state={state} title={t("stock.upcoming")}>
+			{!!dividends && (
 				<Stack gap="md">
 					{!!(
-						vm.dividends.estimateUnavailable || vm.dividends.positionIsStale
+						dividends.estimateUnavailable || dividends.positionIsStale
 					) && (
 						<Alert aria-live="polite" color="orange" role="status">
 							{t("stock.estimateUnavailable")}
@@ -183,10 +188,10 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 						{t("stock.dividendNote")}
 					</Text>
 
-					{!!vm.dividends.positionAt && (
+					{!!dividends.positionAt && (
 						<Text c="dimmed" size="xs">
 							{t("stock.snapshotAt", {
-								date: formatSnapshotTime(vm.dividends.positionAt),
+								date: formatSnapshotTime(dividends.positionAt),
 							})}
 						</Text>
 					)}
@@ -200,8 +205,8 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 							<Accordion.Panel>
 								<Text c="dimmed" my="sm" size="xs">
 									{t("stock.dividendWindow", {
-										from: formatDate(vm.dividends.from),
-										to: formatDate(vm.dividends.to),
+										from: formatDate(dividends.from),
+										to: formatDate(dividends.to),
 									})}
 								</Text>
 
@@ -211,7 +216,7 @@ const StockDividends: FC<StockEventsProps> = (props) => {
 					</Accordion>
 				</Stack>
 			)}
-		</StockSection>
+		</InstrumentSection>
 	);
 };