refactor: enforce frontend view model boundaries

src/entities/bank-card/ui/BankPeriodPicker/BankPeriodPicker.vm.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type BankPeriodPickerProps = {
+	onChange: (value: [null | string, null | string]) => void;
+	period: { from: string; to: string };
+};
+
+function useBankPeriodPickerVm(props: BankPeriodPickerProps) {
+	const { onChange, period } = props;
+	const { t } = useTranslation();
+	const scope = `${period.from}-${period.to}`;
+
+	const [draft, setDraft] = useState<{
+		scope: string;
+		value: [null | string, null | string];
+	}>();
+
+	const value: [null | string, null | string]
+		= draft?.scope === scope ? draft.value : [period.from, period.to];
+
+	const onPeriodChange = (next: [null | string, null | string]) => {
+		setDraft({ scope, value: next });
+		onChange(next);
+	};
+
+	return { onChange, onPeriodChange, t, value };
+}
+
+export { useBankPeriodPickerVm };