refactor: simplify auth and instrument pages

src/features/auth/model/auth-context.ts

@@ -3,11 +3,9 @@ import { createContext, use } from "react";
 import type { paths } from "@/shared/api";
 
 type AuthContextValue = {
-	accessToken: string | undefined;
 	login: (email: string, password: string) => Promise<void>;
 	logout: () => Promise<void>;
 	ready: boolean;
-	refresh: () => Promise<boolean>;
 	register: (email: string, password: string) => Promise<void>;
 	user: undefined | User;
 };

src/features/auth/model/auth.test.tsx

@@ -27,6 +27,32 @@ function createAuthWrapper(
 	);
 }
 
+async function expireSession() {
+	server.use(http.get("*/api/v1/brokerage-accounts", () =>
+		HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
+	{ once: true }));
+
+	try {
+		await apiClient.GET("/api/v1/brokerage-accounts");
+	}
+	catch (error) {
+		// A refresh that changes identity cancels the original user's request.
+		if (!(error instanceof DOMException && error.name === "AbortError")) throw error;
+	}
+}
+
+async function requestAuthorization() {
+	let authorization: null | string = null;
+	server.use(http.get("*/api/v1/brokerage-accounts", ({ request }) => {
+		authorization = request.headers.get("Authorization");
+
+		return HttpResponse.json(resource([]));
+	}, { once: true }));
+	await apiClient.GET("/api/v1/brokerage-accounts");
+
+	return authorization;
+}
+
 describe("AuthProvider", () => {
 	it("authorizes requests after restoring the initial session", async () => {
 		let authorization: null | string
@@ -77,7 +103,7 @@ describe("AuthProvider", () => {
 		await waitFor(() => expect(result.current.ready).toBe(true));
 
 		expect(result.current.user).toBeUndefined();
-		expect(result.current.accessToken).toBeUndefined();
+		expect(await requestAuthorization()).toBeNull();
 		expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
 		expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
 	});
@@ -106,13 +132,13 @@ describe("AuthProvider", () => {
 		const { result } = renderHook(() => useAuth(), { wrapper });
 
 		await waitFor(() =>
-			expect(result.current.accessToken).toBe("restored-token"),
+			expect(result.current.ready).toBe(true),
 		);
 		const response = await apiClient.GET("/api/v1/brokerage-accounts");
 
 		expect(response.response.status).toBe(401);
 		await waitFor(() => expect(result.current.user).toBeUndefined());
-		expect(result.current.accessToken).toBeUndefined();
+		expect(await requestAuthorization()).toBeNull();
 		expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
 		expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
 	});
@@ -147,7 +173,7 @@ describe("AuthProvider", () => {
 		queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]);
 		const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
 		const { result } = renderHook(() => useAuth(), { wrapper });
-		await waitFor(() => expect(result.current.accessToken).toBe("test-token"));
+		await waitFor(() => expect(result.current.ready).toBe(true));
 
 		expect(queryClient.getQueryData(bankCardsKey)).toEqual([
 			{ id: "bank-card-1" },
@@ -155,7 +181,7 @@ describe("AuthProvider", () => {
 		await act(() => result.current.logout());
 
 		expect(result.current.user).toBeUndefined();
-		expect(result.current.accessToken).toBeUndefined();
+		expect(await requestAuthorization()).toBeNull();
 		expect(queryClient.getQueryData(statusKey)).toBeUndefined();
 		expect(queryClient.getQueryData(portfolioKey)).toBeUndefined();
 		expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
@@ -265,7 +291,7 @@ describe("AuthProvider", () => {
 		const { result } = renderHook(() => useAuth(), { wrapper });
 		await waitFor(() => expect(result.current.ready).toBe(true));
 		queryClient.setQueryData(bankCardsKey, [{ id: "a-card" }]);
-		await act(() => result.current.refresh());
+		await act(() => expireSession());
 		expect(queryClient.getQueryData(bankCardsKey)).toEqual([{ id: "a-card" }]);
 		let release!: (value: string) => void;
 
@@ -283,7 +309,7 @@ describe("AuthProvider", () => {
 			.catch(() => {});
 
 		identity = "b";
-		await act(() => result.current.refresh());
+		await act(() => expireSession());
 		release("a-data");
 		await pending;
 		expect(result.current.user?.id).toBe("b");
@@ -322,7 +348,7 @@ describe("AuthProvider", () => {
 			expect(result.current.cards.data?.[0].id).toBe("a-card"),
 		);
 		identity = "b";
-		await act(() => result.current.auth.refresh());
+		await act(() => expireSession());
 		await waitFor(() =>
 			expect(result.current.cards.data?.[0].id).toBe("b-card"),
 		);

src/features/auth/model/auth.vm.ts

@@ -29,7 +29,6 @@ async function request(
 function useAuthProviderVm() {
 	const queryClient = useQueryClient();
 	const [user, setUser] = useState<undefined | User>(undefined);
-	const [accessToken, setAccessToken] = useState<string | undefined>(undefined);
 	const accessTokenRef = useRef<string | undefined>(undefined);
 	const [ready, setReady] = useState(false);
 
@@ -69,7 +68,6 @@ function useAuthProviderVm() {
 
 			userRef.current = authentication.user;
 			setUser(authentication.user);
-			setAccessToken(authentication.accessToken);
 		},
 		[queryClient],
 	);
@@ -78,7 +76,6 @@ function useAuthProviderVm() {
 		generationRef.current += 1;
 		userRef.current = undefined;
 		setUser(undefined);
-		setAccessToken(undefined);
 		accessTokenRef.current = undefined;
 		queryClient.clear();
 	}, [queryClient]);
@@ -156,12 +153,10 @@ function useAuthProviderVm() {
 	useEffect(() => () => configureAuthClient(), []);
 
 	const authContextValue = {
-		accessToken,
 		login: (email: string, password: string) =>
 			authenticate("/api/v1/auth/login", email, password),
 		logout,
 		ready,
-		refresh,
 		register: (email: string, password: string) =>
 			authenticate("/api/v1/auth/register", email, password),
 		user,

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -1,12 +1,12 @@
 import type { FC } from "react";
 
+import { useAuth } from "../../model/auth-context";
 import { AuthForm } from "../AuthForm/AuthForm";
-import { useLoginFormVm } from "./LoginForm.vm";
 
 const LoginForm: FC = () => {
-	const { onSubmit } = useLoginFormVm();
+	const { login } = useAuth();
 
-	return <AuthForm onSubmit={onSubmit} />;
+	return <AuthForm onSubmit={login} />;
 };
 
 export { LoginForm };

src/features/auth/ui/LoginForm/LoginForm.vm.ts

@@ -1,28 +0,0 @@
-import type { ComponentProps } from "react";
-
-import { useLocation, useNavigate } from "react-router";
-
-import { useAuth } from "../../model/auth-context";
-import { AuthForm } from "../AuthForm/AuthForm";
-
-function useLoginFormVm() {
-	const { login } = useAuth();
-	const navigate = useNavigate();
-	const location = useLocation();
-
-	const returnTo
-		= (location.state as null
-		| { returnTo?: string })?.returnTo ?? "/accounts";
-
-	const onSubmit: ComponentProps<typeof AuthForm>["onSubmit"] = async (
-		email,
-		password,
-	) => {
-		await login(email, password);
-		await navigate(returnTo, { replace: true });
-	};
-
-	return { onSubmit };
-}
-
-export { useLoginFormVm };

src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -1,12 +1,12 @@
 import type { FC } from "react";
 
+import { useAuth } from "../../model/auth-context";
 import { AuthForm } from "../AuthForm/AuthForm";
-import { useRegisterFormVm } from "./RegisterForm.vm";
 
 const RegisterForm: FC = () => {
-	const { onSubmit } = useRegisterFormVm();
+	const { register } = useAuth();
 
-	return <AuthForm onSubmit={onSubmit} register />;
+	return <AuthForm onSubmit={register} register />;
 };
 
 export { RegisterForm };

src/features/auth/ui/RegisterForm/RegisterForm.vm.ts

@@ -1,28 +0,0 @@
-import type { ComponentProps } from "react";
-
-import { useLocation, useNavigate } from "react-router";
-
-import { useAuth } from "../../model/auth-context";
-import { AuthForm } from "../AuthForm/AuthForm";
-
-function useRegisterFormVm() {
-	const { register } = useAuth();
-	const navigate = useNavigate();
-	const location = useLocation();
-
-	const returnTo
-		= (location.state as null
-		| { returnTo?: string })?.returnTo ?? "/accounts";
-
-	const onSubmit: ComponentProps<typeof AuthForm>["onSubmit"] = async (
-		email,
-		password,
-	) => {
-		await register(email, password);
-		await navigate(returnTo, { replace: true });
-	};
-
-	return { onSubmit, register };
-}
-
-export { useRegisterFormVm };

src/features/instrument-details/index.ts

@@ -1,5 +1,8 @@
 export { section, type SectionState } from "./model/section";
+export { useInstrumentParameters } from "./model/useInstrumentParameters";
 export { InstrumentChart } from "./ui/InstrumentChart/InstrumentChart.view";
 export { InstrumentEvents } from "./ui/InstrumentEvents.view";
+export { InstrumentHeader } from "./ui/InstrumentHeader/InstrumentHeader.view";
+export { InstrumentPageState } from "./ui/InstrumentPageState.view";
 export { InstrumentPosition } from "./ui/InstrumentPosition.view";
 export { InstrumentSection } from "./ui/InstrumentSection.view";

src/features/instrument-details/model/useInstrumentParameters.ts

@@ -0,0 +1,41 @@
+import { useSearchParams } from "react-router";
+
+import type { OperationCategory } from "@/entities/broker-operation";
+
+const instrumentPeriods = ["month", "halfYear", "year", "all"] as const;
+
+function useInstrumentParameters(incomeFilter: "coupons" | "dividends") {
+	const [parameters, setParameters] = useSearchParams();
+
+	const period = instrumentPeriods.find(
+		value => value === parameters.get("period"),
+	) ?? "month";
+
+	const filters: { categories: OperationCategory[]; value: string }[] = [
+		{ categories: [], value: "all" },
+		{ categories: ["trade"], value: "trades" },
+		{ categories: ["income"], value: incomeFilter },
+		{ categories: ["tax", "fee", "transfer", "other"], value: "other" },
+	];
+
+	const { categories, value: filter } = filters.find(
+		item => item.value === parameters.get("events"),
+	) ?? filters[0];
+
+	const setParameter = (key: string, value: string) => {
+		const next = new URLSearchParams(parameters);
+		next.set(key, value);
+		setParameters(next, { replace: true });
+	};
+
+	return {
+		categories,
+		filter,
+		period,
+		search: parameters.size > 0 ? `?${parameters.toString()}` : "",
+		setFilter: (value: string) => setParameter("events", value),
+		setPeriod: (value: string) => setParameter("period", value),
+	};
+}
+
+export { instrumentPeriods, useInstrumentParameters };

src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts

@@ -4,6 +4,8 @@ import { formatDate, formatDecimal, formatMoney } from "@/shared/lib";
 
 import type { InstrumentChartProps } from "../../model/types";
 
+import { instrumentPeriods } from "../../model/useInstrumentParameters";
+
 function useInstrumentChartVm(props: InstrumentChartProps) {
 	const { vm } = props;
 	const { t } = useTranslation();
@@ -34,7 +36,7 @@ function useInstrumentChartVm(props: InstrumentChartProps) {
 		return { ...candle, price };
 	});
 
-	const periodOptions = ["month", "halfYear", "year", "all"].map(value => ({
+	const periodOptions = instrumentPeriods.map(value => ({
 		label: t(`stock.periods.${value}`),
 		value,
 	}));

src/features/instrument-details/ui/InstrumentHeader/InstrumentHeader.module.css

@@ -0,0 +1,17 @@
+.header {
+	padding: var(--mantine-spacing-lg);
+	border-radius: var(--mantine-radius-lg);
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.identity {
+	display: flex;
+	align-items: center;
+	gap: var(--mantine-spacing-md);
+	min-width: 0;
+}
+@media (max-width: 48em) {
+	.header {
+		padding: var(--mantine-spacing-md);
+	}
+}

src/features/instrument-details/ui/InstrumentHeader/InstrumentHeader.view.tsx

@@ -0,0 +1,45 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import { Avatar, Button, Group, Paper, Text, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import classes from "./InstrumentHeader.module.css";
+
+type InstrumentHeaderProps = PropsWithChildren<{
+	logoSrc: null | string;
+	name: string;
+	onRefresh: () => void;
+	refreshing: boolean;
+	subtitle: ReactNode;
+}>;
+
+const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
+	const { children, logoSrc, name, onRefresh, refreshing, subtitle } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Paper className={classes.header} component="header" withBorder>
+			<Group align="start" justify="space-between">
+				<div className={classes.identity}>
+					<Avatar alt="" key={logoSrc} radius="md" size={56} src={logoSrc}>
+						{name[0]}
+					</Avatar>
+
+					<div>
+						<Title order={1} size="h2">{name}</Title>
+
+						<Text c="dimmed" size="sm">{subtitle}</Text>
+					</div>
+				</div>
+
+				<Button disabled={refreshing} onClick={onRefresh} variant="subtle">
+					{t("investment.refresh")}
+				</Button>
+			</Group>
+
+			{children}
+		</Paper>
+	);
+};
+
+export { InstrumentHeader };

src/features/instrument-details/ui/InstrumentPageState.view.tsx

@@ -0,0 +1,66 @@
+import type { FC } from "react";
+
+import { Anchor, Button, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
+
+type InstrumentPageStateProps = {
+	code?: string;
+	kind: "bond" | "stock";
+	loading: boolean;
+	retry: () => void;
+};
+
+const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
+	const { code, kind, loading, retry } = props;
+	const { t } = useTranslation();
+	if (loading) return (
+		<LoadingSkeleton label={t(`${kind}.loading`)}>
+			<Stack>
+				<Skeleton h={110} />
+
+				<Skeleton h={350} />
+
+				<Skeleton h={170} />
+			</Stack>
+		</LoadingSkeleton>
+	);
+
+	const ambiguousCode = kind === "stock"
+		? ApiErrorCode.StockTickerAmbiguous
+		: ApiErrorCode.BondTickerAmbiguous;
+
+	let message = t(`${kind}.unavailableText`);
+	if (isApiErrorCode(code, ambiguousCode))
+		message = t(`${kind}.ambiguousTicker`);
+	if (
+		isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
+		|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
+	)
+		message = t(`${kind}.connect`);
+
+	return (
+		<Stack role="alert">
+			<Title order={1}>{t(`${kind}.unavailable`)}</Title>
+
+			<Text>{message}</Text>
+
+			<Anchor component={Link} to={`/${kind}s`}>
+				{t(`${kind}.backToSearch`)}
+			</Anchor>
+
+			<Anchor component={Link} to="/settings">
+				{t("accounts.openSettings")}
+			</Anchor>
+
+			<Button onClick={retry} variant="default">
+				{t("accounts.retry")}
+			</Button>
+		</Stack>
+	);
+};
+
+export { InstrumentPageState };