WealthLedger/frontend
5
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: codify React component style

Browse Source
This commit is contained in:
ksv741
2026-08-25 15:33:20 +03:00
parent 268acdf2e1
commit d10e1dd182
65 changed files with 711 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/entities/broker-operation/api/useBrokerageOperations.test.tsx
+10 -6
View File
@@ -1,7 +1,7 @@
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import type { ReactNode } from "react";
import type { FC, PropsWithChildren } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import {
@@ -25,11 +25,15 @@ describe("useBrokerageOperations", () => {
}),
).toEqual({ categories: ["income", "tax"], cursor: "next" });
const client = new QueryClient();
const wrapper = ({ children }: { children: ReactNode }) => (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
const wrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
};
const { result } = renderHook(
() => useBrokerageOperations("account-1", { limit: 5 }),
src/entities/broker-operation/api/useBrokerageOperations.ts
+13 -7
View File
@@ -4,14 +4,14 @@ import type { paths } from "@/shared/api/generated/schema";
type OperationsEndpoint =
paths["/api/v1/brokerage-accounts/{accountId}/operations"]["get"];
export type BrokerageOperation =
type BrokerageOperation =
OperationsEndpoint["responses"][200]["content"]["application/json"]["items"][number];
type BrokerageOperationsQuery = NonNullable<
OperationsEndpoint["parameters"]["query"]
>;
export type OperationCategory = BrokerageOperation["category"];
type OperationCategory = BrokerageOperation["category"];
export const operationCategories = [
const operationCategories = [
"trade",
"income",
"tax",
@@ -20,9 +20,7 @@ export const operationCategories = [
"other",
] as const satisfies readonly OperationCategory[];
export function brokerageOperationsQueryParams(
query: BrokerageOperationsQuery,
) {
function brokerageOperationsQueryParams(query: BrokerageOperationsQuery) {
return {
...(query.from ? { from: query.from } : {}),
...(query.to ? { to: query.to } : {}),
@@ -34,7 +32,7 @@ export function brokerageOperationsQueryParams(
};
}
export function useBrokerageOperations(
function useBrokerageOperations(
accountId: string | undefined,
query: BrokerageOperationsQuery = {},
) {
@@ -50,3 +48,11 @@ export function useBrokerageOperations(
retry: false,
});
}
export {
type BrokerageOperation,
brokerageOperationsQueryParams,
type OperationCategory,
operationCategories,
useBrokerageOperations,
};
src/entities/broker-operation/index.ts
+2 -4
View File
@@ -1,8 +1,6 @@
export type {
BrokerageOperation,
OperationCategory,
} from "./api/useBrokerageOperations";
export {
type BrokerageOperation,
type OperationCategory,
operationCategories,
useBrokerageOperations,
} from "./api/useBrokerageOperations";
src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx
+12 -6
View File
@@ -2,7 +2,7 @@ import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import type { ReactNode } from "react";
import type { FC, PropsWithChildren } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import { server } from "@/test/server";
@@ -10,11 +10,17 @@ import { useBrokerageAccounts } from "./useBrokerageAccounts";
function createWrapper() {
const client = new QueryClient();
return ({ children }: { children: ReactNode }) => (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
const TestWrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
};
return TestWrapper;
}
describe("useBrokerageAccounts", () => {
src/entities/brokerage-account/api/useBrokerageAccounts.ts
+9 -4
View File
@@ -4,16 +4,21 @@ import type { paths } from "@/shared/api/generated/schema";
const brokerageAccountsQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/brokerage-accounts");
export const brokerageAccountsQueryKey =
brokerageAccountsQueryOptions().queryKey;
const brokerageAccountsQueryKey = brokerageAccountsQueryOptions().queryKey;
export type BrokerageAccount =
type BrokerageAccount =
paths["/api/v1/brokerage-accounts"]["get"]["responses"][200]["content"]["application/json"][number];
export function useBrokerageAccounts() {
function useBrokerageAccounts() {
return useAuthenticatedQuery({
...brokerageAccountsQueryOptions(),
staleTime: 60_000,
retry: false,
});
}
export {
type BrokerageAccount,
brokerageAccountsQueryKey,
useBrokerageAccounts,
};
src/entities/brokerage-account/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export type { BrokerageAccount } from "./api/useBrokerageAccounts";
export {
type BrokerageAccount,
brokerageAccountsQueryKey,
useBrokerageAccounts,
} from "./api/useBrokerageAccounts";
src/entities/brokerage-account/model/display.ts
+4 -2
View File
@@ -1,11 +1,13 @@
import type { BrokerageAccount } from "../api/useBrokerageAccounts";
export function accountTypeKey(type: BrokerageAccount["type"]) {
function accountTypeKey(type: BrokerageAccount["type"]) {
return `accounts.types.${type}` as const;
}
export function errorCode(error: unknown): string | undefined {
function errorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
: undefined;
}
export { accountTypeKey, errorCode };
src/entities/brokerage-account/ui/BrokerageAccountList.tsx
+7 -2
View File
@@ -1,4 +1,5 @@
import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import type { BrokerageAccount } from "../api/useBrokerageAccounts";
@@ -7,8 +8,10 @@ import classes from "./BrokerageAccountList.module.css";
type BrokerageAccountListProps = { accounts: BrokerageAccount[] };
export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
const { accounts } = props;
const { t } = useTranslation();
return (
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
{accounts.map((account) => (
@@ -43,4 +46,6 @@ export function BrokerageAccountList({ accounts }: BrokerageAccountListProps) {
))}
</SimpleGrid>
);
}
};
export { BrokerageAccountList };
src/entities/brokerage-event/api/useBrokerageEvents.test.tsx
+12 -6
View File
@@ -2,7 +2,7 @@ import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import type { ReactNode } from "react";
import type { FC, PropsWithChildren } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
import { server } from "@/test/server";
@@ -10,11 +10,17 @@ import { useBrokerageEvents } from "./useBrokerageEvents";
function createWrapper() {
const client = new QueryClient();
return ({ children }: { children: ReactNode }) => (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
const TestWrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
};
return TestWrapper;
}
describe("useBrokerageEvents", () => {
src/entities/brokerage-event/api/useBrokerageEvents.ts
+4 -2
View File
@@ -3,10 +3,10 @@ import type { paths } from "@/shared/api/generated/schema";
type EventsEndpoint =
paths["/api/v1/brokerage-accounts/{accountId}/events"]["get"];
export type BrokerageEvent =
type BrokerageEvent =
EventsEndpoint["responses"][200]["content"]["application/json"]["events"][number];
export function useBrokerageEvents(accountId: string | undefined) {
function useBrokerageEvents(accountId: string | undefined) {
return useAuthenticatedQuery({
...apiQueryClient.queryOptions(
"get",
@@ -18,3 +18,5 @@ export function useBrokerageEvents(accountId: string | undefined) {
retry: false,
});
}
export { type BrokerageEvent, useBrokerageEvents };
src/entities/portfolio/api/usePortfolio.test.tsx
+10 -6
View File
@@ -1,7 +1,7 @@
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import type { ReactNode } from "react";
import type { FC, PropsWithChildren } from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { configureAuthClient } from "@/shared/api";
@@ -17,11 +17,15 @@ describe("usePortfolio", () => {
clear: vi.fn(),
});
const client = new QueryClient();
const wrapper = ({ children }: { children: ReactNode }) => (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
const wrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<MantineProvider>
<QueryClientProvider client={client}>{children}</QueryClientProvider>
</MantineProvider>
);
};
const { result } = renderHook(() => usePortfolio("account-1"), {
wrapper,
src/entities/portfolio/api/usePortfolio.ts
+4 -2
View File
@@ -6,10 +6,10 @@ const portfolioQueryPolicy = {
retry: false,
} as const;
export type Portfolio =
type Portfolio =
paths["/api/v1/brokerage-accounts/{accountId}/portfolio"]["get"]["responses"][200]["content"]["application/json"];
export function usePortfolio(accountId: string | undefined) {
function usePortfolio(accountId: string | undefined) {
return useAuthenticatedQuery({
...apiQueryClient.queryOptions(
"get",
@@ -20,3 +20,5 @@ export function usePortfolio(accountId: string | undefined) {
...portfolioQueryPolicy,
});
}
export { type Portfolio, usePortfolio };
src/entities/portfolio/index.ts
+1 -2
View File
@@ -1,5 +1,4 @@
export type { Portfolio } from "./api/usePortfolio";
export { usePortfolio } from "./api/usePortfolio";
export { type Portfolio, usePortfolio } from "./api/usePortfolio";
export {
formatMoney,
formatShare,
src/entities/portfolio/model/display.ts
+13 -7
View File
@@ -12,12 +12,12 @@ function formatDecimal(value: string): string {
return `${sign}${grouped}${fraction ? `,${fraction}` : ""}`;
}
export function formatMoney(money: Money | null): string {
function formatMoney(money: Money | null): string {
if (!money) return "—";
return `${formatDecimal(money.value)} ${money.currency === "RUB" ? "₽" : money.currency}`;
}
export function formatShare(
function formatShare(
numerator: Money | null,
denominator: Money | null,
): string | null {
@@ -32,7 +32,7 @@ export function formatShare(
return `${rounded} %`;
}
export function formatSnapshotTime(value: string): string {
function formatSnapshotTime(value: string): string {
return new Intl.DateTimeFormat("ru-RU", {
dateStyle: "medium",
timeStyle: "short",
@@ -40,7 +40,7 @@ export function formatSnapshotTime(value: string): string {
}).format(new Date(value));
}
export function portfolioErrorCode(error: unknown): string | undefined {
function portfolioErrorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
: undefined;
@@ -48,11 +48,17 @@ export function portfolioErrorCode(error: unknown): string | undefined {
const logoSize = 160;
export function instrumentLogoUrl(
logoName: string | null | undefined,
): string | null {
function instrumentLogoUrl(logoName: string | null | undefined): string | null {
const stem = logoName?.trim().replace(/\.png$/i, "");
return stem
? `https://invest-brands.cdn-tinkoff.ru/${stem}x${logoSize}.png`
: null;
}
export {
formatMoney,
formatShare,
formatSnapshotTime,
instrumentLogoUrl,
portfolioErrorCode,
};