diff --git a/.ai/conventions/typescript-react.md b/.ai/conventions/typescript-react.md index 462ce0c..6e8a058 100644 --- a/.ai/conventions/typescript-react.md +++ b/.ai/conventions/typescript-react.md @@ -14,7 +14,7 @@ на основе `PropsWithChildren<{ … }>`; без props — `FC`. - Обычные exports — нижний named block; barrel делает прямой re-export. CSF сохраняет default meta и прямые story exports; configuration exceptions - заданы в [Biome](../../biome.json). Не распространяй их на application code. + заданы в [ESLint](../../eslint.config.mjs). Не распространяй их на application code. ## Hooks и derived state @@ -41,8 +41,8 @@ Backend vocabulary бери из generated `paths`, не создавай руч enum и не превращай неизвестный code в известный через cast. Повторяющуюся обработку своди у ответственного owner; [errors](data.md#errors). -`noMagicNumbers` в Biome — error; fixtures/tests/stories исключены только -из этого правила. Policy получает имя и единицы; подавление допустимо для +`@typescript-eslint/no-magic-numbers` — error; fixtures/tests/stories исключены +из этой дополнительной проверки. Policy получает имя и единицы; подавление допустимо для incidental value с объяснением. Обычный UI-текст не превращай в constant: его owner — [i18n](ui.md#строки-и-валидация). Semantic magic strings и props profile требуют review. diff --git a/.ai/conventions/ui.md b/.ai/conventions/ui.md index c1ead96..163ff83 100644 --- a/.ai/conventions/ui.md +++ b/.ai/conventions/ui.md @@ -121,7 +121,7 @@ Types, props, hooks и memoization — в [TypeScript/React](typescript-react.md Продуктовый текст хранится в `src/shared/i18n/locales/ru.ts`, читается через `useTranslation()`. В Zod используй `validationMessage(key)` из i18n/zod, без пользовательских literal messages. Это mandatory semantic review: общего запрета -непереведённых JSX-строк в Biome/TypeScript нет. Synthetic story fixtures и +непереведённых JSX-строк в ESLint/TypeScript нет. Synthetic story fixtures и описания историй допустимы; они не заменяют продуктовую локализацию. ## Проверка diff --git a/.storybook/dependency-cruiser.cjs b/.storybook/dependency-cruiser.cjs index a10e1d6..6576ed2 100644 --- a/.storybook/dependency-cruiser.cjs +++ b/.storybook/dependency-cruiser.cjs @@ -5,11 +5,11 @@ module.exports = { forbidden: [ ...base.forbidden, { + from: { path: String.raw`\.stories\.tsx$|^\.storybook/preview\.tsx$` }, name: "stories-must-not-reach-application-data", severity: "error", - from: { path: "\\.stories\\.tsx$|^\\.storybook/preview\\.tsx$" }, to: { - path: "^src/(shared/api|features/auth|app/routes|app/ui)/|^src/(entities|features)/[^/]+/api/|\\.vm\\.ts$|^src/pages/[^/]+/ui/.*Page\\.tsx$|node_modules/(@tanstack/react-query|openapi-fetch|openapi-react-query)/", + path: String.raw`^src/(shared/api|features/auth|app/routes|app/ui)/|^src/(entities|features)/[^/]+/api/|\.vm\.ts$|^src/pages/[^/]+/ui/.*Page\.tsx$|node_modules/(@tanstack/react-query|openapi-fetch|openapi-react-query)/`, reachable: true, }, }, diff --git a/.storybook/main.ts b/.storybook/main.ts index 8557f9c..2c95f65 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,10 +1,10 @@ import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { - stories: ["../src/**/*.stories.tsx", "../packages/*/src/**/*.stories.tsx"], addons: ["@storybook/addon-docs"], - framework: "@storybook/react-vite", core: { disableTelemetry: true }, + framework: "@storybook/react-vite", + stories: ["../src/**/*.stories.tsx", "../packages/*/src/**/*.stories.tsx"], }; export default config; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index acc23dc..267c854 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -3,37 +3,30 @@ import "@mantine/charts/styles.css"; import "@mantine/dates/styles.css"; import "@wealthledger/ui/styles.css"; import "dayjs/locale/ru"; + import "../src/shared/i18n"; +import type { Preview } from "@storybook/react-vite"; + import { MantineProvider } from "@mantine/core"; import { DatesProvider } from "@mantine/dates"; -import type { Preview } from "@storybook/react-vite"; import { cssVariablesResolver, theme } from "@wealthledger/ui/theme"; const colorSchemeManager = { + clear: () => {}, get: () => "light" as const, set: () => {}, - clear: () => {}, subscribe: () => {}, unsubscribe: () => {}, }; const preview: Preview = { - parameters: { - layout: "padded", - options: { - storySort: { - order: ["Design System", ["Foundations", "Components"], "Product"], - }, - }, - controls: { expanded: true }, - }, decorators: [ - (Story) => ( + Story => ( @@ -41,6 +34,15 @@ const preview: Preview = { ), ], + parameters: { + controls: { expanded: true }, + layout: "padded", + options: { + storySort: { + order: ["Design System", ["Foundations", "Components"], "Product"], + }, + }, + }, }; export default preview; diff --git a/AGENTS.md b/AGENTS.md index 624f07e..91bf699 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -34,4 +34,4 @@ Testing и без production diff. Перед завершением повто | Money, account/position/income | Entity types, API snapshot, formatters и tests соответствующего slice | | Theme/tokens, UI-каталог | [UI](.ai/conventions/ui.md), [Storybook](README.md#ui-каталог-storybook) | | Поведение области | Source и tests её page/entity/feature; неясное ожидание уточни до изменения | -| Versions/scripts/check scope | Manifest/lockfile, ESLint/Biome/TypeScript/dependency configs | +| Versions/scripts/check scope | Manifest/lockfile, ESLint/TypeScript/dependency configs | diff --git a/README.md b/README.md index 7c50ea2..8ad6e56 100644 --- a/README.md +++ b/README.md @@ -81,32 +81,29 @@ npm run verify ``` Команда проверяет, что generated OpenAPI types соответствуют committed snapshot, -затем запускает strict TypeScript, Biome, ESLint и проверку его конфигурации, +затем запускает strict TypeScript, ESLint и проверку его конфигурации, один coverage-backed запуск Vitest, Knip, dependency rules приложения и stories, сборки приложения и Storybook. -`npm run lint` объединяет `lint:biome` и `lint:eslint`. Biome сохраняет -форматирование, сортировку импортов, magic numbers и accessibility-проверки. -[ESLint](eslint.config.mjs) добавляет typed linting, React Compiler/hooks, -Fast Refresh, TanStack Query, выбранные Unicorn-правила и проверки тестов/stories. -Prettier не добавлен. `npm run test:lint` проверяет правила на ошибочных примерах -и исключение generated/build artifacts. `lint:eslint` сначала собирает private -packages, чтобы анализ типов использовал их актуальные declarations. +`npm run lint` запускает ESLint с `--max-warnings=0`; `npm run lint:fix` +применяет автофиксы. [Конфигурация](eslint.config.mjs) подключает рекомендованные +наборы всех установленных плагинов: TypeScript, React, Hooks, Refresh, Query, +Unicorn, import-x, SonarJS, RegExp, Security, Perfectionist, Stylistic, +Vitest, Testing Library, jest-dom и Storybook. Правила React, тестов и stories +применяются к соответствующим файлам; generated/build artifacts исключены. -Пересекающиеся hook-диагностики принадлежат официальному `react-hooks`. -Testing Library проверяет async-корректность; DOM structure/geometry tests -сохраняют прямой доступ к узлам. Async doubles допускаются без искусственного -`await`; Vitest допускает второй аргумент сообщения и ветвления фиксированных -`it.each` сценариев. React event handlers допускают Promise, но их тела остаются -под `no-floating-promises`. Локальные исключения объясняют сохранение wire -ProblemDetails, generated query keys и раннее подключение rejection assertions -в race-тестах. Плагин Query не доказывает корректность всех generated/custom -обёрток: transport/cache сценарии по-прежнему проверяют MSW-тесты. +Stylistic отвечает за форматирование JS/TS/TSX, Perfectionist — за сортировку. +Сохраняются табы, двойные кавычки и точки с запятой. Biome удалён; Prettier +не используется. CSS, JSON и Markdown не форматируются через ESLint. +`lint-staged` исправляет JS/TS/TSX перед commit. `lint:eslint` сначала собирает +private packages, чтобы анализ типов использовал актуальные declarations. +`npm run test:lint` проверяет действующие presets и ошибочные примеры. -Дополнительные `no-unnecessary-condition` и `no-deprecated` пока не включены: -первому нужна отдельная оценка индексного доступа и защитных runtime guards, -второму — отдельная миграция API зависимостей. Пакеты второй волны и -`jsx-a11y` без заявленной поддержки ESLint 10 отложены в +Точечные исключения в исходниках объясняют контракты и ограничения статического +анализа; изменение nullable API fields, query keys или порядка race-операций +ради линтера недопустимо. Архитектуру проверяет dependency-cruiser, поведение — +Vitest/MSW и Chromium. Линтеры не заменяют semantic/security review. +`jsx-a11y` без поддержки ESLint 10 остаётся отложенным в [workspace issue #18](https://git.personal.ksv741.ru/WealthLedger/main/issues/18). Vitest включает JSDOM-тесты и проверку геометрии секций позиций в headless diff --git a/biome.json b/biome.json deleted file mode 100644 index 2e7202f..0000000 --- a/biome.json +++ /dev/null @@ -1,81 +0,0 @@ -{ - "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", - "vcs": { - "useIgnoreFile": true - }, - "files": { - "includes": [ - "**", - "!dist", - "!packages/*/dist", - "!storybook-static", - "!src/shared/api/generated", - "!src/shared/api/spec", - "!coverage", - "!node_modules" - ] - }, - "linter": { - "rules": { - "preset": "recommended", - "nursery": { - "useReactFunctionComponentDefinition": { - "level": "error", - "options": { - "namedComponents": "arrowFunction" - } - } - }, - "style": { - "noDefaultExport": "error", - "useExportsLast": "error", - "noMagicNumbers": "error" - } - } - }, - "overrides": [ - { - "includes": [ - "eslint.config.mjs", - "vite.config.ts", - "vitest.config.ts", - ".storybook/main.ts", - ".storybook/preview.tsx", - "packages/*/vite.config.ts" - ], - "linter": { - "rules": { - "style": { - "noDefaultExport": "off" - } - } - } - }, - { - "includes": ["**/*.stories.tsx"], - "linter": { - "rules": { - "style": { - "noDefaultExport": "off", - "useExportsLast": "off" - } - } - } - }, - { - "includes": [ - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.tsx", - "src/test/**" - ], - "linter": { - "rules": { - "style": { - "noMagicNumbers": "off" - } - } - } - } - ] -} diff --git a/dependency-cruiser.cjs b/dependency-cruiser.cjs index 2275c4b..777da44 100644 --- a/dependency-cruiser.cjs +++ b/dependency-cruiser.cjs @@ -1,73 +1,73 @@ module.exports = { forbidden: [ { + from: {}, name: "no-unresolved", severity: "error", - from: {}, to: { couldNotResolve: true }, }, { + from: { path: "^packages/" }, name: "packages-must-not-depend-on-app", severity: "error", - from: { path: "^packages/" }, to: { path: "^src/" }, }, { + from: {}, name: "no-circular", severity: "error", - from: {}, to: { circular: true }, }, { - name: "slices-must-use-public-api", - severity: "error", from: { path: "^src/(app|pages|features|entities|shared)/([^/]+)/", }, + name: "slices-must-use-public-api", + severity: "error", to: { - path: "^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\\.ts$)", + path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`, pathNot: "^src/$1/$2/", }, }, { + from: { path: "^src/(pages|features|entities)/([^/]+)/" }, name: "no-same-layer-cross-slice-imports", severity: "error", - from: { path: "^src/(pages|features|entities)/([^/]+)/" }, to: { path: "^src/$1/", pathNot: "^src/$1/$2/" }, }, { + from: { path: "^src/shared/" }, name: "shared-must-not-depend-on-layers", severity: "error", - from: { path: "^src/shared/" }, to: { path: "^src/(entities|features|pages|app)/" }, }, { + from: { path: "^src/entities/" }, name: "entities-must-not-depend-on-higher-layers", severity: "error", - from: { path: "^src/entities/" }, to: { path: "^src/(features|pages|app)/" }, }, { + from: { path: "^src/features/" }, name: "features-must-not-depend-on-higher-layers", severity: "error", - from: { path: "^src/features/" }, to: { path: "^src/(pages|app)/" }, }, { + from: { path: "^src/pages/" }, name: "pages-must-not-depend-on-app", severity: "error", - from: { path: "^src/pages/" }, to: { path: "^src/app/" }, }, ], options: { - exclude: "^packages/[^/]+/dist/", doNotFollow: { path: "node_modules" }, - tsConfig: { fileName: "tsconfig.dependency-cruiser.json" }, enhancedResolveOptions: { - exportsFields: ["exports"], conditionNames: ["import", "require", "node", "default"], + exportsFields: ["exports"], }, + exclude: "^packages/[^/]+/dist/", + tsConfig: { fileName: "tsconfig.dependency-cruiser.json" }, tsPreCompilationDeps: true, }, }; diff --git a/eslint.config.mjs b/eslint.config.mjs index 2b341d9..8bacefe 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,131 +1,117 @@ -import js from "@eslint/js"; import react from "@eslint-react/eslint-plugin"; +import js from "@eslint/js"; +import stylistic from "@stylistic/eslint-plugin"; import query from "@tanstack/eslint-plugin-query"; import vitest from "@vitest/eslint-plugin"; -import { defineConfig, globalIgnores } from "eslint/config"; +import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript"; import { importX } from "eslint-plugin-import-x"; +import jestDom from "eslint-plugin-jest-dom"; +import perfectionist from "eslint-plugin-perfectionist"; import hooks from "eslint-plugin-react-hooks"; import refresh from "eslint-plugin-react-refresh"; +import regexp from "eslint-plugin-regexp"; +import security from "eslint-plugin-security"; +import sonarjs from "eslint-plugin-sonarjs"; import storybook from "eslint-plugin-storybook"; import testingLibrary from "eslint-plugin-testing-library"; import unicorn from "eslint-plugin-unicorn"; +import { defineConfig, globalIgnores } from "eslint/config"; import globals from "globals"; import tseslint from "typescript-eslint"; export default defineConfig( globalIgnores([ - "**/dist/**", - "dist-ssr/**", - "storybook-static/**", - "coverage/**", - ".vitest/**", - ".scannerwork/**", - "src/shared/api/generated/**", - "src/shared/api/spec/**", + "**/dist/**", "dist-ssr/**", "storybook-static/**", "coverage/**", + ".vitest/**", ".scannerwork/**", "src/shared/api/generated/**", "src/shared/api/spec/**", ]), { + extends: [ + js.configs.recommended, + importX.flatConfigs.recommended, + unicorn.configs.recommended, + sonarjs.configs.recommended, + regexp.configs.recommended, + security.configs.recommended, + perfectionist.configs["recommended-natural"], + stylistic.configs.customize({ indent: "tab", jsx: true, quotes: "double", semi: true }), + ], files: ["**/*.{js,mjs,cjs,ts,tsx}"], - extends: [js.configs.recommended], linterOptions: { reportUnusedDisableDirectives: "error" }, + rules: { + // A comma disambiguates generic arrow functions from JSX in TSX. + "@stylistic/comma-dangle": ["error", { + arrays: "always-multiline", enums: "always-multiline", exports: "always-multiline", + functions: "always-multiline", generics: "ignore", imports: "always-multiline", + objects: "always-multiline", tuples: "always-multiline", + }], + // Keep text/interpolation together: splitting can change rendered whitespace. + "@stylistic/jsx-one-expression-per-line": ["error", { allow: "non-jsx" }], + "@stylistic/no-tabs": ["error", { allowIndentationTabs: true }], + "perfectionist/sort-classes": ["error", { groups: ["static-method", "property", "method", "unknown"], type: "natural" }], + // Preserve the repository's component, hook and config file naming conventions. + "unicorn/filename-case": ["error", { cases: { camelCase: true, kebabCase: true, pascalCase: true } }], + // React uses Props/Ref names, including the recommended React ref-name rule. + "unicorn/name-replacements": ["error", { replacements: { props: false, ref: false } }], + // React, Mantine and Fetch accept null at their documented call boundaries. + "unicorn/no-null": ["error", { checkArguments: false }], + }, + settings: { + "import-x/resolver-next": [createTypeScriptImportResolver({ project: "tsconfig.json" })], + }, }, { files: ["**/*.{js,mjs,cjs}", "**/*.config.ts", ".storybook/main.ts"], languageOptions: { globals: globals.node }, }, { + extends: [tseslint.configs.recommendedTypeChecked, importX.flatConfigs.typescript], files: ["**/*.{ts,tsx}"], - extends: [tseslint.configs.recommendedTypeChecked], - languageOptions: { - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, - }, - }, + languageOptions: { parserOptions: { projectService: true, tsconfigRootDir: import.meta.dirname } }, rules: { + // React ignores event handler return values; floating promises are still checked in bodies. + "@typescript-eslint/no-misused-promises": ["error", { checksVoidReturn: { attributes: false } }], "@typescript-eslint/switch-exhaustiveness-check": "error", - // React ignores handler return values; their bodies still check floating promises. - "@typescript-eslint/no-misused-promises": [ - "error", - { checksVoidReturn: { attributes: false } }, - ], }, }, { - files: [ - "src/**/*.{ts,tsx}", - "packages/*/src/**/*.{ts,tsx}", - ".storybook/preview.tsx", - ], - extends: [ - react.configs["recommended-type-checked"], - react.configs["disable-naming-convention"], - hooks.configs.flat.recommended, - query.configs["flat/recommended"], - ], + extends: [react.configs["recommended-type-checked"], hooks.configs.flat.recommended, query.configs["flat/recommended"]], + files: ["src/**/*.{ts,tsx}", "packages/*/src/**/*.{ts,tsx}", ".storybook/preview.tsx"], languageOptions: { globals: globals.browser }, - plugins: { "import-x": importX, unicorn }, rules: { - // The official hooks plugin owns Compiler and hook diagnostics. - "@eslint-react/error-boundaries": "off", - "@eslint-react/exhaustive-deps": "off", - "@eslint-react/purity": "off", - "@eslint-react/rules-of-hooks": "off", - "@eslint-react/set-state-in-effect": "off", - "@eslint-react/set-state-in-render": "off", - "@eslint-react/static-components": "off", - "@eslint-react/unsupported-syntax": "off", - "@eslint-react/use-memo": "off", - // useContext remains supported; a lint rollout does not require an API migration. - "@eslint-react/no-use-context": "off", - "import-x/no-default-export": "error", "import-x/exports-last": "error", - // Biome owns formatting, import sorting and magic numbers during coexistence. - "unicorn/no-array-fill-with-reference-type": "error", - "unicorn/no-await-in-promise-methods": "error", - "unicorn/no-single-promise-in-promise-methods": "error", - "unicorn/prefer-array-some": "error", - "unicorn/prefer-includes": "error", + "import-x/no-default-export": "error", }, }, { + extends: [refresh.configs.vite], files: ["src/**/*.tsx", "packages/*/src/**/*.tsx"], ignores: ["**/*.test.tsx", "**/*.stories.tsx", "src/test/**"], - extends: [refresh.configs.vite], }, { - files: ["**/*.test.{ts,tsx}"], + files: ["src/**/*.{ts,tsx}", "packages/*/src/**/*.{ts,tsx}"], + ignores: ["**/*.test.{ts,tsx}", "**/*.stories.tsx", "src/test/**"], + rules: { + "@typescript-eslint/no-magic-numbers": ["error", { + ignore: [-1, 0, 1, "-1n", "0n", "1n"], ignoreArrayIndexes: true, ignoreDefaultValues: true, + ignoreNumericLiteralTypes: true, ignoreTypeIndexes: true, + }], + }, + }, + { extends: [vitest.configs.recommended], + files: ["**/*.test.{ts,tsx}"], rules: { "vitest/no-focused-tests": "error", "vitest/valid-expect": ["error", { maxArgs: 2 }], - // it.each cases select different expected outcomes and recovery setup steps. - "vitest/no-conditional-expect": "off", - // Async test doubles preserve the public Promise contract without artificial awaits. - "@typescript-eslint/require-await": "off", }, }, { + extends: [testingLibrary.configs["flat/react"], jestDom.configs["flat/recommended"]], files: ["**/*.test.tsx"], - plugins: { "testing-library": testingLibrary }, - // Start with async correctness. DOM structure/geometry tests need direct node access. - rules: { - "testing-library/await-async-events": "error", - "testing-library/await-async-queries": "error", - "testing-library/await-async-utils": "error", - "testing-library/no-await-sync-events": "error", - "testing-library/no-await-sync-queries": "error", - "testing-library/no-promise-in-fire-event": "error", - "testing-library/no-wait-for-side-effects": "error", - "testing-library/no-wait-for-snapshot": "error", - "testing-library/prefer-find-by": "error", - }, }, storybook.configs["flat/recommended"], { files: ["**/*.stories.tsx", ".storybook/preview.tsx"], - rules: { - "import-x/no-default-export": "off", - "import-x/exports-last": "off", - }, + rules: { "import-x/exports-last": "off", "import-x/no-default-export": "off" }, }, ); diff --git a/package-lock.json b/package-lock.json index 1449d78..b6bacb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,6 @@ }, "devDependencies": { "@babel/core": "8.0.5", - "@biomejs/biome": "2.5.13", "@commitlint/cli": "21.2.2", "@commitlint/config-conventional": "21.2.2", "@eslint-react/eslint-plugin": "5.21.0", @@ -45,6 +44,7 @@ "@rolldown/plugin-babel": "0.2.4", "@storybook/addon-docs": "10.6.0", "@storybook/react-vite": "10.6.0", + "@stylistic/eslint-plugin": "5.10.0", "@tanstack/eslint-plugin-query": "5.104.0", "@testing-library/jest-dom": "7.0.1", "@testing-library/react": "16.3.3", @@ -59,9 +59,15 @@ "conventional-changelog-conventionalcommits": "10.4.0", "dependency-cruiser": "18.2.0", "eslint": "10.11.0", + "eslint-import-resolver-typescript": "4.4.5", "eslint-plugin-import-x": "4.17.1", + "eslint-plugin-jest-dom": "5.10.1", + "eslint-plugin-perfectionist": "5.12.1", "eslint-plugin-react-hooks": "7.1.1", "eslint-plugin-react-refresh": "0.5.7", + "eslint-plugin-regexp": "3.3.1", + "eslint-plugin-security": "4.1.0", + "eslint-plugin-sonarjs": "4.2.1", "eslint-plugin-storybook": "10.6.0", "eslint-plugin-testing-library": "7.16.2", "eslint-plugin-unicorn": "76.0.0", @@ -693,181 +699,6 @@ "node": ">=18" } }, - "node_modules/@biomejs/biome": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.5.13.tgz", - "integrity": "sha512-+SEC/mFk1a+5mvUANZgbZTaiZXs1nj4iMhL/PHiqDT5TPUEPFIlliEtkKKZB4N862yylHC3UI+/Sj2I0HJEqhA==", - "dev": true, - "license": "MIT OR Apache-2.0", - "bin": { - "biome": "bin/biome" - }, - "engines": { - "node": ">=14.21.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/biome" - }, - "optionalDependencies": { - "@biomejs/cli-darwin-arm64": "2.5.13", - "@biomejs/cli-darwin-x64": "2.5.13", - "@biomejs/cli-linux-arm64": "2.5.13", - "@biomejs/cli-linux-arm64-musl": "2.5.13", - "@biomejs/cli-linux-x64": "2.5.13", - "@biomejs/cli-linux-x64-musl": "2.5.13", - "@biomejs/cli-win32-arm64": "2.5.13", - "@biomejs/cli-win32-x64": "2.5.13" - } - }, - "node_modules/@biomejs/cli-darwin-arm64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.5.13.tgz", - "integrity": "sha512-nYSuDJ6zgVqZUkAkJkvhXxsF2PYIrUk/g638K4voCXz7foI9f7b6C2/7+oAihsHQlivZNMUrm/y8ywlcHQtZOw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-darwin-x64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.5.13.tgz", - "integrity": "sha512-KVy1ceEDuJ3AzFxjT9kkxbVy+UANw1pjEMUS6lvKfxjJ+fmkRvc7sQn1Xo6ETgseEI7wUQoV03KSga3XfE8YRQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-linux-arm64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.5.13.tgz", - "integrity": "sha512-VlNMtoxOqs0dUR6drxxHr18SNUvI7xxAuHZlH4s/dstYSf3g6RaqVgo8JRnhcOhKz9afWrvtJTboNG1JuYlIDQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "libc": [ - "glibc" - ], - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-linux-arm64-musl": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.5.13.tgz", - "integrity": "sha512-CH32xpep3dNS5EVJpAHlYchkBYznxyVZQrx0b6YYYlPL9u9ZeD2NtqiK/6s64+HFS2a7hGnryLlqqZAOh8ax5g==", - "cpu": [ - "arm64" - ], - "dev": true, - "libc": [ - "musl" - ], - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-linux-x64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.5.13.tgz", - "integrity": "sha512-Fi6gIxbUaJ3ZCIXeG3ggIBPF76O2DjDN67WrPX/ODRv54GeXPm2gbEPC96Yb0yrJoiH0Eax1JLx1Pi0XbsNFZQ==", - "cpu": [ - "x64" - ], - "dev": true, - "libc": [ - "glibc" - ], - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-linux-x64-musl": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.5.13.tgz", - "integrity": "sha512-F3pmwl+VHoUuVJN/tbNLKeLt0SVK3EIyN1jXlMcNyQGYRQQTVqXF+GgkP0/CjGXFN87e/mv0sBfUnWqWza5PKQ==", - "cpu": [ - "x64" - ], - "dev": true, - "libc": [ - "musl" - ], - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-win32-arm64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.5.13.tgz", - "integrity": "sha512-+WD13qshXrr0Icv4BfsAdzm8Fs3TL+nZ59zEQxsYNd8lcgZJ0A5+OrlwsL1PipVCmWeRpxgIPD6DAcEd7smkCQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=14.21.3" - } - }, - "node_modules/@biomejs/cli-win32-x64": { - "version": "2.5.13", - "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.5.13.tgz", - "integrity": "sha512-VOofU/nW761XWzUeUNE8zzYNyPrxuMuNFMizL0qz7J75yeV8N7WFheUlk1/K6dOkaFpH9wJ+lDKlwjAbw0346w==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT OR Apache-2.0", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=14.21.3" - } - }, "node_modules/@blazediff/core": { "version": "1.10.0", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@blazediff/core/-/core-1.10.0.tgz", @@ -5235,6 +5066,13 @@ "url": "https://ko-fi.com/dangreen" } }, + "node_modules/@sonarsource/analyzer-commons-configurations": { + "version": "2.31.0-5284", + "resolved": "https://registry.npmjs.org/@sonarsource/analyzer-commons-configurations/-/analyzer-commons-configurations-2.31.0-5284.tgz", + "integrity": "sha512-ruk3blMs9BE9RNSp9LPpWZAIjxJmq4Cp00E3cELIHz7Kym3WxdWGRlKOMYLRQ5tJg/de7jN5AtEElY3bGIfTcw==", + "dev": true, + "license": "LGPL-3.0-only" + }, "node_modules/@standard-schema/spec": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", @@ -5407,6 +5245,58 @@ } } }, + "node_modules/@stylistic/eslint-plugin": { + "version": "5.10.0", + "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.10.0.tgz", + "integrity": "sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.9.1", + "@typescript-eslint/types": "^8.56.0", + "eslint-visitor-keys": "^4.2.1", + "espree": "^10.4.0", + "estraverse": "^5.3.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "peerDependencies": { + "eslint": "^9.0.0 || ^10.0.0" + } + }, + "node_modules/@stylistic/eslint-plugin/node_modules/eslint-visitor-keys": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", + "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@stylistic/eslint-plugin/node_modules/espree": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz", + "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "acorn": "^8.15.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.2.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@tanstack/eslint-plugin-query": { "version": "5.104.0", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.104.0.tgz", @@ -7160,6 +7050,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bytes": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/c12": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz", @@ -8853,6 +8753,41 @@ } } }, + "node_modules/eslint-import-resolver-typescript": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-4.4.5.tgz", + "integrity": "sha512-nbE5XLph6TLtGYcu/U6e6ZVXyKBhbDWK5cLGk76eJ7NdZpwf1P9EFkpt1Z01mNZNrrilsAYWKH6zUkL4reoXbw==", + "dev": true, + "license": "ISC", + "dependencies": { + "debug": "^4.4.1", + "eslint-import-context": "^0.1.8", + "get-tsconfig": "^4.10.1", + "is-bun-module": "^2.0.0", + "stable-hash-x": "^0.2.0", + "tinyglobby": "^0.2.14", + "unrs-resolver": "^1.7.11" + }, + "engines": { + "node": "^16.17.0 || >=18.6.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-import-resolver-typescript" + }, + "peerDependencies": { + "eslint": "*", + "eslint-plugin-import": "*", + "eslint-plugin-import-x": "*" + }, + "peerDependenciesMeta": { + "eslint-plugin-import": { + "optional": true + }, + "eslint-plugin-import-x": { + "optional": true + } + } + }, "node_modules/eslint-plugin-import-x": { "version": "4.17.1", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/eslint-plugin-import-x/-/eslint-plugin-import-x-4.17.1.tgz", @@ -8903,6 +8838,53 @@ "node": ">=10" } }, + "node_modules/eslint-plugin-jest-dom": { + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-5.10.1.tgz", + "integrity": "sha512-IIJdzbACbhJUJyMAqpA9E9gxp1Gv29TeQ3DtL+pepwP8Oq2WiqjOB2HbnEIs23h0ewdKIZRDI56yLro2eUO+DA==", + "dev": true, + "license": "MIT", + "dependencies": { + "requireindex": "^1.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0", + "npm": ">=6", + "yarn": ">=1" + }, + "peerDependencies": { + "@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0", + "eslint": "^6.8.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "@testing-library/dom": { + "optional": true + } + } + }, + "node_modules/eslint-plugin-perfectionist": { + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.12.1.tgz", + "integrity": "sha512-krdSE7Dz+TCtcVr2+rfNhlOIFFBJcUdoRvjaN7JQnsaVnxJw+BZh9wMkY3MSLCJat+yW+UPTQLKS82Epc7MGZA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@typescript-eslint/types": "^8.70.0", + "@typescript-eslint/utils": "^8.70.0", + "natural-orderby": "^5.0.0" + }, + "engines": { + "node": "^20.0.0 || >=22.0.0" + }, + "peerDependencies": { + "eslint": "^8.45.0 || ^9.0.0 || ^10.0.0" + }, + "peerDependenciesMeta": { + "eslint": { + "optional": true + } + } + }, "node_modules/eslint-plugin-react-dom": { "version": "5.21.0", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/eslint-plugin-react-dom/-/eslint-plugin-react-dom-5.21.0.tgz", @@ -9222,6 +9204,96 @@ } } }, + "node_modules/eslint-plugin-regexp": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-regexp/-/eslint-plugin-regexp-3.3.1.tgz", + "integrity": "sha512-58bGUci/AaWAo1ETj6Lsnmy6QXwnSyVONRA805828nnqp7vrTwdaQMc02vtowmYB3A5OB3SLr3r5HgmfxX4dLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.11.0", + "comment-parser": "^1.4.0", + "jsdoc-type-pratt-parser": "^9.0.0", + "refa": "^0.12.1", + "regexp-ast-analysis": "^0.7.1", + "scslre": "^0.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24" + }, + "peerDependencies": { + "eslint": ">=9.38.0" + } + }, + "node_modules/eslint-plugin-security": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-security/-/eslint-plugin-security-4.1.0.tgz", + "integrity": "sha512-cB4H72o/w8C0cm4uHJOnXMJz7MYTTuOwhn2X7PMuzZwfwqUoHK/ASHT6WKP+95lFk5Hkf3xfpiXB8a1+cef4rg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "safe-regex": "^2.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-plugin-sonarjs": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-4.2.1.tgz", + "integrity": "sha512-WGsnVkUxmHyBOytShcIeE+vhQaS8e+gYgbHNNi4y2e5Zj+DpE2DLTvarqDUhNwjceTZHGLgevSgfBSEVkt4EaA==", + "dev": true, + "license": "LGPL-3.0-only", + "dependencies": { + "@eslint-community/regexpp": "^4.12.2", + "@sonarsource/analyzer-commons-configurations": "^2.31.0-5284", + "builtin-modules": "^3.3.0", + "bytes": "^3.1.2", + "functional-red-black-tree": "^1.0.1", + "globals": "^17.12.0", + "jsx-ast-utils-x": "^0.1.0", + "lodash.merge": "^4.6.2", + "minimatch": "^10.2.6", + "scslre": "^0.3.0", + "semver": "^7.8.5", + "ts-api-utils": "^2.5.0", + "typescript": ">=5 <6.1.0", + "yaml": "^2.9.0" + }, + "peerDependencies": { + "eslint": "^8.0.0 || ^9.0.0 || ^10.0.0" + } + }, + "node_modules/eslint-plugin-sonarjs/node_modules/builtin-modules": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", + "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint-plugin-sonarjs/node_modules/semver": { + "version": "7.8.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", + "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/eslint-plugin-storybook": { "version": "10.6.0", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/eslint-plugin-storybook/-/eslint-plugin-storybook-10.6.0.tgz", @@ -9883,6 +9955,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/functional-red-black-tree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", + "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==", + "dev": true, + "license": "MIT" + }, "node_modules/functions-have-names": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", @@ -10715,6 +10794,29 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-bun-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz", + "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.7.1" + } + }, + "node_modules/is-bun-module/node_modules/semver": { + "version": "7.8.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", + "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -11390,6 +11492,37 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsdoc-type-pratt-parser": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-9.2.2.tgz", + "integrity": "sha512-eFY7Rlscvv/BpY6UsVsjKwMhu1tJO/F4U/vC9g3yeRy/JqszuO1UP6Vdq+85G+3FP6fEw/sWR8a5ftPFY86csw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.9", + "@types/node": "^26.4.0" + }, + "engines": { + "node": "^22.22.2 || >=24.15.0" + } + }, + "node_modules/jsdoc-type-pratt-parser/node_modules/@types/node": { + "version": "26.6.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-26.6.3.tgz", + "integrity": "sha512-dsqMQQoeTLqu9wynDD00q573mNzso3IdQOAfHRJqLCcmCFPoGo9A1bDpUcv/9tnKpErQWv9uKeGfl37EIS02Yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~8.9.0" + } + }, + "node_modules/jsdoc-type-pratt-parser/node_modules/undici-types": { + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz", + "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==", + "dev": true, + "license": "MIT" + }, "node_modules/jsdom": { "version": "30.0.1", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.0.1.tgz", @@ -11515,6 +11648,16 @@ "node": ">=0.10.0" } }, + "node_modules/jsx-ast-utils-x": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/jsx-ast-utils-x/-/jsx-ast-utils-x-0.1.0.tgz", + "integrity": "sha512-eQQBjBnsVtGacsG9uJNB8qOr3yA8rga4wAaGG1qRcBzSIvfhERLrWxMAM1hp5fcS6Abo8M4+bUBTekYR0qTPQw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, "node_modules/keyv": { "version": "5.6.0", "resolved": "https://nexus.personal.ksv741.ru/repository/npm-all/keyv/-/keyv-5.6.0.tgz", @@ -12453,6 +12596,16 @@ "dev": true, "license": "MIT" }, + "node_modules/natural-orderby": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/natural-orderby/-/natural-orderby-5.0.0.tgz", + "integrity": "sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/netmask": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.1.1.tgz", @@ -13893,6 +14046,19 @@ "redux": "^5.0.0" } }, + "node_modules/refa": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/refa/-/refa-0.12.1.tgz", + "integrity": "sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/regexpp": "^4.8.0" + }, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -13936,6 +14102,20 @@ "node": ">=4" } }, + "node_modules/regexp-ast-analysis": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz", + "integrity": "sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/regexpp": "^4.8.0", + "refa": "^0.12.1" + }, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, "node_modules/regexp-tree": { "version": "0.1.27", "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz", @@ -14146,6 +14326,16 @@ "node": ">=0.10.0" } }, + "node_modules/requireindex": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz", + "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.5" + } + }, "node_modules/reselect": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz", @@ -14446,6 +14636,21 @@ "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", "license": "MIT" }, + "node_modules/scslre": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/scslre/-/scslre-0.3.0.tgz", + "integrity": "sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/regexpp": "^4.8.0", + "refa": "^0.12.0", + "regexp-ast-analysis": "^0.7.0" + }, + "engines": { + "node": "^14.0.0 || >=16.0.0" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/package.json b/package.json index 7a2390f..73ad98a 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,7 @@ "preview:catalog": "vite preview --outDir storybook-static", "typecheck": "npm run build:packages && tsc -b --noEmit", "build": "npm run build:packages && tsc -b && vite build", - "lint": "npm run lint:biome && npm run lint:eslint", - "lint:biome": "biome check .", + "lint": "npm run lint:eslint", "lint:eslint": "npm run build:packages && eslint . --max-warnings=0", "test": "npm run build:packages && vitest", "test:run": "npm run build:packages && vitest run", @@ -31,10 +30,11 @@ "release:preview": "release-it --dry-run --ci", "release:prepare": "release-it --ci", "commitlint": "commitlint", - "build:packages": "npm run build --workspaces --if-present" + "build:packages": "npm run build --workspaces --if-present", + "lint:fix": "npm run build:packages && eslint . --fix --max-warnings=0" }, "lint-staged": { - "*.{css,html,json,md,ts,tsx}": "biome format --write --no-errors-on-unmatched" + "*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0" }, "dependencies": { "@hookform/resolvers": "5.9.1", @@ -62,7 +62,6 @@ }, "devDependencies": { "@babel/core": "8.0.5", - "@biomejs/biome": "2.5.13", "@commitlint/cli": "21.2.2", "@commitlint/config-conventional": "21.2.2", "@eslint-react/eslint-plugin": "5.21.0", @@ -71,6 +70,7 @@ "@rolldown/plugin-babel": "0.2.4", "@storybook/addon-docs": "10.6.0", "@storybook/react-vite": "10.6.0", + "@stylistic/eslint-plugin": "5.10.0", "@tanstack/eslint-plugin-query": "5.104.0", "@testing-library/jest-dom": "7.0.1", "@testing-library/react": "16.3.3", @@ -85,9 +85,15 @@ "conventional-changelog-conventionalcommits": "10.4.0", "dependency-cruiser": "18.2.0", "eslint": "10.11.0", + "eslint-import-resolver-typescript": "4.4.5", "eslint-plugin-import-x": "4.17.1", + "eslint-plugin-jest-dom": "5.10.1", + "eslint-plugin-perfectionist": "5.12.1", "eslint-plugin-react-hooks": "7.1.1", "eslint-plugin-react-refresh": "0.5.7", + "eslint-plugin-regexp": "3.3.1", + "eslint-plugin-security": "4.1.0", + "eslint-plugin-sonarjs": "4.2.1", "eslint-plugin-storybook": "10.6.0", "eslint-plugin-testing-library": "7.16.2", "eslint-plugin-unicorn": "76.0.0", diff --git a/packages/icons/src/Icons.stories.tsx b/packages/icons/src/Icons.stories.tsx index f9b21e2..40bfe20 100644 --- a/packages/icons/src/Icons.stories.tsx +++ b/packages/icons/src/Icons.stories.tsx @@ -1,10 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { AddIcon, DeleteIcon, EditIcon } from "./index"; const meta = { - title: "Design System/Icons", component: AddIcon, - tags: ["autodocs"], parameters: { docs: { description: { @@ -13,6 +12,8 @@ const meta = { }, }, }, + tags: ["autodocs"], + title: "Design System/Icons", } satisfies Meta; export default meta; @@ -20,14 +21,14 @@ type Story = StoryObj; export const Decorative: Story = { render: () => ( -
- - -
@@ -36,10 +37,10 @@ export const Decorative: Story = { export const Meaningful: Story = { render: () => ( -
- - - +
+ + +
), }; diff --git a/packages/icons/src/Icons.test.tsx b/packages/icons/src/Icons.test.tsx index 31c48ef..7d52460 100644 --- a/packages/icons/src/Icons.test.tsx +++ b/packages/icons/src/Icons.test.tsx @@ -1,5 +1,6 @@ import { render, screen } from "@testing-library/react"; import { describe, expect, it } from "vitest"; + import { AddIcon, DeleteIcon, EditIcon } from "./index"; describe("icon accessibility", () => { @@ -7,19 +8,20 @@ describe("icon accessibility", () => { "keeps decoration hidden and exposes explicitly named images: %s", (Icon) => { const { rerender } = render( - , ); expect(screen.queryByRole("img")).not.toBeInTheDocument(); expect( + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. screen.getByRole("button", { name: "Действие" }).querySelector("svg"), ).toHaveAttribute("focusable", "false"); rerender( , diff --git a/packages/icons/src/svg/AddIcon.tsx b/packages/icons/src/svg/AddIcon.tsx index cbd7ff5..fa04cbe 100644 --- a/packages/icons/src/svg/AddIcon.tsx +++ b/packages/icons/src/svg/AddIcon.tsx @@ -1,19 +1,20 @@ import type { FC } from "react"; + import type { IconProps } from "../types"; const AddIcon: FC = (props) => { const { size = "24", ...svgProps } = props; return (
+
( + render: arguments_ => ( - + ), + tags: ["autodocs"], + title: "Design System/Components/LoadingSkeleton", } satisfies Meta; export default meta; diff --git a/packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx b/packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx index f2991a7..7ea4cae 100644 --- a/packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx +++ b/packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx @@ -1,6 +1,7 @@ -import { Stack } from "@mantine/core"; import type { FC, PropsWithChildren } from "react"; +import { Stack } from "@mantine/core"; + type LoadingSkeletonProps = PropsWithChildren<{ label: string; }>; diff --git a/packages/ui/src/StateView/StateView.stories.tsx b/packages/ui/src/StateView/StateView.stories.tsx index 29f7398..5ab38c3 100644 --- a/packages/ui/src/StateView/StateView.stories.tsx +++ b/packages/ui/src/StateView/StateView.stories.tsx @@ -1,36 +1,36 @@ -import { Button } from "@mantine/core"; import type { Meta, StoryObj } from "@storybook/react-vite"; import type { ComponentProps } from "react"; + +import { Button } from "@mantine/core"; import { fn } from "storybook/test"; + import { StateView } from "./StateView"; -type StateStoryArgs = ComponentProps & { - withAction: boolean; +type StateStoryArguments = ComponentProps & { onAction: () => void; + withAction: boolean; }; const meta = { - title: "Design System/Components/StateView", - component: StateView, - tags: ["autodocs"], args: { - title: "Нет учебных данных", - text: "Синтетическое пустое состояние. Пользовательские данные не загружаются.", error: false, - withAction: false, onAction: fn(), + text: "Синтетическое пустое состояние. Пользовательские данные не загружаются.", + title: "Нет учебных данных", + withAction: false, }, argTypes: { - title: { control: "text" }, - text: { control: "text" }, - error: { control: "boolean" }, action: { table: { disable: true } }, + error: { control: "boolean" }, + onAction: { control: false }, + text: { control: "text" }, + title: { control: "text" }, withAction: { control: "boolean", description: "Показать необязательное действие StateView", }, - onAction: { control: false }, }, + component: StateView, parameters: { docs: { description: { @@ -39,40 +39,44 @@ const meta = { }, }, }, - render: (args) => { - const { withAction, onAction, ...stateProps } = args; + render: (arguments_) => { + const { onAction, withAction, ...stateProps } = arguments_; return ( - {args.error ? "Повторить локально" : "Выполнить пример"} - - ) : undefined + (withAction) + ? (( + + )) + : undefined } /> ); }, -} satisfies Meta; + tags: ["autodocs"], + title: "Design System/Components/StateView", +} satisfies Meta; export default meta; type Story = StoryObj; export const Empty: Story = { name: "Пустое состояние" }; export const EmptyWithAction: Story = { - name: "Пустое состояние с действием", args: { withAction: true }, + name: "Пустое состояние с действием", }; export const Failed: Story = { - name: "Ошибка", args: { error: true, - title: "Учебная ошибка", text: "Демонстрация недоступных данных без вызова API.", + title: "Учебная ошибка", }, + name: "Ошибка", }; export const ErrorWithAction: Story = { - name: "Ошибка с retry", args: { ...Failed.args, withAction: true }, + name: "Ошибка с retry", }; diff --git a/packages/ui/src/StateView/StateView.test.tsx b/packages/ui/src/StateView/StateView.test.tsx index 352e5c0..0f732fd 100644 --- a/packages/ui/src/StateView/StateView.test.tsx +++ b/packages/ui/src/StateView/StateView.test.tsx @@ -1,6 +1,7 @@ import { MantineProvider } from "@mantine/core"; import { render, screen } from "@testing-library/react"; import { describe, expect, it } from "vitest"; + import { LoadingSkeleton } from "../LoadingSkeleton/LoadingSkeleton"; import { StateView } from "./StateView"; diff --git a/packages/ui/src/StateView/StateView.tsx b/packages/ui/src/StateView/StateView.tsx index 91574dd..a41d0f6 100644 --- a/packages/ui/src/StateView/StateView.tsx +++ b/packages/ui/src/StateView/StateView.tsx @@ -1,19 +1,20 @@ -import { Paper, Stack, Text, Title } from "@mantine/core"; import type { FC, ReactNode } from "react"; +import { Paper, Stack, Text, Title } from "@mantine/core"; + type StateViewProps = { - title: string; - text: string; action?: ReactNode; error?: boolean; + text: string; + title: string; }; const StateView: FC = (props) => { - const { title, text, action, error = false } = props; + const { action, error = false, text, title } = props; const role = error ? "alert" : undefined; return ( - + {title} {text} diff --git a/packages/ui/src/theme.test.ts b/packages/ui/src/theme.test.ts index 08476de..5721403 100644 --- a/packages/ui/src/theme.test.ts +++ b/packages/ui/src/theme.test.ts @@ -1,6 +1,7 @@ import { DEFAULT_THEME, mergeMantineTheme } from "@mantine/core"; import source from "@wealthledger/tokens/tokens.json"; import { describe, expect, it } from "vitest"; + import { colorRoles, cssVariablesResolver, theme } from "./theme"; describe("design theme adapter", () => { diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index ea1568a..7bdac58 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -1,8 +1,8 @@ import "./styles.css"; import { - type CSSVariablesResolver, colorsTuple, createTheme, + type CSSVariablesResolver, getThemeColor, type MantinePrimaryShade, Modal, @@ -11,78 +11,80 @@ import { } from "@mantine/core"; import designTokens from "@wealthledger/tokens/tokens.json"; -const { color, typography, spacing, radius, shadows, breakpoints } = - designTokens; +const { breakpoints, color, radius, shadows, spacing, typography } + = designTokens; const mapValues = (values: Record, convert: (value: T) => U) => Object.fromEntries( Object.entries(values).map(([name, value]) => [name, convert(value)]), ); -const colorRoles = mapValues(color.roles, (role) => +const colorRoles = mapValues(color.roles, role => role.shade === null ? role.color : `${role.color}.${role.shade}`, ); const theme = createTheme({ - respectReducedMotion: true, + black: color.base.black, + breakpoints: mapValues( + breakpoints.values, + value => `${value}${breakpoints.unit}`, + ), + colors: mapValues(color.palettes, colorsTuple), components: { Modal: Modal.extend({ defaultProps: { overlayProps: { blur: 3 }, transitionProps: { - transition: "fade-down", duration: 220, exitDuration: 180, timingFunction: "ease-out", + transition: "fade-down", }, }, }), }, - primaryColor: color.roles.primary.color, - primaryShade: color.primaryShade as MantinePrimaryShade, defaultRadius: radius.default, - white: color.base.white, - black: color.base.black, - colors: mapValues(color.palettes, colorsTuple), fontFamily: typography.fontFamily, fontFamilyMonospace: typography.fontFamilyMonospace, - fontSizes: mapValues(typography.fontSizes, (value) => rem(value)), + fontSizes: mapValues(typography.fontSizes, value => rem(value)), fontWeights: mapValues(typography.fontWeights, String), - lineHeights: mapValues(typography.lineHeights, String), headings: { fontFamily: typography.fontFamily, fontWeight: String(typography.fontWeights.bold), - sizes: mapValues(typography.headings, (value) => ({ + sizes: mapValues(typography.headings, value => ({ fontSize: rem(value.fontSize), lineHeight: String(value.lineHeight), })), }, - spacing: mapValues(spacing.values, (value) => rem(value)), - radius: mapValues(radius.values, (value) => rem(value)), - shadows: mapValues(shadows.values, (layers) => + lineHeights: mapValues(typography.lineHeights, String), + primaryColor: color.roles.primary.color, + primaryShade: color.primaryShade as MantinePrimaryShade, + radius: mapValues(radius.values, value => rem(value)), + respectReducedMotion: true, + shadows: mapValues(shadows.values, layers => layers .map( - (layer) => + layer => `${rem(layer.offsetX)} ${rem(layer.offsetY)} ${rem(layer.blur)} ${rem(layer.spread)} ${rgba(color.base[layer.color as keyof typeof color.base], layer.opacity)}`, ) .join(", "), ), - breakpoints: mapValues( - breakpoints.values, - (value) => `${value}${breakpoints.unit}`, - ), + spacing: mapValues(spacing.values, value => rem(value)), + white: color.base.white, }); -const cssVariablesResolver: CSSVariablesResolver = (resolvedTheme) => ({ +const cssVariablesResolver: CSSVariablesResolver = resolvedTheme => ({ + dark: {}, + light: { + "--mantine-color-dimmed": getThemeColor(colorRoles.muted, resolvedTheme), + }, variables: Object.fromEntries( Object.entries(colorRoles).map(([role, reference]) => [ `--wl-color-${role}`, getThemeColor(reference, resolvedTheme), ]), ), - light: { - "--mantine-color-dimmed": getThemeColor(colorRoles.muted, resolvedTheme), - }, - dark: {}, }); -export { colorRoles, cssVariablesResolver, designTokens, theme }; +export { colorRoles, cssVariablesResolver, theme }; + +export { default as designTokens } from "@wealthledger/tokens/tokens.json"; diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 5057d03..e18020b 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -3,9 +3,9 @@ import { defineConfig } from "vite"; export default defineConfig({ build: { lib: { + cssFileName: "styles", entry: { index: "src/index.ts", theme: "src/theme.ts" }, formats: ["es"], - cssFileName: "styles", }, rolldownOptions: { external: /^(react(?:-dom)?|@mantine\/[^/]+|@wealthledger\/tokens)(\/|$)/, diff --git a/scripts/check-image-publication.cjs b/scripts/check-image-publication.cjs index d0fda81..25788d5 100644 --- a/scripts/check-image-publication.cjs +++ b/scripts/check-image-publication.cjs @@ -1,31 +1,31 @@ -const { test } = require("node:test"); const assert = require("node:assert/strict"); const { + chmodSync, mkdtempSync, readFileSync, - writeFileSync, - chmodSync, rmSync, + writeFileSync, } = require("node:fs"); const { tmpdir } = require("node:os"); -const { join, resolve } = require("node:path"); +const nodePath = require("node:path"); +const { test } = require("node:test"); const EXECUTABLE_MODE = 0o755; const { spawnSync } = require("node:child_process"); test("immutable publication resumes exact digest checks after post-push failure", () => { - const directory = mkdtempSync(join(tmpdir(), "wl-image-retry-")); + const directory = mkdtempSync(nodePath.join(tmpdir(), "wl-image-retry-")); const workflow = readFileSync( - resolve(__dirname, "../.gitea/workflows/image.yml"), + nodePath.resolve(__dirname, "../.gitea/workflows/image.yml"), "utf8", ); const block = workflow - .split(" - name: Publish immutable release tag\n run: |\n")[1] - .split(" - name:")[0] - .replace(/^ {10}/gm, ""); - const double = `#!${process.execPath} + .split(" - name: Publish immutable release tag\n run: |\n", 2)[1] + .split(" - name:", 1)[0] + .replaceAll(/^ {10}/gm, ""); + const double = String.raw`#!${process.execPath} const fs = require('node:fs'); const args = process.argv.slice(2).join(' '); -fs.appendFileSync('calls', args + '\\n'); +fs.appendFileSync('calls', args + '\n'); if (args.startsWith('manifest inspect')) { if (!fs.existsSync('published')) { console.error('manifest unknown'); process.exit(1); } } else if (args.startsWith('buildx imagetools inspect')) { @@ -41,8 +41,10 @@ if (args.startsWith('manifest inspect')) { `; try { for (const name of ["docker", "npm"]) { - writeFileSync(join(directory, name), double); - chmodSync(join(directory, name), EXECUTABLE_MODE); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + writeFileSync(nodePath.join(directory, name), double); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + chmodSync(nodePath.join(directory, name), EXECUTABLE_MODE); } const run = (extra = {}) => spawnSync("/bin/sh", ["-ec", block], { @@ -50,8 +52,8 @@ if (args.startsWith('manifest inspect')) { encoding: "utf8", env: { ...process.env, - PATH: `${directory}:${process.env.PATH}`, IMAGE: "synthetic/image", + PATH: `${directory}:${process.env.PATH}`, RELEASE_TAG: "v1.2.3", REVISION: "commit", ...extra, @@ -62,14 +64,16 @@ if (args.startsWith('manifest inspect')) { assert.equal(retry.status, 0, retry.stdout + retry.stderr); assert.notEqual(run({ BAD_REVISION: "1" }).status, 0); assert.notEqual(run({ BAD_SMOKE: "1" }).status, 0); - const calls = readFileSync(join(directory, "calls"), "utf8"); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + const calls = readFileSync(nodePath.join(directory, "calls"), "utf8"); assert.equal( - calls.split("\n").filter((line) => line.startsWith("buildx build")) + calls.split("\n").filter(line => line.startsWith("buildx build")) .length, 1, ); assert.ok(calls.includes("synthetic/image@sha256:exact")); - } finally { - rmSync(directory, { recursive: true, force: true }); + } + finally { + rmSync(directory, { force: true, recursive: true }); } }); diff --git a/scripts/check-openapi.mjs b/scripts/check-openapi.mjs index 28a3c97..a440dfa 100644 --- a/scripts/check-openapi.mjs +++ b/scripts/check-openapi.mjs @@ -1,14 +1,14 @@ import { spawnSync } from "node:child_process"; import { mkdtemp, readFile, rm } from "node:fs/promises"; import { tmpdir } from "node:os"; -import { join, resolve } from "node:path"; +import nodePath from "node:path"; const temporaryDirectory = await mkdtemp( - join(tmpdir(), "wealth-ledger-openapi-"), + nodePath.join(tmpdir(), "wealth-ledger-openapi-"), ); -const generatedPath = join(temporaryDirectory, "schema.d.ts"); -const committedPath = resolve("src/shared/api/generated/schema.d.ts"); -const cliPath = resolve("node_modules/openapi-typescript/bin/cli.js"); +const generatedPath = nodePath.join(temporaryDirectory, "schema.d.ts"); +const committedPath = nodePath.resolve("src/shared/api/generated/schema.d.ts"); +const cliPath = nodePath.resolve("node_modules/openapi-typescript/bin/cli.js"); let exitCode = 0; try { @@ -18,12 +18,10 @@ try { { encoding: "utf8" }, ); - if (generated.status !== 0) { - process.stderr.write(generated.stderr || generated.stdout); - exitCode = generated.status ?? 1; - } else { + if (generated.status === 0) { const [committed, current] = await Promise.all([ readFile(committedPath, "utf8"), + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. readFile(generatedPath, "utf8"), ]); if (committed !== current) { @@ -33,8 +31,13 @@ try { exitCode = 1; } } -} finally { - await rm(temporaryDirectory, { recursive: true, force: true }); + else { + process.stderr.write(generated.stderr || generated.stdout); + exitCode = generated.status ?? 1; + } +} +finally { + await rm(temporaryDirectory, { force: true, recursive: true }); } process.exitCode = exitCode; diff --git a/scripts/check-release.cjs b/scripts/check-release.cjs index 3953c63..f5ed10e 100644 --- a/scripts/check-release.cjs +++ b/scripts/check-release.cjs @@ -1,14 +1,16 @@ const assert = require("node:assert/strict"); const { execFileSync } = require("node:child_process"); + const { version } = require("../package.json"); -const git = (...args) => execFileSync("git", args, { encoding: "utf8" }).trim(); +// eslint-disable-next-line sonarjs/no-os-command-from-path -- Repository checks use the developer/CI Git installation; arguments never invoke a shell. +const git = (...arguments_) => execFileSync("git", arguments_, { encoding: "utf8" }).trim(); assert.equal( git("status", "--porcelain"), "", "Commit all changes before preparing a release", ); -const tags = git( +const tag_ = git( "tag", "--merged", "HEAD", @@ -17,9 +19,9 @@ const tags = git( "--sort=-version:refname", ) .split("\n") - .filter((tag) => /^v\d+\.\d+\.\d+$/.test(tag)); + .find(tag => /^v\d+\.\d+\.\d+$/.test(tag)); assert.equal( version, - tags[0]?.slice(1) ?? "0.0.0", + tag_?.slice(1) ?? "0.0.0", "Version is already prepared or release tags are missing. Fetch tags; finish the existing release before preparing another.", ); diff --git a/scripts/test-eslint.mjs b/scripts/test-eslint.mjs index e53490f..4d45046 100644 --- a/scripts/test-eslint.mjs +++ b/scripts/test-eslint.mjs @@ -1,6 +1,22 @@ +import react from "@eslint-react/eslint-plugin"; +import stylistic from "@stylistic/eslint-plugin"; +import query from "@tanstack/eslint-plugin-query"; +import vitest from "@vitest/eslint-plugin"; +import { ESLint } from "eslint"; +import { importX } from "eslint-plugin-import-x"; +import jestDom from "eslint-plugin-jest-dom"; +import perfectionist from "eslint-plugin-perfectionist"; +import hooks from "eslint-plugin-react-hooks"; +import refresh from "eslint-plugin-react-refresh"; +import regexp from "eslint-plugin-regexp"; +import security from "eslint-plugin-security"; +import sonarjs from "eslint-plugin-sonarjs"; +import storybook from "eslint-plugin-storybook"; +import testingLibrary from "eslint-plugin-testing-library"; +import unicorn from "eslint-plugin-unicorn"; import assert from "node:assert/strict"; import { test } from "node:test"; -import { ESLint } from "eslint"; +import tseslint from "typescript-eslint"; test("ESLint enforces the frontend profile and excludes generated artifacts", async () => { const eslint = new ESLint(); @@ -12,7 +28,7 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as ], [ "packages/ui/src/EntryCard/EntryCard.tsx", - 'import { useState } from "react"; export function Example({ active }: { active: boolean }) { if (active) useState(0); return null; }', + "import { useState } from \"react\"; export function Example({ active }: { active: boolean }) { if (active) useState(0); return null; }", "react-hooks/rules-of-hooks", ], [ @@ -25,26 +41,61 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as "export default 1;", "import-x/no-default-export", ], + [ + "src/shared/api/problem-details.ts", + "new Error(\"forgot to throw\");", + "sonarjs/no-unthrown-error", + ], + [ + "src/shared/api/problem-details.ts", + "export const pattern = /[aab]/;", + "regexp/no-dupe-characters-character-class", + ], + [ + "src/shared/api/problem-details.ts", + "export type Status = \"z\" | \"a\";", + "perfectionist/sort-union-types", + ], + [ + "src/shared/api/problem-details.ts", + "//missing space\nexport const ready = true;", + "@stylistic/spaced-comment", + ], + [ + "src/shared/api/problem-details.ts", + "export function pattern(input: string) { return new RegExp(input); }", + "security/detect-non-literal-regexp", + ], + [ + "scripts/check-openapi.mjs", + "import { exec } from \"node:child_process\"; exec(process.argv[2]);", + "security/detect-child-process", + ], + [ + "packages/ui/src/EntryCard/EntryCard.test.tsx", + "import { expect } from \"vitest\"; expect(document.activeElement).toBe(document.body);", + "jest-dom/prefer-focus", + ], [ "src/shared/api/client.test.ts", - 'import { it } from "vitest"; it.only("focused", () => {});', + "import { it } from \"vitest\"; it.only(\"focused\", () => {});", "vitest/no-focused-tests", ], [ "packages/ui/src/EntryCard/EntryCard.test.tsx", - 'import { screen } from "@testing-library/react"; screen.findByText("ready");', + "import { screen } from \"@testing-library/react\"; screen.findByText(\"ready\");", "testing-library/await-async-queries", ], [ "packages/ui/src/EntryCard/EntryCard.tsx", - 'import { QueryClient } from "@tanstack/react-query"; export function Example() { const client = new QueryClient(); return
{String(client)}
; }', + "import { QueryClient } from \"@tanstack/react-query\"; export function Example() { const client = new QueryClient(); return
{String(client)}
; }", "@tanstack/query/stable-query-client", ], ]) { const [result] = await eslint.lintText(code, { filePath }); assert.equal(result.fatalErrorCount, 0, filePath); assert.ok( - result.messages.some((message) => message.ruleId === rule), + result.messages.some(message => message.ruleId === rule), rule, ); } @@ -62,3 +113,63 @@ test("ESLint enforces the frontend profile and excludes generated artifacts", as assert.ok(story.rules["storybook/default-exports"][0] > 0); assert.equal(story.rules["react-refresh/only-export-components"], undefined); }); + +test("all recommended plugin rules remain enabled in their intended scopes", async () => { + const eslint = new ESLint(); + const source = "src/shared/api/problem-details.ts"; + const component = "packages/ui/src/EntryCard/EntryCard.tsx"; + const unit = "packages/ui/src/EntryCard/EntryCard.test.tsx"; + for (const [preset, filePath] of [ + [tseslint.configs.recommendedTypeChecked, source], + [[importX.flatConfigs.recommended, importX.flatConfigs.typescript], source], + [unicorn.configs.recommended, source], + [sonarjs.configs.recommended, source], + [regexp.configs.recommended, source], + [security.configs.recommended, source], + [perfectionist.configs["recommended-natural"], source], + [stylistic.configs.recommended, component], + [react.configs["recommended-type-checked"], component], + [hooks.configs.flat.recommended, component], + [refresh.configs.vite, component], + [query.configs["flat/recommended"], component], + [vitest.configs.recommended, unit], + [testingLibrary.configs["flat/react"], unit], + [jestDom.configs["flat/recommended"], unit], + ...storybook.configs["flat/recommended"].filter(config => config.rules).map(config => [config, config.name.endsWith("main-rules") ? ".storybook/main.ts" : "src/shared/ui/Button.stories.tsx"]), + ]) { + const configs = [preset].flat(); + const expected = Object.assign({}, ...configs.map(config => config.rules)); + const config = await eslint.calculateConfigForFile(filePath); + const actual = new Map(Object.entries(config.rules)); + for (const [rule, setting] of Object.entries(expected)) { + const severity = Array.isArray(setting) ? setting[0] : setting; + if (severity === "off" || severity === 0 || !rule.includes("/")) continue; + assert.ok(actual.get(rule)?.[0] > 0, `${filePath}: ${rule}`); + } + } +}); + +test("ESLint formatting is idempotent and preserves TSX generic syntax", async () => { + const eslint = new ESLint({ fix: true }); + const filePath = "packages/ui/src/EntryCard/EntryCard.tsx"; + const [fixed] = await eslint.lintText( + "//identity\nconst identity = (value: T): T => value;\nexport {identity};", + { filePath }, + ); + assert.equal(fixed.fatalErrorCount, 0); + assert.equal(fixed.errorCount, 0); + assert.ok(fixed.output); + const [again] = await eslint.lintText(fixed.output, { filePath }); + assert.equal(again.errorCount, 0); + assert.equal(again.output, undefined); +}); + +test("ESLint formatting preserves spaces around JSX text and interpolations", async () => { + const eslint = new ESLint({ fix: true }); + const [fixed] = await eslint.lintText( + "const Example = () => {\nconst value = 'value';\nreturn Amount: {value} / {value};\n};\nexport { Example };", + { filePath: "packages/ui/src/EntryCard/EntryCard.tsx" }, + ); + assert.equal(fixed.errorCount, 0); + assert.ok(fixed.output?.includes("Amount: {value} / {value}")); +}); diff --git a/scripts/test-pre-commit.mjs b/scripts/test-pre-commit.mjs index 4d5009c..3b79d8f 100644 --- a/scripts/test-pre-commit.mjs +++ b/scripts/test-pre-commit.mjs @@ -9,53 +9,62 @@ import { writeFileSync, } from "node:fs"; import { tmpdir } from "node:os"; -import { delimiter, join, resolve } from "node:path"; +import nodePath from "node:path"; import { test } from "node:test"; const GITHUB_TOKEN_RANDOM_BYTES = 18; test("pre-commit scans the index, redacts findings and fails closed", () => { - const hook = resolve(".husky/pre-commit"); - const cwd = mkdtempSync(join(tmpdir(), "frontend-hook-")); - const bin = join(cwd, "bin"); - const marker = join(cwd, "downstream"); + const hook = nodePath.resolve(".husky/pre-commit"); + const cwd = mkdtempSync(nodePath.join(tmpdir(), "frontend-hook-")); + const bin = nodePath.join(cwd, "bin"); + const marker = nodePath.join(cwd, "downstream"); const token = `ghp_${randomBytes(GITHUB_TOKEN_RANDOM_BYTES).toString("hex")}`; - const git = (...args) => execFileSync("git", args, { cwd, stdio: "pipe" }); - const run = (path = `${bin}${delimiter}${process.env.PATH}`) => + // eslint-disable-next-line sonarjs/no-os-command-from-path -- Repository checks use the developer/CI Git installation; arguments never invoke a shell. + const git = (...arguments_) => execFileSync("git", arguments_, { cwd, stdio: "pipe" }); + const run = (path = `${bin}${nodePath.delimiter}${process.env.PATH}`) => spawnSync("/bin/sh", ["-e", hook], { cwd, - env: { ...process.env, PATH: path }, encoding: "utf8", + env: { ...process.env, PATH: path }, }); try { + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. mkdirSync(bin); for (const command of ["npx", "npm"]) { - writeFileSync(join(bin, command), "#!/bin/sh\necho ran >> downstream\n", { + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + writeFileSync(nodePath.join(bin, command), "#!/bin/sh\necho ran >> downstream\n", { mode: 0o755, }); } git("init", "--quiet"); - writeFileSync(join(cwd, "sample.txt"), "safe staged content\n"); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + writeFileSync(nodePath.join(cwd, "sample.txt"), "safe staged content\n"); git("add", "sample.txt"); // An unstaged secret must not be mistaken for the index being committed. - writeFileSync(join(cwd, "sample.txt"), `token=${token}\n`); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. + writeFileSync(nodePath.join(cwd, "sample.txt"), `token=${token}\n`); let result = run(); assert.equal( result.status, 0, "clean index must pass; install Gitleaks first", ); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. assert.ok(existsSync(marker)); rmSync(marker); git("add", "sample.txt"); result = run(); assert.equal(result.status, 1, "staged secret must block commit"); assert.ok(!`${result.stdout}${result.stderr}`.includes(token)); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. assert.ok(!existsSync(marker), "formatting/dependency checks must not run"); result = run(bin); assert.notEqual(result.status, 0, "missing Gitleaks must block commit"); + // eslint-disable-next-line security/detect-non-literal-fs-filename -- Path is built from this check’s private mkdtemp directory and fixed filenames. assert.ok(!existsSync(marker)); - } finally { - rmSync(cwd, { recursive: true, force: true }); + } + finally { + rmSync(cwd, { force: true, recursive: true }); } }); diff --git a/src/app/routes/AppRoutes/AllAccounts.test.tsx b/src/app/routes/AppRoutes/AllAccounts.test.tsx index f493d0a..247d002 100644 --- a/src/app/routes/AppRoutes/AllAccounts.test.tsx +++ b/src/app/routes/AppRoutes/AllAccounts.test.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { MantineProvider } from "@mantine/core"; import { QueryClientProvider } from "@tanstack/react-query"; import { @@ -7,96 +9,104 @@ import { screen, waitFor, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC } from "react"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, useLocation } from "react-router"; import { beforeEach, describe, expect, it } from "vitest"; + import type { BrokerageOperation } from "@/entities/broker-operation"; import type { IncomeAnalytics } from "@/entities/income"; import type { Portfolio } from "@/entities/portfolio"; + import { AuthProvider } from "@/features/auth"; import { createTestQueryClient } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { AppRoutes } from "./AppRoutes"; const accounts = [ { id: "a", name: "Основной" }, { id: "b", name: "ИИС" }, ]; -const position: Portfolio["positions"][number] = { - figi: "SBER", - displayName: "Сбербанк", - type: "STOCK", - quantity: "2", - currentValue: { currency: "RUB", value: "600" }, - absoluteReturn: null, - averagePurchasePrice: null, - isin: null, - ticker: "SBER", - logoName: null, -}; +const position: Portfolio["positions"][number] = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + absoluteReturn: null, + averagePurchasePrice: null, + currentValue: { currency: "RUB", value: "600" }, + displayName: "Сбербанк", + figi: "SBER", + isin: null, + logoName: null, + quantity: "2", + ticker: "SBER", + type: "STOCK", + } +/* eslint-enable unicorn/no-null */); const portfolio: Portfolio = { - lastSuccessfulAt: "2026-08-15T12:00:00Z", - isStale: false, - totalsByCurrency: [{ currency: "RUB", value: "1200" }], - structure: { currencies: [], unvaluedCategories: [] }, cashBalances: [], - positions: accounts.map((account) => ({ ...position, account })), + isStale: false, + lastSuccessfulAt: "2026-08-15T12:00:00Z", + positions: accounts.map(account => ({ ...position, account })), + structure: { currencies: [], unvaluedCategories: [] }, + totalsByCurrency: [{ currency: "RUB", value: "1200" }], }; -const receipt: BrokerageOperation = { - id: "same", - occurredAt: "2026-08-15T12:00:00Z", - type: "OPERATION_TYPE_COUPON", - category: "income", - description: "Выплата купона", - figi: null, - instrumentUid: null, - ticker: "BOND", - instrumentType: "bond", - logoName: null, - payment: { currency: "RUB", value: "1" }, - quantity: null, - price: null, - accruedInterest: null, - commission: null, -}; -const items = accounts.map((account) => ({ ...receipt, account })); -const analytics: IncomeAnalytics = { - accountId: "all", - period: { from: "2026-08-01", to: "2026-08-31" }, - calculatedAt: "2026-09-01T12:00:00Z", - totalsByCurrency: [ - { - currency: "RUB", - coupon: { currency: "RUB", value: "2" }, - dividend: { currency: "RUB", value: "0" }, - total: { currency: "RUB", value: "2" }, +const receipt: BrokerageOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accruedInterest: null, + category: "income", + commission: null, + description: "Выплата купона", + figi: null, + id: "same", + instrumentType: "bond", + instrumentUid: null, + logoName: null, + occurredAt: "2026-08-15T12:00:00Z", + payment: { currency: "RUB", value: "1" }, + price: null, + quantity: null, + ticker: "BOND", + type: "OPERATION_TYPE_COUPON", + } +/* eslint-enable unicorn/no-null */); +const items = accounts.map(account => ({ ...receipt, account })); +const analytics: IncomeAnalytics = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "all", + bucketGranularity: "day", + buckets: [], + calculatedAt: "2026-09-01T12:00:00Z", + entries: items.map(entry => ({ ...entry, instrumentKey: "bond:RUB" })), + instruments: [ + { + coupon: { currency: "RUB", value: "2" }, + displayName: "Облигация", + dividend: { currency: "RUB", value: "0" }, + figi: null, + instrumentType: "bond", + instrumentUid: null, + key: "bond:RUB", + receiptCount: 2, + ticker: "BOND", + total: { currency: "RUB", value: "2" }, + }, + ], + period: { from: "2026-08-01", to: "2026-08-31" }, + previous: { + period: { from: "2026-07-01", to: "2026-07-31" }, + totalsByCurrency: [], }, - ], - previous: { - period: { from: "2026-07-01", to: "2026-07-31" }, - totalsByCurrency: [], - }, - yearComparison: null, - bucketGranularity: "day", - buckets: [], - instruments: [ - { - key: "bond:RUB", - figi: null, - instrumentUid: null, - ticker: "BOND", - instrumentType: "bond", - displayName: "Облигация", - coupon: { currency: "RUB", value: "2" }, - dividend: { currency: "RUB", value: "0" }, - total: { currency: "RUB", value: "2" }, - receiptCount: 2, - }, - ], - entries: items.map((entry) => ({ ...entry, instrumentKey: "bond:RUB" })), -}; + totalsByCurrency: [ + { + coupon: { currency: "RUB", value: "2" }, + currency: "RUB", + dividend: { currency: "RUB", value: "0" }, + total: { currency: "RUB", value: "2" }, + }, + ], + yearComparison: null, + } +/* eslint-enable unicorn/no-null */); const CurrentLocation: FC = () => { const location = useLocation(); return ( @@ -128,18 +138,20 @@ beforeEach(() => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: "test", - user: { id: "user", email: "user@example.com" }, + user: { email: "user@example.com", id: "user" }, }), ), http.get("*/api/v1/brokerage-accounts", () => HttpResponse.json( resource( - accounts.map((account) => ({ - ...account, - type: "BROKERAGE", - openedOn: null, - portfolioSummary: null, - })), + accounts.map(account => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...account, + openedOn: null, + portfolioSummary: null, + type: "BROKERAGE", + } + /* eslint-enable unicorn/no-null */))), ), ), ), @@ -150,13 +162,15 @@ beforeEach(() => { "*/api/v1/brokerage-accounts/:accountId/operations", ({ params }) => HttpResponse.json( - resource({ - accountId: params.accountId, - items, - hasNext: false, - nextCursor: null, - observedAt: receipt.occurredAt, - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: params.accountId, + hasNext: false, + items, + nextCursor: null, + observedAt: receipt.occurredAt, + } + /* eslint-enable unicorn/no-null */)), ), ), http.get("*/api/v1/brokerage-accounts/:accountId/income-analytics", () => @@ -167,20 +181,22 @@ beforeEach(() => { resource({ accountId: "all", calculatedAt: receipt.occurredAt, + events: accounts.map(account => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + account, + date: "2026-09-15", + dateKind: "event", + displayName: "Облигация", + figi: null, + instrumentUid: null, + isin: null, + logoName: null, + projectedAmount: { currency: "RUB", value: "2" }, + ticker: "BOND", + type: "coupon", + } + /* eslint-enable unicorn/no-null */))), incomeTotalsByCurrency: [], - events: accounts.map((account) => ({ - account, - type: "coupon", - date: "2026-09-15", - dateKind: "event", - figi: null, - instrumentUid: null, - ticker: "BOND", - displayName: "Облигация", - isin: null, - logoName: null, - projectedAmount: { currency: "RUB", value: "2" }, - })), }), ), ), @@ -219,7 +235,7 @@ describe("All accounts routes", () => { ); for (const suffix of ["operations", "income", "events"]) expect( - document.querySelector(`a[href="/accounts/all/${suffix}"]`), + screen.getAllByRole("link").find(link => link.getAttribute("href") === `/accounts/all/${suffix}`), ).toBeInTheDocument(); }); @@ -228,24 +244,26 @@ describe("All accounts routes", () => { server.use( http.get( "*/api/v1/brokerage-accounts/:accountId/operations", - ({ request, params }) => { + ({ params, request }) => { const url = new URL(request.url); requests.push(url); return HttpResponse.json( - resource({ - accountId: params.accountId, - items: [ - { - ...receipt, - description: url.searchParams.has("cursor") - ? "Вторая страница" - : "Первая страница", - }, - ], - hasNext: !url.searchParams.has("cursor"), - nextCursor: url.searchParams.has("cursor") ? null : "next", - observedAt: receipt.occurredAt, - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: params.accountId, + hasNext: !url.searchParams.has("cursor"), + items: [ + { + ...receipt, + description: url.searchParams.has("cursor") + ? "Вторая страница" + : "Первая страница", + }, + ], + nextCursor: url.searchParams.has("cursor") ? null : "next", + observedAt: receipt.occurredAt, + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -260,10 +278,10 @@ describe("All accounts routes", () => { fireEvent.click(await screen.findByRole("option", { name: "ИИС" })); await waitFor(() => expect( - requests.some((url) => url.pathname.includes("/b/operations")), + requests.some(url => url.pathname.includes("/b/operations")), ).toBe(true), ); - const selected = requests.find((url) => + const selected = requests.find(url => url.pathname.includes("/b/operations"), ); expect(selected?.searchParams.get("from")).toBe("2026-08-01T00:00:00.000Z"); @@ -286,8 +304,8 @@ describe("All accounts routes", () => { : HttpResponse.json( resource({ accountId: "all", - items, hasNext: true, + items, nextCursor: "expired", observedAt: receipt.occurredAt, }), @@ -305,7 +323,7 @@ describe("All accounts routes", () => { }); it("retains the complete portfolio during a failed refresh", async () => { - const client = renderPage("/accounts/all"); + const view = renderPage("/accounts/all"); await screen.findAllByText("Сбербанк"); server.use( http.get("*/api/v1/brokerage-accounts/all/portfolio", () => @@ -313,7 +331,7 @@ describe("All accounts routes", () => { ), ); await act(() => - client.invalidateQueries({ + view.invalidateQueries({ predicate: ({ queryKey }) => String(queryKey[1]).endsWith("/portfolio"), }), ); diff --git a/src/app/routes/AppRoutes/AppRoutes.test.tsx b/src/app/routes/AppRoutes/AppRoutes.test.tsx index 8ef2531..54ed5a0 100644 --- a/src/app/routes/AppRoutes/AppRoutes.test.tsx +++ b/src/app/routes/AppRoutes/AppRoutes.test.tsx @@ -2,32 +2,34 @@ import { MantineProvider } from "@mantine/core"; import { QueryClientProvider } from "@tanstack/react-query"; import { fireEvent, render, screen } from "@testing-library/react"; import { cssVariablesResolver, theme } from "@wealthledger/ui/theme"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { MemoryRouter } from "react-router"; import { describe, expect, it } from "vitest"; + import { AuthProvider } from "@/features/auth"; import { createTestQueryClient } from "@/test/query"; import { server } from "@/test/server"; + import { AppRoutes } from "./AppRoutes"; -describe("AppRoutes", () => { - function renderRoutes(path: string) { - return render( - - - - - - - - - , - ); - } +function renderRoutes(path: string) { + return render( + + + + + + + + + , + ); +} +describe("AppRoutes", () => { it.each([ ["/", "Вход"], ["/login", "Вход"], @@ -62,7 +64,7 @@ describe("AppRoutes", () => { credentials = await request.json(); return HttpResponse.json({ accessToken: "login-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }); }), ); @@ -96,19 +98,21 @@ describe("AppRoutes", () => { http.post("*/api/v1/auth/login", () => HttpResponse.json({ accessToken: "test", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }), ), http.get("*/api/v1/bank-cards", () => HttpResponse.json([])), http.get("*/api/v1/bank-cards/summary", () => - HttpResponse.json({ - month: "2026-08", - cardId: null, - expenses: { currency: "RUB", value: "0" }, - refunds: { currency: "RUB", value: "0" }, - net: { currency: "RUB", value: "0" }, - categories: [], - }), + HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + cardId: null, + categories: [], + expenses: { currency: "RUB", value: "0" }, + month: "2026-08", + net: { currency: "RUB", value: "0" }, + refunds: { currency: "RUB", value: "0" }, + } + /* eslint-enable unicorn/no-null */)), ), ); renderRoutes("/cards?month=2026-08"); @@ -132,7 +136,7 @@ describe("AppRoutes", () => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: "test-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }), ), ); diff --git a/src/app/routes/AppRoutes/AppRoutes.tsx b/src/app/routes/AppRoutes/AppRoutes.tsx index 2ebd2be..848aeb2 100644 --- a/src/app/routes/AppRoutes/AppRoutes.tsx +++ b/src/app/routes/AppRoutes/AppRoutes.tsx @@ -1,6 +1,8 @@ import type { FC } from "react"; + import { lazy } from "react"; import { Navigate, Route, Routes } from "react-router"; + import { LazyPage } from "../RouteFallback"; import { Protected, Public } from "../RouteGuards"; @@ -71,172 +73,172 @@ const ProtectedLayout = lazy(async () => { const AppRoutes: FC = () => ( - } /> + } path="/" /> - } + )} + path="/login" /> - } + )} + path="/register" /> - } + )} > - } + )} + path="/cards/:cardId" /> - } + )} + path="/cards" /> - } + )} + path="/bonds" /> - } + )} + path="/bonds/:bondId" /> - } + )} + path="/stocks" /> - } + )} + path="/stocks/:stockId" /> - } + )} + path="/accounts" /> - } + )} + path="/accounts/all" /> - } + )} + path="/accounts/all/operations" /> - } + )} + path="/accounts/all/income" /> - } + )} + path="/accounts/all/events" /> - } + )} + path="/accounts/:accountId" /> - } + )} + path="/accounts/:accountId/events" /> - } + )} + path="/accounts/:accountId/income" /> - } + )} + path="/accounts/:accountId/operations" /> - } + )} + path="/settings" /> - } + )} + path="*" /> ); diff --git a/src/app/routes/DocumentTitle/DocumentTitle.test.tsx b/src/app/routes/DocumentTitle/DocumentTitle.test.tsx index 353cb03..a53748d 100644 --- a/src/app/routes/DocumentTitle/DocumentTitle.test.tsx +++ b/src/app/routes/DocumentTitle/DocumentTitle.test.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { QueryClientProvider } from "@tanstack/react-query"; import { act, @@ -6,24 +8,25 @@ import { screen, waitFor, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC } from "react"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, useNavigate } from "react-router"; import { beforeEach, describe, expect, it } from "vitest"; + import { AuthProvider } from "@/features/auth"; import { createTestQueryClient } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { ProtectedDocumentTitle } from "./DocumentTitle"; const Navigation: FC = () => { const navigate = useNavigate(); return ( <> - - @@ -48,7 +51,7 @@ beforeEach(() => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: "test-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }), ), ); @@ -56,10 +59,7 @@ beforeEach(() => { describe("document titles", () => { it("updates a loading account name and follows account scope and history", async () => { - let resolveAccounts!: () => void; - const accountsReady = new Promise((resolve) => { - resolveAccounts = resolve; - }); + const { promise: accountsReady, resolve: resolveAccounts } = Promise.withResolvers(); server.use( http.get("*/api/v1/brokerage-accounts", async () => { await accountsReady; @@ -68,7 +68,7 @@ describe("document titles", () => { ); renderTitle("/accounts/a/income?from=2026-01-01&to=2026-08-31"); expect(document.title).toBe("Пассивный доход — Счет — WealthLedger"); - await act(async () => resolveAccounts()); + await act(() => Promise.resolve(resolveAccounts())); await waitFor(() => expect(document.title).toBe("Пассивный доход — ИИС — WealthLedger"), ); @@ -98,15 +98,15 @@ describe("document titles", () => { ); it("keeps a useful title when the instrument is unavailable", async () => { - let requested = false; + let isRequested = false; server.use( http.get("*/api/v1/stocks/by-ticker/:ticker", () => { - requested = true; + isRequested = true; return HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 }); }), ); renderTitle("/stocks/missing"); - await waitFor(() => expect(requested).toBe(true)); + await waitFor(() => expect(isRequested).toBe(true)); expect(document.title).toBe("Акция — WealthLedger"); }); }); diff --git a/src/app/routes/DocumentTitle/DocumentTitle.tsx b/src/app/routes/DocumentTitle/DocumentTitle.tsx index 494f430..cb616e5 100644 --- a/src/app/routes/DocumentTitle/DocumentTitle.tsx +++ b/src/app/routes/DocumentTitle/DocumentTitle.tsx @@ -1,7 +1,9 @@ -import { useDocumentTitle } from "@mantine/hooks"; import type { FC } from "react"; + +import { useDocumentTitle } from "@mantine/hooks"; import { useTranslation } from "react-i18next"; import { useMatch } from "react-router"; + import { useBankCard } from "@/entities/bank-card"; import { useBond } from "@/entities/bond"; import { useBrokerageAccounts } from "@/entities/brokerage-account"; @@ -9,10 +11,9 @@ import { useStock } from "@/entities/stock"; type DocumentTitleProps = { title: string }; -const DocumentTitle: FC = (props) => { +const DocumentTitle: FC = (props): undefined => { const { t } = useTranslation(); useDocumentTitle(`${props.title} — ${t("appName")}`); - return null; }; type AccountDocumentTitleProps = { @@ -23,19 +24,29 @@ type AccountDocumentTitleProps = { const AccountDocumentTitle: FC = (props) => { const { t } = useTranslation(); const { data } = useBrokerageAccounts(); - const accountName = - props.accountId === "all" + const accountName + = props.accountId === "all" ? t("accounts.all") - : (data?.find((account) => account.id === props.accountId)?.name ?? - t("account.title")); - const section = - props.section === "income" - ? t("income.title") - : props.section === "operations" - ? t("ledger.title") - : props.section === "events" - ? t("events.title") - : t("portfolio.title"); + : (data?.find(account => account.id === props.accountId)?.name + ?? t("account.title")); + let section = t("portfolio.title"); + switch (props.section ?? "") { + case "income": { + section = t("income.title"); + break; + } + case "operations": { + section = t("ledger.title"); + break; + } + case "events": { + section = t("events.title"); + break; + } + default: { + break; + } + } return ; }; @@ -80,21 +91,10 @@ const ProtectedDocumentTitle: FC = () => { if (bond) return ; if (stock) return ; - return ( - - ); + if (cards) return ; + if (bonds) return ; + if (stocks) return ; + return settings ? : ; }; export { ProtectedDocumentTitle }; diff --git a/src/app/routes/ProtectedLayout.tsx b/src/app/routes/ProtectedLayout.tsx index f0b9e12..821b496 100644 --- a/src/app/routes/ProtectedLayout.tsx +++ b/src/app/routes/ProtectedLayout.tsx @@ -1,5 +1,7 @@ import type { FC } from "react"; + import { AppBreadcrumbs, AppShell } from "@/app/ui"; + import { ProtectedDocumentTitle } from "./DocumentTitle/DocumentTitle"; const ProtectedLayout: FC = () => { diff --git a/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.test.tsx b/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.test.tsx index a03237d..134afb0 100644 --- a/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.test.tsx +++ b/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.test.tsx @@ -3,11 +3,14 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { type FC, lazy, Suspense } from "react"; import { MemoryRouter, useLocation, useNavigate } from "react-router"; import { describe, expect, it, vi } from "vitest"; + import { RouteErrorBoundary } from "./RouteErrorBoundary"; -let authenticated = false; +const session = { isAuthenticated: false }; vi.mock("@/features/auth", () => ({ - useAuth: () => ({ user: authenticated ? {} : null }), + useAuth: () => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { user: session.isAuthenticated ? {} : null } + /* eslint-enable unicorn/no-null */)), })); const ThrowingRoute: FC = () => { @@ -17,11 +20,13 @@ const ThrowingRoute: FC = () => { const HealthyRoute: FC = () => { return (
- {useLocation().pathname === "/healthy" ? ( - "healthy route" - ) : ( - - )} + {useLocation().pathname === "/healthy" + ? ( + "healthy route" + ) + : ( + + )}
); }; @@ -31,7 +36,7 @@ const RouteHarness: FC = () => { return ( <> - @@ -55,10 +60,10 @@ describe("RouteErrorBoundary", () => { it.each(["/accounts", "/login"])( "recovers a transient failure through the fallback on %s itself", async (path) => { - authenticated = path === "/accounts"; - let failing = true; + session.isAuthenticated = path === "/accounts"; + let isFailing = true; const RecoverableRoute: FC = () => { - if (failing) throw new Error("temporary failure"); + if (isFailing) throw new Error("temporary failure"); return
recovered route
; }; render( @@ -71,14 +76,14 @@ describe("RouteErrorBoundary", () => { , ); const action = screen.getByRole("link", { name: "Продолжить" }); - failing = false; + isFailing = false; fireEvent.click(action); expect(await screen.findByText("recovered route")).toBeInTheDocument(); }, ); it("keeps a persistent failure recoverable without an automatic reset loop", () => { - authenticated = true; + session.isAuthenticated = true; renderBoundary("/accounts"); fireEvent.click(screen.getByRole("link", { name: "Продолжить" })); expect( @@ -91,7 +96,7 @@ describe("RouteErrorBoundary", () => { }); it("offers document navigation when React.lazy caches a rejected chunk", async () => { - authenticated = false; + session.isAuthenticated = false; const load = vi.fn(() => Promise.reject(new Error("chunk failed"))); const Chunk = lazy(load); render( @@ -110,18 +115,18 @@ describe("RouteErrorBoundary", () => { const reload = screen.getByRole("link", { name: "Перезагрузить страницу" }); expect(reload).toHaveAttribute("href", "/login"); // Cancel browser navigation in JSDOM only after proving React Router did not intercept it. - let intercepted = true; + let isIntercepted = true; const preventNavigation = (event: MouseEvent) => { - intercepted = event.defaultPrevented; + isIntercepted = event.defaultPrevented; event.preventDefault(); }; document.addEventListener("click", preventNavigation, { once: true }); fireEvent.click(reload); - expect(intercepted).toBe(false); + expect(isIntercepted).toBe(false); }); it("offers login after a public route error without error details", () => { - authenticated = false; + session.isAuthenticated = false; renderBoundary("/login"); expect(document.title).toBe("Не удалось открыть страницу — WealthLedger"); expect(screen.getByRole("link", { name: "Продолжить" })).toHaveAttribute( @@ -132,9 +137,9 @@ describe("RouteErrorBoundary", () => { }); it("offers accounts after a protected route error and resets on navigation", async () => { - authenticated = true; + session.isAuthenticated = true; renderBoundary("/accounts"); - screen.getByRole("button", { name: "go healthy" }).click(); + fireEvent.click(screen.getByRole("button", { name: "go healthy" })); expect(await screen.findByText("healthy route")).toBeInTheDocument(); }); }); diff --git a/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx b/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx index a6a09ab..809c239 100644 --- a/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx +++ b/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx @@ -1,14 +1,16 @@ +import type { FC, PropsWithChildren } from "react"; + import { Button, Stack, Text, Title } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; -import type { FC, PropsWithChildren } from "react"; import { Component } from "react"; import { useTranslation } from "react-i18next"; import { Link, useLocation } from "react-router"; + import { useAuth } from "@/features/auth"; type BoundaryProps = PropsWithChildren<{ - routeKey: string; authenticated: boolean; + routeKey: string; }>; type RouteErrorFallbackProps = { @@ -18,12 +20,12 @@ type RouteErrorFallbackProps = { type State = { hasError: boolean }; class Boundary extends Component { - state: State = { hasError: false }; - static getDerivedStateFromError(): State { return { hasError: true }; } + state: State = { hasError: false }; + componentDidUpdate(previousProps: BoundaryProps) { if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) { this.setState({ hasError: false }); @@ -31,10 +33,7 @@ class Boundary extends Component { } render() { - if (this.state.hasError) { - return ; - } - return this.props.children; + return this.state.hasError ? : this.props.children; } } @@ -60,7 +59,7 @@ const RouteErrorFallback: FC = (props) => { const RouteErrorBoundary: FC = (props) => { const { children } = props; - const { pathname, search, key } = useLocation(); + const { key, pathname, search } = useLocation(); const { user } = useAuth(); return ( diff --git a/src/app/routes/RouteFallback.tsx b/src/app/routes/RouteFallback.tsx index a676042..d6f4e1d 100644 --- a/src/app/routes/RouteFallback.tsx +++ b/src/app/routes/RouteFallback.tsx @@ -1,11 +1,13 @@ -import { Container, Group, Skeleton, Stack } from "@mantine/core"; import type { FC, PropsWithChildren } from "react"; + +import { Container, Group, Skeleton, Stack } from "@mantine/core"; import { Suspense } from "react"; import { useTranslation } from "react-i18next"; + import { RouteTransition } from "./RouteTransition"; -type RouteSkeletonVariant = "auth" | "content" | "shell"; type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>; +type RouteSkeletonVariant = "auth" | "content" | "shell"; const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => { const { variant } = props; @@ -13,7 +15,7 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => { if (variant === "auth") return ( - + = (props) => { const { children, variant } = props; return ( }> - {variant === "shell" ? ( - children - ) : ( - {children} - )} + {variant === "shell" + ? ( + children + ) + : ( + {children} + )} ); }; diff --git a/src/app/routes/RouteGuards.tsx b/src/app/routes/RouteGuards.tsx index 4f34f8c..3a3cf4f 100644 --- a/src/app/routes/RouteGuards.tsx +++ b/src/app/routes/RouteGuards.tsx @@ -1,37 +1,43 @@ import type { FC, PropsWithChildren } from "react"; + import { Navigate, useLocation } from "react-router"; + import { useAuth } from "@/features/auth"; + import { RouteSkeleton } from "./RouteFallback"; const Protected: FC = (props) => { const { children } = props; - const { user, ready } = useAuth(); + const { ready, user } = useAuth(); const location = useLocation(); if (!ready) return ; - return user ? ( - children - ) : ( - - ); + return user + ? ( + <>{children} + ) + : ( + + ); }; const Public: FC = (props) => { const { children } = props; - const { user, ready } = useAuth(); + const { ready, user } = useAuth(); const location = useLocation(); - const requested = (location.state as { returnTo?: string } | null)?.returnTo; - const returnTo = - typeof requested === "string" && - requested.startsWith("/") && - !requested.startsWith("//") + + if (!ready) return ; + const requested = (location.state as null | { returnTo?: string })?.returnTo; + const returnTo + = typeof requested === "string" + && requested.startsWith("/") + && !requested.startsWith("//") ? requested : "/accounts"; - if (!ready) return ; - return user ? : children; + return user ? : <>{children}; }; export { Protected, Public }; diff --git a/src/app/routes/RouteTransition.tsx b/src/app/routes/RouteTransition.tsx index 3fdaac8..84895a9 100644 --- a/src/app/routes/RouteTransition.tsx +++ b/src/app/routes/RouteTransition.tsx @@ -1,6 +1,7 @@ +import type { FC, PropsWithChildren } from "react"; + import { domAnimation, LazyMotion, useReducedMotion } from "motion/react"; import * as m from "motion/react-m"; -import type { FC, PropsWithChildren } from "react"; import { useLocation } from "react-router"; const TRANSITION_DURATION_SECONDS = 0.2; @@ -13,9 +14,9 @@ const RouteTransition: FC = (props) => { return ( { return ( diff --git a/src/app/ui/AppBreadcrumbs/AccountBreadcrumbs.tsx b/src/app/ui/AppBreadcrumbs/AccountBreadcrumbs.tsx index fb386ec..8a7952d 100644 --- a/src/app/ui/AppBreadcrumbs/AccountBreadcrumbs.tsx +++ b/src/app/ui/AppBreadcrumbs/AccountBreadcrumbs.tsx @@ -1,6 +1,9 @@ import type { FC } from "react"; + import { useTranslation } from "react-i18next"; + import { useBrokerageAccounts } from "@/entities/brokerage-account"; + import { BreadcrumbTrail } from "./BreadcrumbTrail"; type AccountBreadcrumbsProps = { @@ -12,11 +15,11 @@ const AccountBreadcrumbs: FC = (props) => { const { accountId, section } = props; const { data: accounts } = useBrokerageAccounts(); const { t } = useTranslation(); - const accountName = - accountId === "all" + const accountName + = accountId === "all" ? t("accounts.all") - : (accounts?.find((account) => account.id === accountId)?.name ?? - t("breadcrumbs.accountFallback")); + : (accounts?.find(account => account.id === accountId)?.name + ?? t("breadcrumbs.accountFallback")); const accountPath = `/accounts/${accountId}`; const items = [ { label: t("breadcrumbs.accounts"), to: "/accounts" }, diff --git a/src/app/ui/AppBreadcrumbs/AccountScopeSwitch.tsx b/src/app/ui/AppBreadcrumbs/AccountScopeSwitch.tsx index 6d7abd4..ef30107 100644 --- a/src/app/ui/AppBreadcrumbs/AccountScopeSwitch.tsx +++ b/src/app/ui/AppBreadcrumbs/AccountScopeSwitch.tsx @@ -1,7 +1,9 @@ -import { Select } from "@mantine/core"; import type { FC } from "react"; + +import { Select } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useLocation, useNavigate } from "react-router"; + import { useBrokerageAccounts } from "@/entities/brokerage-account"; type AccountScopeSwitchProps = { accountId: string; section?: string }; @@ -13,31 +15,31 @@ const AccountScopeSwitch: FC = (props) => { const navigate = useNavigate(); const { search } = useLocation(); const data = [ - { value: "all", label: t("accounts.all") }, - ...(accounts ?? []).map((account) => ({ - value: account.id, + { label: t("accounts.all"), value: "all" }, + ...(accounts ?? []).map(account => ({ label: account.name, + value: account.id, })), ]; - if (!data.some((item) => item.value === accountId)) - data.push({ value: accountId, label: t("breadcrumbs.accountFallback") }); + if (data.every(item => item.value !== accountId)) + data.push({ label: t("breadcrumbs.accountFallback"), value: accountId }); return ( field.onChange(value ?? "")} - label={t("bank.paymentSystem")} - placeholder={t("bank.paymentSystemUnknown")} clearable - data={["mir", "visa", "mastercard"].map((value) => ({ - value, - label: t(`bank.paymentSystems.${value}`), - }))} comboboxProps={{ withinPortal: false }} + data={["mir", "visa", "mastercard"].map(value => ({ + label: t(`bank.paymentSystems.${value}`), + value, + }))} error={errors.paymentSystem?.message} + label={t("bank.paymentSystem")} + onChange={value => field.onChange(value ?? "")} + placeholder={t("bank.paymentSystemUnknown")} + value={field.value || /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null} /> )} /> @@ -71,37 +73,35 @@ const BankCardFields: FC = (props) => { render={({ field }) => ( + dateParser={value => bankDateSchema.safeParse(bankDateInputValue(value)).success ? bankDateInputValue(value) - : null - } + : /* eslint-disable-line unicorn/no-null -- Mantine represents an empty controlled field as null. */ null} + error={errors.openingDate?.message} fixOnBlur={false} - onInput={(event) => - field.onChange(bankDateInputValue(event.currentTarget.value)) - } - onChange={(value) => field.onChange(value ?? "")} + label={t("bank.openingDate")} + maxDate={bankToday()} onBlur={(event) => { field.onChange(bankDateInputValue(event.currentTarget.value)); field.onBlur(); }} - maxDate={bankToday()} + onChange={value => field.onChange(value ?? "")} + onInput={event => + field.onChange(bankDateInputValue(event.currentTarget.value))} popoverProps={{ - withinPortal: false, middlewares: { shift: { crossAxis: true } }, + withinPortal: false, }} readOnly={props.archived} - error={errors.openingDate?.message} + required + value={ + (bankDateSchema.safeParse(field.value).success) ? (field.value) : undefined + } + valueFormat="DD.MM.YYYY" /> )} /> - + {t("bank.openingHint")} {props.archived && {t("bank.archiveHint")}} diff --git a/src/entities/bank-card/ui/BankFeedback.tsx b/src/entities/bank-card/ui/BankFeedback.tsx index 0b2ef22..d252712 100644 --- a/src/entities/bank-card/ui/BankFeedback.tsx +++ b/src/entities/bank-card/ui/BankFeedback.tsx @@ -1,13 +1,15 @@ -import { Alert, Button, Group, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Alert, Button, Group, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import { apiErrorCode } from "@/shared/api"; type BankFeedbackProps = { - error: unknown; - retry?: () => void; cached?: boolean; + error: unknown; loadingError?: boolean; + retry?: () => void; }; const BankFeedback: FC = (props) => { const { t } = useTranslation(); @@ -25,7 +27,7 @@ const BankFeedback: FC = (props) => { })} {props.retry && ( - )} diff --git a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx index 377c320..eb844d6 100644 --- a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx +++ b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.stories.tsx @@ -1,13 +1,15 @@ -import { Stack } from "@mantine/core"; import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { Stack } from "@mantine/core"; import { EntryCard } from "@wealthledger/ui"; + import { BankOperationIcon } from "./BankOperationIcon"; const meta = { - title: "Product/BankCards/OperationIcons", + args: { categoryName: "Продукты", kind: "expense" }, component: BankOperationIcon, tags: ["autodocs"], - args: { kind: "expense", categoryName: "Продукты" }, + title: "Product/BankCards/OperationIcons", } satisfies Meta; export default meta; type Story = StoryObj; @@ -40,28 +42,28 @@ export const Categories: Story = { "Хостинг и ИИ-сервисы", "Цифровые покупки", "Моя категория", - ].map((name) => ( + ].map(name => ( } + icon={} + initial="Р" + key={name} + metadata={`12.09.2026 · ${name}`} + title="Расход" + tone="negative" value="−1 250,00 ₽" valueLabel="Расход" - tone="negative" /> ))} } + initial="П" + metadata="12.09.2026" + title="Пополнение" + tone="positive" value="+15 000,00 ₽" valueLabel="Пополнение" - tone="positive" /> ), diff --git a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx index 2fac74f..5084795 100644 --- a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx +++ b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.test.tsx @@ -1,36 +1,40 @@ import { render } from "@testing-library/react"; import { expect, it } from "vitest"; + import { BankOperationIcon } from "./BankOperationIcon"; it("matches normalized category names, falls back after renaming and distinguishes operation kinds", () => { const { container, rerender } = render( - , + , ); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. const path = () => container.querySelector("path")?.getAttribute("d"); const housing = path(); - rerender(); + rerender(); expect(path()).toBe(housing); - rerender(); + rerender(); const fallback = path(); expect(fallback).not.toBe(housing); - for (const categoryName of ["Моя категория", "constructor", null]) { - rerender(); + for (const categoryName of ["Моя категория", "constructor", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null]) { + rerender(); expect(path()).toBe(fallback); } const paths = [fallback, housing]; for (const kind of ["topup", "transfer", "refund"] as const) { - rerender(); + rerender(); expect(path()).toBeTruthy(); paths.push(path()); } expect(new Set(paths).size).toBe(5); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. expect(container.querySelector("svg")).toHaveAttribute("aria-hidden", "true"); }); it("provides a distinct icon for every existing named category", () => { const { container, rerender } = render( - , + , ); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. const paths = new Set([container.querySelector("path")?.getAttribute("d")]); for (const categoryName of [ "Алкоголь", @@ -57,7 +61,8 @@ it("provides a distinct icon for every existing named category", () => { "Хостинг и ИИ-сервисы", "Цифровые покупки", ]) { - rerender(); + rerender(); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. const path = container.querySelector("path")?.getAttribute("d"); expect(path).toBeTruthy(); expect(paths.has(path), categoryName).toBe(false); diff --git a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx index ef02c96..5010587 100644 --- a/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx +++ b/src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx @@ -1,34 +1,36 @@ import type { FC } from "react"; + import { bindIconAnimation } from "@/shared/lib"; + import type { BankOperation } from "../../api/queries"; import { bankOperationAppearance } from "../../model/operation-appearance"; import classes from "./BankOperationIcon.module.css"; type BankOperationIconProps = { + categoryName?: null | string; kind: BankOperation["kind"]; - categoryName?: string | null; }; const BankOperationIcon: FC = (props) => { const icon = bankOperationAppearance(props.kind, props.categoryName); return ( ); diff --git a/src/entities/bank-card/ui/BankPeriodPicker.tsx b/src/entities/bank-card/ui/BankPeriodPicker.tsx index 288e605..8bb1403 100644 --- a/src/entities/bank-card/ui/BankPeriodPicker.tsx +++ b/src/entities/bank-card/ui/BankPeriodPicker.tsx @@ -3,34 +3,34 @@ import { type FC, useState } from "react"; import { useTranslation } from "react-i18next"; type BankPeriodPickerProps = { + onChange: (value: [null | string, null | string]) => void; period: { from: string; to: string }; - onChange: (value: [string | null, string | null]) => void; }; const BankPeriodPicker: FC = (props) => { - const { period, onChange } = props; + const { onChange, period } = props; const { t } = useTranslation(); const scope = `${period.from}-${period.to}`; const [draft, setDraft] = useState<{ scope: string; - value: [string | null, string | null]; + value: [null | string, null | string]; }>(); - const value: [string | null, string | null] = - draft?.scope === scope ? draft.value : [period.from, period.to]; + const value: [null | string, null | string] + = draft?.scope === scope ? draft.value : [period.from, period.to]; return ( { setDraft({ scope, value: next }); onChange(next); }} popoverProps={{ - returnFocus: true, middlewares: { shift: { crossAxis: true } }, + returnFocus: true, }} + type="range" + value={value} + valueFormat="DD.MM.YYYY" /> ); }; diff --git a/src/entities/bank-card/ui/BankSummary/BankSummary.stories.tsx b/src/entities/bank-card/ui/BankSummary/BankSummary.stories.tsx index d41279d..518e6b4 100644 --- a/src/entities/bank-card/ui/BankSummary/BankSummary.stories.tsx +++ b/src/entities/bank-card/ui/BankSummary/BankSummary.stories.tsx @@ -1,11 +1,54 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { BankSummaryView } from "./BankSummary.view"; const money = (value: string) => ({ currency: "RUB", value }); -const meta = { - title: "Product/BankCards/Summary", +const meta = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ +{ + args: { + data: { + cardId: null, + categories: [ + { + categoryId: "food", + categoryName: "Продукты", + expenses: money("3500"), + net: money("2500"), + refunds: money("1000"), + }, + { + categoryId: "cafe", + categoryName: "Кафе", + expenses: money("2200"), + net: money("2200"), + refunds: money("0"), + }, + { + categoryId: "taxi", + categoryName: "Такси", + expenses: money("1800"), + net: money("1800"), + refunds: money("0"), + }, + { + categoryId: "health", + categoryName: "Здоровье", + expenses: money("1000"), + net: money("1000"), + refunds: money("0"), + }, + ], + expenses: money("8500"), + month: "2026-09", + net: money("7500"), + refunds: money("1000"), + }, + error: false, + fetching: false, + loading: false, + retry: () => {}, + }, component: BankSummaryView, - tags: ["autodocs"], parameters: { docs: { description: { @@ -14,118 +57,84 @@ const meta = { }, }, }, - args: { - loading: false, - error: false, - fetching: false, - retry: () => {}, - data: { - month: "2026-09", - cardId: null, - expenses: money("8500"), - refunds: money("1000"), - net: money("7500"), - categories: [ - { - categoryId: "food", - categoryName: "Продукты", - expenses: money("3500"), - refunds: money("1000"), - net: money("2500"), - }, - { - categoryId: "cafe", - categoryName: "Кафе", - expenses: money("2200"), - refunds: money("0"), - net: money("2200"), - }, - { - categoryId: "taxi", - categoryName: "Такси", - expenses: money("1800"), - refunds: money("0"), - net: money("1800"), - }, - { - categoryId: "health", - categoryName: "Здоровье", - expenses: money("1000"), - refunds: money("0"), - net: money("1000"), - }, - ], - }, - }, -} satisfies Meta; + tags: ["autodocs"], + title: "Product/BankCards/Summary", +} +/* eslint-enable unicorn/no-null */) satisfies Meta; export default meta; type Story = StoryObj; export const Loaded: Story = { name: "Расходы по категориям" }; -export const RefundMonth: Story = { - name: "Возврат покупки прошлого месяца", - args: { - data: { - month: "2026-09", - cardId: null, - expenses: money("0"), - refunds: money("600"), - net: money("-600"), - categories: [ - { - categoryId: "shopping", - categoryName: +export const RefundMonth: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + data: { + cardId: null, + categories: [ + { + categoryId: "shopping", + categoryName: "Покупки с длинным пользовательским названием категории", - expenses: money("0"), - refunds: money("600"), - net: money("-600"), - }, - ], + expenses: money("0"), + net: money("-600"), + refunds: money("600"), + }, + ], + expenses: money("0"), + month: "2026-09", + net: money("-600"), + refunds: money("600"), + }, }, - }, -}; -export const Empty: Story = { - name: "Известные нули", - args: { - data: { - month: "2026-09", - cardId: null, - expenses: money("0"), - refunds: money("0"), - net: money("0"), - categories: [], + name: "Возврат покупки прошлого месяца", + } +/* eslint-enable unicorn/no-null */); +export const Empty: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + data: { + cardId: null, + categories: [], + expenses: money("0"), + month: "2026-09", + net: money("0"), + refunds: money("0"), + }, }, - }, -}; + name: "Известные нули", + } +/* eslint-enable unicorn/no-null */); export const Loading: Story = { - name: "Начальная загрузка", args: { data: undefined, loading: true }, + name: "Начальная загрузка", }; export const Failed: Story = { - name: "Ошибка без данных", args: { data: undefined, error: true }, + name: "Ошибка без данных", }; export const CachedError: Story = { - name: "Сохранённые суммы при ошибке обновления", args: { error: true }, + name: "Сохранённые суммы при ошибке обновления", }; -export const LongAmounts: Story = { - name: "Точный итог длиннее предела отдельного ввода", - args: { - data: { - month: "2026-09", - cardId: null, - expenses: money("184467440737095516.14"), - refunds: money("0"), - net: money("184467440737095516.14"), - categories: [ - { - categoryId: "shopping", - categoryName: "Покупки", - expenses: money("184467440737095516.14"), - refunds: money("0"), - net: money("184467440737095516.14"), - }, - ], +export const LongAmounts: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + data: { + cardId: null, + categories: [ + { + categoryId: "shopping", + categoryName: "Покупки", + expenses: money("184467440737095516.14"), + net: money("184467440737095516.14"), + refunds: money("0"), + }, + ], + expenses: money("184467440737095516.14"), + month: "2026-09", + net: money("184467440737095516.14"), + refunds: money("0"), + }, }, - }, -}; + name: "Точный итог длиннее предела отдельного ввода", + } +/* eslint-enable unicorn/no-null */); diff --git a/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx b/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx index 6208490..86df7ca 100644 --- a/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx +++ b/src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx @@ -1,24 +1,78 @@ +import type { CSSProperties, FC } from "react"; + import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { CSSProperties, FC } from "react"; import { useTranslation } from "react-i18next"; + import { formatMoney } from "@/shared/lib"; + import type { BankSummary } from "../../api/queries"; + import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon"; import classes from "./BankSummary.module.css"; +const CATEGORY_COLUMNS = 2; + type BankSummaryViewProps = { + all?: boolean; data?: BankSummary; - loading: boolean; error: boolean; fetching: boolean; + loading: boolean; retry: () => void; - all?: boolean; }; const BankSummaryView: FC = (props) => { const { t } = useTranslation(); + + function renderCategories() { + if (props.data) { + if (props.data.categories.length > 0) { + return ( +
+ {props.data.categories.map(category => ( +
+
+ + {category.categoryName} +
+
+ {formatMoney(category.net, { withZeroCents: true })} +
+
+ ))} +
+ ); + } + return ( + + {t("bank.noExpenses")} + + ); + } + if (props.loading) { + return ( + + + + + + + + ); + } + } return ( - +
{t(props.all ? "bank.allSummary" : "bank.summary")} @@ -29,49 +83,11 @@ const BankSummaryView: FC<BankSummaryViewProps> = (props) => { </Text> )} </div> - {props.data ? ( - props.data.categories.length ? ( - <dl - className={classes.categories} - style={ - { - "--category-rows": Math.ceil(props.data.categories.length / 2), - } as CSSProperties - } - > - {props.data.categories.map((category) => ( - <div className={classes.category} key={category.categoryId}> - <dt className={classes.label}> - <BankOperationIcon - kind="expense" - categoryName={category.categoryName} - /> - <span>{category.categoryName}</span> - </dt> - <dd className={classes.amount}> - {formatMoney(category.net, { withZeroCents: true })} - </dd> - </div> - ))} - </dl> - ) : ( - <Text size="sm" c="dimmed"> - {t("bank.noExpenses")} - </Text> - ) - ) : props.loading ? ( - <LoadingSkeleton label={t("bank.loading")}> - <Stack gap="sm"> - <Skeleton h={32} w="35%" /> - <Skeleton h={40} /> - <Skeleton h={40} /> - </Stack> - </LoadingSkeleton> - ) : null} + {renderCategories()} {props.error && ( <Group role="alert"> <Text>{t(props.data ? "bank.refreshError" : "bank.error")}</Text> - <Button variant="default" onClick={props.retry}> + <Button onClick={props.retry} variant="default"> {t("bank.retry")} </Button> </Group> diff --git a/src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx b/src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx index d2fc5f8..dde6ec3 100644 --- a/src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx +++ b/src/entities/bank-card/ui/CategoryManager/CategoryManager.test.tsx @@ -7,36 +7,36 @@ import { screen, waitFor, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it } from "vitest"; + import { configureAuthClient } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { server } from "@/test/server"; + import { CategoryManager } from "./CategoryManager"; describe("CategoryManager", () => { it("ignores a late reload for A while editing B and submits B's draft and version", async () => { configureAuthClient({ accessToken: () => "test", - refresh: async () => false, clear: () => {}, + refresh: () => Promise.resolve(false), }); const categories = [ - { id: "a", name: "Первая", isDefault: false, version: 1 }, - { id: "b", name: "Вторая", isDefault: false, version: 4 }, + { id: "a", isDefault: false, name: "Первая", version: 1 }, + { id: "b", isDefault: false, name: "Вторая", version: 4 }, ]; let reads = 0; - let release = () => {}; - const reloaded = new Promise<void>((resolve) => { - release = resolve; - }); - const patches: { id: unknown; body: unknown }[] = []; + + const { promise: reloaded, resolve: release } = Promise.withResolvers<void>(); + const patches: { body: unknown; id: unknown }[] = []; server.use( http.get("*/api/v1/bank-cards/categories", async () => { reads++; if (reads === 3) await reloaded; return HttpResponse.json( - categories.map((category) => + categories.map(category => category.id === "a" && reads > 1 ? { ...category, @@ -49,8 +49,8 @@ describe("CategoryManager", () => { }), http.patch( "*/api/v1/bank-cards/categories/:id", - async ({ request, params }) => { - patches.push({ id: params.id, body: await request.json() }); + async ({ params, request }) => { + patches.push({ body: await request.json(), id: params.id }); return patches.length === 1 ? HttpResponse.json( { code: "BANK_VERSION_CONFLICT" }, @@ -67,9 +67,8 @@ describe("CategoryManager", () => { </MantineProvider> </QueryClientProvider>, ); - fireEvent.click( - (await screen.findAllByRole("button", { name: "Переименовать" }))[0], - ); + const renameButtons = await screen.findAllByRole("button", { name: "Переименовать" }); + fireEvent.click(renameButtons[0]); fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); fireEvent.click( await screen.findByRole("button", { name: "Перечитать запись" }), @@ -99,8 +98,8 @@ describe("CategoryManager", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(patches).toEqual([ - { id: "a", body: { name: "Первая", version: 1 } }, - { id: "b", body: { name: "Новая вторая", version: 4 } }, + { body: { name: "Первая", version: 1 }, id: "a" }, + { body: { name: "Новая вторая", version: 4 }, id: "b" }, ]), ); }); @@ -110,15 +109,15 @@ describe("CategoryManager", () => { async (action) => { configureAuthClient({ accessToken: () => "test", - refresh: async () => false, clear: () => {}, + refresh: () => Promise.resolve(false), }); let version = 1; let writes = 0; server.use( http.get("*/api/v1/bank-cards/categories", () => HttpResponse.json([ - { id: "a", name: "Первая", isDefault: false, version }, + { id: "a", isDefault: false, name: "Первая", version }, ]), ), http.patch("*/api/v1/bank-cards/categories/a", () => { @@ -161,13 +160,13 @@ describe("CategoryManager", () => { it("rejects duplicate case-insensitive and too long names then renames default identity", async () => { configureAuthClient({ accessToken: () => "test", - refresh: async () => false, clear: () => {}, + refresh: () => Promise.resolve(false), }); let category = { id: "default", - name: "Другое", isDefault: true, + name: "Другое", version: 1, }; let creates = 0; diff --git a/src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx b/src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx index 10db669..ba2ab23 100644 --- a/src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx +++ b/src/entities/bank-card/ui/CategoryManager/CategoryManager.tsx @@ -17,7 +17,9 @@ import { } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { z } from "zod"; + import { validationMessage } from "@/shared/i18n"; + import { useBankMutations } from "../../api/mutations"; import { type ExpenseCategory, useBankCategories } from "../../api/queries"; import { BankFeedback } from "../BankFeedback"; @@ -60,44 +62,40 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { const categories = useBankCategories(); const mutation = useBankMutations(); const [editing, setEditing] = useState<ExpenseCategory>(); - const editSession = useRef(0); + const editSessionRef = useRef(0); const [error, setError] = useState<unknown>(); const [latest, setLatest] = useState<ExpenseCategory>(); - const methods = useForm<CategoryValues>({ - resolver: zodResolver( - z.object({ - name: z - .string() - .trim() - .refine( - (value) => - value.length > 0 && value.length <= MAX_CATEGORY_NAME_LENGTH, - { error: validationMessage("bank.validation.category") }, - ) - .refine( - (value) => - !categories.data?.some( - (c) => - c.id !== editing?.id && - c.name.toLocaleLowerCase("ru-RU") === - value.toLocaleLowerCase("ru-RU"), - ), - { error: validationMessage("bank.validation.duplicate") }, + const schema = z.object({ + name: z + .string() + .trim() + .refine( + value => + value.length > 0 && value.length <= MAX_CATEGORY_NAME_LENGTH, + { error: validationMessage("bank.validation.category") }, + ) + .refine( + value => + !categories.data?.some( + c => + c.id !== editing?.id + && c.name.toLocaleLowerCase("ru-RU") + === value.toLocaleLowerCase("ru-RU"), ), - }), - ), - defaultValues: { name: "" }, + { error: validationMessage("bank.validation.duplicate") }, + ), }); - const pending = !opened || methods.formState.isSubmitting; + const methods = useForm<CategoryValues>({ defaultValues: { name: "" }, resolver: zodResolver(schema) }); + const isPending = !opened || methods.formState.isSubmitting; return ( <Modal - opened={opened} + closeButtonProps={{ "aria-label": t("bank.close"), "disabled": isPending }} + closeOnClickOutside={!isPending} + closeOnEscape={!isPending} + onClose={() => !isPending && setOpened(false)} onExitTransitionEnd={props.onClose} - onClose={() => !pending && setOpened(false)} + opened={opened} title={t("bank.categories")} - closeOnClickOutside={!pending} - closeOnEscape={!pending} - closeButtonProps={{ "aria-label": t("bank.close"), disabled: pending }} > <FormProvider {...methods}> <form @@ -107,8 +105,8 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { try { if (editing) await mutation.updateCategory.mutateAsync({ - id: editing.id, body: { name: values.name, version: editing.version }, + id: editing.id, }); else { const result = await mutation.createCategory.mutateAsync({ @@ -116,24 +114,25 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { }); if (result) props.onCreated?.(result.id); } - editSession.current++; + editSessionRef.current++; setEditing(undefined); setLatest(undefined); methods.reset({ name: "" }); - } catch (failure) { - setError(failure); + } + catch (error_) { + setError(error_); } })(event); }} > - <fieldset disabled={pending} className={classes.fieldset}> + <fieldset className={classes.fieldset} disabled={isPending}> <Stack> - {categories.data?.map((category) => ( + {categories.data?.map(category => ( <Group justify="space-between" key={category.id}> <Group gap="xs"> <BankOperationIcon - kind="expense" categoryName={category.name} + kind="expense" /> <Text>{category.name}</Text> {category.isDefault && ( @@ -141,14 +140,14 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { )} </Group> <Button - variant="subtle" onClick={() => { - editSession.current++; + editSessionRef.current++; setEditing(category); methods.reset({ name: category.name }); setError(undefined); setLatest(undefined); }} + variant="subtle" > {t("bank.rename")} </Button> @@ -159,35 +158,35 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { )} {categories.isError && ( <BankFeedback - loadingError - error={categories.error} cached={Boolean(categories.data)} + error={categories.error} + loadingError retry={() => void categories.refetch()} /> )} <CategoryFields /> - {error ? ( + {!!(error) && (( <> <BankFeedback error={error} /> {editing && ( <Button - variant="default" onClick={async () => { - const session = editSession.current; + const session = editSessionRef.current; const response = await categories.refetch(); - if (session !== editSession.current) return; + if (session !== editSessionRef.current) return; if (response.error) setError(response.error); else setLatest( - response.data?.find((c) => c.id === editing.id), + response.data?.find(c => c.id === editing.id), ); }} + variant="default" > {t("bank.reloadRecord")} </Button> )} </> - ) : null} + ))} {latest && latest.id === editing?.id && ( <> <Text>{t("bank.versionHint", { details: latest.name })}</Text> @@ -203,24 +202,24 @@ const CategoryManager: FC<CategoryManagerProps> = (props) => { </> )} <Group> - <Button type="submit" loading={pending}> + <Button loading={isPending} type="submit"> {t(editing ? "bank.save" : "bank.addCategory")} </Button> {editing && ( <Button - variant="default" onClick={() => { - editSession.current++; + editSessionRef.current++; setEditing(undefined); setLatest(undefined); methods.reset({ name: "" }); setError(undefined); }} + variant="default" > {t("bank.cancel")} </Button> )} - <Button variant="default" onClick={() => setOpened(false)}> + <Button onClick={() => setOpened(false)} variant="default"> {t("bank.close")} </Button> </Group> diff --git a/src/entities/bond/api/queries.ts b/src/entities/bond/api/queries.ts index d69b753..61c0b27 100644 --- a/src/entities/bond/api/queries.ts +++ b/src/entities/bond/api/queries.ts @@ -1,5 +1,7 @@ import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api"; +const MIN_BOND_SEARCH_LENGTH = 2; + type BondPeriod = NonNullable< NonNullable< paths["/api/v1/bonds/{uid}/candles"]["get"]["parameters"]["query"] @@ -8,15 +10,6 @@ type BondPeriod = NonNullable< const BOND_STALE_TIME_MS = 30_000; -function useBondSearch(query: string) { - return useResourceQuery({ - ...apiQueryClient.queryOptions("get", "/api/v1/bonds", { - params: { query: { query } }, - }), - enabled: query.length >= 2, - staleTime: BOND_STALE_TIME_MS, - }); -} function bondQueryOptions(uid: string) { return { ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}", { @@ -25,10 +18,9 @@ function bondQueryOptions(uid: string) { staleTime: BOND_STALE_TIME_MS, }; } - function useBond(identifier: string) { - const isUid = - /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test( + const isUid + = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test( identifier, ); @@ -45,24 +37,7 @@ function useBond(identifier: string) { }); return isUid ? byUid : byTicker; } -function useBondMetrics(uid: string) { - return useResourceQuery({ - ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/metrics", { - params: { path: { uid } }, - }), - enabled: Boolean(uid), - staleTime: BOND_STALE_TIME_MS, - }); -} -function useBondQuote(uid: string) { - return useResourceQuery({ - ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/quote", { - params: { path: { uid } }, - }), - enabled: Boolean(uid), - staleTime: BOND_STALE_TIME_MS, - }); -} + function useBondCandles(uid: string, period: BondPeriod) { return useResourceQuery({ ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/candles", { @@ -72,16 +47,6 @@ function useBondCandles(uid: string, period: BondPeriod) { staleTime: BOND_STALE_TIME_MS, }); } -function useBondPosition(uid: string) { - return useResourceQuery({ - meta: { accessGroup: "brokerage" }, - ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/position", { - params: { path: { uid } }, - }), - enabled: Boolean(uid), - staleTime: BOND_STALE_TIME_MS, - }); -} function useBondCoupons(uid: string) { return useResourceQuery({ meta: { accessGroup: "brokerage" }, @@ -92,9 +57,46 @@ function useBondCoupons(uid: string) { staleTime: BOND_STALE_TIME_MS, }); } +function useBondMetrics(uid: string) { + return useResourceQuery({ + ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/metrics", { + params: { path: { uid } }, + }), + enabled: Boolean(uid), + staleTime: BOND_STALE_TIME_MS, + }); +} +function useBondPosition(uid: string) { + return useResourceQuery({ + meta: { accessGroup: "brokerage" }, + ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/position", { + params: { path: { uid } }, + }), + enabled: Boolean(uid), + staleTime: BOND_STALE_TIME_MS, + }); +} +function useBondQuote(uid: string) { + return useResourceQuery({ + ...apiQueryClient.queryOptions("get", "/api/v1/bonds/{uid}/quote", { + params: { path: { uid } }, + }), + enabled: Boolean(uid), + staleTime: BOND_STALE_TIME_MS, + }); +} +function useBondSearch(query: string) { + return useResourceQuery({ + ...apiQueryClient.queryOptions("get", "/api/v1/bonds", { + params: { query: { query } }, + }), + enabled: query.length >= MIN_BOND_SEARCH_LENGTH, + staleTime: BOND_STALE_TIME_MS, + }); +} -export { - type BondPeriod, +export { type BondPeriod, + MIN_BOND_SEARCH_LENGTH, useBond, useBondCandles, useBondCoupons, diff --git a/src/entities/bond/index.ts b/src/entities/bond/index.ts index f03ebed..1f0a2a2 100644 --- a/src/entities/bond/index.ts +++ b/src/entities/bond/index.ts @@ -1,5 +1,5 @@ -export { - type BondPeriod, +export { type BondPeriod, + MIN_BOND_SEARCH_LENGTH, useBond, useBondCandles, useBondCoupons, diff --git a/src/entities/broker-operation/api/useBrokerageOperations.test.tsx b/src/entities/broker-operation/api/useBrokerageOperations.test.tsx index fea398b..aaafda3 100644 --- a/src/entities/broker-operation/api/useBrokerageOperations.test.tsx +++ b/src/entities/broker-operation/api/useBrokerageOperations.test.tsx @@ -1,9 +1,11 @@ import { renderHook, waitFor } from "@testing-library/react"; import { describe, expect, it, vi } from "vitest"; + import { configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; + import { - brokerageOperationsQueryParams, + brokerageOperationsQueryParams as brokerageOperationsQueryParameters, useBrokerageOperations, } from "./useBrokerageOperations"; @@ -11,11 +13,11 @@ describe("useBrokerageOperations", () => { it("normalizes categories, preserves the cursor and loads a page", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); expect( - brokerageOperationsQueryParams({ + brokerageOperationsQueryParameters({ categories: ["tax", "income"], cursor: "next", }), diff --git a/src/entities/broker-operation/api/useBrokerageOperations.ts b/src/entities/broker-operation/api/useBrokerageOperations.ts index 5fc15ca..80eaf39 100644 --- a/src/entities/broker-operation/api/useBrokerageOperations.ts +++ b/src/entities/broker-operation/api/useBrokerageOperations.ts @@ -1,16 +1,16 @@ import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api"; -type OperationsEndpoint = - paths["/api/v1/brokerage-accounts/{accountId}/operations"]["get"]; - type BrokerageOperation = NonNullable< OperationsEndpoint["responses"][200]["content"]["application/json"]["data"] >["items"][number]; + type BrokerageOperationsQuery = Omit< NonNullable<OperationsEndpoint["parameters"]["query"]>, "sync" >; type OperationCategory = BrokerageOperation["category"]; +type OperationsEndpoint + = paths["/api/v1/brokerage-accounts/{accountId}/operations"]["get"]; const operationCategories = [ "trade", @@ -21,19 +21,6 @@ const operationCategories = [ "other", ] as const satisfies readonly OperationCategory[]; -function brokerageOperationsQueryParams(query: BrokerageOperationsQuery) { - return { - ...(query.instrumentUid ? { instrumentUid: query.instrumentUid } : {}), - ...(query.from ? { from: query.from } : {}), - ...(query.to ? { to: query.to } : {}), - ...(query.categories?.length - ? { categories: [...query.categories].sort() } - : {}), - ...(query.cursor ? { cursor: query.cursor } : {}), - ...(query.limit ? { limit: query.limit } : {}), - }; -} - function brokerageOperationsQueryOptions( accountId: string | undefined, query: BrokerageOperationsQuery = {}, @@ -44,12 +31,23 @@ function brokerageOperationsQueryOptions( { params: { path: { accountId: accountId ?? "" }, - query: brokerageOperationsQueryParams(query), + query: brokerageOperationsQueryParameters(query), }, }, ); } +function brokerageOperationsQueryParameters(query: BrokerageOperationsQuery) { + return { + ...(query.instrumentUid && { instrumentUid: query.instrumentUid }), + ...(query.from && { from: query.from }), + ...(query.to && { to: query.to }), + ...(query.categories?.length && { categories: query.categories.toSorted((left, right) => left.localeCompare(right)) }), + ...(query.cursor && { cursor: query.cursor }), + ...(query.limit && { limit: query.limit }), + }; +} + function useBrokerageOperations( accountId: string | undefined, query: BrokerageOperationsQuery = {}, @@ -65,8 +63,8 @@ function useBrokerageOperations( export { type BrokerageOperation, brokerageOperationsQueryOptions, - brokerageOperationsQueryParams, - type OperationCategory, + brokerageOperationsQueryParameters as brokerageOperationsQueryParams, operationCategories, + type OperationCategory, useBrokerageOperations, }; diff --git a/src/entities/broker-operation/index.ts b/src/entities/broker-operation/index.ts index f293b53..fda82ba 100644 --- a/src/entities/broker-operation/index.ts +++ b/src/entities/broker-operation/index.ts @@ -1,8 +1,8 @@ export { type BrokerageOperation, brokerageOperationsQueryOptions, - type OperationCategory, operationCategories, + type OperationCategory, useBrokerageOperations, } from "./api/useBrokerageOperations"; export { LedgerEntryRow } from "./ui/LedgerEntryRow"; diff --git a/src/entities/broker-operation/model/display.ts b/src/entities/broker-operation/model/display.ts index 13381ac..494613a 100644 --- a/src/entities/broker-operation/model/display.ts +++ b/src/entities/broker-operation/model/display.ts @@ -1,10 +1,11 @@ import { formatMoney } from "@/shared/lib"; + import type { BrokerageOperation } from "../api/useBrokerageOperations"; type PaymentPresentation = { amount: string; label: string; - tone: "positive" | "negative" | "neutral"; + tone: "negative" | "neutral" | "positive"; }; function entryLabelKey(operation: BrokerageOperation): string { @@ -15,6 +16,44 @@ function entryLabelKey(operation: BrokerageOperation): string { return `ledger.category.${operation.category}`; } +function isZeroDecimal(value: string): boolean { + return /^-?0$|^-?0\.0+$/.test(value); +} + +function operationLabelKey(type: string): string { + if ( + [ + "OPERATION_TYPE_BUY", + "OPERATION_TYPE_BUY_CARD", + "OPERATION_TYPE_BUY_MARGIN", + ].includes(type) + ) + return "ledger.operationType.buy"; + if ( + [ + "OPERATION_TYPE_SELL", + "OPERATION_TYPE_SELL_CARD", + "OPERATION_TYPE_SELL_MARGIN", + ].includes(type) + ) + return "ledger.operationType.sell"; + if ( + [ + "OPERATION_TYPE_DIV_EXT", + "OPERATION_TYPE_DIVIDEND", + "OPERATION_TYPE_DIVIDEND_TRANSFER", + ].includes(type) + ) + return "ledger.operationType.dividend"; + if (type.includes("TAX")) return "ledger.operationType.tax"; + if (type.includes("FEE")) return "ledger.operationType.fee"; + if (type === "OPERATION_TYPE_INPUT_SECURITIES") + return "ledger.operationType.input"; + if (type === "OPERATION_TYPE_OUTPUT_SECURITIES") + return "ledger.operationType.output"; + return type.startsWith("OPERATION_TYPE_TRANS_") ? "ledger.operationType.transfer" : "ledger.operationType.other"; +} + function paymentPresentation( operation: BrokerageOperation, ): PaymentPresentation { @@ -46,44 +85,4 @@ function paymentPresentation( }; } -function isZeroDecimal(value: string): boolean { - return /^-?0(?:\.0+)?$/.test(value); -} - -function operationLabelKey(type: string): string { - if ( - [ - "OPERATION_TYPE_BUY", - "OPERATION_TYPE_BUY_CARD", - "OPERATION_TYPE_BUY_MARGIN", - ].includes(type) - ) - return "ledger.operationType.buy"; - if ( - [ - "OPERATION_TYPE_SELL", - "OPERATION_TYPE_SELL_CARD", - "OPERATION_TYPE_SELL_MARGIN", - ].includes(type) - ) - return "ledger.operationType.sell"; - if ( - [ - "OPERATION_TYPE_DIVIDEND", - "OPERATION_TYPE_DIV_EXT", - "OPERATION_TYPE_DIVIDEND_TRANSFER", - ].includes(type) - ) - return "ledger.operationType.dividend"; - if (type.includes("TAX")) return "ledger.operationType.tax"; - if (type.includes("FEE")) return "ledger.operationType.fee"; - if (type === "OPERATION_TYPE_INPUT_SECURITIES") - return "ledger.operationType.input"; - if (type === "OPERATION_TYPE_OUTPUT_SECURITIES") - return "ledger.operationType.output"; - if (type.startsWith("OPERATION_TYPE_TRANS_")) - return "ledger.operationType.transfer"; - return "ledger.operationType.other"; -} - export { operationLabelKey, paymentPresentation }; diff --git a/src/entities/broker-operation/ui/LedgerEntryRow.tsx b/src/entities/broker-operation/ui/LedgerEntryRow.tsx index 8aaab15..c9efaf3 100644 --- a/src/entities/broker-operation/ui/LedgerEntryRow.tsx +++ b/src/entities/broker-operation/ui/LedgerEntryRow.tsx @@ -1,15 +1,19 @@ +import type { FC } from "react"; + import { Anchor, Group, Text } from "@mantine/core"; import { EntryCard } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import { formatDecimal, formatMoney, formatSnapshotTime, instrumentLogoUrl, } from "@/shared/lib"; + import type { BrokerageOperation } from "../api/useBrokerageOperations"; + import { operationLabelKey, paymentPresentation } from "../model/display"; type LedgerEntryRowProps = { @@ -20,55 +24,57 @@ type LedgerEntryRowProps = { const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => { const { operation } = props; const { t } = useTranslation(); - const instrument = - operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument"); + const instrument + = operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument"); const payment = paymentPresentation(operation); const metadata = [ t("ledger.occurredAt", { date: formatSnapshotTime(operation.occurredAt) }), instrument, - props.withDetails ? null : operation.account?.name, + props.withDetails ? /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null : operation.account?.name, ] .filter(Boolean) .join(" · "); return ( <EntryCard - title={operation.description || t(operationLabelKey(operation.type))} - metadata={metadata} details={ - props.withDetails ? ( - <> - <Group gap="sm"> - {operation.quantity != null ? ( - <Text size="xs" c="dimmed"> - {t("ledger.quantity", { - value: formatDecimal(operation.quantity), - })} - </Text> - ) : null} - {operation.price ? ( - <Text size="xs" c="dimmed"> - {t("ledger.price", { value: formatMoney(operation.price) })} - </Text> - ) : null} - </Group> - {operation.account ? ( - <Anchor - component={Link} - size="sm" - to={`/accounts/${encodeURIComponent(operation.account.id)}`} - > - {operation.account.name} - </Anchor> - ) : null} - </> - ) : undefined + (props.withDetails) + ? (( + <> + <Group gap="sm"> + {operation.quantity != undefined && (( + <Text c="dimmed" size="xs"> + {t("ledger.quantity", { + value: formatDecimal(operation.quantity), + })} + </Text> + ))} + {!!(operation.price) && (( + <Text c="dimmed" size="xs"> + {t("ledger.price", { value: formatMoney(operation.price) })} + </Text> + ))} + </Group> + {!!(operation.account) && (( + <Anchor + component={Link} + size="sm" + to={`/accounts/${encodeURIComponent(operation.account.id)}`} + > + {operation.account.name} + </Anchor> + ))} + </> + )) + : undefined } - initial={(instrument.trim()[0] ?? "?").toUpperCase()} imageSrc={instrumentLogoUrl(operation.logoName)} + initial={(instrument.trim()[0] ?? "?").toUpperCase()} + metadata={metadata} + title={operation.description || t(operationLabelKey(operation.type))} + tone={payment.tone} value={payment.amount} valueLabel={t(payment.label)} - tone={payment.tone} /> ); }; diff --git a/src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx b/src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx index 795a5c7..ecb44b1 100644 --- a/src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx +++ b/src/entities/brokerage-account/api/useBrokerageAccounts.test.tsx @@ -1,18 +1,20 @@ import { renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { useBrokerageAccounts } from "./useBrokerageAccounts"; describe("useBrokerageAccounts", () => { it("loads accounts through the authenticated query seam", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); server.use( http.get("*/api/v1/brokerage-accounts", () => @@ -21,8 +23,8 @@ describe("useBrokerageAccounts", () => { { id: "account-1", name: "Основной", - type: "BROKERAGE", openedOn: "2024-08-13", + type: "BROKERAGE", }, ]), ), @@ -38,8 +40,8 @@ describe("useBrokerageAccounts", () => { { id: "account-1", name: "Основной", - type: "BROKERAGE", openedOn: "2024-08-13", + type: "BROKERAGE", }, ]); }); @@ -47,8 +49,8 @@ describe("useBrokerageAccounts", () => { it("keeps the current connection snapshot after a background refetch error", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); let calls = 0; server.use( @@ -60,8 +62,8 @@ describe("useBrokerageAccounts", () => { { id: "account-1", name: "Основной", - type: "BROKERAGE", openedOn: "2024-08-13", + type: "BROKERAGE", }, ]), ) diff --git a/src/entities/brokerage-account/model/display.ts b/src/entities/brokerage-account/model/display.ts index 21982a3..7cf64ea 100644 --- a/src/entities/brokerage-account/model/display.ts +++ b/src/entities/brokerage-account/model/display.ts @@ -3,24 +3,26 @@ import type { useBrokerageAccounts, } from "../api/useBrokerageAccounts"; -type Money = NonNullable< - BrokerageAccount["portfolioSummary"] ->["totalsByCurrency"][number]; +const VISIBLE_CURRENCY_LIMIT = 2; type BrokerageAccountCard = { + account: BrokerageAccount; + positionCounts: null | { bonds: number; stocks: number }; source?: NonNullable< ReturnType<typeof useBrokerageAccounts>["meta"] >["dependencies"] extends (infer T)[] | undefined ? T : never; - account: BrokerageAccount; - positionCounts: { stocks: number; bonds: number } | null; summary: - | { state: "unavailable" } + | { remainingCurrencyCount: number; state: "available"; totals: Money[] } | { state: "empty" } - | { state: "available"; totals: Money[]; remainingCurrencyCount: number }; + | { state: "unavailable" }; }; +type Money = NonNullable< + BrokerageAccount["portfolioSummary"] +>["totalsByCurrency"][number]; + function accountTypeKey(type: BrokerageAccount["type"]) { return `accounts.types.${type}` as const; } @@ -33,34 +35,34 @@ function brokerageAccountCards( ): BrokerageAccountCard[] { return accounts.map((account) => { const source = dependencies.find( - (item) => + item => item.resourceKey === `portfolio/${encodeURIComponent(account.id)}`, ); const summary = account.portfolioSummary; if (!summary) return { - source, account, - positionCounts: null, + positionCounts: /* eslint-disable-line unicorn/no-null -- The existing formatter contract uses null for unavailable data. */ null, + source, summary: { state: "unavailable" }, }; const positionCounts = { - stocks: summary.stockPositionCount, bonds: summary.bondPositionCount, + stocks: summary.stockPositionCount, }; - if (!summary.totalsByCurrency.length) - return { source, account, positionCounts, summary: { state: "empty" } }; + if (summary.totalsByCurrency.length === 0) + return { account, positionCounts, source, summary: { state: "empty" } }; return { - source, account, positionCounts, + source, summary: { - state: "available", - totals: summary.totalsByCurrency.slice(0, 2), remainingCurrencyCount: Math.max( - summary.totalsByCurrency.length - 2, + summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT, 0, ), + state: "available", + totals: summary.totalsByCurrency.slice(0, VISIBLE_CURRENCY_LIMIT), }, }; }); diff --git a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx index 050a2c9..731a4db 100644 --- a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx +++ b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx @@ -1,34 +1,36 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { MemoryRouter } from "react-router"; + import type { BrokerageAccount } from "../../api/useBrokerageAccounts"; + import { brokerageAccountCards } from "../../model/display"; import { BrokerageAccountList } from "./BrokerageAccountList"; const syntheticAccount = { id: "storybook-account", name: "Учебный брокерский счёт", - type: "BROKERAGE", openedOn: "2025-03-15", portfolioSummary: { - stockPositionCount: 5, bondPositionCount: 12, + stockPositionCount: 5, totalsByCurrency: [ { currency: "RUB", value: "125000.50" }, { currency: "USD", value: "320" }, { currency: "EUR", value: "210" }, ], }, + type: "BROKERAGE", } satisfies BrokerageAccount; const meta = { - title: "Product/BrokerageAccountList", - component: BrokerageAccountList, - tags: ["autodocs"], + args: { accounts: brokerageAccountCards([syntheticAccount]) }, argTypes: { accounts: { control: false }, }, + component: BrokerageAccountList, decorators: [ - (Story) => ( + Story => ( <MemoryRouter initialEntries={["/accounts"]}> <Story /> </MemoryRouter> @@ -42,7 +44,8 @@ const meta = { }, }, }, - args: { accounts: brokerageAccountCards([syntheticAccount]) }, + tags: ["autodocs"], + title: "Product/BrokerageAccountList", } satisfies Meta<typeof BrokerageAccountList>; export default meta; @@ -61,37 +64,39 @@ export const Available: Story = { }, }; -export const Unavailable: Story = { - name: "Сводка недоступна", - args: { - accounts: brokerageAccountCards([ - { ...syntheticAccount, portfolioSummary: null, openedOn: null }, - ]), - }, - parameters: { - docs: { - description: { - story: +export const Unavailable: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + accounts: brokerageAccountCards([ + { ...syntheticAccount, openedOn: null, portfolioSummary: null }, + ]), + }, + name: "Сводка недоступна", + parameters: { + docs: { + description: { + story: "Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.", + }, }, }, - }, -}; + } +/* eslint-enable unicorn/no-null */); export const Empty: Story = { - name: "Нет текущих сумм", args: { accounts: brokerageAccountCards([ { ...syntheticAccount, portfolioSummary: { - totalsByCurrency: [], - stockPositionCount: 0, bondPositionCount: 0, + stockPositionCount: 0, + totalsByCurrency: [], }, }, ]), }, + name: "Нет текущих сумм", parameters: { docs: { description: { @@ -103,7 +108,6 @@ export const Empty: Story = { }; export const LongName: Story = { - name: "Длинное название счёта", args: { accounts: brokerageAccountCards([ { @@ -113,6 +117,7 @@ export const LongName: Story = { }, ]), }, + name: "Длинное название счёта", parameters: { docs: { description: { @@ -124,105 +129,107 @@ export const LongName: Story = { }; export const AccountGrid: Story = { - name: "Несколько счетов", args: { accounts: brokerageAccountCards([ { ...syntheticAccount, name: "Основной", portfolioSummary: { - totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }], - stockPositionCount: 8, bondPositionCount: 14, + stockPositionCount: 8, + totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }], }, }, { ...syntheticAccount, id: "storybook-iis", name: "Долгосрочные инвестиции", - type: "INDIVIDUAL_INVESTMENT", portfolioSummary: { - totalsByCurrency: [{ currency: "RUB", value: "480250" }], - stockPositionCount: 0, bondPositionCount: 6, + stockPositionCount: 0, + totalsByCurrency: [{ currency: "RUB", value: "480250" }], }, + type: "INDIVIDUAL_INVESTMENT", }, ]), }, + name: "Несколько счетов", }; export const UnvaluedPositions: Story = { - name: "Бумаги без текущей оценки", args: { accounts: brokerageAccountCards([ { ...syntheticAccount, portfolioSummary: { - totalsByCurrency: [], - stockPositionCount: 2, bondPositionCount: 1, + stockPositionCount: 2, + totalsByCurrency: [], }, }, ]), }, + name: "Бумаги без текущей оценки", }; export const LargeValues: Story = { - name: "Длинные суммы", args: { accounts: brokerageAccountCards([ { ...syntheticAccount, portfolioSummary: { + bondPositionCount: 105, + stockPositionCount: 21, totalsByCurrency: [ { currency: "RUB", value: "1234567890123456789.50" }, { currency: "USD", value: "-9876543210987654321.50" }, ], - stockPositionCount: 21, - bondPositionCount: 105, }, }, ]), }, + name: "Длинные суммы", }; -export const IndependentFreshness: Story = { - name: "Независимая свежесть и ошибка сводок", - args: { - accounts: brokerageAccountCards( - [ - syntheticAccount, - { - ...syntheticAccount, - id: "waiting", - name: "Новый счёт", - portfolioSummary: null, - }, - ], - [ - { - resourceKey: "portfolio/storybook-account", - dataRevision: "1", - stateVersion: "failed", - availability: "complete", - freshness: "stale", - lastSuccessfulAt: "2026-09-24T10:30:00Z", - sync: { - id: "failed", - state: "failed", - errorCode: "TBANK_UNAVAILABLE", +export const IndependentFreshness: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + accounts: brokerageAccountCards( + [ + syntheticAccount, + { + ...syntheticAccount, + id: "waiting", + name: "Новый счёт", + portfolioSummary: null, }, - }, - { - resourceKey: "portfolio/waiting", - dataRevision: "0", - stateVersion: "waiting", - availability: "missing", - freshness: "unknown", - lastSuccessfulAt: null, - sync: { id: "waiting", state: "running", errorCode: null }, - }, - ], - ), - }, -}; + ], + [ + { + availability: "complete", + dataRevision: "1", + freshness: "stale", + lastSuccessfulAt: "2026-09-24T10:30:00Z", + resourceKey: "portfolio/storybook-account", + stateVersion: "failed", + sync: { + errorCode: "TBANK_UNAVAILABLE", + id: "failed", + state: "failed", + }, + }, + { + availability: "missing", + dataRevision: "0", + freshness: "unknown", + lastSuccessfulAt: null, + resourceKey: "portfolio/waiting", + stateVersion: "waiting", + sync: { errorCode: null, id: "waiting", state: "running" }, + }, + ], + ), + }, + name: "Независимая свежесть и ошибка сводок", + } +/* eslint-enable unicorn/no-null */); diff --git a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx index ef5aa02..844e889 100644 --- a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx +++ b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx @@ -2,7 +2,9 @@ import { MantineProvider } from "@mantine/core"; import { render, screen, within } from "@testing-library/react"; import { MemoryRouter } from "react-router"; import { describe, expect, it } from "vitest"; + import { resource } from "@/test/resource"; + import { brokerageAccountCards } from "../../model/display"; import { BrokerageAccountList } from "./BrokerageAccountList"; @@ -16,36 +18,40 @@ describe("BrokerageAccountList", () => { { id: "account-1", name: "Основной", - type: "BROKERAGE", openedOn: "2024-08-13", portfolioSummary: { - stockPositionCount: 5, bondPositionCount: 12, + stockPositionCount: 5, totalsByCurrency: [ { currency: "RUB", value: "1500" }, { currency: "USD", value: "20" }, { currency: "EUR", value: "5" }, ], }, - }, - { - id: "account-2", - name: "Недоступный", type: "BROKERAGE", - openedOn: null, - portfolioSummary: null, - }, - { - id: "account-3", - name: "Пустой", - type: "BROKERAGE", - openedOn: null, - portfolioSummary: { - totalsByCurrency: [], - stockPositionCount: 2, - bondPositionCount: 0, - }, }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + id: "account-2", + name: "Недоступный", + openedOn: null, + portfolioSummary: null, + type: "BROKERAGE", + } + /* eslint-enable unicorn/no-null */), + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + id: "account-3", + name: "Пустой", + openedOn: null, + portfolioSummary: { + bondPositionCount: 0, + stockPositionCount: 2, + totalsByCurrency: [], + }, + type: "BROKERAGE", + } + /* eslint-enable unicorn/no-null */), ])} /> </MemoryRouter> @@ -65,18 +71,18 @@ describe("BrokerageAccountList", () => { expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument(); expect(screen.getAllByText("Открыть счет")).toHaveLength(3); const available = within(screen.getByRole("link", { name: /Основной/ })); - expect(available.getByText("Акции").nextElementSibling).toHaveTextContent( + expect(available.getAllByRole("definition")[0]).toHaveTextContent( "5", ); expect( - available.getByText("Облигации").nextElementSibling, + available.getAllByRole("definition")[1], ).toHaveTextContent("12"); const unvalued = within(screen.getByRole("link", { name: /Пустой/ })); - expect(unvalued.getByText("Акции").nextElementSibling).toHaveTextContent( + expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent( "2", ); expect( - unvalued.getByText("Облигации").nextElementSibling, + unvalued.getAllByRole("definition")[1], ).toHaveTextContent("0"); expect( within(screen.getByRole("link", { name: /Недоступный/ })).queryByText( @@ -88,21 +94,23 @@ describe("BrokerageAccountList", () => { it("shows portfolio summary freshness independently for each account", () => { const accounts = brokerageAccountCards( - ["fresh", "stale"].map((id) => ({ - id, - name: id, - type: "BROKERAGE" as const, - openedOn: null, - portfolioSummary: { - stockPositionCount: 1, - bondPositionCount: 0, - totalsByCurrency: [{ currency: "RUB", value: "10" }], - }, - })), + ["fresh", "stale"].map(id => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + id, + name: id, + openedOn: null, + portfolioSummary: { + bondPositionCount: 0, + stockPositionCount: 1, + totalsByCurrency: [{ currency: "RUB", value: "10" }], + }, + type: "BROKERAGE" as const, + } + /* eslint-enable unicorn/no-null */))), [ - resource(null, { resourceKey: "portfolio/fresh", freshness: "fresh" }) + resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" }) .meta, - resource(null, { resourceKey: "portfolio/stale", freshness: "stale" }) + resource(null, { freshness: "stale", resourceKey: "portfolio/stale" }) .meta, ], ); diff --git a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx index 6519be2..dd27da7 100644 --- a/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx +++ b/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx @@ -1,9 +1,13 @@ -import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import { formatDate, formatMoney, formatSnapshotTime } from "@/shared/lib"; + import type { BrokerageAccountCard } from "../../model/display"; + import { accountTypeKey } from "../../model/display"; import classes from "./BrokerageAccountList.module.css"; @@ -31,18 +35,18 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => { return ( <Stack className={classes.summary} gap={4}> - {summary.totals.map((total) => ( + {summary.totals.map(total => ( <Text className={classes.total} fw={700} key={total.currency}> {formatMoney(total)} </Text> ))} - {summary.remainingCurrencyCount ? ( + {!!(summary.remainingCurrencyCount) && (( <Text c="dimmed" size="sm"> {t("accounts.remainingCurrencies", { count: summary.remainingCurrencyCount, })} </Text> - ) : null} + ))} </Stack> ); }; @@ -53,37 +57,37 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => { return ( <SimpleGrid className={classes.list} cols={1} spacing="lg"> - {accounts.map(({ account, summary, positionCounts, source }) => ( + {accounts.map(({ account, positionCounts, source, summary }) => ( <Card - component={Link} - to={`/accounts/${account.id}`} - key={account.id} className={classes.card} + component={Link} + key={account.id} padding="xl" radius="lg" + to={`/accounts/${account.id}`} withBorder > <Stack className={classes.identity} gap="sm"> - <Group justify="space-between" wrap="nowrap" gap="sm"> - <Text className={classes.kicker} size="xs" fw={700}> + <Group gap="sm" justify="space-between" wrap="nowrap"> + <Text className={classes.kicker} fw={700} size="xs"> {t(accountTypeKey(account.type))} </Text> <svg + aria-hidden="true" className={classes.accountIcon} - viewBox="0 0 24 24" fill="none" + focusable="false" stroke="currentColor" - strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" - aria-hidden="true" - focusable="false" + strokeWidth="1.5" + viewBox="0 0 24 24" > - <rect x="3" y="5" width="18" height="15" rx="3" /> + <rect height="15" rx="3" width="18" x="3" y="5" /> <path d="M3 9h18M7 15h3M14 5V3H7a4 4 0 0 0-4 4" /> </svg> </Group> - <Text component="h2" className={classes.name} fw={700}> + <Text className={classes.name} component="h2" fw={700}> {account.name} </Text> </Stack> @@ -92,27 +96,27 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => { {t("accounts.currentValue")} </Text> <BrokerageAccountSummary summary={summary} /> - {source?.lastSuccessfulAt ? ( - <Text size="xs" c="dimmed"> + {!!(source?.lastSuccessfulAt) && (( + <Text c="dimmed" size="xs"> {t("investment.sourceTime", { date: formatSnapshotTime(source.lastSuccessfulAt), })} </Text> - ) : null} - {source?.sync.state === "running" || - source?.sync.state === "queued" ? ( - <Text size="xs" role="status"> + ))} + {(source?.sync.state === "running" + || source?.sync.state === "queued") && (( + <Text role="status" size="xs"> {t("accounts.refreshing")} </Text> - ) : null} - {source?.sync.state === "failed" ? ( + ))} + {(source?.sync.state === "failed") && (( <Text size="xs">{t("accounts.refreshError")}</Text> - ) : null} - {source?.freshness === "stale" ? ( + ))} + {(source?.freshness === "stale") && (( <Text size="xs">{t("investment.stale")}</Text> - ) : null} + ))} </Stack> - {positionCounts ? ( + {!!(positionCounts) && (( <dl className={classes.positions}> <div className={classes.stocks}> <dt>{t("accounts.stocks")}</dt> @@ -127,18 +131,18 @@ const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => { </dd> </div> </dl> - ) : null} - <Group className={classes.footer} justify="space-between" gap="sm"> - {account.openedOn ? ( + ))} + <Group className={classes.footer} gap="sm" justify="space-between"> + {!!(account.openedOn) && (( <Text c="dimmed" size="xs"> {t("accounts.openedOn", { date: formatDate(account.openedOn), })} </Text> - ) : null} - <Text component="span" className={classes.open} size="sm" fw={600}> + ))} + <Text className={classes.open} component="span" fw={600} size="sm"> {t("accounts.openAccount")} - <span className={classes.arrow} aria-hidden="true"> + <span aria-hidden="true" className={classes.arrow}> → </span> </Text> diff --git a/src/entities/brokerage-event/api/useBrokerageEvents.test.tsx b/src/entities/brokerage-event/api/useBrokerageEvents.test.tsx index 3208167..868dcc4 100644 --- a/src/entities/brokerage-event/api/useBrokerageEvents.test.tsx +++ b/src/entities/brokerage-event/api/useBrokerageEvents.test.tsx @@ -1,18 +1,20 @@ import { renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { useBrokerageEvents } from "./useBrokerageEvents"; describe("useBrokerageEvents", () => { it("does not fetch events without an account ID", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const requested = vi.fn(() => HttpResponse.json({ events: [] })); server.use( @@ -27,29 +29,31 @@ describe("useBrokerageEvents", () => { it("loads future cash events through the authenticated query seam", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); server.use( http.get("*/api/v1/brokerage-accounts/account-1/events", () => HttpResponse.json( - resource({ - accountId: "account-1", - calculatedAt: "2026-08-14T00:00:00Z", - events: [ - { - type: "dividend", - date: "2026-09-01", - dateKind: "registry", - figi: "figi-1", - instrumentUid: null, - ticker: "SBER", - displayName: "Сбер", - logoName: "sber3.png", - projectedAmount: { currency: "RUB", value: "12.34" }, - }, - ], - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + calculatedAt: "2026-08-14T00:00:00Z", + events: [ + { + date: "2026-09-01", + dateKind: "registry", + displayName: "Сбер", + figi: "figi-1", + instrumentUid: null, + logoName: "sber3.png", + projectedAmount: { currency: "RUB", value: "12.34" }, + ticker: "SBER", + type: "dividend", + }, + ], + } + /* eslint-enable unicorn/no-null */)), ), ), ); @@ -60,17 +64,19 @@ describe("useBrokerageEvents", () => { await waitFor(() => expect(result.current.isSuccess).toBe(true)); expect(result.current.data?.events).toEqual([ - { - type: "dividend", - date: "2026-09-01", - dateKind: "registry", - figi: "figi-1", - instrumentUid: null, - ticker: "SBER", - displayName: "Сбер", - logoName: "sber3.png", - projectedAmount: { currency: "RUB", value: "12.34" }, - }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + date: "2026-09-01", + dateKind: "registry", + displayName: "Сбер", + figi: "figi-1", + instrumentUid: null, + logoName: "sber3.png", + projectedAmount: { currency: "RUB", value: "12.34" }, + ticker: "SBER", + type: "dividend", + } + /* eslint-enable unicorn/no-null */), ]); }); }); diff --git a/src/entities/brokerage-event/api/useBrokerageEvents.ts b/src/entities/brokerage-event/api/useBrokerageEvents.ts index 7a2a304..ba80d6d 100644 --- a/src/entities/brokerage-event/api/useBrokerageEvents.ts +++ b/src/entities/brokerage-event/api/useBrokerageEvents.ts @@ -1,10 +1,10 @@ import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api"; -type EventsEndpoint = - paths["/api/v1/brokerage-accounts/{accountId}/events"]["get"]; type BrokerageEvent = NonNullable< EventsEndpoint["responses"][200]["content"]["application/json"]["data"] >["events"][number]; +type EventsEndpoint + = paths["/api/v1/brokerage-accounts/{accountId}/events"]["get"]; function useBrokerageEvents( accountId: string | undefined, diff --git a/src/entities/brokerage-event/ui/BrokerageEventCard.tsx b/src/entities/brokerage-event/ui/BrokerageEventCard.tsx index 18f61f7..8c15780 100644 --- a/src/entities/brokerage-event/ui/BrokerageEventCard.tsx +++ b/src/entities/brokerage-event/ui/BrokerageEventCard.tsx @@ -1,7 +1,10 @@ -import { EntryCard } from "@wealthledger/ui"; import type { FC } from "react"; + +import { EntryCard } from "@wealthledger/ui"; import { useTranslation } from "react-i18next"; + import { formatDate, formatMoney, instrumentLogoUrl } from "@/shared/lib"; + import type { BrokerageEvent } from "../api/useBrokerageEvents"; type BrokerageEventCardProps = { event: BrokerageEvent }; @@ -14,7 +17,7 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => { const metadata = [ date, - event.dateKind === "registry" ? t("events.dateKind.registry") : null, + event.dateKind === "registry" ? t("events.dateKind.registry") : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null, event.isin, event.account?.name, ] @@ -23,19 +26,19 @@ const BrokerageEventCard: FC<BrokerageEventCardProps> = (props) => { return ( <EntryCard - title={`${t(`events.type.${event.type}`)} · ${event.displayName}`} - metadata={metadata} + imageSrc={instrumentLogoUrl(event.logoName)} initial={( (event.ticker ?? event.displayName).trim()[0] ?? "?" ).toUpperCase()} - imageSrc={instrumentLogoUrl(event.logoName)} + metadata={metadata} + title={[t(`events.type.${event.type}`), event.displayName].join(" · ")} + tone="neutral" value={ event.projectedAmount ? formatMoney(event.projectedAmount) : t("events.noAmount") } valueLabel={t("events.projectedAmount")} - tone="neutral" /> ); }; diff --git a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx index 0f8f4dc..cee9b4e 100644 --- a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx +++ b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.stories.tsx @@ -1,32 +1,53 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { MemoryRouter } from "react-router"; + import type { BrokerageEvent } from "../../api/useBrokerageEvents"; + import { BrokerageEventsPreview } from "./BrokerageEventsPreview"; -const syntheticEvent = { - type: "coupon", +const syntheticEvent = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ +{ date: "2026-10-15", dateKind: "event", + displayName: "Учебные облигации", figi: null, instrumentUid: null, - ticker: "DEMO", - displayName: "Учебные облигации", - logoName: null, isin: "RU000A0JX0J2", + logoName: null, projectedAmount: { currency: "RUB", value: "850.50" }, -} satisfies BrokerageEvent; + ticker: "DEMO", + type: "coupon", +} +/* eslint-enable unicorn/no-null */) satisfies BrokerageEvent; const eventsPath = "/accounts/storybook-account/events"; const meta = { - title: "Product/RecentEvents", - component: BrokerageEventsPreview, - tags: ["autodocs"], + args: { + events: { + items: [ + syntheticEvent, + { + ...syntheticEvent, + date: "2026-11-01", + dateKind: "registry", + displayName: "Учебные технологии", + projectedAmount: { currency: "RUB", value: "1200" }, + ticker: "EXAMPLE", + type: "dividend", + }, + ], + state: "loaded", + to: eventsPath, + }, + }, argTypes: { events: { control: false }, }, + component: BrokerageEventsPreview, decorators: [ - (Story) => ( + Story => ( <MemoryRouter initialEntries={["/accounts/storybook-account"]}> <Story /> </MemoryRouter> @@ -40,24 +61,8 @@ const meta = { }, }, }, - args: { - events: { - state: "loaded", - to: eventsPath, - items: [ - syntheticEvent, - { - ...syntheticEvent, - type: "dividend", - date: "2026-11-01", - dateKind: "registry", - ticker: "EXAMPLE", - displayName: "Учебные технологии", - projectedAmount: { currency: "RUB", value: "1200" }, - }, - ], - }, - }, + tags: ["autodocs"], + title: "Product/RecentEvents", } satisfies Meta<typeof BrokerageEventsPreview>; export default meta; @@ -77,8 +82,8 @@ export const Loaded: Story = { }; export const Loading: Story = { - name: "Загрузка раздела", args: { events: { state: "loading", to: eventsPath } }, + name: "Загрузка раздела", parameters: { docs: { description: { @@ -90,8 +95,8 @@ export const Loading: Story = { }; export const Failed: Story = { - name: "Ошибка получения событий", args: { events: { state: "error", to: eventsPath } }, + name: "Ошибка получения событий", parameters: { docs: { description: { @@ -103,8 +108,8 @@ export const Failed: Story = { }; export const Empty: Story = { - name: "Нет ближайших событий", args: { events: { state: "empty", to: eventsPath } }, + name: "Нет ближайших событий", parameters: { docs: { description: { @@ -115,40 +120,44 @@ export const Empty: Story = { }, }; -export const MissingAmount: Story = { - name: "Событие без ожидаемой суммы", - args: { - events: { - state: "loaded", - to: eventsPath, - items: [{ ...syntheticEvent, projectedAmount: null }], - }, - }, - parameters: { - docs: { - description: { - story: - "Событие остаётся видимым при неизвестной ожидаемой сумме. Отсутствие оценки не подменяется нулевой выплатой.", +export const MissingAmount: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + events: { + items: [{ ...syntheticEvent, projectedAmount: null }], + state: "loaded", + to: eventsPath, }, }, - }, -}; - -export const LongEvent: Story = { - name: "Длинное название на узком экране", - args: { - events: { - state: "loaded", - to: eventsPath, - items: [ - { - ...syntheticEvent, - type: "offer", - displayName: - "Учебные облигации компании с очень длинным названием инструмента", - projectedAmount: null, + name: "Событие без ожидаемой суммы", + parameters: { + docs: { + description: { + story: + "Событие остаётся видимым при неизвестной ожидаемой сумме. Отсутствие оценки не подменяется нулевой выплатой.", }, - ], + }, }, - }, -}; + } +/* eslint-enable unicorn/no-null */); + +export const LongEvent: Story = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + args: { + events: { + items: [ + { + ...syntheticEvent, + displayName: + "Учебные облигации компании с очень длинным названием инструмента", + projectedAmount: null, + type: "offer", + }, + ], + state: "loaded", + to: eventsPath, + }, + }, + name: "Длинное название на узком экране", + } +/* eslint-enable unicorn/no-null */); diff --git a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx index b6623f3..2f4e58c 100644 --- a/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx +++ b/src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx @@ -1,26 +1,30 @@ +import type { FC } from "react"; + import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import { formatSnapshotTime } from "@/shared/lib"; + import type { BrokerageEvent } from "../../api/useBrokerageEvents"; + import { BrokerageEventCard } from "../BrokerageEventCard"; type BrokerageEventsPreviewProps = { events: BrokerageEventsPreviewState; }; -type BrokerageEventsPreviewState = - | { state: "loading" | "error" | "empty"; to: string } - | { - state: "loaded" | "partial"; - to: string; - lastSuccessfulAt?: string | null; - stale?: boolean; - refreshError?: boolean; - items: BrokerageEvent[]; - }; +type BrokerageEventsPreviewState + = | { + items: BrokerageEvent[]; + lastSuccessfulAt?: null | string; + refreshError?: boolean; + stale?: boolean; + state: "loaded" | "partial"; + to: string; + } + | { state: "empty" | "error" | "loading"; to: string }; const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => { const { events } = props; @@ -28,53 +32,51 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => { return ( <Stack gap="sm"> - {events.state === "loaded" ? ( + {(events.state === "loaded") && (( <> - {events.lastSuccessfulAt ? ( - <Text size="xs" c="dimmed"> + {!!(events.lastSuccessfulAt) && (( + <Text c="dimmed" size="xs"> {t("investment.sourceTime", { date: formatSnapshotTime(events.lastSuccessfulAt), })} </Text> - ) : null} - {events.stale ? <Text size="xs">{t("investment.stale")}</Text> : null} - {events.refreshError ? ( + ))} + {!!(events.stale) && (<Text size="xs">{t("investment.stale")}</Text>)} + {!!(events.refreshError) && (( <Text role="status">{t("accounts.refreshError")}</Text> - ) : null} + ))} </> - ) : null} - {events.state === "loading" ? ( + ))} + {(events.state === "loading") && (( <LoadingSkeleton label={t("events.recentLoading")}> - {[0, 1, 2].map((index) => ( - <Skeleton key={index} height={48} radius="sm" /> + {["first", "second", "third"].map(placeholder => ( + <Skeleton height={48} key={placeholder} radius="sm" /> ))} </LoadingSkeleton> - ) : null} - {events.state === "error" ? ( + ))} + {(events.state === "error") && (( <Alert color="red">{t("events.recentError")}</Alert> - ) : null} - {events.state === "empty" ? ( + ))} + {(events.state === "empty") && (( <Text c="dimmed">{t("events.recentEmpty")}</Text> - ) : null} - {events.state === "partial" ? ( + ))} + {(events.state === "partial") && (( <Text role="status">{t("investment.partial")}</Text> - ) : null} - {events.state === "loaded" || events.state === "partial" - ? events.items.map((event) => ( - <BrokerageEventCard - key={JSON.stringify([ - event.account?.id, - event.type, - event.date, - event.instrumentUid, - event.figi, - event.ticker, - event.logoName, - ])} - event={event} - /> - )) - : null} + ))} + {(events.state === "loaded" || events.state === "partial") && (events.items.map(event => ( + <BrokerageEventCard + event={event} + key={JSON.stringify([ + event.account?.id, + event.type, + event.date, + event.instrumentUid, + event.figi, + event.ticker, + event.logoName, + ])} + /> + )))} <Button component={Link} to={events.to} variant="subtle"> {t("events.open")} </Button> diff --git a/src/entities/income/api/useIncome.ts b/src/entities/income/api/useIncome.ts index 57f5260..96db67b 100644 --- a/src/entities/income/api/useIncome.ts +++ b/src/entities/income/api/useIncome.ts @@ -1,24 +1,11 @@ import { apiQueryClient, type paths, useResourceQuery } from "@/shared/api"; -type IncomeSummary = NonNullable< - paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"] ->; type IncomeAnalytics = NonNullable< paths["/api/v1/brokerage-accounts/{accountId}/income-analytics"]["get"]["responses"][200]["content"]["application/json"]["data"] >; - -function useIncomeSummary(accountId: string | undefined) { - return useResourceQuery({ - meta: { accessGroup: "brokerage" }, - ...apiQueryClient.queryOptions( - "get", - "/api/v1/brokerage-accounts/{accountId}/income-summary", - { params: { path: { accountId: accountId ?? "" } } }, - ), - enabled: Boolean(accountId), - staleTime: 30_000, - }); -} +type IncomeSummary = NonNullable< + paths["/api/v1/brokerage-accounts/{accountId}/income-summary"]["get"]["responses"][200]["content"]["application/json"]["data"] +>; function useIncomeAnalytics( accountId: string | undefined, @@ -41,6 +28,19 @@ function useIncomeAnalytics( }); } +function useIncomeSummary(accountId: string | undefined) { + return useResourceQuery({ + meta: { accessGroup: "brokerage" }, + ...apiQueryClient.queryOptions( + "get", + "/api/v1/brokerage-accounts/{accountId}/income-summary", + { params: { path: { accountId: accountId ?? "" } } }, + ), + enabled: Boolean(accountId), + staleTime: 30_000, + }); +} + export { type IncomeAnalytics, type IncomeSummary, diff --git a/src/entities/portfolio/api/resource-lifecycle.test.tsx b/src/entities/portfolio/api/resource-lifecycle.test.tsx index 28b829e..bc64aff 100644 --- a/src/entities/portfolio/api/resource-lifecycle.test.tsx +++ b/src/entities/portfolio/api/resource-lifecycle.test.tsx @@ -1,10 +1,12 @@ import { act, renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { apiClient, configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { type Portfolio, portfolioQueryOptions, @@ -12,25 +14,25 @@ import { } from "./usePortfolio"; const snapshot: Portfolio = { - positions: [], - totalsByCurrency: [{ currency: "RUB", value: "123.000000001" }], cashBalances: [], - structure: { currencies: [], unvaluedCategories: [] }, - lastSuccessfulAt: "2026-08-14T00:00:00Z", isStale: false, + lastSuccessfulAt: "2026-08-14T00:00:00Z", + positions: [], + structure: { currencies: [], unvaluedCategories: [] }, + totalsByCurrency: [{ currency: "RUB", value: "123.000000001" }], }; function auth() { configureAuthClient({ accessToken: () => "synthetic", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); } describe("persistent resource query lifecycle", () => { it("observes into the canonical cache and rejects an old notified state before accepting the current one", async () => { auth(); - const modes: (string | null)[] = []; + const modes: (null | string)[] = []; let observations = 0; server.use( http.get( @@ -47,16 +49,17 @@ describe("persistent resource query lifecycle", () => { }, ), ); - const { wrapper, queryClient } = createQueryWrapper(); + const { queryClient, wrapper } = createQueryWrapper(); const { result } = renderHook(() => usePortfolio("a"), { wrapper }); await waitFor(() => expect(result.current.isSuccess).toBe(true)); await act(() => result.current.observe("new")); await waitFor(() => expect(result.current.meta?.stateVersion).toBe("new")); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe", "observe"]); expect(queryClient.getQueryCache().getAll()).toHaveLength(1); expect( queryClient.getQueryData(portfolioQueryOptions("a").queryKey), - ).toMatchObject({ meta: { stateVersion: "new" }, data: snapshot }); + ).toMatchObject({ data: snapshot, meta: { stateVersion: "new" } }); }); it("does not convert missing or failed source data to empty financial success", async () => { auth(); @@ -65,9 +68,9 @@ describe("persistent resource query lifecycle", () => { HttpResponse.json( resource(null, { sync: { + errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed", - errorCode: "TBANK_UNAVAILABLE", }, }), ), @@ -82,20 +85,22 @@ describe("persistent resource query lifecycle", () => { expect(result.current.status).toBe("pending"); expect(result.current.isPending).toBe(true); expect(result.current.isLoading).toBe(false); - expect(result.current.transport).toEqual({ - status: "success", - fetchStatus: "idle", - error: null, - }); + expect(result.current.transport).toEqual((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + error: null, + fetchStatus: "idle", + status: "success", + } + /* eslint-enable unicorn/no-null */)); expect(result.current.meta?.availability).toBe("missing"); }); it("keeps the refetch envelope while exposing the refreshed resource payload", async () => { auth(); - let ready = false; + let isReady = false; const refreshed = resource(snapshot, { stateVersion: "ready" }); server.use( http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => - HttpResponse.json(ready ? refreshed : resource(null)), + HttpResponse.json(isReady ? refreshed : resource(null)), ), ); const { result } = renderHook(() => usePortfolio("a"), { @@ -109,7 +114,7 @@ describe("persistent resource query lifecycle", () => { expect(missing.status).toBe("success"); expect(missing.data).toEqual(resource(null)); expect(missing.data?.data).toBeNull(); - ready = true; + isReady = true; const loaded = await result.current.refetch(); expect(loaded.data).toEqual(refreshed); expect(loaded.data?.data?.totalsByCurrency).toEqual( @@ -124,10 +129,8 @@ describe("persistent resource query lifecycle", () => { }); it("rejects a late ordinary response when an observe response for that resource arrived first", async () => { auth(); - let release!: () => void; - const blocked = new Promise<void>((resolve) => { - release = resolve; - }); + + const { promise: blocked, resolve: release } = Promise.withResolvers<void>(); server.use( http.get( "*/api/v1/brokerage-accounts/:accountId/portfolio", @@ -151,19 +154,15 @@ describe("persistent resource query lifecycle", () => { }); it("clears private snapshots on confirmed access loss and fences another pending success", async () => { auth(); - let denied = false; - let release!: () => void; - const blocked = new Promise<void>((resolve) => { - release = resolve; - }); + let isDenied = false; + + const { promise: blocked, resolve: release } = Promise.withResolvers<void>(); server.use( http.get( "*/api/v1/brokerage-accounts/:accountId/portfolio", async ({ params }) => { if (params.accountId === "b") await blocked; - if (params.accountId === "a" && denied) - return HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 }); - return HttpResponse.json(resource(snapshot)); + return isDenied && params.accountId === "a" ? HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 }) : HttpResponse.json(resource(snapshot)); }, ), ); @@ -173,7 +172,7 @@ describe("persistent resource query lifecycle", () => { { wrapper }, ); await waitFor(() => expect(result.current.a.data).toEqual(snapshot)); - denied = true; + isDenied = true; await act(() => result.current.a.refetch()); await waitFor(() => expect(result.current.a.data).toBeUndefined()); await act(async () => { diff --git a/src/entities/portfolio/api/usePortfolio.test.tsx b/src/entities/portfolio/api/usePortfolio.test.tsx index 9c580aa..6f21b24 100644 --- a/src/entities/portfolio/api/usePortfolio.test.tsx +++ b/src/entities/portfolio/api/usePortfolio.test.tsx @@ -1,18 +1,20 @@ import { renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { usePortfolio } from "./usePortfolio"; describe("usePortfolio", () => { it("loads the account portfolio", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const { result } = renderHook(() => usePortfolio("account-1"), { wrapper: createQueryWrapper().wrapper, @@ -25,8 +27,8 @@ describe("usePortfolio", () => { it("keeps the current connection snapshot after a background refetch error", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); let calls = 0; server.use( @@ -35,12 +37,12 @@ describe("usePortfolio", () => { return calls === 1 ? HttpResponse.json( resource({ - lastSuccessfulAt: "2026-08-14T00:00:00Z", + cashBalances: [], isStale: false, - totalsByCurrency: [], + lastSuccessfulAt: "2026-08-14T00:00:00Z", positions: [], structure: { currencies: [], unvaluedCategories: [] }, - cashBalances: [], + totalsByCurrency: [], }), ) : HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }); diff --git a/src/entities/portfolio/model/display.test.ts b/src/entities/portfolio/model/display.test.ts index 045c4cf..1e609b7 100644 --- a/src/entities/portfolio/model/display.test.ts +++ b/src/entities/portfolio/model/display.test.ts @@ -1,4 +1,5 @@ import { describe, expect, it } from "vitest"; + import { formatShare } from "./display"; describe("portfolio display helpers", () => { diff --git a/src/entities/portfolio/model/display.ts b/src/entities/portfolio/model/display.ts index f4938e8..c84b1b8 100644 --- a/src/entities/portfolio/model/display.ts +++ b/src/entities/portfolio/model/display.ts @@ -1,17 +1,18 @@ import type { Portfolio } from "../api/usePortfolio"; +const PERCENT_SCALE = 100; + type Money = Portfolio["totalsByCurrency"][number]; function formatShare( numerator: Money | null, denominator: Money | null, -): string | null { - if (!numerator || !denominator) return null; +): null | string { + if (!numerator || !denominator) return /* eslint-disable-line unicorn/no-null -- The existing formatter contract uses null for unavailable data. */ null; const total = Number(denominator.value); - if (!Number.isFinite(total) || total <= 0) return null; - // biome-ignore lint/style/noMagicNumbers: obvious conversion of a ratio to percent. - const percent = (Number(numerator.value) / total) * 100; - if (!Number.isFinite(percent)) return null; + if (!Number.isFinite(total) || total <= 0) return /* eslint-disable-line unicorn/no-null -- The existing formatter contract uses null for unavailable data. */ null; + const percent = (Number(numerator.value) / total) * PERCENT_SCALE; + if (!Number.isFinite(percent)) return /* eslint-disable-line unicorn/no-null -- The existing formatter contract uses null for unavailable data. */ null; const rounded = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1, }).format(percent); diff --git a/src/entities/stock/api/queries.ts b/src/entities/stock/api/queries.ts index 26081ab..fa52bbc 100644 --- a/src/entities/stock/api/queries.ts +++ b/src/entities/stock/api/queries.ts @@ -6,6 +6,8 @@ import { useResourceQuery, } from "@/shared/api"; +const MIN_STOCK_SEARCH_LENGTH = 2; + type StockPeriod = NonNullable< NonNullable< paths["/api/v1/stocks/{uid}/candles"]["get"]["parameters"]["query"] @@ -14,15 +16,6 @@ type StockPeriod = NonNullable< const STOCK_STALE_TIME_MS = 30_000; -function useStockSearch(query: string) { - return useResourceQuery({ - ...apiQueryClient.queryOptions("get", "/api/v1/stocks", { - params: { query: { query } }, - }), - enabled: query.length >= 2, - staleTime: STOCK_STALE_TIME_MS, - }); -} function stockQueryOptions(uid: string) { return { ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}", { @@ -31,21 +24,9 @@ function stockQueryOptions(uid: string) { staleTime: STOCK_STALE_TIME_MS, }; } - -function useStocks(uids: string[]) { - const uniqueUids = [...new Set(uids)]; - const queries = useAuthenticatedQueries(uniqueUids.map(stockQueryOptions)); - return new Map( - queries.map((query, index) => [ - uniqueUids[index], - unwrapResourceResult(query).data, - ]), - ); -} - function useStock(identifier: string) { - const isUid = - /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test( + const isUid + = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test( identifier, ); @@ -62,15 +43,7 @@ function useStock(identifier: string) { }); return isUid ? byUid : byTicker; } -function useStockQuote(uid: string) { - return useResourceQuery({ - ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/quote", { - params: { path: { uid } }, - }), - enabled: Boolean(uid), - staleTime: STOCK_STALE_TIME_MS, - }); -} + function useStockCandles(uid: string, period: StockPeriod) { return useResourceQuery({ ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/candles", { @@ -80,16 +53,7 @@ function useStockCandles(uid: string, period: StockPeriod) { staleTime: STOCK_STALE_TIME_MS, }); } -function useStockPosition(uid: string) { - return useResourceQuery({ - meta: { accessGroup: "brokerage" }, - ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/position", { - params: { path: { uid } }, - }), - enabled: Boolean(uid), - staleTime: STOCK_STALE_TIME_MS, - }); -} + function useStockCompany(uid: string) { return useResourceQuery({ ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/company", { @@ -109,8 +73,46 @@ function useStockDividends(uid: string) { staleTime: STOCK_STALE_TIME_MS, }); } +function useStockPosition(uid: string) { + return useResourceQuery({ + meta: { accessGroup: "brokerage" }, + ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/position", { + params: { path: { uid } }, + }), + enabled: Boolean(uid), + staleTime: STOCK_STALE_TIME_MS, + }); +} +function useStockQuote(uid: string) { + return useResourceQuery({ + ...apiQueryClient.queryOptions("get", "/api/v1/stocks/{uid}/quote", { + params: { path: { uid } }, + }), + enabled: Boolean(uid), + staleTime: STOCK_STALE_TIME_MS, + }); +} +function useStocks(uids: string[]) { + const uniqueUids = [...new Set(uids)]; + const queries = useAuthenticatedQueries(uniqueUids.map(uniqueUid => stockQueryOptions(uniqueUid))); + return new Map( + queries.map((query, index) => [ + /* eslint-disable-line security/detect-object-injection -- This is a positional index into the local array, not a user-supplied object key. */ uniqueUids[index], + unwrapResourceResult(query).data, + ]), + ); +} +function useStockSearch(query: string) { + return useResourceQuery({ + ...apiQueryClient.queryOptions("get", "/api/v1/stocks", { + params: { query: { query } }, + }), + enabled: query.length >= MIN_STOCK_SEARCH_LENGTH, + staleTime: STOCK_STALE_TIME_MS, + }); +} -export { +export { MIN_STOCK_SEARCH_LENGTH, type StockPeriod, useStock, useStockCandles, @@ -118,6 +120,6 @@ export { useStockDividends, useStockPosition, useStockQuote, - useStockSearch, useStocks, + useStockSearch, }; diff --git a/src/entities/stock/index.ts b/src/entities/stock/index.ts index 4c4483d..f4ddf46 100644 --- a/src/entities/stock/index.ts +++ b/src/entities/stock/index.ts @@ -1,4 +1,4 @@ -export { +export { MIN_STOCK_SEARCH_LENGTH, type StockPeriod, useStock, useStockCandles, @@ -6,6 +6,6 @@ export { useStockDividends, useStockPosition, useStockQuote, - useStockSearch, useStocks, + useStockSearch, } from "./api/queries"; diff --git a/src/features/auth/model/auth-context.ts b/src/features/auth/model/auth-context.ts index 66f4a5f..5446045 100644 --- a/src/features/auth/model/auth-context.ts +++ b/src/features/auth/model/auth-context.ts @@ -1,23 +1,24 @@ -import { createContext, useContext } from "react"; +import { createContext, use } from "react"; + import type { paths } from "@/shared/api"; -type User = - paths["/api/v1/auth/me"]["get"]["responses"][200]["content"]["application/json"]; type AuthContextValue = { - user: User | null; - accessToken: string | null; - ready: boolean; + accessToken: string | undefined; login: (email: string, password: string) => Promise<void>; - register: (email: string, password: string) => Promise<void>; logout: () => Promise<void>; + ready: boolean; refresh: () => Promise<boolean>; + register: (email: string, password: string) => Promise<void>; + user: undefined | User; }; -const AuthContext = createContext<AuthContextValue | null>(null); +type User + = paths["/api/v1/auth/me"]["get"]["responses"][200]["content"]["application/json"]; +const AuthContext = createContext<AuthContextValue | undefined>(undefined); function useAuth() { - const context = useContext(AuthContext); + const context = use(AuthContext); if (!context) throw new Error("AuthProvider is required"); return context; } -export { AuthContext, type User, useAuth }; +export { AuthContext, useAuth, type User }; diff --git a/src/features/auth/model/auth.test.tsx b/src/features/auth/model/auth.test.tsx index a4e532a..d026447 100644 --- a/src/features/auth/model/auth.test.tsx +++ b/src/features/auth/model/auth.test.tsx @@ -1,12 +1,15 @@ +import type { FC, PropsWithChildren } from "react"; + import { QueryClientProvider, useQueryClient } from "@tanstack/react-query"; import { act, renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC, PropsWithChildren } from "react"; +import { http, HttpResponse } from "msw"; import { describe, expect, it } from "vitest"; + import { apiClient, apiQueryClient, useAuthenticatedQuery } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { AuthProvider } from "./auth"; import { useAuth } from "./auth-context"; @@ -14,14 +17,22 @@ const bankCardsKey = apiQueryClient.queryOptions("get", "/api/v1/bank-cards", { params: { query: { includeArchived: "false" } }, }).queryKey; +function createAuthWrapper(queryClient: ReturnType<typeof createTestQueryClient>): FC<PropsWithChildren> { + return props => ( + <QueryClientProvider client={queryClient}> + <AuthProvider>{props.children}</AuthProvider> + </QueryClientProvider> + ); +} + describe("AuthProvider", () => { it("authorizes requests after restoring the initial session", async () => { - let authorization: string | null = null; + let authorization: null | string = /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null; server.use( http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: "restored-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }), ), http.get("*/api/v1/brokerage-accounts", ({ request }) => { @@ -30,16 +41,8 @@ describe("AuthProvider", () => { }), ); const queryClient = createTestQueryClient(); - const wrapper: FC<PropsWithChildren> = (props) => { - const { children } = props; - - return ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); - }; - const { result, rerender } = renderHook( + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); + const { rerender, result } = renderHook( () => ({ ...useAuth(), queryClient: useQueryClient() }), { wrapper }, ); @@ -61,21 +64,13 @@ describe("AuthProvider", () => { const queryClient = createTestQueryClient(); queryClient.setQueryData(["cached-query"], { value: "stale" }); queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]); - const wrapper: FC<PropsWithChildren> = (props) => { - const { children } = props; - - return ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); - }; + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook(() => useAuth(), { wrapper }); await waitFor(() => expect(result.current.ready).toBe(true)); - expect(result.current.user).toBeNull(); - expect(result.current.accessToken).toBeNull(); + expect(result.current.user).toBeUndefined(); + expect(result.current.accessToken).toBeUndefined(); expect(queryClient.getQueryData(["cached-query"])).toBeUndefined(); expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined(); }); @@ -88,7 +83,7 @@ describe("AuthProvider", () => { return refreshCalls === 1 ? HttpResponse.json({ accessToken: "restored-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }) : HttpResponse.error(); }), @@ -99,15 +94,7 @@ describe("AuthProvider", () => { const queryClient = createTestQueryClient(); queryClient.setQueryData(["cached-query"], { value: "stale" }); queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]); - const wrapper: FC<PropsWithChildren> = (props) => { - const { children } = props; - - return ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); - }; + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook(() => useAuth(), { wrapper }); await waitFor(() => @@ -116,8 +103,8 @@ describe("AuthProvider", () => { const response = await apiClient.GET("/api/v1/brokerage-accounts"); expect(response.response.status).toBe(401); - await waitFor(() => expect(result.current.user).toBeNull()); - expect(result.current.accessToken).toBeNull(); + await waitFor(() => expect(result.current.user).toBeUndefined()); + expect(result.current.accessToken).toBeUndefined(); expect(queryClient.getQueryData(["cached-query"])).toBeUndefined(); expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined(); }); @@ -127,7 +114,7 @@ describe("AuthProvider", () => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: "test-token", - user: { id: "user-1", email: "user@example.com" }, + user: { email: "user@example.com", id: "user-1" }, }), ), ); @@ -147,14 +134,7 @@ describe("AuthProvider", () => { }); queryClient.setQueryData(portfolioKey, { source: "current-connection" }); queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]); - const wrapper: FC<PropsWithChildren> = (props) => { - const { children } = props; - return ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); - }; + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook(() => useAuth(), { wrapper }); await waitFor(() => expect(result.current.accessToken).toBe("test-token")); @@ -163,8 +143,8 @@ describe("AuthProvider", () => { ]); await act(() => result.current.logout()); - expect(result.current.user).toBeNull(); - expect(result.current.accessToken).toBeNull(); + expect(result.current.user).toBeUndefined(); + expect(result.current.accessToken).toBeUndefined(); expect(queryClient.getQueryData(statusKey)).toBeUndefined(); expect(queryClient.getQueryData(portfolioKey)).toBeUndefined(); expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined(); @@ -177,10 +157,7 @@ describe("AuthProvider", () => { ])( "serializes late refresh (failure=%s, login=%s)", async (failure, loginAfterLogout) => { - let release!: () => void; - const pending = new Promise<void>((resolve) => { - release = resolve; - }); + const { promise: pending, resolve: release } = Promise.withResolvers<void>(); let calls = 0; const order: string[] = []; server.use( @@ -194,7 +171,7 @@ describe("AuthProvider", () => { ? HttpResponse.error() : HttpResponse.json({ accessToken: "a", - user: { id: "a", email: "a@example.com" }, + user: { email: "a@example.com", id: "a" }, }); }), http.post("*/api/v1/auth/logout", () => { @@ -205,7 +182,7 @@ describe("AuthProvider", () => { order.push("login-cookie"); return HttpResponse.json({ accessToken: "b", - user: { id: "b", email: "b@example.com" }, + user: { email: "b@example.com", id: "b" }, }); }), http.get("*/api/v1/brokerage-accounts", () => @@ -213,22 +190,20 @@ describe("AuthProvider", () => { ), ); const queryClient = createTestQueryClient(); - const wrapper: FC<PropsWithChildren> = ({ children }) => ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook(() => useAuth(), { wrapper }); await waitFor(() => expect(result.current.ready).toBe(true)); const oldRequest = apiClient .GET("/api/v1/brokerage-accounts") - .catch(() => null); + + // eslint-disable-next-line unicorn/prefer-await -- Attach rejection handling before releasing the deliberately pending query. + .catch(() => {}); await waitFor(() => expect(order).toContain("refresh-start")); let logout!: Promise<void>; act(() => { logout = result.current.logout(); }); - await waitFor(() => expect(result.current.user).toBeNull()); + await waitFor(() => expect(result.current.user).toBeUndefined()); let login!: Promise<void>; act(() => { login = loginAfterLogout @@ -239,8 +214,8 @@ describe("AuthProvider", () => { release(); await Promise.all([oldRequest, logout, login]); }); - expect(result.current.user?.id ?? null).toBe( - loginAfterLogout ? "b" : null, + expect(result.current.user?.id ?? /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null).toBe( + loginAfterLogout ? "b" : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, ); expect(order).toEqual([ "refresh-start", @@ -257,16 +232,12 @@ describe("AuthProvider", () => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: identity, - user: { id: identity, email: `${identity}@example.com` }, + user: { email: `${identity}@example.com`, id: identity }, }), ), ); const queryClient = createTestQueryClient(); - const wrapper: FC<PropsWithChildren> = ({ children }) => ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{children}</AuthProvider> - </QueryClientProvider> - ); + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook(() => useAuth(), { wrapper }); await waitFor(() => expect(result.current.ready).toBe(true)); queryClient.setQueryData(bankCardsKey, [{ id: "a-card" }]); @@ -274,14 +245,16 @@ describe("AuthProvider", () => { expect(queryClient.getQueryData(bankCardsKey)).toEqual([{ id: "a-card" }]); let release!: (value: string) => void; const pending = queryClient - .fetchQuery({ + .query({ + queryFn: () => { + const deferred = Promise.withResolvers<string>(); + release = deferred.resolve; + return deferred.promise; + }, queryKey: ["pending-finance"], - queryFn: () => - new Promise<string>((resolve) => { - release = resolve; - }), }) - .catch(() => null); + // eslint-disable-next-line unicorn/prefer-await -- Attach rejection handling before releasing the deliberately pending query. + .catch(() => {}); identity = "b"; await act(() => result.current.refresh()); release("a-data"); @@ -296,7 +269,7 @@ describe("AuthProvider", () => { http.post("*/api/v1/auth/refresh", () => HttpResponse.json({ accessToken: identity, - user: { id: identity, email: `${identity}@example.com` }, + user: { email: `${identity}@example.com`, id: identity }, }), ), http.get("*/api/v1/bank-cards", () => @@ -304,11 +277,7 @@ describe("AuthProvider", () => { ), ); const queryClient = createTestQueryClient(); - const wrapper: FC<PropsWithChildren> = (props) => ( - <QueryClientProvider client={queryClient}> - <AuthProvider>{props.children}</AuthProvider> - </QueryClientProvider> - ); + const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient); const { result } = renderHook( () => ({ auth: useAuth(), diff --git a/src/features/auth/model/auth.tsx b/src/features/auth/model/auth.tsx index 4f7c160..da42a57 100644 --- a/src/features/auth/model/auth.tsx +++ b/src/features/auth/model/auth.tsx @@ -1,13 +1,16 @@ -import { useQueryClient } from "@tanstack/react-query"; import type { FC, PropsWithChildren } from "react"; + +import { useQueryClient } from "@tanstack/react-query"; import { useCallback, useEffect, useRef, useState } from "react"; + import { apiClient, configureAuthClient, type paths } from "@/shared/api"; + import { AuthContext, type User } from "./auth-context"; -type Authentication = - paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"]; -type Credentials = - paths["/api/v1/auth/login"]["post"]["requestBody"]["content"]["application/json"]; +type Authentication + = paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"]; +type Credentials + = paths["/api/v1/auth/login"]["post"]["requestBody"]["content"]["application/json"]; async function request( path: "/api/v1/auth/login" | "/api/v1/auth/register", email: string, @@ -24,32 +27,34 @@ async function request( const AuthProvider: FC<PropsWithChildren> = (props) => { const { children } = props; const queryClient = useQueryClient(); - const [user, setUser] = useState<User | null>(null); - const [accessToken, setAccessToken] = useState<string | null>(null); - const accessTokenRef = useRef<string | null>(null); + 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); - const generation = useRef(0); - const userRef = useRef<User | null>(null); - const authQueue = useRef<Promise<unknown>>(Promise.resolve()); - const refreshPromise = useRef<Promise<boolean> | null>(null); + const generationRef = useRef(0); + const userRef = useRef<undefined | User>(undefined); + const authQueueRef = useRef<Promise<unknown>>(Promise.resolve()); + const refreshPromiseRef = useRef<Promise<boolean> | undefined>(undefined); // Cookie-writing requests share ordering, including across tabs with Web Locks. const serialize = useCallback(<T,>(run: () => Promise<T>): Promise<T> => { - const next = authQueue.current.then(async () => + // eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering. + const next = authQueueRef.current.then(async () => "locks" in navigator ? navigator.locks.request("wealth-ledger-refresh", run) : run(), ); - authQueue.current = next.catch(() => undefined); + // eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering. + authQueueRef.current = next.catch(() => {}); return next; }, []); const applyAuthentication = useCallback( (authentication: Authentication) => { - const changedIdentity = - userRef.current && userRef.current.id !== authentication.user.id; + const changedIdentity + = userRef.current && userRef.current.id !== authentication.user.id; accessTokenRef.current = authentication.accessToken; if (changedIdentity) { - generation.current += 1; + generationRef.current += 1; queryClient.removeQueries({ type: "inactive" }); queryClient.getMutationCache().clear(); void queryClient.resetQueries(); @@ -61,36 +66,38 @@ const AuthProvider: FC<PropsWithChildren> = (props) => { [queryClient], ); const clearSession = useCallback(() => { - generation.current += 1; - userRef.current = null; - setUser(null); - setAccessToken(null); - accessTokenRef.current = null; + generationRef.current += 1; + userRef.current = undefined; + setUser(undefined); + setAccessToken(undefined); + accessTokenRef.current = undefined; queryClient.clear(); }, [queryClient]); const refresh = useCallback((): Promise<boolean> => { - if (refreshPromise.current) return refreshPromise.current; - const started = generation.current; + if (refreshPromiseRef.current) return refreshPromiseRef.current; + const started = generationRef.current; const pending = serialize(async () => { - if (started !== generation.current) return false; + if (started !== generationRef.current) return false; try { const { data } = await apiClient.POST("/api/v1/auth/refresh"); - if (started !== generation.current) return false; + if (started !== generationRef.current) return false; if (!data) { clearSession(); return false; } applyAuthentication(data); return true; - } catch { - if (started === generation.current) clearSession(); + } + catch { + if (started === generationRef.current) clearSession(); return false; } + // eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering. }).finally(() => { - if (refreshPromise.current === pending) refreshPromise.current = null; + if (refreshPromiseRef.current === pending) refreshPromiseRef.current = undefined; }); - refreshPromise.current = pending; + refreshPromiseRef.current = pending; return pending; }, [applyAuthentication, clearSession, serialize]); @@ -104,10 +111,10 @@ const AuthProvider: FC<PropsWithChildren> = (props) => { password: string, ) { clearSession(); - const started = generation.current; + const started = generationRef.current; await serialize(async () => { const authentication = await request(path, email, password); - if (started === generation.current) applyAuthentication(authentication); + if (started === generationRef.current) applyAuthentication(authentication); }); } @@ -121,25 +128,25 @@ const AuthProvider: FC<PropsWithChildren> = (props) => { useEffect(() => { configureAuthClient({ accessToken: () => accessTokenRef.current, - generation: () => generation.current, - refresh, clear: clearSession, + generation: () => generationRef.current, + refresh, }); }); - useEffect(() => () => configureAuthClient(null), []); + useEffect(() => () => configureAuthClient(), []); return ( <AuthContext value={{ - user, accessToken, - ready, login: (email, password) => authenticate("/api/v1/auth/login", email, password), + logout, + ready, + refresh, register: (email, password) => authenticate("/api/v1/auth/register", email, password), - logout, - refresh, + user, }} > {children} diff --git a/src/features/auth/model/validation.ts b/src/features/auth/model/validation.ts index 6b7877d..77d6675 100644 --- a/src/features/auth/model/validation.ts +++ b/src/features/auth/model/validation.ts @@ -1,6 +1,9 @@ import { z } from "zod"; + import { validationMessage } from "@/shared/i18n"; +const EMAIL_PART_COUNT = 2; + const ASCII_SPACE = 32; const ASCII_DELETE = 127; const MAX_EMAIL_LENGTH = 254; @@ -8,10 +11,11 @@ const MIN_PASSWORD_BYTES = 12; const MAX_PASSWORD_BYTES = 72; function isEmailCharacterInvalid(character: string): boolean { + const codePoint = character.codePointAt(0); return ( - /\s/.test(character) || - character.charCodeAt(0) < ASCII_SPACE || - character.charCodeAt(0) === ASCII_DELETE + /\s/.test(character) + || (codePoint !== undefined && codePoint < ASCII_SPACE) + || codePoint === ASCII_DELETE ); } @@ -21,18 +25,18 @@ const email = z .toLowerCase() .max(MAX_EMAIL_LENGTH) .refine( - (value) => - value.split("@").length === 2 && - value.split("@").every(Boolean) && - !value.split("").some(isEmailCharacterInvalid), + value => + value.split("@").length === EMAIL_PART_COUNT + && value.split("@").every(Boolean) + && value.split("").every(element => !isEmailCharacterInvalid(element)), { error: validationMessage("auth.validation.invalidEmail") }, ); const password = z .string() .refine( - (value) => - new TextEncoder().encode(value).length >= MIN_PASSWORD_BYTES && - new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES, + value => + new TextEncoder().encode(value).length >= MIN_PASSWORD_BYTES + && new TextEncoder().encode(value).length <= MAX_PASSWORD_BYTES, { error: validationMessage("auth.validation.invalidPasswordLength") }, ); @@ -42,10 +46,10 @@ const loginSchema = z.object({ passwordConfirmation: z.string().optional(), }); const registerSchema = loginSchema.refine( - (value) => value.password === value.passwordConfirmation, + value => value.password === value.passwordConfirmation, { - path: ["passwordConfirmation"], error: validationMessage("auth.validation.passwordsDoNotMatch"), + path: ["passwordConfirmation"], }, ); diff --git a/src/features/auth/ui/AuthForm/AuthForm.test.tsx b/src/features/auth/ui/AuthForm/AuthForm.test.tsx index e9f22bb..2e0cd61 100644 --- a/src/features/auth/ui/AuthForm/AuthForm.test.tsx +++ b/src/features/auth/ui/AuthForm/AuthForm.test.tsx @@ -2,6 +2,7 @@ import { MantineProvider } from "@mantine/core"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { MemoryRouter } from "react-router"; import { describe, expect, it, vi } from "vitest"; + import { AuthForm } from "./AuthForm"; describe("AuthForm", () => { @@ -10,7 +11,7 @@ describe("AuthForm", () => { render( <MantineProvider> <MemoryRouter> - <AuthForm register onSubmit={onSubmit} /> + <AuthForm onSubmit={onSubmit} register /> </MemoryRouter> </MantineProvider>, ); diff --git a/src/features/auth/ui/AuthForm/AuthForm.tsx b/src/features/auth/ui/AuthForm/AuthForm.tsx index aee8192..4b1c560 100644 --- a/src/features/auth/ui/AuthForm/AuthForm.tsx +++ b/src/features/auth/ui/AuthForm/AuthForm.tsx @@ -1,10 +1,12 @@ +import type { FC } from "react"; + import { zodResolver } from "@hookform/resolvers/zod"; import { Alert, Button, PasswordInput, Stack, TextInput } from "@mantine/core"; -import type { FC } from "react"; import { useState } from "react"; import { FormProvider, type Resolver, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import { type AuthFormValues, loginSchema, @@ -13,12 +15,12 @@ import { import classes from "./AuthForm.module.css"; type AuthFormProps = { - register?: true; onSubmit: (email: string, password: string) => Promise<void>; + register?: true; }; const AuthForm: FC<AuthFormProps> = (props) => { - const { register, onSubmit } = props; + const { onSubmit, register } = props; const { t } = useTranslation(); const schema = register ? registerSchema : loginSchema; const methods = useForm<AuthFormValues>({ @@ -27,7 +29,7 @@ const AuthForm: FC<AuthFormProps> = (props) => { const { formState: { errors, isSubmitting }, } = methods; - const [submitError, setSubmitError] = useState<string | null>(null); + const [submitError, setSubmitError] = useState<null | string>(null); return ( <FormProvider {...methods}> <form @@ -35,7 +37,8 @@ const AuthForm: FC<AuthFormProps> = (props) => { setSubmitError(null); try { await onSubmit(values.email, values.password); - } catch { + } + catch { setSubmitError(t("auth.requestError")); } })} @@ -60,7 +63,7 @@ const AuthForm: FC<AuthFormProps> = (props) => { /> )} {submitError && <Alert color="red">{submitError}</Alert>} - <Button type="submit" loading={isSubmitting}> + <Button loading={isSubmitting} type="submit"> {t(register ? "auth.register" : "auth.login")} </Button> <Button diff --git a/src/features/auth/ui/AuthPageLayout/AuthPageLayout.tsx b/src/features/auth/ui/AuthPageLayout/AuthPageLayout.tsx index 69439ad..d96773f 100644 --- a/src/features/auth/ui/AuthPageLayout/AuthPageLayout.tsx +++ b/src/features/auth/ui/AuthPageLayout/AuthPageLayout.tsx @@ -1,5 +1,7 @@ -import { Paper, Stack, Title } from "@mantine/core"; import type { FC, PropsWithChildren } from "react"; + +import { Paper, Stack, Title } from "@mantine/core"; + import classes from "./AuthPageLayout.module.css"; type AuthPageLayoutProps = PropsWithChildren<{ title: string }>; diff --git a/src/features/auth/ui/LoginForm.tsx b/src/features/auth/ui/LoginForm.tsx index 12c80d8..0a55834 100644 --- a/src/features/auth/ui/LoginForm.tsx +++ b/src/features/auth/ui/LoginForm.tsx @@ -1,5 +1,7 @@ import type { FC } from "react"; + import { useLocation, useNavigate } from "react-router"; + import { useAuth } from "../model/auth-context"; import { AuthForm } from "./AuthForm/AuthForm"; @@ -7,8 +9,8 @@ const LoginForm: FC = () => { const { login } = useAuth(); const navigate = useNavigate(); const location = useLocation(); - const returnTo = - (location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts"; + const returnTo + = (location.state as null | { returnTo?: string })?.returnTo ?? "/accounts"; return ( <AuthForm diff --git a/src/features/auth/ui/RegisterForm.tsx b/src/features/auth/ui/RegisterForm.tsx index 14d7149..61afca4 100644 --- a/src/features/auth/ui/RegisterForm.tsx +++ b/src/features/auth/ui/RegisterForm.tsx @@ -1,5 +1,7 @@ import type { FC } from "react"; + import { useLocation, useNavigate } from "react-router"; + import { useAuth } from "../model/auth-context"; import { AuthForm } from "./AuthForm/AuthForm"; @@ -7,16 +9,16 @@ const RegisterForm: FC = () => { const { register } = useAuth(); const navigate = useNavigate(); const location = useLocation(); - const returnTo = - (location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts"; + const returnTo + = (location.state as null | { returnTo?: string })?.returnTo ?? "/accounts"; return ( <AuthForm - register onSubmit={async (email, password) => { await register(email, password); await navigate(returnTo, { replace: true }); }} + register /> ); }; diff --git a/src/features/instrument-details/model/section.test.ts b/src/features/instrument-details/model/section.test.ts index e241987..d32f363 100644 --- a/src/features/instrument-details/model/section.test.ts +++ b/src/features/instrument-details/model/section.test.ts @@ -1,5 +1,7 @@ import { describe, expect, it, vi } from "vitest"; + import { resource } from "@/test/resource"; + import { section } from "./section"; describe("instrument source and transport presentation", () => { @@ -9,9 +11,9 @@ describe("instrument source and transport presentation", () => { const data = availability === "missing" ? undefined : { rows: [] }; const state = section({ data, - meta: resource(data, { availability }).meta, isError: false, isFetching: false, + meta: resource(data, { availability }).meta, refetch: vi.fn(), }); expect(state.loading).toBe(availability === "missing"); @@ -23,37 +25,39 @@ describe("instrument source and transport presentation", () => { const retry = vi.fn(); const refetch = vi.fn(); const meta = resource([], { - sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" }, + sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" }, }).meta; const state = section( - { data: [], meta, isError: false, isFetching: false, refetch }, + { data: [], isError: false, isFetching: false, meta, refetch }, retry, ); expect(state).toMatchObject({ - hasData: true, - loading: false, error: true, - refreshing: false, + hasData: true, lastSuccessfulAt: meta.lastSuccessfulAt, + loading: false, + refreshing: false, }); state.retry(); expect(retry).toHaveBeenCalledOnce(); expect(refetch).not.toHaveBeenCalled(); }); it("shows source failure without a false loading or empty result", () => { - const state = section({ - data: undefined, - meta: resource(null, { - sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" }, - }).meta, - isError: false, - isFetching: false, - refetch: vi.fn(), - }); + const state = section(( + { + data: undefined, + isError: false, + isFetching: false, + meta: resource(null, { + sync: { errorCode: "TBANK_UNAVAILABLE", id: "work", state: "failed" }, + }).meta, + refetch: vi.fn(), + } + )); expect(state).toMatchObject({ + error: true, hasData: false, loading: false, - error: true, }); }); }); diff --git a/src/features/instrument-details/model/section.ts b/src/features/instrument-details/model/section.ts index 109acb9..a1a9161 100644 --- a/src/features/instrument-details/model/section.ts +++ b/src/features/instrument-details/model/section.ts @@ -1,46 +1,46 @@ import type { paths } from "@/shared/api"; -type Meta = - paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number]; +type Meta + = paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number]; type SectionState = { - stale?: boolean; - sourceError?: boolean; - partial?: boolean; - lastSuccessfulAt?: string | null; - hasData: boolean; - loading: boolean; error: boolean; + hasData: boolean; + lastSuccessfulAt?: null | string; + loading: boolean; + partial?: boolean; refreshing: boolean; retry: () => void; + sourceError?: boolean; + stale?: boolean; }; function section( query: { data: unknown; - meta?: Meta; isError: boolean; isFetching: boolean; + meta?: Meta; refetch: () => unknown; }, retry?: () => unknown, ): SectionState { - const error = query.isError || query.meta?.sync.state === "failed"; + const isError = query.isError || query.meta?.sync.state === "failed"; return { - stale: query.meta?.freshness === "stale", - sourceError: query.meta?.sync.state === "failed", - partial: query.meta?.availability === "partial", - lastSuccessfulAt: query.meta?.lastSuccessfulAt, + error: isError, hasData: Boolean(query.data), - loading: !query.data && !error, - error, + lastSuccessfulAt: query.meta?.lastSuccessfulAt, + loading: !query.data && !isError, + partial: query.meta?.availability === "partial", refreshing: - Boolean(query.data) && - (query.isFetching || - query.meta?.sync.state === "running" || - query.meta?.sync.state === "queued"), + Boolean(query.data) + && (query.isFetching + || query.meta?.sync.state === "running" + || query.meta?.sync.state === "queued"), retry: () => { void (retry ?? query.refetch)(); }, + sourceError: query.meta?.sync.state === "failed", + stale: query.meta?.freshness === "stale", }; } -export { type SectionState, section }; +export { section, type SectionState }; diff --git a/src/features/instrument-details/model/types.ts b/src/features/instrument-details/model/types.ts index f3dbd2d..959561f 100644 --- a/src/features/instrument-details/model/types.ts +++ b/src/features/instrument-details/model/types.ts @@ -1,38 +1,39 @@ import type { BrokerageOperation } from "@/entities/broker-operation"; import type { paths } from "@/shared/api"; + import type { SectionState } from "./section"; -type Position = NonNullable< - paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"] ->; type Candles = NonNullable< paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"] >; type ChartRow = Candles["candles"][number] & { date: string; price: number }; +type InstrumentChartVm = { + averageLine: null | number; + candles?: Candles; + candlesState: SectionState; + chartData: ChartRow[]; + hasIncompleteCandle: boolean; + period: string; + position?: Position; + priceRows: ChartRow[]; + setPeriod: (value: string) => void; +}; +type InstrumentEventsVm = { + eventRows: BrokerageOperation[]; + filter: string; + hasPrevious: boolean; + onNext: () => void; + onPrevious: () => void; + operations?: { hasNext: boolean }; + operationsState: SectionState; + setFilter: (value: string) => void; +}; type InstrumentPositionVm = { position?: Position; positionState: SectionState; }; -type InstrumentChartVm = { - candles?: Candles; - candlesState: SectionState; - chartData: ChartRow[]; - priceRows: ChartRow[]; - period: string; - setPeriod: (value: string) => void; - averageLine: number | null; - hasIncompleteCandle: boolean; - position?: Position; -}; -type InstrumentEventsVm = { - operations?: { hasNext: boolean }; - operationsState: SectionState; - filter: string; - setFilter: (value: string) => void; - eventRows: BrokerageOperation[]; - hasPrevious: boolean; - onPrevious: () => void; - onNext: () => void; -}; +type Position = NonNullable< + paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"] +>; export type { InstrumentChartVm, InstrumentEventsVm, InstrumentPositionVm }; diff --git a/src/features/instrument-details/model/useInstrumentOperations.ts b/src/features/instrument-details/model/useInstrumentOperations.ts index 2042dce..bb60525 100644 --- a/src/features/instrument-details/model/useInstrumentOperations.ts +++ b/src/features/instrument-details/model/useInstrumentOperations.ts @@ -1,5 +1,6 @@ import { useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; + import { brokerageOperationsQueryOptions, type OperationCategory, @@ -14,37 +15,38 @@ function useInstrumentOperations( ) { const scope = `${uid}:${filter}`; const [pagination, setPagination] = useState<{ - scope: string; cursors: string[]; - }>({ scope, cursors: [] }); + scope: string; + }>({ cursors: [], scope }); const cursors = pagination.scope === scope ? pagination.cursors : []; const client = useQueryClient(); - const firstPage = { instrumentUid: uid, categories, limit: 20 }; + const firstPage = { categories, instrumentUid: uid, limit: 20 }; const operations = useBrokerageOperations(uid ? "all" : undefined, { ...firstPage, cursor: cursors.at(-1), }); const retry = (retryScreen: () => unknown) => { if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") { - setPagination({ scope, cursors: [] }); + setPagination({ cursors: [], scope }); void client.invalidateQueries({ - queryKey: brokerageOperationsQueryOptions("all", firstPage).queryKey, exact: true, + queryKey: brokerageOperationsQueryOptions("all", firstPage).queryKey, }); - } else void retryScreen(); + } + else void retryScreen(); }; return { - operations, - retry, hasPrevious: cursors.length > 0, - onPrevious: () => setPagination({ scope, cursors: cursors.slice(0, -1) }), onNext: () => { if (operations.data?.nextCursor) setPagination({ - scope, cursors: [...cursors, operations.data.nextCursor], + scope, }); }, + onPrevious: () => setPagination({ cursors: cursors.slice(0, -1), scope }), + operations, + retry, }; } diff --git a/src/features/instrument-details/ui/InstrumentChart.view.tsx b/src/features/instrument-details/ui/InstrumentChart.view.tsx index 100050e..de6036c 100644 --- a/src/features/instrument-details/ui/InstrumentChart.view.tsx +++ b/src/features/instrument-details/ui/InstrumentChart.view.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { AreaChart } from "@mantine/charts"; import { Accordion, @@ -7,185 +9,187 @@ import { Table, Text, } from "@mantine/core"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import { formatDecimal, formatMoney } from "@/shared/lib"; + import type { InstrumentChartVm } from "../model/types"; + import classes from "./InstrumentDetails.module.css"; import { InstrumentSection } from "./InstrumentSection.view"; -type InstrumentChartProps = { vm: InstrumentChartVm; priceUnit?: "percent" }; +type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm }; const InstrumentChart: FC<InstrumentChartProps> = (props) => { const { vm } = props; const { t } = useTranslation(); + const priceLabel = (value: string) => { + if (props.priceUnit === "percent") return `${formatDecimal(value)} %`; + const currency = vm.candles?.currency; + return formatMoney(currency ? { currency, value } : undefined); + }; + return ( <InstrumentSection - title={t("stock.chart")} - state={vm.candlesState} - large - controls={ + controls={( <div className={classes.controls}> <SegmentedControl aria-label={t("stock.period")} - value={vm.period} - onChange={vm.setPeriod} - data={["month", "halfYear", "year", "all"].map((value) => ({ - value, + data={["month", "halfYear", "year", "all"].map(value => ({ label: t(`stock.periods.${value}`), + value, }))} + onChange={vm.setPeriod} + value={vm.period} /> </div> - } + )} + large + state={vm.candlesState} + title={t("stock.chart")} > - {vm.candles ? ( - vm.chartData.length ? ( - <> - <AreaChart - h={310} - data={vm.chartData} - dataKey="date" - series={[ - { name: "price", color: "blue.6", label: t("stock.price") }, - ]} - curveType="linear" - withDots={vm.chartData.length === 1} - withGradient - gridAxis="y" - tickLine="none" - tooltipAnimationDuration={0} - areaProps={{ isAnimationActive: false }} - yAxisProps={{ domain: ["auto", "auto"], width: 64 }} - referenceLines={ - vm.averageLine === null - ? [] - : [ - { - y: vm.averageLine, - ifOverflow: "extendDomain", - color: "orange.7", - label: t("stock.averageLine"), - }, - ] - } - valueFormatter={(value) => - new Intl.NumberFormat("ru-RU", { - maximumFractionDigits: 4, - }).format(value) - } - aria-label={t( - props.priceUnit === "percent" - ? "bond.chartLabel" - : "stock.chartLabel", - { - currency: + {!!(vm.candles) && (( + vm.chartData.length > 0 + ? ( + <> + <AreaChart + areaProps={{ isAnimationActive: false }} + aria-label={t( + props.priceUnit === "percent" + ? "bond.chartLabel" + : "stock.chartLabel", + { + currency: props.priceUnit === "percent" ? t("bond.percentOfNominal") : (vm.candles.currency ?? ""), - }, - )} - /> - <Text size="xs" c="dimmed" mt="sm"> - {t( - props.priceUnit === "percent" - ? "bond.chartNote" - : "stock.chartNote", - )} - </Text> - {vm.hasIncompleteCandle ? ( - <Text size="xs" c="dimmed"> - {t("stock.incomplete")} - </Text> - ) : null} - {vm.averageLine !== null ? ( - <Text size="sm" mt="xs"> - {t("stock.averageLine")}:{" "} - {formatMoney(vm.position?.averagePurchasePrice ?? null)} - </Text> - ) : null} - <Accordion - className={classes.priceTable} - variant="contained" - radius="md" - > - <Accordion.Item value="prices"> - <Accordion.Control> - <Text fw={600}>{t("stock.priceTable")}</Text> - <Text size="xs" c="dimmed"> - {t("stock.priceTableHint", { count: vm.chartData.length })} + }, + )} + curveType="linear" + data={vm.chartData} + dataKey="date" + gridAxis="y" + h={310} + referenceLines={ + vm.averageLine === null + ? [] + : [ + { + color: "orange.7", + ifOverflow: "extendDomain", + label: t("stock.averageLine"), + y: vm.averageLine, + }, + ] + } + series={[ + { color: "blue.6", label: t("stock.price"), name: "price" }, + ]} + tickLine="none" + tooltipAnimationDuration={0} + valueFormatter={value => + new Intl.NumberFormat("ru-RU", { + maximumFractionDigits: 4, + }).format(value)} + withDots={vm.chartData.length === 1} + withGradient + yAxisProps={{ domain: ["auto", "auto"], width: 64 }} + /> + <Text c="dimmed" mt="sm" size="xs"> + {t( + props.priceUnit === "percent" + ? "bond.chartNote" + : "stock.chartNote", + )} + </Text> + {!!(vm.hasIncompleteCandle) && (( + <Text c="dimmed" size="xs"> + {t("stock.incomplete")} </Text> - </Accordion.Control> - <Accordion.Panel> - <ScrollArea.Autosize - mah={360} - type="auto" - viewportProps={{ - tabIndex: 0, - role: "region", - "aria-label": t("stock.priceTable"), - }} - > - <Table - striped - highlightOnHover - stickyHeader - verticalSpacing="sm" - horizontalSpacing="md" - > - <Table.Thead> - <Table.Tr> - <Table.Th>{t("stock.date")}</Table.Th> - <Table.Th>{t("stock.price")}</Table.Th> - <Table.Th>{t("stock.candle")}</Table.Th> - </Table.Tr> - </Table.Thead> - <Table.Tbody> - {vm.priceRows.map((candle) => ( - <Table.Tr key={candle.time}> - <Table.Td>{candle.date}</Table.Td> - <Table.Td> - {props.priceUnit === "percent" - ? `${formatDecimal(candle.close)} %` - : formatMoney( - vm.candles?.currency - ? { - value: candle.close, - currency: vm.candles.currency, - } - : null, - )} - </Table.Td> - <Table.Td> - <Badge - variant="light" - color={candle.isComplete ? "gray" : "blue"} - size="sm" - > - {t( - candle.isComplete - ? "stock.complete" - : "stock.forming", - )} - </Badge> - </Table.Td> - </Table.Tr> - ))} - </Table.Tbody> - </Table> - </ScrollArea.Autosize> - </Accordion.Panel> - </Accordion.Item> - </Accordion> - </> - ) : ( - <Text c="dimmed"> - {t( - vm.candlesState.partial - ? "investment.partial" - : "stock.noCandles", - )} - </Text> - ) - ) : null} + ))} + {vm.averageLine !== null && (( + <Text mt="xs" size="sm"> + {t("stock.averageLine")} + : + {" "} + {formatMoney(vm.position?.averagePurchasePrice)} + </Text> + ))} + <Accordion + className={classes.priceTable} + radius="md" + variant="contained" + > + <Accordion.Item value="prices"> + <Accordion.Control> + <Text fw={600}>{t("stock.priceTable")}</Text> + <Text c="dimmed" size="xs"> + {t("stock.priceTableHint", { count: vm.chartData.length })} + </Text> + </Accordion.Control> + <Accordion.Panel> + <ScrollArea.Autosize + mah={360} + type="auto" + viewportProps={{ + "aria-label": t("stock.priceTable"), + "role": "region", + "tabIndex": 0, + }} + > + <Table + highlightOnHover + horizontalSpacing="md" + stickyHeader + striped + verticalSpacing="sm" + > + <Table.Thead> + <Table.Tr> + <Table.Th>{t("stock.date")}</Table.Th> + <Table.Th>{t("stock.price")}</Table.Th> + <Table.Th>{t("stock.candle")}</Table.Th> + </Table.Tr> + </Table.Thead> + <Table.Tbody> + {vm.priceRows.map(candle => ( + <Table.Tr key={candle.time}> + <Table.Td>{candle.date}</Table.Td> + <Table.Td> + {priceLabel(candle.close)} + </Table.Td> + <Table.Td> + <Badge + color={candle.isComplete ? "gray" : "blue"} + size="sm" + variant="light" + > + {t( + candle.isComplete + ? "stock.complete" + : "stock.forming", + )} + </Badge> + </Table.Td> + </Table.Tr> + ))} + </Table.Tbody> + </Table> + </ScrollArea.Autosize> + </Accordion.Panel> + </Accordion.Item> + </Accordion> + </> + ) + : ( + <Text c="dimmed"> + {t( + vm.candlesState.partial + ? "investment.partial" + : "stock.noCandles", + )} + </Text> + ) + ))} </InstrumentSection> ); }; diff --git a/src/features/instrument-details/ui/InstrumentEvents.view.tsx b/src/features/instrument-details/ui/InstrumentEvents.view.tsx index 53195c0..df9de31 100644 --- a/src/features/instrument-details/ui/InstrumentEvents.view.tsx +++ b/src/features/instrument-details/ui/InstrumentEvents.view.tsx @@ -1,16 +1,20 @@ -import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Button, Group, SegmentedControl, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import { LedgerEntryRow } from "@/entities/broker-operation"; + import type { InstrumentEventsVm } from "../model/types"; + import classes from "./InstrumentDetails.module.css"; import { InstrumentSection } from "./InstrumentSection.view"; type InstrumentEventsProps = { - vm: InstrumentEventsVm; - incomeLabel?: string; - incomeFilter?: string; historyNote?: string; + incomeFilter?: string; + incomeLabel?: string; + vm: InstrumentEventsVm; }; const InstrumentEvents: FC<InstrumentEventsProps> = (props) => { @@ -18,73 +22,75 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => { const { t } = useTranslation(); return ( <InstrumentSection - title={t("stock.history")} - state={vm.operationsState} - controls={ + controls={( <div className={classes.controls}> <SegmentedControl aria-label={t("stock.eventFilter")} - value={vm.filter} - onChange={vm.setFilter} data={[ "all", "trades", props.incomeFilter ?? "dividends", "other", - ].map((value) => ({ - value, + ].map(value => ({ label: - value === (props.incomeFilter ?? "dividends") && - props.incomeLabel + value === (props.incomeFilter ?? "dividends") + && props.incomeLabel ? props.incomeLabel : t(`stock.filters.${value}`), + value, }))} + onChange={vm.setFilter} + value={vm.filter} /> </div> - } + )} + state={vm.operationsState} + title={t("stock.history")} > - {vm.operations ? ( + {!!(vm.operations) && (( <> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {props.historyNote ?? t("stock.historyNote")} </Text> - {vm.eventRows.length ? ( - <Stack gap="sm" mt="md"> - {vm.eventRows.map((event) => ( - <LedgerEntryRow - key={`${event.account?.id}:${event.id}`} - operation={event} - withDetails - /> - ))} - </Stack> - ) : ( - <Text c="dimmed" py="lg"> - {t( - vm.operationsState.partial - ? "investment.partial" - : "stock.noOperations", + {vm.eventRows.length > 0 + ? ( + <Stack gap="sm" mt="md"> + {vm.eventRows.map(event => ( + <LedgerEntryRow + key={`${event.account?.id}:${event.id}`} + operation={event} + withDetails + /> + ))} + </Stack> + ) + : ( + <Text c="dimmed" py="lg"> + {t( + vm.operationsState.partial + ? "investment.partial" + : "stock.noOperations", + )} + </Text> )} - </Text> - )} <Group justify="space-between" mt="md"> <Button - variant="default" disabled={!vm.hasPrevious || vm.operationsState.refreshing} onClick={vm.onPrevious} + variant="default" > {t("stock.previous")} </Button> <Button - variant="default" disabled={!vm.operations.hasNext || vm.operationsState.refreshing} onClick={vm.onNext} + variant="default" > {t("stock.next")} </Button> </Group> </> - ) : null} + ))} </InstrumentSection> ); }; diff --git a/src/features/instrument-details/ui/InstrumentPosition.view.tsx b/src/features/instrument-details/ui/InstrumentPosition.view.tsx index ee23cd5..f4abd37 100644 --- a/src/features/instrument-details/ui/InstrumentPosition.view.tsx +++ b/src/features/instrument-details/ui/InstrumentPosition.view.tsx @@ -1,31 +1,35 @@ -import { Alert, Anchor, Stack, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Alert, Anchor, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import { formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib"; + import type { InstrumentPositionVm } from "../model/types"; + import classes from "./InstrumentDetails.module.css"; import { InstrumentSection } from "./InstrumentSection.view"; type InstrumentPositionProps = { - vm: InstrumentPositionVm; - returnNote?: string; quantityLabel?: string; + returnNote?: string; + vm: InstrumentPositionVm; }; const InstrumentPosition: FC<InstrumentPositionProps> = (props) => { const { vm } = props; const { t } = useTranslation(); - if (vm.position && !vm.position.accounts.length) return null; + if (vm.position && vm.position.accounts.length === 0) return; return ( - <InstrumentSection title={t("stock.position")} state={vm.positionState}> - {vm.position ? ( + <InstrumentSection state={vm.positionState} title={t("stock.position")}> + {!!(vm.position) && (( <Stack gap="md"> - {vm.position.isStale ? ( + {!!(vm.position.isStale) && (( <Alert color="orange">{t("portfolio.staleWarning")}</Alert> - ) : null} + ))} <div className={`${classes.metrics} ${classes.holding}`}> <div> - <Text size="sm" c="dimmed"> + <Text c="dimmed" size="sm"> {props.quantityLabel ?? t("stock.quantity")} </Text> <Text className={classes.metricValue}> @@ -33,7 +37,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => { </Text> </div> <div> - <Text size="sm" c="dimmed"> + <Text c="dimmed" size="sm"> {t("stock.value")} </Text> <Text className={classes.metricValue}> @@ -41,7 +45,7 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => { </Text> </div> <div> - <Text size="sm" c="dimmed"> + <Text c="dimmed" size="sm"> {t("stock.average")} </Text> <Text className={classes.metricValue}> @@ -49,89 +53,93 @@ const InstrumentPosition: FC<InstrumentPositionProps> = (props) => { </Text> </div> <div> - <Text size="sm" c="dimmed"> + <Text c="dimmed" size="sm"> {t("stock.openReturn")} </Text> <Text - className={classes.metricValue} c={ vm.position.absoluteReturn?.value.startsWith("-") ? "red.8" : "green.8" } + className={classes.metricValue} > {formatMoney(vm.position.absoluteReturn)} </Text> - {vm.position.returnPercent !== null ? ( + {vm.position.returnPercent !== null && (( <Text size="sm"> - {formatDecimal(vm.position.returnPercent)} % + {formatDecimal(vm.position.returnPercent)} + {" "} + % </Text> - ) : null} + ))} </div> </div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {props.returnNote ?? t("stock.openReturnNote")} </Text> <div> - {vm.position.accounts.map((account) => ( + {vm.position.accounts.map(account => ( <div className={classes.accountRow} key={account.account?.id}> - {account.account ? ( - <Anchor - component={Link} - to={`/accounts/${encodeURIComponent(account.account.id)}`} - > - {account.account.name} - </Anchor> - ) : ( - <Text>{t("stock.portfolio")}</Text> - )} + {account.account + ? ( + <Anchor + component={Link} + to={`/accounts/${encodeURIComponent(account.account.id)}`} + > + {account.account.name} + </Anchor> + ) + : ( + <Text>{t("stock.portfolio")}</Text> + )} <div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {props.quantityLabel ?? t("stock.quantity")} </Text> <Text>{formatDecimal(account.quantity)}</Text> </div> <div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {t("stock.average")} </Text> <Text>{formatMoney(account.averagePurchasePrice)}</Text> </div> <div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {t("stock.value")} </Text> <Text>{formatMoney(account.currentValue)}</Text> </div> <div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {t("stock.openReturn")} </Text> <Text c={ - account.absoluteReturn?.value.startsWith("-") - ? "red.8" - : undefined + (account.absoluteReturn?.value.startsWith("-")) ? ("red.8") : undefined } > {formatMoney(account.absoluteReturn)} </Text> - {account.returnPercent !== null ? ( + {account.returnPercent !== null && (( <Text size="xs"> - {formatDecimal(account.returnPercent)} % + {formatDecimal(account.returnPercent)} + {" "} + % </Text> - ) : null} + ))} </div> </div> ))} </div> - <Text size="xs" c="dimmed"> + <Text c="dimmed" size="xs"> {t("stock.snapshotAt", { date: formatSnapshotTime(vm.position.observedAt), })} </Text> </Stack> - ) : null} + ))} </InstrumentSection> ); }; diff --git a/src/features/instrument-details/ui/InstrumentSection.view.tsx b/src/features/instrument-details/ui/InstrumentSection.view.tsx index ff8fea3..e021b77 100644 --- a/src/features/instrument-details/ui/InstrumentSection.view.tsx +++ b/src/features/instrument-details/ui/InstrumentSection.view.tsx @@ -1,3 +1,5 @@ +import type { FC, PropsWithChildren, ReactNode } from "react"; + import { Alert, Button, @@ -9,28 +11,31 @@ import { Title, } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC, PropsWithChildren, ReactNode } from "react"; import { useTranslation } from "react-i18next"; + import { formatSnapshotTime } from "@/shared/lib"; + import type { SectionState } from "../model/section"; + import classes from "./InstrumentDetails.module.css"; const CHART_SKELETON_HEIGHT_PX = 280; const SECTION_SKELETON_HEIGHT_PX = 65; type InstrumentSectionProps = PropsWithChildren<{ - title: string; - state: SectionState; controls?: ReactNode; - large?: boolean; embedded?: boolean; + large?: boolean; + state: SectionState; + title: string; }>; const InstrumentSection: FC<InstrumentSectionProps> = (props) => { const { t } = useTranslation(); + const readError = t(props.state.hasData ? "accounts.refreshError" : "stock.sectionError"); return ( <Paper - component="section" className={props.embedded ? classes.embeddedSection : classes.section} + component="section" withBorder={!props.embedded} > <Group justify="space-between" mb="md"> @@ -39,63 +44,63 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => { {props.controls} - {props.state.stale ? ( + {!!(props.state.stale) && (( {t("investment.stale")} - ) : null} - {props.state.partial ? ( + ))} + {!!(props.state.partial) && (( {t("investment.partial")} - ) : null} - {props.state.lastSuccessfulAt ? ( - + ))} + {!!(props.state.lastSuccessfulAt) && (( + {t("investment.sourceTime", { date: formatSnapshotTime(props.state.lastSuccessfulAt), })} - ) : null} - {props.state.refreshing ? ( - + ))} + {!!(props.state.refreshing) && (( + {t("accounts.refreshing")} - ) : null} - {props.state.error ? ( - + ))} + {!!(props.state.error) && (( + {props.state.sourceError ? t("investment.syncFailed") - : props.state.hasData - ? t("accounts.refreshError") - : t("stock.sectionError")} + : readError} - ) : null} - {props.state.loading ? ( - - - - - - - ) : ( - props.children - )} + ))} + {props.state.loading + ? ( + + + + + + + ) + : ( + props.children + )} ); }; diff --git a/src/features/tbank-connection/model/connection-boundary.ts b/src/features/tbank-connection/model/connection-boundary.ts index 14670ba..5e23015 100644 --- a/src/features/tbank-connection/model/connection-boundary.ts +++ b/src/features/tbank-connection/model/connection-boundary.ts @@ -1,12 +1,13 @@ import type { QueryClient } from "@tanstack/react-query"; + import { apiQueryClient, invalidateApiRequests, type paths, } from "@/shared/api"; -type TbankConnectionStatus = - paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"]; +type TbankConnectionStatus + = paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"]; const brokerageAccountsPath = "/api/v1/brokerage-accounts"; @@ -20,26 +21,26 @@ function commitTbankConnectionBoundary( status: TbankConnectionStatus, ) { invalidateApiRequests( - (path) => - path.startsWith("/api/v1/brokerage-accounts") || - path.startsWith("/api/v1/stocks") || - path.startsWith("/api/v1/bonds") || - path.startsWith("/api/v1/tbank-sync"), + path => + path.startsWith("/api/v1/brokerage-accounts") + || path.startsWith("/api/v1/stocks") + || path.startsWith("/api/v1/bonds") + || path.startsWith("/api/v1/tbank-sync"), ); queryClient.setQueryData(tbankConnectionQueryKey, status); void queryClient.resetQueries({ predicate: ({ queryKey }) => { const [method, path] = queryKey; return ( - method === "get" && - typeof path === "string" && - (path.startsWith("/api/v1/tbank-sync") || - path === "/api/v1/bonds" || - path.startsWith("/api/v1/bonds/") || - path === "/api/v1/stocks" || - path.startsWith("/api/v1/stocks/") || - path === brokerageAccountsPath || - path.startsWith(`${brokerageAccountsPath}/`)) + method === "get" + && typeof path === "string" + && (path.startsWith("/api/v1/tbank-sync") + || path === "/api/v1/bonds" + || path.startsWith("/api/v1/bonds/") + || path === "/api/v1/stocks" + || path.startsWith("/api/v1/stocks/") + || path === brokerageAccountsPath + || path.startsWith(`${brokerageAccountsPath}/`)) ); }, }); @@ -47,6 +48,6 @@ function commitTbankConnectionBoundary( export { commitTbankConnectionBoundary, - type TbankConnectionStatus, tbankConnectionQueryOptions, + type TbankConnectionStatus, }; diff --git a/src/features/tbank-connection/model/screen-sync.test.tsx b/src/features/tbank-connection/model/screen-sync.test.tsx index ebf431b..fec1d07 100644 --- a/src/features/tbank-connection/model/screen-sync.test.tsx +++ b/src/features/tbank-connection/model/screen-sync.test.tsx @@ -1,41 +1,41 @@ import { act, renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { useBrokerageAccounts } from "@/entities/brokerage-account"; import { useStockQuote } from "@/entities/stock"; import { configureAuthClient, invalidateResourceAccess } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { useScreenSync } from "../index"; import { commitTbankConnectionBoundary } from "./connection-boundary"; function auth() { configureAuthClient({ accessToken: () => "synthetic", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); } describe("page-owned screen synchronization", () => { it("ignores a late sync acceptance after the account scope changes", async () => { auth(); - let release!: () => void; - const blocked = new Promise((resolve) => { - release = resolve; - }); + + const { promise: blocked, resolve: release } = Promise.withResolvers(); const posted: string[] = []; const polled: string[] = []; server.use( http.post("*/api/v1/tbank-sync", async ({ request }) => { const scope = (await request.json()) as { - screen: "account"; accountId: string; + screen: "account"; }; posted.push(scope.accountId); await blocked; return HttpResponse.json( - { id: scope.accountId, scope, now: "2026-09-25T00:00:00Z" }, + { id: scope.accountId, now: "2026-09-25T00:00:00Z", scope }, { status: 202 }, ); }), @@ -43,13 +43,13 @@ describe("page-owned screen synchronization", () => { polled.push(String(params.id)); return HttpResponse.json({ id: params.id, - state: "succeeded", resources: [], + state: "succeeded", }); }), ); - const { result, rerender } = renderHook( - ({ accountId }) => useScreenSync({ screen: "account", accountId }, []), + const { rerender, result } = renderHook( + ({ accountId }) => useScreenSync({ accountId, screen: "account" }, []), { initialProps: { accountId: "old" }, wrapper: createQueryWrapper().wrapper, @@ -73,13 +73,13 @@ describe("page-owned screen synchronization", () => { "retries a failed GET without forcing the source (cached=%s)", async (cached) => { auth(); - const modes: (string | null)[] = []; - let unavailable = !cached; + const modes: (null | string)[] = []; + let isUnavailable = !cached; let posts = 0; server.use( http.get("*/api/v1/brokerage-accounts", ({ request }) => { modes.push(new URL(request.url).searchParams.get("sync")); - return unavailable + return isUnavailable ? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 }) : HttpResponse.json( resource([], { stateVersion: String(modes.length) }), @@ -90,7 +90,7 @@ describe("page-owned screen synchronization", () => { return new HttpResponse(null, { status: 500 }); }), ); - const { wrapper, queryClient } = createQueryWrapper(); + const { queryClient, wrapper } = createQueryWrapper(); const { result } = renderHook( () => { const accounts = useBrokerageAccounts(); @@ -105,20 +105,21 @@ describe("page-owned screen synchronization", () => { ); if (cached) { await waitFor(() => + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(result.current.accounts.isSuccess).toBe(true), ); - unavailable = true; + isUnavailable = true; await act(() => result.current.accounts.refetch()); } await waitFor(() => expect(result.current.accounts.isError).toBe(true)); - unavailable = false; + isUnavailable = false; await act(() => result.current.sync.retry()); await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true)); expect(result.current.accounts.meta?.stateVersion).toBe( cached ? "3" : "2", ); expect(modes).toEqual( - cached ? [null, null, "observe"] : [null, "observe"], + cached ? [null, /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, "observe"] : [null, "observe"], ); expect(posts).toBe(0); expect(result.current.disabled.data).toBeUndefined(); @@ -139,26 +140,24 @@ describe("page-owned screen synchronization", () => { "discards recovery after %s changes (HTTP already pending=%s)", async (boundary, pending) => { auth(); - let release!: () => void; - const blocked = new Promise((resolve) => { - release = resolve; - }); - let recovering = false; - let changed = false; + + const { promise: blocked, resolve: release } = Promise.withResolvers(); + let isRecovering = false; + let isChanged = false; server.use( http.get("*/api/v1/brokerage-accounts", async ({ request }) => { - if (boundary === "connection" && changed && !request.signal.aborted) + if (boundary === "connection" && isChanged && !request.signal.aborted) return HttpResponse.json(resource([], { stateVersion: "current" })); if (!new URL(request.url).searchParams.has("sync")) - return changed + return isChanged ? HttpResponse.json(resource([], { stateVersion: "current" })) : HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 }); - recovering = true; + isRecovering = true; await blocked; return HttpResponse.json(resource([], { stateVersion: "old" })); }), ); - const { wrapper, queryClient } = createQueryWrapper(); + const { queryClient, wrapper } = createQueryWrapper(); const published: unknown[] = []; const unsubscribe = queryClient.getQueryCache().subscribe((event) => { if (event.type === "updated" && event.action.type === "success") @@ -179,29 +178,42 @@ describe("page-owned screen synchronization", () => { act(() => { recovery = result.current.sync.retry(); }); - if (pending) await waitFor(() => expect(recovering).toBe(true)); + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. + if (pending) await waitFor(() => expect(isRecovering).toBe(true)); await act(async () => { - changed = true; - if (boundary === "logout") { - configureAuthClient(null); - queryClient.clear(); - } else if (boundary === "session") { - auth(); - queryClient.clear(); - } else if (boundary === "access") { - invalidateResourceAccess(queryClient, "brokerage", { - code: "FORBIDDEN", - }); - } else - commitTbankConnectionBoundary(queryClient, { + isChanged = true; + switch (boundary) { + case "access": { + invalidateResourceAccess(queryClient, "brokerage", { + code: "FORBIDDEN", + }); + + break; + } + case "logout": { + configureAuthClient(); + queryClient.clear(); + + break; + } + case "session": { + auth(); + queryClient.clear(); + + break; + } + case "connection": { commitTbankConnectionBoundary(queryClient, { connected: true, connectedAt: "2026-09-27T00:00:00Z", }); + } + } release(); await recovery; }); if (boundary === "connection") await waitFor(() => + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(result.current.accounts.meta?.stateVersion).toBe("current"), ); expect(published).not.toContainEqual( @@ -216,7 +228,7 @@ describe("page-owned screen synchronization", () => { "recovers an initial GET failure after forced sync without metadata (status retry=%s)", async (retryStatus) => { auth(); - const modes: (string | null)[] = []; + const modes: (null | string)[] = []; let polls = 0; server.use( http.get("*/api/v1/brokerage-accounts", ({ request }) => { @@ -234,12 +246,12 @@ describe("page-owned screen synchronization", () => { ? HttpResponse.json({ code: "UNAVAILABLE" }, { status: 503 }) : HttpResponse.json({ id: "recover", - state: "succeeded", resources: [resource([]).meta], + state: "succeeded", }); }), ); - const { wrapper, queryClient } = createQueryWrapper(); + const { queryClient, wrapper } = createQueryWrapper(); const { result } = renderHook( () => { const accounts = useBrokerageAccounts(); @@ -256,12 +268,14 @@ describe("page-owned screen synchronization", () => { await act(() => result.current.sync.refresh()); if (retryStatus) { await waitFor(() => + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(result.current.sync.transportError).toBe(true), ); await act(() => result.current.sync.retry()); } await waitFor(() => expect(result.current.accounts.isSuccess).toBe(true)); expect(result.current.accounts.data).toEqual([]); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe"]); expect( queryClient @@ -272,12 +286,12 @@ describe("page-owned screen synchronization", () => { ); it("posts only its scope once and observes completion without importing again", async () => { auth(); - const modes: (string | null)[] = []; + const modes: (null | string)[] = []; const bodies: unknown[] = []; - let completed = false; + let isCompleted = false; let polls = 0; const meta = () => - resource([], { stateVersion: completed ? "2" : "1" }).meta; + resource([], { stateVersion: isCompleted ? "2" : "1" }).meta; server.use( http.get("*/api/v1/brokerage-accounts", ({ request }) => { modes.push(new URL(request.url).searchParams.get("sync")); @@ -285,27 +299,29 @@ describe("page-owned screen synchronization", () => { }), http.post("*/api/v1/tbank-sync", async ({ request }) => { bodies.push(await request.json()); - completed = true; + isCompleted = true; return HttpResponse.json( { id: "screen", - scope: { screen: "accounts" }, now: "2026-09-25T00:00:00Z", + scope: { screen: "accounts" }, }, { status: 202 }, ); }), http.get("*/api/v1/tbank-sync/:id", () => { polls++; - return HttpResponse.json({ - id: "screen", - scope: { screen: "accounts" }, - now: "2026-09-25T00:00:00Z", - state: "succeeded", - errorCode: null, - progress: { total: 1, completed: 1, discovering: false }, - resources: [meta()], - }); + return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "screen", + now: "2026-09-25T00:00:00Z", + progress: { completed: 1, discovering: false, total: 1 }, + resources: [meta()], + scope: { screen: "accounts" }, + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)); }), ); const { result, unmount } = renderHook( @@ -329,16 +345,19 @@ describe("page-owned screen synchronization", () => { expect(result.current.accounts.meta?.stateVersion).toBe("2"), ); expect(bodies).toEqual([{ screen: "accounts" }]); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe"]); vi.useFakeTimers(); try { - await act(() => vi.advanceTimersByTimeAsync(120000)); + await act(() => vi.advanceTimersByTimeAsync(120_000)); expect(polls).toBe(1); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe"]); unmount(); - await vi.advanceTimersByTimeAsync(120000); + await vi.advanceTimersByTimeAsync(120_000); expect(polls).toBe(1); - } finally { + } + finally { vi.useRealTimers(); } }); @@ -348,14 +367,16 @@ describe("page-owned screen synchronization", () => { vi.useFakeTimers({ toFake: ["Date"] }); try { auth(); - let completed = false; + let isCompleted = false; let polls = 0; - const modes: (string | null)[] = []; + const modes: (null | string)[] = []; const snapshot = () => - resource(completed ? [] : null, { - stateVersion: completed ? "covered" : "initial", - sync: { id: "history", state: "running", errorCode: null }, - }); + resource(isCompleted ? [] : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + stateVersion: isCompleted ? "covered" : "initial", + sync: { errorCode: null, id: "history", state: "running" }, + } + /* eslint-enable unicorn/no-null */)); server.use( http.get("*/api/v1/brokerage-accounts", ({ request }) => { modes.push(new URL(request.url).searchParams.get("sync")); @@ -363,19 +384,21 @@ describe("page-owned screen synchronization", () => { }), http.get("*/api/v1/tbank-sync/:id", () => { polls++; - return HttpResponse.json({ - id: "history", - scope: null, - now: "2026-09-25T00:00:00Z", - state: "running", - errorCode: null, - progress: { - total: 2, - completed: completed ? 1 : 0, - discovering: true, - }, - resources: [snapshot().meta], - }); + return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "history", + now: "2026-09-25T00:00:00Z", + progress: { + completed: isCompleted ? 1 : 0, + discovering: true, + total: 2, + }, + resources: [snapshot().meta], + scope: null, + state: "running", + } + /* eslint-enable unicorn/no-null */)); }), ); const { result, unmount } = renderHook( @@ -394,24 +417,26 @@ describe("page-owned screen synchronization", () => { await waitFor(() => expect(polls).toBeGreaterThan(0)); expect(result.current.sync.refreshing).toBe(true); expect(result.current.accounts.data).toBeUndefined(); - completed = true; - vi.setSystemTime(Date.now() + 61000); + isCompleted = true; + vi.setSystemTime(Date.now() + 61_000); await waitFor(() => expect(result.current.accounts.data).toEqual([]), { timeout: 3000, }); expect(result.current.sync.refreshing).toBe(true); await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 1100)); + await new Promise(resolve => setTimeout(resolve, 1100)); }); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe"]); if (boundary === "leave") unmount(); - else act(() => configureAuthClient(null)); + else act(() => configureAuthClient()); const stopped = polls; await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 1100)); + await new Promise(resolve => setTimeout(resolve, 1100)); }); expect(polls).toBe(stopped); - } finally { + } + finally { vi.useRealTimers(); } }, @@ -422,9 +447,11 @@ describe("page-owned screen synchronization", () => { server.use( http.get("*/api/v1/brokerage-accounts", () => HttpResponse.json( - resource([], { - sync: { id: "revoked", state: "running", errorCode: null }, - }), + resource([], (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + sync: { errorCode: null, id: "revoked", state: "running" }, + } + /* eslint-enable unicorn/no-null */)), ), ), http.get("*/api/v1/tbank-sync/:id", () => @@ -446,41 +473,45 @@ describe("page-owned screen synchronization", () => { }); it("observes a projection when only its dependency reports new coverage", async () => { auth(); - let observed = false; - const modes: (string | null)[] = []; - const dependency = resource([], { - resourceKey: "operations", - stateVersion: observed ? "covered" : "initial", - sync: { - id: "dependency", - state: observed ? "idle" : "running", - errorCode: null, - }, - }).meta; + let isObserved = false; + const modes: (null | string)[] = []; + const dependency = resource([], (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + resourceKey: "operations", + stateVersion: isObserved ? "covered" : "initial", + sync: { + errorCode: null, + id: "dependency", + state: isObserved ? "idle" : "running", + }, + } + /* eslint-enable unicorn/no-null */)).meta; server.use( http.get("*/api/v1/brokerage-accounts", ({ request }) => { const mode = new URL(request.url).searchParams.get("sync"); modes.push(mode); - if (mode) observed = true; + if (mode) isObserved = true; return HttpResponse.json( - resource(observed ? [] : null, { - resourceKey: "projection", + resource(isObserved ? [] : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null, { dependencies: [ - { ...dependency, stateVersion: observed ? "covered" : "initial" }, + { ...dependency, stateVersion: isObserved ? "covered" : "initial" }, ], + resourceKey: "projection", }), ); }), http.get("*/api/v1/tbank-sync/:id", () => - HttpResponse.json({ - id: "dependency", - scope: null, - now: "2026-09-25T00:00:00Z", - state: "succeeded", - errorCode: null, - progress: { total: 1, completed: 1, discovering: false }, - resources: [{ ...dependency, stateVersion: "covered" }], - }), + HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "dependency", + now: "2026-09-25T00:00:00Z", + progress: { completed: 1, discovering: false, total: 1 }, + resources: [{ ...dependency, stateVersion: "covered" }], + scope: null, + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)), ), ); const { result } = renderHook( @@ -492,6 +523,7 @@ describe("page-owned screen synchronization", () => { { wrapper: createQueryWrapper().wrapper }, ); await waitFor(() => expect(result.current.data).toEqual([])); + // eslint-disable-next-line unicorn/no-null -- Preserve the API/DOM null sentinel in the expected response. expect(modes).toEqual([null, "observe"]); }); diff --git a/src/features/tbank-connection/model/screen-sync.ts b/src/features/tbank-connection/model/screen-sync.ts index 5ae8c16..af0a223 100644 --- a/src/features/tbank-connection/model/screen-sync.ts +++ b/src/features/tbank-connection/model/screen-sync.ts @@ -1,5 +1,6 @@ import { type QueryKey, useQueryClient } from "@tanstack/react-query"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; + import { apiErrorCode, apiQueryClient, @@ -7,37 +8,74 @@ import { type paths, useAuthenticatedQueries, } from "@/shared/api"; + import { type InvestmentScreen, useTbankSync } from "./sync"; -type ResourceMeta = - paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number]; +type ResourceMeta + = paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number]; type ScreenResource = { - queryKey: QueryKey; meta?: ResourceMeta; - transport: { - status: "pending" | "success" | "error"; - fetchStatus: "idle" | "fetching" | "paused"; - }; observe: (version?: string) => Promise; + queryKey: QueryKey; + transport: { + fetchStatus: "fetching" | "idle" | "paused"; + status: "error" | "pending" | "success"; + }; }; const STATUS_INTERVAL_MS = 1000; +function observeResource( + resource: ScreenResource, + latest: Map, + completedId: string | undefined, + observed: Map, +) { + if (!resource.meta) { + if (!completedId || resource.transport.fetchStatus !== "idle") return; + const key = `query:${JSON.stringify(resource.queryKey)}`; + if (observed.get(key) === completedId) return; + observed.set(key, completedId); + void resource.observe().catch(() => {}); + return; + } + const changed = [ + resource.meta, + ...(resource.meta.dependencies ?? []), + ].flatMap((current) => { + const notified = latest.get(current.resourceKey); + return notified && notified.stateVersion !== current.stateVersion + ? [notified] + : []; + }); + if (changed.length === 0) return; + const notification = JSON.stringify( + changed.map(meta => [meta.resourceKey, meta.stateVersion]), + ); + if (observed.get(resource.meta.resourceKey) === notification) + return; + observed.set(resource.meta.resourceKey, notification); + const own = changed.find( + meta => meta.resourceKey === resource.meta?.resourceKey, + ); + void resource.observe(own?.stateVersion).catch(() => {}); +} + function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) { const mutation = useTbankSync(); const client = useQueryClient(); - const denied = useRef(new Set()); + const deniedRef = useRef(new Set()); const scopeKey = JSON.stringify(scope); - const [requested, setRequested] = useState<{ - scope: string; + const [requested, setRequested] = useState(null); - const requestInFlight = useRef(null); - const currentScope = useRef(scopeKey); + scope: string; + }>(null); + const requestInFlightRef = useRef(null); + const currentScopeRef = useRef(scopeKey); useLayoutEffect(() => { - currentScope.current = scopeKey; + currentScopeRef.current = scopeKey; }, [scopeKey]); - const currentMutation = JSON.stringify(mutation.variables?.body) === scopeKey; - const observed = useRef(new Map()); + const isCurrentMutation = JSON.stringify(mutation.variables?.body) === scopeKey; + const observedRef = useRef(new Map()); const ids = [ ...new Set([ ...(requested?.scope === scopeKey ? [requested.id] : []), @@ -45,139 +83,111 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) { .flatMap(({ meta }) => meta ? [meta, ...(meta.dependencies ?? [])] : [], ) - .flatMap((meta) => - meta?.sync.id && - (meta.sync.state === "running" || meta.sync.state === "queued") + .flatMap(meta => + meta?.sync.id + && (meta.sync.state === "running" || meta.sync.state === "queued") ? [meta.sync.id] : [], ), ]), ]; const statuses = useAuthenticatedQueries( - ids.map((id) => ({ + ids.map(id => ({ ...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", { params: { path: { id } }, }), - retry: false, + refetchInterval: (query: { + state: { data?: { state: string }; error: unknown }; + }) => + !(query.state.error || (query.state.data && query.state.data.state !== "running")) && STATUS_INTERVAL_MS, refetchOnMount: false, refetchOnWindowFocus: false, - refetchInterval: (query: { - state: { error: unknown; data?: { state: string } }; - }) => - query.state.error || - (query.state.data && query.state.data.state !== "running") - ? false - : STATUS_INTERVAL_MS, + retry: false, })), ); useEffect(() => { for (const status of statuses) { - if (status.error && !denied.current.has(status.error)) { - denied.current.add(status.error); - if (apiErrorCode(status.error) !== "NOT_FOUND") - invalidateResourceAccess(client, "brokerage", status.error); + if (!status.error || deniedRef.current.has(status.error)) { + continue; } + + deniedRef.current.add(status.error); + if (apiErrorCode(status.error) !== "NOT_FOUND") + invalidateResourceAccess(client, "brokerage", status.error); } const latest = new Map(); - for (const status of [...statuses].sort( - (a, b) => a.dataUpdatedAt - b.dataUpdatedAt, - )) - for (const meta of status.data?.resources ?? []) { + const orderedStatuses = statuses.toSorted((a, b) => a.dataUpdatedAt - b.dataUpdatedAt); + for (const status of orderedStatuses) { + const statusResources = status.data?.resources ?? []; + for (const meta of statusResources) { latest.set(meta.resourceKey, meta); - for (const dependency of meta.dependencies ?? []) + const dependencies = meta.dependencies ?? []; + for (const dependency of dependencies) latest.set(dependency.resourceKey, dependency); } - for (const resource of resources) { - if (!resource.meta) { - if (resource.transport.fetchStatus !== "idle") continue; - const completed = statuses.find( - (status) => - requested?.scope === scopeKey && - status.data?.id === requested.id && - status.data.state !== "running", - )?.data; - const key = `query:${JSON.stringify(resource.queryKey)}`; - if (completed && observed.current.get(key) !== completed.id) { - observed.current.set(key, completed.id); - void resource.observe().catch(() => undefined); - } - continue; - } - const changed = [ - resource.meta, - ...(resource.meta.dependencies ?? []), - ].flatMap((current) => { - const notified = latest.get(current.resourceKey); - return notified && notified.stateVersion !== current.stateVersion - ? [notified] - : []; - }); - if (!changed.length) continue; - const notification = JSON.stringify( - changed.map((meta) => [meta.resourceKey, meta.stateVersion]), - ); - if (observed.current.get(resource.meta.resourceKey) === notification) - continue; - observed.current.set(resource.meta.resourceKey, notification); - const own = changed.find( - (meta) => meta.resourceKey === resource.meta?.resourceKey, - ); - void resource.observe(own?.stateVersion).catch(() => undefined); } + const completed = statuses.find(status => requested?.scope === scopeKey + && status.data?.id === requested.id && status.data.state !== "running")?.data; + for (const resource of resources) observeResource(resource, latest, completed?.id, observedRef.current); }, [client, statuses, resources, requested, scopeKey]); - const refreshing = - (currentMutation && mutation.isPending) || - statuses.some( - (status) => !status.isError && status.data?.state === "running", - ) || - resources.some(({ meta }) => { - const status = statuses[ids.indexOf(meta?.sync.id ?? "")]; - return ( - !status?.isError && - (!status?.data || status.data.state === "running") && - (meta?.sync.state === "running" || meta?.sync.state === "queued") - ); - }); + const isRefreshing + = (isCurrentMutation && mutation.isPending) + || statuses.some( + status => !status.isError && status.data?.state === "running", + ) + || resources.some(({ meta }) => { + const status = statuses[ids.indexOf(meta?.sync.id ?? "")]; + return ( + !status?.isError + && (!status?.data || status.data.state === "running") + && (meta?.sync.state === "running" || meta?.sync.state === "queued") + ); + }); const refresh = async () => { - if (requestInFlight.current === scopeKey || refreshing) return; - requestInFlight.current = scopeKey; + if (isRefreshing || requestInFlightRef.current === scopeKey) return; + requestInFlightRef.current = scopeKey; try { const accepted = await mutation.mutateAsync({ body: scope }); if ( - currentScope.current === scopeKey && - requestInFlight.current === scopeKey + currentScopeRef.current === scopeKey + && requestInFlightRef.current === scopeKey ) - setRequested({ scope: scopeKey, id: accepted.id }); - } catch { - /* The mutation retains the transport error for presentation. */ - } finally { - if (requestInFlight.current === scopeKey) requestInFlight.current = null; + setRequested({ id: accepted.id, scope: scopeKey }); + } + catch { + /* + The mutation retains the transport error for presentation. + */ + } + finally { + if (requestInFlightRef.current === scopeKey) requestInFlightRef.current = /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; } }; // Retry failed HTTP reads without asking the source to import again. // A source failure (or explicit refresh with no read error) still needs a sync. const retry = async () => { const failed = resources.filter( - (resource) => resource.transport.status === "error", + resource => resource.transport.status === "error", ); - const failedStatuses = statuses.filter((status) => status.isError); - if (failed.length || failedStatuses.length) { + const failedStatuses = statuses.filter(status => status.isError); + if (failed.length > 0 || failedStatuses.length > 0) { await Promise.allSettled([ - ...failed.map((resource) => resource.observe()), - ...failedStatuses.map((status) => status.refetch()), + ...failed.map(resource => resource.observe()), + ...failedStatuses.map(status => status.refetch()), ]); - } else await refresh(); + } + else await refresh(); }; return { refresh, + refreshing: isRefreshing, retry, - refreshing, - transportError: - (currentMutation && mutation.isError) || - statuses.some((status) => status.isError), sourceError: - statuses.some((status) => status.data?.state === "failed") || - resources.some(({ meta }) => meta?.sync.state === "failed"), + statuses.some(status => status.data?.state === "failed") + || resources.some(({ meta }) => meta?.sync.state === "failed"), + transportError: + (isCurrentMutation && mutation.isError) + || statuses.some(status => status.isError), }; } diff --git a/src/features/tbank-connection/model/sync.test.tsx b/src/features/tbank-connection/model/sync.test.tsx index d6053f0..7f90b16 100644 --- a/src/features/tbank-connection/model/sync.test.tsx +++ b/src/features/tbank-connection/model/sync.test.tsx @@ -1,9 +1,11 @@ import { act, renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { apiQueryClient, configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { server } from "@/test/server"; + import { type InvestmentScreen, useTbankSync, @@ -17,22 +19,20 @@ describe("sync connection and session boundaries", () => { async (boundary) => { let generation = 0; configureAuthClient({ - generation: () => generation, accessToken: () => "synthetic", - refresh: async () => true, clear: vi.fn(), + generation: () => generation, + refresh: () => Promise.resolve(true), }); - let release!: () => void; - const blocked = new Promise((resolve) => { - release = resolve; - }); + + const { promise: blocked, resolve: release } = Promise.withResolvers(); const accepted = { id: "work", - scope: { screen: "accounts" }, now: "2026-09-25T12:00:00Z", + scope: { screen: "accounts" }, }; let started = 0; - let changed = false; + let isChanged = false; server.use( http.post("*/api/v1/tbank-sync", async () => { started += 1; @@ -40,29 +40,31 @@ describe("sync connection and session boundaries", () => { return HttpResponse.json(accepted, { status: 202 }); }), http.get("*/api/v1/tbank-sync/:id", async () => { - const now = changed ? "2026-09-25T12:01:00Z" : accepted.now; + const now = isChanged ? "2026-09-25T12:01:00Z" : accepted.now; started += 1; await blocked; - return HttpResponse.json({ - ...accepted, - now, - state: "succeeded", - errorCode: null, - progress: { total: 1, completed: 1, discovering: false }, - resources: [], - }); + return HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...accepted, + errorCode: null, + now, + progress: { completed: 1, discovering: false, total: 1 }, + resources: [], + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)); }), ); - const { wrapper, queryClient } = createQueryWrapper(); + const { queryClient, wrapper } = createQueryWrapper(); const published: string[] = []; const unsubscribe = queryClient.getQueryCache().subscribe((event) => { - if ( - (event.query.queryKey as readonly unknown[])[1] === - "/api/v1/tbank-sync/{id}" - ) { - const data = event.query.state.data as { now?: string } | undefined; - if (data?.now) published.push(data.now); + if ((event.query.queryKey as readonly unknown[])[1] + !== "/api/v1/tbank-sync/{id}") { + return; } + + const data = event.query.state.data as undefined | { now?: string }; + if (data?.now) published.push(data.now); }); const { result } = renderHook( () => ({ @@ -82,12 +84,14 @@ describe("sync connection and session boundaries", () => { }); await waitFor(() => expect(started).toBe(2)); await act(async () => { - changed = true; + isChanged = true; if (boundary === "connection") - commitTbankConnectionBoundary(queryClient, { - connected: false, - connectedAt: null, - }); + commitTbankConnectionBoundary(queryClient, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + connected: false, + connectedAt: null, + } + /* eslint-enable unicorn/no-null */)); else { generation += 1; queryClient.clear(); @@ -104,9 +108,11 @@ describe("sync connection and session boundaries", () => { ).queryKey; // A new request may start after a successful connection boundary; an old result cannot win it. if (boundary === "session") + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(queryClient.getQueryData(key)).toBeUndefined(); else await waitFor(() => + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(queryClient.getQueryData(key)).toMatchObject({ now: "2026-09-25T12:01:00Z", }), diff --git a/src/features/tbank-connection/model/sync.ts b/src/features/tbank-connection/model/sync.ts index 594c5e3..578b213 100644 --- a/src/features/tbank-connection/model/sync.ts +++ b/src/features/tbank-connection/model/sync.ts @@ -4,14 +4,14 @@ import { useAuthenticatedQuery, } from "@/shared/api"; -type InvestmentScreen = - paths["/api/v1/tbank-sync"]["post"]["requestBody"]["content"]["application/json"]; +type InvestmentScreen + = paths["/api/v1/tbank-sync"]["post"]["requestBody"]["content"]["application/json"]; function useTbankSync() { return apiQueryClient.useMutation("post", "/api/v1/tbank-sync", { retry: false, }); } -function useTbankSyncStatus(id: string | null) { +function useTbankSyncStatus(id: null | string) { return useAuthenticatedQuery({ ...apiQueryClient.queryOptions("get", "/api/v1/tbank-sync/{id}", { params: { path: { id: id ?? "" } }, diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx index 60e36f4..8cd01eb 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.test.tsx @@ -7,11 +7,13 @@ import { waitFor, within, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import { apiQueryClient, configureAuthClient } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { server } from "@/test/server"; + import { tbankConnectionQueryOptions } from "../../model/connection-boundary"; import { TbankConnectionSection } from "./TbankConnectionSection"; @@ -54,8 +56,8 @@ const unrelatedQueryKey = apiQueryClient.queryOptions( function renderSection(client: QueryClient) { configureAuthClient({ accessToken: () => "test-token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); return render( @@ -69,12 +71,14 @@ function renderSection(client: QueryClient) { function seededClient() { const client = createTestQueryClient(); client.setQueryData(brokerageAccountsQueryKey, [ - { - id: "account-1", - name: "Основной счет", - type: "BROKERAGE", - openedOn: null, - }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + id: "account-1", + name: "Основной счет", + openedOn: null, + type: "BROKERAGE", + } + /* eslint-enable unicorn/no-null */), ]); client.setQueryData(portfolioQueryKey, { source: "previous-connection" }); client.setQueryData(stockQueryKey, { source: "previous-connection" }); @@ -87,10 +91,8 @@ function seededClient() { describe("TbankConnectionSection", () => { it("preserves cached status and a draft entered during a delayed failed refetch", async () => { const status = { connected: true, connectedAt: "2026-08-14T00:00:00Z" }; - let finishRefetch: (() => void) | undefined; - const response = new Promise((resolve) => { - finishRefetch = resolve; - }); + + const { promise: response, resolve: finishRefetch } = Promise.withResolvers(); let reads = 0; server.use( http.get("*/api/v1/tbank-connection", async () => { @@ -141,7 +143,9 @@ describe("TbankConnectionSection", () => { reads += 1; return reads === 1 ? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }) - : HttpResponse.json({ connected: false, connectedAt: null }); + : HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { connected: false, connectedAt: null } + /* eslint-enable unicorn/no-null */)); }), ); renderSection(createTestQueryClient()); @@ -238,22 +242,21 @@ describe("TbankConnectionSection", () => { it("cancels an in-flight previous-boundary query and ignores its late response", async () => { const client = seededClient(); - let finishPrevious: ((value: { source: string }) => void) | undefined; - let aborted = false; - const previousResponse = new Promise<{ source: string }>((resolve) => { - finishPrevious = resolve; - }); + + let isAborted = false; + const { promise: previousResponse, resolve: finishPrevious } = Promise.withResolvers<{ source: string }>(); const previousRequest = client - .fetchQuery({ - queryKey: operationsQueryKey, + .query({ queryFn: ({ signal }) => { signal.addEventListener("abort", () => { - aborted = true; + isAborted = true; }); return previousResponse; }, + queryKey: operationsQueryKey, }) - .catch(() => undefined); + // eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering. + .catch(() => {}); renderSection(client); await screen.findByText("Не подключено"); @@ -262,7 +265,7 @@ describe("TbankConnectionSection", () => { }); fireEvent.click(screen.getByRole("button", { name: "Подключить" })); - await waitFor(() => expect(aborted).toBe(true)); + await waitFor(() => expect(isAborted).toBe(true)); await previousRequest; finishPrevious?.({ source: "previous-connection" }); await Promise.resolve(); @@ -298,10 +301,8 @@ describe("TbankConnectionSection", () => { it("keeps DELETE recovery inside the dialog and preserves cache until successful retry", async () => { let deletes = 0; - let finishDelete: (() => void) | undefined; - const response = new Promise((resolve) => { - finishDelete = resolve; - }); + + const { promise: response, resolve: finishDelete } = Promise.withResolvers(); server.use( http.get("*/api/v1/tbank-connection", () => HttpResponse.json({ @@ -327,6 +328,7 @@ describe("TbankConnectionSection", () => { name: "Удалить подключение?", }); await waitFor(() => + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. expect(dialog.contains(document.activeElement)).toBe(true), ); const confirm = within(dialog).getByRole("button", { name: /^Удалить$/ }); @@ -340,7 +342,7 @@ describe("TbankConnectionSection", () => { document.body.tabIndex = -1; document.body.focus(); document.body.removeAttribute("tabindex"); - expect(document.activeElement).toBe(document.body); + expect(document.body).toHaveFocus(); finishDelete?.(); expect(await within(dialog).findByRole("alert")).toHaveTextContent( diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx index f1c8b7a..205fd1b 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; + import { TbankConnectionError, TbankConnectionLoading, @@ -9,9 +10,7 @@ import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded"; const TbankConnectionSection: FC = () => { const viewModel = useTbankConnectionViewModel(); if (viewModel.state === "loading") return ; - if (viewModel.state === "error") - return ; - return ; + return viewModel.state === "error" ? : ; }; export { TbankConnectionSection }; diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx index a5ce20a..2029b30 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.test.tsx @@ -1,6 +1,7 @@ import { MantineProvider } from "@mantine/core"; -import { render, screen } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import { describe, expect, it, vi } from "vitest"; + import { TbankConnectionError, TbankConnectionLoading, @@ -23,7 +24,7 @@ describe("TbankConnectionSection state views", () => { , ); - screen.getByRole("button", { name: "Повторить" }).click(); + fireEvent.click(screen.getByRole("button", { name: "Повторить" })); expect(retry).toHaveBeenCalledOnce(); }); }); diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx index d090d3c..9fb619c 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.view.tsx @@ -1,6 +1,7 @@ +import type { FC } from "react"; + import { Alert, Button, Skeleton } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; type TbankConnectionErrorProps = { @@ -13,7 +14,7 @@ const TbankConnectionLoading: FC = () => { return ( - + ); }; @@ -24,7 +25,7 @@ const TbankConnectionError: FC = (props) => { return ( - diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts index a9a67a1..aa1a587 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts @@ -1,4 +1,5 @@ import { useAuthenticatedQuery } from "@/shared/api"; + import { tbankConnectionQueryOptions } from "../../model/connection-boundary"; function useTbankConnectionViewModel() { @@ -6,15 +7,14 @@ function useTbankConnectionViewModel() { ...tbankConnectionQueryOptions(), }); if (!status.data) { - if (status.isPending) return { state: "loading" as const }; - return { state: "error" as const, retry: () => status.refetch() }; + return status.isPending ? { state: "loading" as const } : { retry: () => status.refetch(), state: "error" as const }; } return { + refreshError: status.isError, + refreshing: status.isFetching, + retry: () => status.refetch(), state: "loaded" as const, status: status.data, - refreshing: status.isFetching, - refreshError: status.isError, - retry: () => status.refetch(), }; } diff --git a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx index 4bf99fa..21b9004 100644 --- a/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx +++ b/src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSectionLoaded.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { Alert, Button, @@ -7,21 +9,22 @@ import { Text, } from "@mantine/core"; import { useQueryClient } from "@tanstack/react-query"; -import type { FC } from "react"; import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; + import { apiErrorCode, apiQueryClient } from "@/shared/api"; + import { commitTbankConnectionBoundary, type TbankConnectionStatus, } from "../../model/connection-boundary"; type TbankConnectionSectionLoadedProps = { - status: TbankConnectionStatus; - refreshing: boolean; refreshError: boolean; + refreshing: boolean; retry: () => void; + status: TbankConnectionStatus; }; const TbankConnectionSectionLoaded: FC = ( @@ -30,21 +33,21 @@ const TbankConnectionSectionLoaded: FC = ( const { status } = props; const { t } = useTranslation(); const queryClient = useQueryClient(); - const [deleteOpened, setDeleteOpened] = useState(false); - const deleteButton = useRef(null); - const [requestError, setRequestError] = useState(null); + const [isDeleteOpened, setIsDeleteOpened] = useState(false); + const removalButtonRef = useRef(null); + const [requestError, setRequestError] = useState(null); const { - register, - handleSubmit, - reset, formState: { errors }, + handleSubmit, + register, + reset, } = useForm<{ token: string }>(); const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", { + onError: error => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"), onSuccess: (data) => { commitTbankConnectionBoundary(queryClient, data); reset(); }, - onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"), }); const remove = apiQueryClient.useMutation( "delete", @@ -53,23 +56,24 @@ const TbankConnectionSectionLoaded: FC = ( onSuccess: () => { commitTbankConnectionBoundary(queryClient, { connected: false, - connectedAt: null, + connectedAt: /* eslint-disable-line unicorn/no-null -- The disconnected API snapshot requires a null connection timestamp. */ null, }); - setDeleteOpened(false); + setIsDeleteOpened(false); }, }, ); - const pending = update.isPending || remove.isPending; - const connected = status.connected; + const unavailableMessage = requestError === "TBANK_UNAVAILABLE" ? "tbank.unavailable" : "tbank.requestError"; + const isPending = update.isPending || remove.isPending; + const isConnected = status.connected; useEffect(() => { - if (deleteOpened && remove.isError) deleteButton.current?.focus(); - }, [deleteOpened, remove.isError]); + if (isDeleteOpened && remove.isError) removalButtonRef.current?.focus(); + }, [isDeleteOpened, remove.isError]); return ( {t("tbank.title")} - {connected + {isConnected ? t("tbank.connected", { date: new Date(status.connectedAt ?? "").toLocaleDateString( "ru-RU", @@ -77,22 +81,22 @@ const TbankConnectionSectionLoaded: FC = ( }) : t("tbank.disconnected")} - + {t("tbank.hint")} {props.refreshing && ( - + {t("tbank.refreshing")} )} {props.refreshError && ( - + {t("tbank.refreshError")} @@ -105,7 +109,7 @@ const TbankConnectionSectionLoaded: FC = ( update.mutate({ body: { token } }); })} > -
+
= ( {t( requestError === "INVALID_TBANK_TOKEN" ? "tbank.invalidToken" - : requestError === "TBANK_UNAVAILABLE" - ? "tbank.unavailable" - : "tbank.requestError", + : unavailableMessage, )} )} - - {connected && ( + {isConnected && ( @@ -142,12 +144,12 @@ const TbankConnectionSectionLoaded: FC = (
!pending && setDeleteOpened(false)} + closeButtonProps={{ "aria-label": t("tbank.close"), "disabled": isPending }} + closeOnClickOutside={!isPending} + closeOnEscape={!isPending} + onClose={() => !isPending && setIsDeleteOpened(false)} + opened={isDeleteOpened} title={t("tbank.deleteTitle")} - closeOnClickOutside={!pending} - closeOnEscape={!pending} - closeButtonProps={{ "aria-label": t("tbank.close"), disabled: pending }} > {t("tbank.deleteText")} @@ -155,11 +157,11 @@ const TbankConnectionSectionLoaded: FC = ( {t("tbank.requestError")} )} diff --git a/src/main.tsx b/src/main.tsx index 3a2c079..32dfbf5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,10 +5,11 @@ import "@mantine/charts/styles.css"; import "@mantine/dates/styles.css"; import "@wealthledger/ui/styles.css"; import "dayjs/locale/ru"; + import "./shared/i18n"; import { App } from "./app"; -const root = document.getElementById("root"); +const root = document.querySelector("#root"); if (!root) { throw new Error("Root element not found"); diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.filters.test.tsx b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.filters.test.tsx index f35613d..0148255 100644 --- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.filters.test.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.filters.test.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { MantineProvider } from "@mantine/core"; import { QueryClientProvider } from "@tanstack/react-query"; import { @@ -8,8 +10,7 @@ import { screen, waitFor, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC } from "react"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, Route, @@ -18,10 +19,12 @@ import { useNavigate, } from "react-router"; import { describe, expect, it, vi } from "vitest"; + import { configureAuthClient } from "@/shared/api"; -import { createQueryWrapper, createTestQueryClient } from "@/test/query"; +import { createTestQueryClient } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { AccountEventsPage } from "./AccountEventsPage"; import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm"; @@ -31,10 +34,10 @@ const Navigation: FC = () => { return ( <> {location.search} - - @@ -45,8 +48,8 @@ describe("Upcoming event date filters", () => { it("keeps reads and sync disabled without an account scope", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const requests: string[] = []; server.use( @@ -55,17 +58,17 @@ describe("Upcoming event date filters", () => { return new HttpResponse(null, { status: 503 }); }), ); - const { wrapper: QueryWrapper, queryClient } = createQueryWrapper(); + const queryClient = createTestQueryClient(); const { result } = renderHook(() => useAccountEventsPageViewModel(), { wrapper: ({ children }) => ( - + {children} - + ), }); - await act(async () => {}); + await new Promise(resolve => setTimeout(resolve, 0)); expect(result.current).toEqual({ state: "loading" }); expect(queryClient.isFetching()).toBe(0); expect(requests).toEqual([]); @@ -80,8 +83,8 @@ describe("Upcoming event date filters", () => { async (search) => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const requested: string[] = []; const syncRequests: unknown[] = []; @@ -89,13 +92,15 @@ describe("Upcoming event date filters", () => { http.get("*/api/v1/brokerage-accounts/all/events", ({ request }) => { requested.push(new URL(request.url).search); return HttpResponse.json( - resource(null, { - sync: { - id: null, - state: "failed", - errorCode: "TBANK_UNAVAILABLE", - }, - }), + resource(null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + sync: { + errorCode: "TBANK_UNAVAILABLE", + id: null, + state: "failed", + }, + } + /* eslint-enable unicorn/no-null */)), ); }), http.post("*/api/v1/tbank-sync", async ({ request }) => { @@ -107,16 +112,16 @@ describe("Upcoming event date filters", () => { }), ); const period = Object.fromEntries(new URLSearchParams(search)); - const { wrapper: QueryWrapper } = createQueryWrapper(); + const queryClient = createTestQueryClient(); const { result } = renderHook( () => useAccountEventsPageViewModel("all"), { wrapper: ({ children }) => ( - + {children} - + ), }, ); @@ -128,7 +133,7 @@ describe("Upcoming event date filters", () => { }); await waitFor(() => expect(syncRequests).toEqual([ - { screen: "events", accountId: "all", ...period }, + { accountId: "all", screen: "events", ...period }, ]), ); }, @@ -139,8 +144,8 @@ describe("Upcoming event date filters", () => { async (accountId) => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const searches: string[] = []; server.use( @@ -156,20 +161,20 @@ describe("Upcoming event date filters", () => { `/accounts/${accountId}/events${search}`)} + ].map(search => `/accounts/${accountId}/events${search}`)} + initialIndex={0} > } + path="/accounts/:accountId/events" /> @@ -182,6 +187,7 @@ describe("Upcoming event date filters", () => { screen.getByRole("button", { name: "History forward" }), ); await waitFor(() => + // eslint-disable-next-line jest-dom/prefer-to-have-text-content -- URL history requires exact equality, including empty search. expect(screen.getByLabelText("URL").textContent).toBe(expected), ); await screen.findByLabelText("Период"); @@ -202,8 +208,8 @@ describe("Upcoming event date filters", () => { async (accountId) => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); server.use( http.get( @@ -223,8 +229,8 @@ describe("Upcoming event date filters", () => { } + path="/accounts/:accountId/events" /> @@ -234,7 +240,7 @@ describe("Upcoming event date filters", () => { await screen.findByRole("button", { name: "Повторить" }); fireEvent.click(screen.getByRole("button", { name: "Сбросить" })); await screen.findByLabelText("Период"); - expect(screen.getByLabelText("URL").textContent).toBe(""); + expect(screen.getByLabelText("URL")).toBeEmptyDOMElement(); }, ); @@ -243,8 +249,8 @@ describe("Upcoming event date filters", () => { async (accountId) => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const searches: string[] = []; server.use( @@ -274,8 +280,8 @@ describe("Upcoming event date filters", () => { } + path="/accounts/:accountId/events" /> @@ -324,41 +330,41 @@ describe("Upcoming event date filters", () => { it("retains the previous complete forecast and timestamp when its source refresh fails", async () => { configureAuthClient({ accessToken: () => "synthetic", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const events = [ { date: "2026-10-01", displayName: "Synthetic coupon", - type: "coupon", projectedAmount: { currency: "RUB", value: "123.45" }, + type: "coupon", }, ]; const snapshot = resource( { events, incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }] }, - { sync: { id: "failed", state: "failed", errorCode: "TBANK_UNAVAILABLE" } }, + { sync: { errorCode: "TBANK_UNAVAILABLE", id: "failed", state: "failed" } }, ); server.use( http.get("*/api/v1/brokerage-accounts/:accountId/events", () => HttpResponse.json(snapshot), ), ); - const { wrapper: QueryWrapper } = createQueryWrapper(); + const queryClient = createTestQueryClient(); const { result } = renderHook(() => useAccountEventsPageViewModel("all"), { wrapper: ({ children }) => ( - + {children} - + ), }); await waitFor(() => expect(result.current).toMatchObject({ - state: "loaded", events, - sourceError: true, - refreshError: true, lastSuccessfulAt: snapshot.meta.lastSuccessfulAt, + refreshError: true, + sourceError: true, + state: "loaded", }), ); }); diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx index 8eb097a..1532319 100644 --- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.test.tsx @@ -1,21 +1,23 @@ import { MantineProvider } from "@mantine/core"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { fireEvent, render, screen, within } from "@testing-library/react"; import { MemoryRouter, Route, Routes } from "react-router"; import { beforeEach, describe, expect, it, vi } from "vitest"; + import { useBrokerageEvents } from "@/entities/brokerage-event"; + import { AccountEventsPage } from "./AccountEventsPage"; const { refresh } = vi.hoisted(() => ({ refresh: vi.fn() })); vi.mock("@/features/tbank-connection", () => ({ useScreenSync: () => ({ refresh, - retry: refresh, refreshing: false, + retry: refresh, sourceError: false, transportError: false, }), })); -vi.mock("@/entities/brokerage-event", async (importOriginal) => ({ +vi.mock("@/entities/brokerage-event", async importOriginal => ({ ...(await importOriginal()), useBrokerageEvents: vi.fn(), })); @@ -35,20 +37,22 @@ function renderPage() { describe("AccountEventsPage", () => { beforeEach(() => { refresh.mockClear(); - query.mockReturnValue({ - data: { - accountId: "account", - calculatedAt: "2026-08-14T00:00:00Z", - events: [], - }, - meta: { - availability: "complete", - sync: { state: "idle", id: null, errorCode: null }, - }, - isError: false, - isLoading: false, - refetch: vi.fn(), - } as never); + query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + data: { + accountId: "account", + calculatedAt: "2026-08-14T00:00:00Z", + events: [], + }, + isError: false, + isLoading: false, + meta: { + availability: "complete", + sync: { errorCode: null, id: null, state: "idle" }, + }, + refetch: vi.fn(), + } + /* eslint-enable unicorn/no-null */) as never); }); it("passes the selected route account to the query", () => { @@ -57,8 +61,8 @@ describe("AccountEventsPage", () => { } + path="/accounts/:accountId/events" /> @@ -68,16 +72,18 @@ describe("AccountEventsPage", () => { }); it("keeps the loading fallback when no result or account is available", () => { - query.mockReturnValue({ - data: undefined, - meta: { - availability: "complete", - sync: { state: "idle", id: null, errorCode: null }, - }, - isError: false, - isLoading: false, - refetch: vi.fn(), - } as never); + query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + data: undefined, + isError: false, + isLoading: false, + meta: { + availability: "complete", + sync: { errorCode: null, id: null, state: "idle" }, + }, + refetch: vi.fn(), + } + /* eslint-enable unicorn/no-null */) as never); renderPage(); expect(query).toHaveBeenCalledWith("", {}); expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute( @@ -87,46 +93,48 @@ describe("AccountEventsPage", () => { }); it("renders events and marks an offer without an amount", () => { - query.mockReturnValue({ - data: { - accountId: "account", - calculatedAt: "2026-08-14T00:00:00Z", - events: [ - { - date: "2026-08-20", - dateKind: "event", - displayName: "ОФЗ 26238", - figi: "FIGI", - instrumentUid: "UID", - projectedAmount: { currency: "RUB", value: "1250" }, - ticker: "OFZ", - type: "coupon", - logoName: "ofz.png", - isin: "RU000A0JX0J2", - }, - { - date: "2026-08-25", - dateKind: "event", - displayName: "ОФЗ 26238", - figi: "FIGI", - instrumentUid: "UID", - projectedAmount: null, - ticker: "OFZ", - type: "offer", - logoName: null, - isin: null, - }, - ], - }, - meta: { - availability: "complete", - sync: { state: "idle", id: null, errorCode: null }, - }, - isError: false, - isLoading: false, - refetch: vi.fn(), - } as never); - const { container } = renderPage(); + query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + data: { + accountId: "account", + calculatedAt: "2026-08-14T00:00:00Z", + events: [ + { + date: "2026-08-20", + dateKind: "event", + displayName: "ОФЗ 26238", + figi: "FIGI", + instrumentUid: "UID", + isin: "RU000A0JX0J2", + logoName: "ofz.png", + projectedAmount: { currency: "RUB", value: "1250" }, + ticker: "OFZ", + type: "coupon", + }, + { + date: "2026-08-25", + dateKind: "event", + displayName: "ОФЗ 26238", + figi: "FIGI", + instrumentUid: "UID", + isin: null, + logoName: null, + projectedAmount: null, + ticker: "OFZ", + type: "offer", + }, + ], + }, + isError: false, + isLoading: false, + meta: { + availability: "complete", + sync: { errorCode: null, id: null, state: "idle" }, + }, + refetch: vi.fn(), + } + /* eslint-enable unicorn/no-null */) as never); + renderPage(); expect(screen.getByText("1 250 ₽")).toBeInTheDocument(); expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument(); expect(screen.getByText("Купон · ОФЗ 26238")).toBeVisible(); @@ -136,7 +144,7 @@ describe("AccountEventsPage", () => { expect(screen.getByText("25.08.2026")).toBeVisible(); expect(screen.queryByText(/Дата события/)).not.toBeInTheDocument(); expect(screen.getAllByText("Ожидаемая сумма")).toHaveLength(2); - const logo = container.querySelector("img"); + const logo = screen.queryByAltText(""); expect(logo).toHaveAttribute( "src", "https://invest-brands.cdn-tinkoff.ru/ofzx160.png", @@ -144,7 +152,7 @@ describe("AccountEventsPage", () => { expect(screen.getAllByText("O")).toHaveLength(1); if (!logo) throw new Error("Expected the event logo"); fireEvent.error(logo); - expect(container.querySelector("img")).toBeNull(); + expect(screen.queryByAltText("")).not.toBeInTheDocument(); expect(screen.getAllByText("O")).toHaveLength(2); }); @@ -167,26 +175,28 @@ describe("AccountEventsPage", () => { , ); - screen.getByRole("button", { name: "Повторить" }).click(); + fireEvent.click(screen.getByRole("button", { name: "Повторить" })); expect(refresh).toHaveBeenCalledOnce(); }); it("shows a structural busy state before events are available", () => { - query.mockReturnValue({ - data: undefined, - meta: { - availability: "complete", - sync: { state: "idle", id: null, errorCode: null }, - }, - isError: false, - isLoading: true, - refetch: vi.fn(), - } as never); + query.mockReturnValue((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + data: undefined, + isError: false, + isLoading: true, + meta: { + availability: "complete", + sync: { errorCode: null, id: null, state: "idle" }, + }, + refetch: vi.fn(), + } + /* eslint-enable unicorn/no-null */) as never); renderPage(); const status = screen.getByRole("status", { name: "Загрузка" }); expect(status).toHaveAttribute("aria-busy", "true"); - expect(status.querySelector("button")).toBeNull(); + expect(within(status).queryByRole("button")).not.toBeInTheDocument(); }); }); diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx index 19409f2..247e587 100644 --- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; + import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm"; import { AccountEventsPageError } from "./components/AccountEventsPageError.view"; import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view"; @@ -9,9 +10,7 @@ type AccountEventsPageProps = { accountId?: string }; const AccountEventsPage: FC = (props) => { const viewModel = useAccountEventsPageViewModel(props.accountId); if (viewModel.state === "loading") return ; - if (viewModel.state === "error") - return ; - return ; + return viewModel.state === "error" ? : ; }; export { AccountEventsPage }; diff --git a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts index c620b7e..0fd1c23 100644 --- a/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts +++ b/src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts @@ -1,53 +1,54 @@ import { useEffect, useState } from "react"; import { useParams, useSearchParams } from "react-router"; import { z } from "zod"; + import { type BrokerageEvent, useBrokerageEvents, } from "@/entities/brokerage-event"; import { useScreenSync } from "@/features/tbank-connection"; -type AccountEventsPageViewModel = - | { state: "loading" } - | { state: "error"; retry: () => void; onReset: () => void } - | { - state: "loaded"; - events: BrokerageEvent[]; - sourceError?: boolean; - lastSuccessfulAt?: string | null; - partial?: boolean; - refreshing: boolean; - refreshError: boolean; - retry: () => void; - draftFrom: string | null; - draftTo: string | null; - canApply: boolean; - onDraftFromChange: (value: string | null) => void; - onDraftToChange: (value: string | null) => void; - onApply: () => void; - onReset: () => void; - }; +type AccountEventsPageViewModel + = | { + canApply: boolean; + draftFrom: null | string; + draftTo: null | string; + events: BrokerageEvent[]; + lastSuccessfulAt?: null | string; + onApply: () => void; + onDraftFromChange: (value: null | string) => void; + onDraftToChange: (value: null | string) => void; + onReset: () => void; + partial?: boolean; + refreshError: boolean; + refreshing: boolean; + retry: () => void; + sourceError?: boolean; + state: "loaded"; + } + | { onReset: () => void; retry: () => void; state: "error" } + | { state: "loading" }; function useAccountEventsPageViewModel( scopeId?: string, ): AccountEventsPageViewModel { const { accountId: routeAccountId } = useParams(); const accountId = scopeId ?? routeAccountId ?? ""; - const [searchParams, setSearchParams] = useSearchParams(); - const urlFrom = searchParams.get("from"); - const urlTo = searchParams.get("to"); - const validUrlPeriod = isValidPeriod(urlFrom, urlTo); - const appliedFrom = validUrlPeriod ? urlFrom : null; - const appliedTo = validUrlPeriod ? urlTo : null; - const [draftFrom, setDraftFrom] = useState(appliedFrom); - const [draftTo, setDraftTo] = useState(appliedTo); + const [searchParameters, setSearchParameters] = useSearchParams(); + const urlFrom = searchParameters.get("from"); + const urlTo = searchParameters.get("to"); + const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo); + const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + const [draftFrom, setDraftFrom] = useState(appliedFrom); + const [draftTo, setDraftTo] = useState(appliedTo); useEffect(() => { - if (validUrlPeriod) return; - const normalized = new URLSearchParams(searchParams); + if (isValidUrlPeriod) return; + const normalized = new URLSearchParams(searchParameters); normalized.delete("from"); normalized.delete("to"); - setSearchParams(normalized, { replace: true }); - }, [validUrlPeriod, searchParams, setSearchParams]); + setSearchParameters(normalized, { replace: true }); + }, [isValidUrlPeriod, searchParameters, setSearchParameters]); const [previousPeriod, setPreviousPeriod] = useState([ appliedFrom, appliedTo, @@ -58,69 +59,69 @@ function useAccountEventsPageViewModel( setDraftTo(appliedTo); } const events = useBrokerageEvents(accountId, { - ...(appliedFrom ? { from: appliedFrom } : {}), - ...(appliedTo ? { to: appliedTo } : {}), + ...(appliedFrom && { from: appliedFrom }), + ...(appliedTo && { to: appliedTo }), }); const sync = useScreenSync( { - screen: "events", accountId, - ...(appliedFrom ? { from: appliedFrom } : {}), - ...(appliedTo ? { to: appliedTo } : {}), + screen: "events", + ...(appliedFrom && { from: appliedFrom }), + ...(appliedTo && { to: appliedTo }), }, [events], ); + if (events.isLoading) return { state: "loading" }; const onReset = () => { setDraftFrom(null); setDraftTo(null); - setSearchParams({}); + setSearchParameters({}); }; - if (events.isLoading) return { state: "loading" }; if ((events.isError || events.meta?.sync.state === "failed") && !events.data) return { - state: "error", onReset, retry: () => { void sync.retry(); }, + state: "error", }; if (!events.data) return { state: "loading" }; return { - state: "loaded", + canApply: + (draftFrom !== appliedFrom || draftTo !== appliedTo) + && isValidPeriod(draftFrom, draftTo), + draftFrom, + draftTo, events: events.data.events, - sourceError: sync.sourceError, lastSuccessfulAt: events.meta?.lastSuccessfulAt, + onApply: () => { + if (!isValidPeriod(draftFrom, draftTo)) return; + setSearchParameters({ + ...(draftFrom && { from: draftFrom }), + ...(draftTo && { to: draftTo }), + }); + }, + onDraftFromChange: setDraftFrom, + onDraftToChange: setDraftTo, + onReset, partial: events.meta?.availability !== "complete", - refreshing: events.isFetching || sync.refreshing, refreshError: events.isError || sync.sourceError || sync.transportError, + refreshing: events.isFetching || sync.refreshing, retry: () => { void sync.retry(); }, - draftFrom, - draftTo, - canApply: - (draftFrom !== appliedFrom || draftTo !== appliedTo) && - isValidPeriod(draftFrom, draftTo), - onDraftFromChange: setDraftFrom, - onDraftToChange: setDraftTo, - onApply: () => { - if (!isValidPeriod(draftFrom, draftTo)) return; - setSearchParams({ - ...(draftFrom ? { from: draftFrom } : {}), - ...(draftTo ? { to: draftTo } : {}), - }); - }, - onReset, + sourceError: sync.sourceError, + state: "loaded", }; } -const calendarDate = z.string().date(); -function isValidPeriod(from: string | null, to: string | null) { +const calendarDate = z.iso.date(); +function isValidPeriod(from: null | string, to: null | string) { return ( [from, to].every( - (date) => date === null || calendarDate.safeParse(date).success, - ) && - (!from || !to || from <= to) + date => date === null || calendarDate.safeParse(date).success, + ) + && (!from || !to || from <= to) ); } diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx index f3cec28..160df64 100644 --- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx @@ -1,11 +1,12 @@ -import { StateView } from "@wealthledger/ui"; import type { FC } from "react"; + +import { StateView } from "@wealthledger/ui"; import { useTranslation } from "react-i18next"; const AccountEventsPageEmpty: FC = () => { const { t } = useTranslation(); return ( - + ); }; diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx index e937b96..dd0156a 100644 --- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx @@ -1,25 +1,26 @@ +import type { FC } from "react"; + import { Button, Group } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; -type AccountEventsPageErrorProps = { retry: () => void; onReset: () => void }; +type AccountEventsPageErrorProps = { onReset: () => void; retry: () => void }; const AccountEventsPageError: FC = (props) => { const { t } = useTranslation(); return ( - - } + )} + error + text={t("events.errorText")} + title={t("events.errorTitle")} /> ); }; diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx index 5d82878..0415a3f 100644 --- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { Alert, Button, @@ -8,11 +10,13 @@ import { Title, } from "@mantine/core"; import { DatePickerInput } from "@mantine/dates"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import { BrokerageEventCard } from "@/entities/brokerage-event"; import { formatSnapshotTime } from "@/shared/lib"; + import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm"; + import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view"; type AccountEventsPageLoadedProps = Extract< @@ -22,68 +26,11 @@ type AccountEventsPageLoadedProps = Extract< const AccountEventsPageLoaded: FC = (props) => { const { t } = useTranslation(); - return ( - - {props.lastSuccessfulAt ? ( - - {t("investment.sourceTime", { - date: formatSnapshotTime(props.lastSuccessfulAt), - })} - - ) : null} - {t("events.title")} - - {props.partial ? ( - {t("investment.partial")} - ) : null} - {props.refreshing ? ( - - ) : null} - {props.refreshError ? ( - - {t( - props.sourceError - ? "investment.syncFailed" - : "accounts.refreshError", - )} - - - ) : null} - {t("events.hint")} - - { - props.onDraftFromChange(from); - props.onDraftToChange(to); - }} - valueFormat="DD.MM.YYYY" - popoverProps={{ - returnFocus: true, - middlewares: { shift: { crossAxis: true } }, - }} - /> - - - - - - {props.events.length ? ( + function renderEvents() { + if (props.events.length > 0) { + return ( - {props.events.map((event) => ( + {props.events.map(event => ( = (props) => { /> ))} - ) : !props.partial ? ( - - ) : null} + ); + } + if (props.partial) { + return; + } + return ; + } + return ( + + {!!(props.lastSuccessfulAt) && (( + + {t("investment.sourceTime", { + date: formatSnapshotTime(props.lastSuccessfulAt), + })} + + ))} + {t("events.title")} + + {!!(props.partial) && (( + {t("investment.partial")} + ))} + {!!(props.refreshing) && (( + + ))} + {!!(props.refreshError) && (( + + {t( + props.sourceError + ? "investment.syncFailed" + : "accounts.refreshError", + )} + + + ))} + {t("events.hint")} + + { + props.onDraftFromChange(from); + props.onDraftToChange(to); + }} + popoverProps={{ + middlewares: { shift: { crossAxis: true } }, + returnFocus: true, + }} + type="range" + value={[props.draftFrom, props.draftTo]} + valueFormat="DD.MM.YYYY" + /> + + + + + + {renderEvents()} ); }; diff --git a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx index 0f04cca..a9de6bd 100644 --- a/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx +++ b/src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx @@ -1,6 +1,7 @@ +import type { FC } from "react"; + import { Group, Skeleton } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; const skeletonRowIds = ["first", "second", "third", "fourth"]; @@ -19,8 +20,8 @@ const AccountEventsPageLoading: FC = () => { - {skeletonRowIds.map((id) => ( - + {skeletonRowIds.map(id => ( + ))} ); diff --git a/src/pages/account-income/model/period.ts b/src/pages/account-income/model/period.ts index 1513a50..110e056 100644 --- a/src/pages/account-income/model/period.ts +++ b/src/pages/account-income/model/period.ts @@ -1,46 +1,48 @@ +const ISO_DATE_LENGTH = 10; +const DATE_PART_COUNT = 3; + type IncomePeriod = { from: string; to: string }; -type IncomeForm = IncomePeriod; const datePattern = /^\d{4}-\d{2}-\d{2}$/; function formatDraftDate(value: string): string { - const [year, month, day] = value.split("-"); + const [year, month, day] = value.split("-", DATE_PART_COUNT); return `${day}.${month}.${year}`; } -function parseDraftDate(value: string): string | null { - if (!/^\d{2}\.\d{2}\.\d{4}$/.test(value)) return null; - const [day, month, year] = value.split("."); - const date = `${year}-${month}-${day}`; - return isDate(date) ? date : null; -} - function isDate(value: string): boolean { if (!datePattern.test(value)) return false; const parsed = new Date(`${value}T00:00:00Z`); return ( - Number.isFinite(parsed.valueOf()) && - parsed.toISOString().slice(0, 10) === value + Number.isFinite(parsed.valueOf()) + && parsed.toISOString().slice(0, ISO_DATE_LENGTH) === value ); } function moscowDate(value: Date): string { const parts = new Intl.DateTimeFormat("en-CA", { + day: "2-digit", + month: "2-digit", timeZone: "Europe/Moscow", year: "numeric", - month: "2-digit", - day: "2-digit", }).formatToParts(value); const part = (type: string) => - parts.find((item) => item.type === type)?.value; + parts.find(item => item.type === type)?.value; return `${part("year")}-${part("month")}-${part("day")}`; } -export { - formatDraftDate, - type IncomeForm, +function parseDraftDate(value: string): null | string { + if (!/^\d{2}\.\d{2}\.\d{4}$/.test(value)) return /* eslint-disable-line unicorn/no-null -- Mantine date fields use null for an incomplete or invalid date. */ null; + const [day, month, year] = value.split(".", DATE_PART_COUNT); + const date = `${year}-${month}-${day}`; + return isDate(date) ? date : /* eslint-disable-line unicorn/no-null -- Mantine date fields use null for an incomplete or invalid date. */ null; +} + +export { formatDraftDate, + type IncomePeriod as IncomeForm, type IncomePeriod, isDate, + ISO_DATE_LENGTH, moscowDate, parseDraftDate, }; diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx index 94faed9..fe6240e 100644 --- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx @@ -1,7 +1,9 @@ -import { resource } from "@/test/resource"; +import type { FC } from "react"; + import "dayjs/locale/ru"; import { MantineProvider } from "@mantine/core"; import { DatesProvider } from "@mantine/dates"; +import { QueryClientProvider } from "@tanstack/react-query"; import { act, fireEvent, @@ -11,8 +13,7 @@ import { waitFor, within, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC } from "react"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, Route, @@ -21,10 +22,14 @@ import { useNavigate, } from "react-router"; import { afterEach, describe, expect, it, vi } from "vitest"; + import type { IncomeAnalytics } from "@/entities/income"; + import { configureAuthClient } from "@/shared/api"; -import { createQueryWrapper } from "@/test/query"; +import { createTestQueryClient } from "@/test/query"; +import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { isDate } from "../../model/period"; import { AccountIncomePage } from "./AccountIncomePage"; import { @@ -33,16 +38,9 @@ import { } from "./AccountIncomePage.vm"; import { IncomePayments } from "./components/IncomePayments.view"; -const analytics = { +const analytics = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ +{ accountId: "account-1", - period: { from: "2026-08-01", to: "2026-08-27" }, - calculatedAt: "2026-08-27T00:00:00Z", - totalsByCurrency: [summary("RUB", "10", "2")], - previous: { - period: { from: "2026-07-01", to: "2026-07-31" }, - totalsByCurrency: [comparison("RUB")], - }, - yearComparison: null, bucketGranularity: "day", buckets: [ { @@ -50,113 +48,124 @@ const analytics = { totalsByCurrency: [summary("RUB", "10", "2")], }, ], - instruments: [ - { - key: "income-group-opaque-v2", - figi: "FIGI", - instrumentUid: null, - ticker: "BOND", - instrumentType: "bond", - displayName: "BOND", - coupon: money("RUB", "10"), - dividend: money("RUB", "2"), - total: money("RUB", "12"), - receiptCount: 2, - }, - ], + calculatedAt: "2026-08-27T00:00:00Z", entries: [ entry(), { ...entry(), id: "dividend-1", - type: "OPERATION_TYPE_DIVIDEND", payment: money("RUB", "2"), + type: "OPERATION_TYPE_DIVIDEND", }, ], -} satisfies IncomeAnalytics; + instruments: [ + { + coupon: money("RUB", "10"), + displayName: "BOND", + dividend: money("RUB", "2"), + figi: "FIGI", + instrumentType: "bond", + instrumentUid: null, + key: "income-group-opaque-v2", + receiptCount: 2, + ticker: "BOND", + total: money("RUB", "12"), + }, + ], + period: { from: "2026-08-01", to: "2026-08-27" }, + previous: { + period: { from: "2026-07-01", to: "2026-07-31" }, + totalsByCurrency: [comparison("RUB")], + }, + totalsByCurrency: [summary("RUB", "10", "2")], + yearComparison: null, +} +/* eslint-enable unicorn/no-null */) satisfies IncomeAnalytics; + +function comparison(currency: string) { + return { + compared: summary(currency, "1", "0"), + currency, + difference: summary(currency, "9", "2"), + selected: summary(currency, "10", "2"), + }; +} + +function entry(): IncomeAnalytics["entries"][number] { + return (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accruedInterest: null, + category: "income", + commission: null, + description: "Купон", + figi: "FIGI", + id: "coupon-1", + instrumentKey: "income-group-opaque-v2", + instrumentType: "bond", + instrumentUid: null, + logoName: null, + occurredAt: "2026-08-01T12:00:00Z", + payment: money("RUB", "10"), + price: null, + quantity: null, + ticker: "BOND", + type: "OPERATION_TYPE_COUPON", + } + /* eslint-enable unicorn/no-null */); +} function money(currency: string, value: string) { return { currency, value }; } -function summary(currency: string, coupon: string, dividend: string) { - return { - currency, - coupon: money(currency, coupon), - dividend: money(currency, dividend), - total: money(currency, String(Number(coupon) + Number(dividend))), - }; -} - -function comparison(currency: string) { - return { - currency, - selected: summary(currency, "10", "2"), - compared: summary(currency, "1", "0"), - difference: summary(currency, "9", "2"), - }; -} - -function entry(): IncomeAnalytics["entries"][number] { - return { - id: "coupon-1", - instrumentKey: "income-group-opaque-v2", - occurredAt: "2026-08-01T12:00:00Z", - type: "OPERATION_TYPE_COUPON", - category: "income", - description: "Купон", - figi: "FIGI", - instrumentUid: null, - ticker: "BOND", - instrumentType: "bond", - logoName: null, - payment: money("RUB", "10"), - quantity: null, - price: null, - accruedInterest: null, - commission: null, - }; -} - function renderPage(search = "from=2026-08-01&to=2026-08-27") { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); - const { wrapper: QueryWrapper, queryClient } = createQueryWrapper(); - const result = render( + const queryClient = createTestQueryClient(); + const view = render( - + } + path="/accounts/:accountId/income" /> Events} + path="/accounts/:accountId/events" /> - + , ); - return { ...result, queryClient }; + return { ...view, queryClient }; +} + +function summary(currency: string, coupon: string, dividend: string) { + return { + coupon: money(currency, coupon), + currency, + dividend: money(currency, dividend), + total: money(currency, String(Number(coupon) + Number(dividend))), + }; } describe("AccountIncomePage", () => { it("keeps reads and sync disabled without an account scope", async () => { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); const requests: string[] = []; server.use( @@ -165,17 +174,17 @@ describe("AccountIncomePage", () => { return new HttpResponse(null, { status: 503 }); }), ); - const { wrapper: QueryWrapper, queryClient } = createQueryWrapper(); + const queryClient = createTestQueryClient(); const { result } = renderHook(() => useAccountIncomePageViewModel(), { wrapper: ({ children }) => ( - + {children} - + ), }); - await act(async () => {}); + await new Promise(resolve => setTimeout(resolve, 0)); expect(result.current).toEqual({ state: "loading" }); expect(queryClient.isFetching()).toBe(0); expect(requests).toEqual([]); @@ -190,13 +199,15 @@ describe("AccountIncomePage", () => { ({ request }) => { requested.push(new URL(request.url).search); return HttpResponse.json( - resource(null, { - sync: { - id: null, - state: "failed", - errorCode: "TBANK_UNAVAILABLE", - }, - }), + resource(null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + sync: { + errorCode: "TBANK_UNAVAILABLE", + id: null, + state: "failed", + }, + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -216,9 +227,9 @@ describe("AccountIncomePage", () => { await waitFor(() => expect(syncRequests).toEqual([ { - screen: "income", accountId: "account-1", from: "2024-02-29", + screen: "income", to: "2024-03-01", }, ]), @@ -243,32 +254,32 @@ describe("AccountIncomePage", () => { }); it("preserves every repeated-ID payment when an open card updates", async () => { - const first = { ...entry(), id: "same-id", description: "Выплата A" }; + const first = { ...entry(), description: "Выплата A", id: "same-id" }; const second = { ...entry(), - id: "same-id", description: "Выплата B", + id: "same-id", payment: money("RUB", "-2"), }; const third = { ...entry(), - id: "other-id", description: "Выплата C", + id: "other-id", payment: money("RUB", "1"), }; function breakdown(entries: IncomeAnalytics["entries"], total: string) { const display = toIncomeDisplayModel({ ...analytics, + entries, instruments: [ { ...analytics.instruments[0], coupon: money("RUB", total), dividend: money("RUB", "0"), - total: money("RUB", total), receiptCount: entries.length, + total: money("RUB", total), }, ], - entries, }); expect(display).not.toBeNull(); return ( @@ -282,7 +293,7 @@ describe("AccountIncomePage", () => { const payments = () => within(panel) .getAllByText(/^Выплата [ABC]$/) - .map((element) => element.textContent); + .map(element => element.textContent); expect(payments()).toEqual(["Выплата A", "Выплата B", "Выплата C"]); rerender(breakdown([third, first, second], "9")); @@ -380,10 +391,10 @@ describe("AccountIncomePage", () => { HttpResponse.json( resource({ ...analytics, - totalsByCurrency: [], buckets: [], - instruments: [], entries: [], + instruments: [], + totalsByCurrency: [], }), ), ), @@ -398,33 +409,35 @@ describe("AccountIncomePage", () => { }); it("renders the signed drill-down using opaque membership rather than instrument identity", async () => { - const response = { - ...analytics, - instruments: [ - { - ...analytics.instruments[0], - key: "server-only-key", - total: money("RUB", "8"), - dividend: money("RUB", "-2"), - }, - ], - entries: [ - { - ...analytics.entries[0], - instrumentKey: "server-only-key", - figi: null, - ticker: null, - description: "Исходная выплата", - }, - { - ...analytics.entries[1], - instrumentKey: "server-only-key", - instrumentUid: "unrelated-uid", - payment: money("RUB", "-2"), - description: "Отрицательная корректировка", - }, - ], - }; + const response = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...analytics, + entries: [ + { + ...analytics.entries[0], + description: "Исходная выплата", + figi: null, + instrumentKey: "server-only-key", + ticker: null, + }, + { + ...analytics.entries[1], + description: "Отрицательная корректировка", + instrumentKey: "server-only-key", + instrumentUid: "unrelated-uid", + payment: money("RUB", "-2"), + }, + ], + instruments: [ + { + ...analytics.instruments[0], + dividend: money("RUB", "-2"), + key: "server-only-key", + total: money("RUB", "8"), + }, + ], + } + /* eslint-enable unicorn/no-null */); server.use( http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => HttpResponse.json(resource(response)), @@ -485,7 +498,7 @@ describe("AccountIncomePage", () => { expect(screen.queryByText("Выбранный период")).not.toBeInTheDocument(); expect(screen.queryByText("Сравниваемый период")).not.toBeInTheDocument(); expect( - screen.getByRole("heading", { name: "Годом ранее", level: 2 }), + screen.getByRole("heading", { level: 2, name: "Годом ранее" }), ).toBeInTheDocument(); expect(screen.queryByText("Сравнения")).not.toBeInTheDocument(); expect(screen.queryByText("RUB", { exact: true })).not.toBeInTheDocument(); @@ -501,6 +514,7 @@ describe("AccountIncomePage", () => { expect(within(difference).queryByText("нет базы")).not.toBeInTheDocument(); expect(within(difference).getAllByText(/%$/)).toHaveLength(2); expect( + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. within(difference).getByText("+2 ₽").closest("dd"), ).toHaveTextContent(/^\+2 ₽$/); }); @@ -509,11 +523,13 @@ describe("AccountIncomePage", () => { const dependencies = [ { ...resource(analytics).meta, role: "selected" as const }, { ...resource(analytics).meta, role: "previous" as const }, - { - ...resource(null).meta, - role: "year" as const, - unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY", - }, + ( + { + ...resource(null).meta, + role: "year" as const, + unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY", + } + ), ]; server.use( http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => @@ -556,12 +572,12 @@ describe("income comparison display", () => { ["1", "3", "+33,3 %"], ["0.01", "0.04", "+25 %"], ["123456789012345678.123456789", "123456789012345678.123456789", "+100 %"], - ["10", "0", null], - ["0", "0", null], - ["10", "-0.00", null], - ["10", "-100", null], - ["9".repeat(400), "1", null], - ["1", "9".repeat(400), null], + ["10", "0", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], + ["0", "0", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], + ["10", "-0.00", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], + ["10", "-100", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], + ["9".repeat(400), "1", /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], + ["1", "9".repeat(400), /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null], ])("formats change %s against base %s", (difference, base, expected) => { const value = comparison("RUB"); value.difference.coupon = money("RUB", difference); @@ -574,7 +590,7 @@ describe("income comparison display", () => { }, }); const result = display?.comparison?.values[0]; - expect(result?.percentages.coupon?.replaceAll("\u00a0", " ") ?? null).toBe( + expect(result?.percentages.coupon?.replaceAll("\u{A0}", " ") ?? /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null).toBe( expected, ); expect(result?.difference.coupon.value).toBe(difference); @@ -596,7 +612,7 @@ describe("income comparison display", () => { expect(display?.comparison?.comparedPeriod.replaceAll(/\s/g, " ")).toBe( "01.12.2024 – 09.01.2025", ); - expect(display?.comparison?.values.map((value) => value.currency)).toEqual([ + expect(display?.comparison?.values.map(value => value.currency)).toEqual([ "RUB", "USD", ]); @@ -609,19 +625,13 @@ const LocationProbe: FC = () => { return ( <> {location.search} - ); }; -function selectPeriod() { - fireEvent.click(screen.getByLabelText("Период")); - fireEvent.click(screen.getByRole("button", { name: /^2 августа 2026$/i })); - fireEvent.click(screen.getByRole("button", { name: /^27 августа 2026$/i })); -} - function respondWithRequestedPeriod(requests: string[]) { server.use( http.get( @@ -643,6 +653,12 @@ function respondWithRequestedPeriod(requests: string[]) { ); } +function selectPeriod() { + fireEvent.click(screen.getByLabelText("Период")); + fireEvent.click(screen.getByRole("button", { name: /^2 августа 2026$/i })); + fireEvent.click(screen.getByRole("button", { name: /^27 августа 2026$/i })); +} + describe("income period and snapshot boundary", () => { afterEach(() => vi.useRealTimers()); @@ -664,6 +680,7 @@ describe("income period and snapshot boundary", () => { fireEvent.submit( screen .getByRole("button", { name: "Применить" }) + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. .closest("form") as HTMLFormElement, ); await waitFor(() => expect(requests).toHaveLength(2)); @@ -735,10 +752,8 @@ describe("income period and snapshot boundary", () => { const { queryClient } = renderPage(); await screen.findByLabelText("Период"); selectPeriod(); - let release!: () => void; - const pending = new Promise((resolve) => { - release = resolve; - }); + + const { promise: pending, resolve: release } = Promise.withResolvers(); server.use( http.get( "*/api/v1/brokerage-accounts/account-1/income-analytics", @@ -768,22 +783,24 @@ describe("income period and snapshot boundary", () => { HttpResponse.json( { id: "income", - scope: { screen: "income", accountId: "account-1" }, now: "2026-09-25T00:00:00Z", + scope: { accountId: "account-1", screen: "income" }, }, { status: 202 }, ), ), http.get("*/api/v1/tbank-sync/:id", () => - HttpResponse.json({ - id: "income", - scope: null, - now: "2026-09-25T00:00:00Z", - state: "succeeded", - errorCode: null, - progress: { total: 1, completed: 1, discovering: false }, - resources: [resource(null, { stateVersion: "2" }).meta], - }), + HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "income", + now: "2026-09-25T00:00:00Z", + progress: { completed: 1, discovering: false, total: 1 }, + resources: [resource(null, { stateVersion: "2" }).meta], + scope: null, + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)), ), http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => HttpResponse.json(resource(analytics, { stateVersion: "2" })), @@ -804,10 +821,8 @@ describe("income period and snapshot boundary", () => { respondWithRequestedPeriod([]); renderPage(); await screen.findByLabelText("Период"); - let release!: () => void; - const pending = new Promise((resolve) => { - release = resolve; - }); + + const { promise: pending, resolve: release } = Promise.withResolvers(); server.use( http.get( "*/api/v1/brokerage-accounts/account-1/income-analytics", @@ -843,39 +858,39 @@ describe("income period and snapshot boundary", () => { const instruments = [ { ...analytics.instruments[0], - key: "usd", - total: money("USD", "10"), coupon: money("USD", "10"), dividend: money("USD", "0"), + key: "usd", receiptCount: 1, + total: money("USD", "10"), }, { ...analytics.instruments[0], - key: "rub", - total: money("RUB", "-2"), coupon: money("RUB", "-2"), dividend: money("RUB", "0"), + key: "rub", receiptCount: 1, + total: money("RUB", "-2"), }, { ...analytics.instruments[0], - key: "rub-negative", - displayName: "Другой инструмент", - total: money("RUB", "-3"), coupon: money("RUB", "-3"), + displayName: "Другой инструмент", dividend: money("RUB", "0"), + key: "rub-negative", receiptCount: 1, + total: money("RUB", "-3"), }, ]; const display = toIncomeDisplayModel({ ...analytics, - totalsByCurrency: [summary("RUB", "-5", "0"), summary("USD", "10", "0")], - instruments, - entries: instruments.map((instrument) => ({ + entries: instruments.map(instrument => ({ ...entry(), instrumentKey: instrument.key, payment: instrument.total, })), + instruments, + totalsByCurrency: [summary("RUB", "-5", "0"), summary("USD", "10", "0")], }); render( @@ -902,22 +917,26 @@ describe("income period and snapshot boundary", () => { it("maps comparison notices by role regardless of dependency order or resource key", () => { const selected = { ...resource(analytics).meta, role: "selected" as const }; - const previous = { - ...resource(null).meta, - resourceKey: "opaque/year-looking-key", - role: "previous" as const, - sync: { - id: null, - state: "failed" as const, - errorCode: "TBANK_UNAVAILABLE", - }, - }; - const year = { - ...resource(null).meta, - resourceKey: "opaque/previous-looking-key", - role: "year" as const, - unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY", - }; + const previous = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...resource(null).meta, + resourceKey: "opaque/year-looking-key", + role: "previous" as const, + sync: { + errorCode: "TBANK_UNAVAILABLE", + id: null, + state: "failed" as const, + }, + } + /* eslint-enable unicorn/no-null */); + const year = ( + { + ...resource(null).meta, + resourceKey: "opaque/previous-looking-key", + role: "year" as const, + unavailableReason: "CALENDAR_OR_ACCOUNT_HISTORY", + } + ); for (const dependencies of [ [selected, previous, year], [year, selected, previous], @@ -939,16 +958,20 @@ it.each([false, true])( http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => HttpResponse.json( resource( - { ...analytics, previous: null, yearComparison: null }, - { - dependencies: legacy - ? [ - resource(null).meta, - resource(null).meta, - resource(null).meta, - ] - : [], - }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { ...analytics, previous: null, yearComparison: null } + /* eslint-enable unicorn/no-null */), + ( + { + dependencies: legacy + ? [ + resource(null).meta, + resource(null).meta, + resource(null).meta, + ] + : [], + } + ), ), ), ), @@ -969,16 +992,20 @@ it.each([false, true])( it("shows selected income before comparison coverage without inventing a zero baseline", async () => { const dependencies = (["year", "selected", "previous"] as const).map( - (role) => ({ - ...resource(role === "selected" ? analytics : null).meta, - role, - }), + role => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...resource(role === "selected" ? analytics : null).meta, + role, + } + /* eslint-enable unicorn/no-null */)), ); server.use( http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () => HttpResponse.json( resource( - { ...analytics, previous: null, yearComparison: null }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { ...analytics, previous: null, yearComparison: null } + /* eslint-enable unicorn/no-null */), { dependencies }, ), ), @@ -1005,15 +1032,17 @@ it("shows selected income before comparison coverage without inventing a zero ba it("keeps complete previous comparison while year source failed without inventing its amounts", async () => { const dependencies = [ { ...resource(analytics).meta, role: "previous" as const }, - { - ...resource(null).meta, - role: "year" as const, - sync: { - id: null, - state: "failed" as const, - errorCode: "TBANK_UNAVAILABLE", - }, - }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...resource(null).meta, + role: "year" as const, + sync: { + errorCode: "TBANK_UNAVAILABLE", + id: null, + state: "failed" as const, + }, + } + /* eslint-enable unicorn/no-null */), { ...resource(analytics).meta, role: "selected" as const }, ]; server.use( diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx index 7e991ce..bdbfab6 100644 --- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; + import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm"; import { AccountIncomePageError } from "./components/AccountIncomePageError.view"; import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view"; @@ -9,9 +10,7 @@ type AccountIncomePageProps = { accountId?: string }; const AccountIncomePage: FC = (props) => { const viewModel = useAccountIncomePageViewModel(props.accountId); if (viewModel.state === "loading") return ; - if (viewModel.state === "error") - return ; - return ; + return viewModel.state === "error" ? : ; }; export { AccountIncomePage }; diff --git a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts index b079236..ef00e28 100644 --- a/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts +++ b/src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts @@ -3,70 +3,73 @@ import { useEffect, useMemo, useState } from "react"; import { useForm } from "react-hook-form"; import { useParams, useSearchParams } from "react-router"; import { z } from "zod"; + import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income"; import { useScreenSync } from "@/features/tbank-connection"; import { validationMessage } from "@/shared/i18n"; import { formatDate } from "@/shared/lib"; + import { formatDraftDate, type IncomeForm, type IncomePeriod, isDate, + ISO_DATE_LENGTH, moscowDate, parseDraftDate, } from "../../model/period"; const ISO_MONTH_LENGTH = 7; -type IncomeMeta = ReturnType["meta"]; -type ComparisonNotice = - | "comparisonPending" - | "comparisonFailed" - | "previousUnavailable" - | "yearUnavailable"; +type AccountIncomePageViewModel + = | { + analytics: IncomeAnalytics; + display: IncomeDisplayModel; + form: ReturnType>; + formRevision: string; + lastSuccessfulAt?: null | string; + onReset: () => void; + onSubmit: (values: IncomeForm) => void; + partial?: boolean; + refreshError: boolean; + refreshing: boolean; + retry: () => Promise | undefined; + sourceError?: boolean; + state: "loaded"; + } + | { + period: IncomePeriod; + retry: () => Promise | undefined; + state: "error"; + } + | { state: "loading" }; +type ComparisonNotice + = | "comparisonFailed" + | "comparisonPending" + | "previousUnavailable" + | "yearUnavailable"; type IncomeDisplayModel = { - previousComparison: IncomeDisplayModel["comparison"]; - previousNotice: ComparisonNotice; - yearNotice: ComparisonNotice; - entries: { key: string; operation: IncomeAnalytics["entries"][number] }[]; - comparison: { - selectedPeriod: string; + comparison: null | { comparedPeriod: string; + selectedPeriod: string; values: (NonNullable< IncomeAnalytics["yearComparison"] >["totalsByCurrency"][number] & { - percentages: Record<"total" | "coupon" | "dividend", string | null>; + percentages: Record<"coupon" | "dividend" | "total", null | string>; })[]; - } | null; + }; + entries: { key: string; operation: IncomeAnalytics["entries"][number] }[]; + previousComparison: IncomeDisplayModel["comparison"]; + previousNotice: ComparisonNotice; + yearNotice: ComparisonNotice; }; -type AccountIncomePageViewModel = - | { state: "loading" } - | { - state: "error"; - retry: () => undefined | Promise; - period: IncomePeriod; - } - | { - state: "loaded"; - analytics: IncomeAnalytics; - display: IncomeDisplayModel; - formRevision: string; - sourceError?: boolean; - lastSuccessfulAt?: string | null; - partial?: boolean; - refreshing: boolean; - refreshError: boolean; - retry: () => undefined | Promise; - form: ReturnType>; - onReset: () => void; - onSubmit: (values: IncomeForm) => void; - }; +type IncomeMeta = ReturnType["meta"]; const draftDate = z .string() - .refine((value) => parseDraftDate(value) !== null, { + .refine(value => parseDraftDate(value) !== null, { error: validationMessage("income.validation.date"), }) .refine( @@ -90,16 +93,16 @@ const useAccountIncomePageViewModel = ( ): AccountIncomePageViewModel => { const { accountId: routeAccountId } = useParams(); const accountId = scopeId ?? routeAccountId ?? ""; - const [searchParams, setSearchParams] = useSearchParams(); + const [searchParameters, setSearchParameters] = useSearchParams(); const requested = useMemo( () => ({ - from: searchParams.get("from") ?? "", - to: searchParams.get("to") ?? "", + from: searchParameters.get("from") ?? "", + to: searchParameters.get("to") ?? "", }), - [searchParams], + [searchParameters], ); const period = useMemo( - () => (validPeriod(requested) ? requested : defaultPeriod()), + () => (isValidPeriod(requested) ? requested : defaultPeriod()), [requested], ); const form = useForm({ @@ -109,60 +112,94 @@ const useAccountIncomePageViewModel = ( const [resetRevision, setResetRevision] = useState(0); const analytics = useIncomeAnalytics(accountId, period); const sync = useScreenSync( - { screen: "income", accountId, from: period.from, to: period.to }, + { accountId, from: period.from, screen: "income", to: period.to }, [analytics], ); useEffect(() => { - if (!validPeriod(requested)) setSearchParams(period, { replace: true }); - }, [period, requested, setSearchParams]); + if (!isValidPeriod(requested)) setSearchParameters(period, { replace: true }); + }, [period, requested, setSearchParameters]); useEffect(() => { form.reset(draftPeriod(period)); }, [form, period]); + if (analytics.isLoading || !analytics.data) { + return analytics.isError || analytics.meta?.sync.state === "failed" ? { period, retry: sync.retry, state: "error" } : { state: "loading" }; + } + const display = toIncomeDisplayModel(analytics.data, analytics.meta); + if (!display) + return { + period, + retry: () => analytics.observe(), + state: "error", + }; const onSubmit = (values: IncomeForm) => { const from = parseDraftDate(values.from); const to = parseDraftDate(values.to); - if (from && to) setSearchParams({ from, to }); + if (from && to) setSearchParameters({ from, to }); }; const onReset = () => { const next = defaultPeriod(); form.reset(draftPeriod(next)); // Reset the open calendar along with the form. - setResetRevision((revision) => revision + 1); - setSearchParams(next, { replace: true }); + setResetRevision(revision => revision + 1); + setSearchParameters(next, { replace: true }); }; - if (analytics.isLoading || !analytics.data) { - if (analytics.isError || analytics.meta?.sync.state === "failed") - return { state: "error", retry: sync.retry, period }; - return { state: "loading" }; - } - const display = toIncomeDisplayModel(analytics.data, analytics.meta); - if (!display) - return { - state: "error", - retry: () => analytics.observe(), - period, - }; return { - state: "loaded", analytics: analytics.data, display, - formRevision: `${period.from}:${period.to}:${resetRevision}`, - sourceError: sync.sourceError, - lastSuccessfulAt: analytics.meta?.lastSuccessfulAt, - partial: analytics.meta?.availability !== "complete", - refreshing: analytics.isFetching || sync.refreshing, - refreshError: analytics.isError || sync.sourceError || sync.transportError, - retry: sync.retry, form, - onSubmit, + formRevision: `${period.from}:${period.to}:${resetRevision}`, + lastSuccessfulAt: analytics.meta?.lastSuccessfulAt, onReset, + onSubmit, + partial: analytics.meta?.availability !== "complete", + refreshError: analytics.isError || sync.sourceError || sync.transportError, + refreshing: analytics.isFetching || sync.refreshing, + retry: sync.retry, + sourceError: sync.sourceError, + state: "loaded", }; }; -function draftPeriod(period: IncomePeriod): IncomeForm { - return { from: formatDraftDate(period.from), to: formatDraftDate(period.to) }; +function comparisonDisplay( + period: IncomePeriod, + comparison: IncomeAnalytics["yearComparison"], +): IncomeDisplayModel["comparison"] { + if (!comparison) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + return { + comparedPeriod: formatComparisonPeriod(comparison.period), + selectedPeriod: formatComparisonPeriod(period), + values: comparison.totalsByCurrency.map(value => ({ + ...value, + percentages: { + coupon: formatIncomeChange( + value.difference.coupon.value, + value.compared.coupon.value, + ), + dividend: formatIncomeChange( + value.difference.dividend.value, + value.compared.dividend.value, + ), + total: formatIncomeChange( + value.difference.total.value, + value.compared.total.value, + ), + }, + })), + }; +} + +function comparisonNotice( + dependency: + | NonNullable["dependencies"]>[number] + | undefined, + unavailable: "previousUnavailable" | "yearUnavailable", +): ComparisonNotice { + if (!dependency || dependency.unavailableReason) return unavailable; + return dependency.sync.state === "failed" + ? "comparisonFailed" + : "comparisonPending"; } function defaultPeriod(): IncomePeriod { @@ -170,16 +207,40 @@ function defaultPeriod(): IncomePeriod { return { from: `${today.slice(0, ISO_MONTH_LENGTH)}-01`, to: today }; } -function validPeriod(period: IncomePeriod): period is IncomePeriod { +function draftPeriod(period: IncomePeriod): IncomeForm { + return { from: formatDraftDate(period.from), to: formatDraftDate(period.to) }; +} + +function formatComparisonPeriod(period: IncomePeriod): string { + return `${formatDate(period.from)} – ${formatDate(period.to)}`; +} + +function formatIncomeChange( + difference: string, + compared: string, +): null | string { + // Display-only ratio; server-provided Money values remain exact decimal strings. + const base = Number(compared); + if (!Number.isFinite(base) || base <= 0) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + const ratio = Number(difference) / base; + if (!Number.isFinite(ratio)) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + return new Intl.NumberFormat("ru-RU", { + maximumFractionDigits: 1, + signDisplay: "exceptZero", + style: "percent", + }).format(ratio); +} + +function isValidPeriod(period: IncomePeriod): period is IncomePeriod { if (!isDate(period.from) || !isDate(period.to)) return false; const from = new Date(`${period.from}T00:00:00Z`); const to = new Date(`${period.to}T00:00:00Z`); const today = new Date(`${moscowDate(new Date())}T00:00:00Z`); return ( - from.toISOString().slice(0, 10) === period.from && - to.toISOString().slice(0, 10) === period.to && - from <= to && - to <= today + from.toISOString().slice(0, ISO_DATE_LENGTH) === period.from + && to.toISOString().slice(0, ISO_DATE_LENGTH) === period.to + && from <= to + && to <= today ); } @@ -191,8 +252,8 @@ function toIncomeDisplayModel( string, { currency: string; - receiptCount: number; includedCount: number; + receiptCount: number; } >(); const currencies = new Set( @@ -200,25 +261,28 @@ function toIncomeDisplayModel( ); for (const instrument of analytics.instruments) { if ( - typeof instrument.key !== "string" || - !instrument.key.trim() || - instruments.has(instrument.key) || - !currencies.has(instrument.total.currency) + typeof instrument.key !== "string" + || !instrument.key.trim() + || instruments.has(instrument.key) + || !currencies.has(instrument.total.currency) ) + // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract. return null; instruments.set(instrument.key, { currency: instrument.total.currency, - receiptCount: instrument.receiptCount, includedCount: 0, + receiptCount: instrument.receiptCount, }); } const entries: IncomeDisplayModel["entries"] = []; const occurrences = new Map(); for (const entry of analytics.entries) { if (typeof entry.instrumentKey !== "string" || !entry.instrumentKey.trim()) + // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract. return null; const instrument = instruments.get(entry.instrumentKey); if (!instrument || entry.payment?.currency !== instrument.currency) + // eslint-disable-next-line unicorn/no-null -- Preserve the existing nullable validation/ref contract. return null; const occurrenceKey = JSON.stringify([entry.instrumentKey, entry.id]); const occurrence = occurrences.get(occurrenceKey) ?? 0; @@ -235,80 +299,20 @@ function toIncomeDisplayModel( }); } for (const instrument of instruments.values()) { - if (instrument.includedCount !== instrument.receiptCount) return null; + if (instrument.includedCount !== instrument.receiptCount) return /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; } const previous = meta?.dependencies?.find(({ role }) => role === "previous"); const year = meta?.dependencies?.find(({ role }) => role === "year"); return { + comparison: comparisonDisplay(analytics.period, analytics.yearComparison), entries, previousComparison: comparisonDisplay(analytics.period, analytics.previous), - comparison: comparisonDisplay(analytics.period, analytics.yearComparison), previousNotice: comparisonNotice(previous, "previousUnavailable"), yearNotice: comparisonNotice(year, "yearUnavailable"), }; } -function comparisonNotice( - dependency: - | NonNullable["dependencies"]>[number] - | undefined, - unavailable: "previousUnavailable" | "yearUnavailable", -): ComparisonNotice { - if (!dependency || dependency.unavailableReason) return unavailable; - return dependency.sync.state === "failed" - ? "comparisonFailed" - : "comparisonPending"; -} - -function comparisonDisplay( - period: IncomePeriod, - comparison: IncomeAnalytics["yearComparison"], -): IncomeDisplayModel["comparison"] { - if (!comparison) return null; - return { - selectedPeriod: formatComparisonPeriod(period), - comparedPeriod: formatComparisonPeriod(comparison.period), - values: comparison.totalsByCurrency.map((value) => ({ - ...value, - percentages: { - total: formatIncomeChange( - value.difference.total.value, - value.compared.total.value, - ), - coupon: formatIncomeChange( - value.difference.coupon.value, - value.compared.coupon.value, - ), - dividend: formatIncomeChange( - value.difference.dividend.value, - value.compared.dividend.value, - ), - }, - })), - }; -} - -function formatComparisonPeriod(period: IncomePeriod): string { - return `${formatDate(period.from)} – ${formatDate(period.to)}`; -} - -function formatIncomeChange( - difference: string, - compared: string, -): string | null { - // Display-only ratio; server-provided Money values remain exact decimal strings. - const base = Number(compared); - if (!Number.isFinite(base) || base <= 0) return null; - const ratio = Number(difference) / base; - if (!Number.isFinite(ratio)) return null; - return new Intl.NumberFormat("ru-RU", { - style: "percent", - maximumFractionDigits: 1, - signDisplay: "exceptZero", - }).format(ratio); -} - export { type AccountIncomePageViewModel, type IncomeDisplayModel, diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx index e125d81..51ad1a6 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageError.view.tsx @@ -1,7 +1,9 @@ +import type { FC } from "react"; + import { Button } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm"; type ErrorProps = Extract; @@ -10,10 +12,10 @@ const AccountIncomePageError: FC = (props) => { const { t } = useTranslation(); return ( {t("income.retry")}} + error + text={t("income.errorText")} + title={t("income.errorTitle")} /> ); }; diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx index 9d2da9f..cb5cfcd 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx @@ -1,3 +1,5 @@ +import type { FC } from "react"; + import { Alert, Button, @@ -8,12 +10,14 @@ import { Title, } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { FormProvider } from "react-hook-form"; import { useTranslation } from "react-i18next"; + import { formatSnapshotTime } from "@/shared/lib"; -import classes from "../AccountIncomePage.module.css"; + import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm"; + +import classes from "../AccountIncomePage.module.css"; import { IncomeComparisons } from "./IncomeComparisons.view"; import { IncomePayments } from "./IncomePayments.view"; import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view"; @@ -26,41 +30,55 @@ const AccountIncomePageLoaded: FC = (props) => { analytics, display, form, - refreshing, - refreshError, - retry, - onSubmit, onReset, + onSubmit, + refreshError, + refreshing, + retry, } = props; const { t } = useTranslation(); + function renderSummary() { + if (props.partial) { + return {t("investment.partial")}; + } + if (analytics.totalsByCurrency.length > 0) { + return ; + } + return ( + + ); + } return ( - - {props.lastSuccessfulAt ? ( - + + {!!(props.lastSuccessfulAt) && (( + {t("investment.sourceTime", { date: formatSnapshotTime(props.lastSuccessfulAt), })} - ) : null} + ))} {t("income.title")} - - {refreshing ? ( - + {!!(refreshing) && (( + {t("income.refreshing")} - ) : null} - {refreshError ? ( - + ))} + {!!(refreshError) && (( + {t( @@ -74,27 +92,18 @@ const AccountIncomePageLoaded: FC = (props) => { - ) : null} - {props.partial ? ( - {t("investment.partial")} - ) : analytics.totalsByCurrency.length ? ( - - ) : ( - - )} + ))} + {renderSummary()} {t("income.taxBoundary")} diff --git a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx index f465dbb..b51136c 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoading.view.tsx @@ -1,7 +1,9 @@ +import type { FC } from "react"; + import { Paper, Skeleton, Stack } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import classes from "../AccountIncomePage.module.css"; const AccountIncomePageLoading: FC = () => { diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx index 8e32d4e..9acf384 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx @@ -1,38 +1,44 @@ -import { Paper, Stack, Text, Title } from "@mantine/core"; import type { FC } from "react"; + +import { Paper, Stack, Text, Title } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import { formatMoney } from "@/shared/lib"; -import classes from "../AccountIncomePage.module.css"; + import type { IncomeDisplayModel } from "../AccountIncomePage.vm"; -type IncomeComparisonsProps = { - comparison: IncomeDisplayModel["comparison"]; - title: string; - notice: string; -}; +import classes from "../AccountIncomePage.module.css"; + type ComparisonProps = NonNullable & { title: string; }; type ComparisonValuesProps = { - kind: "selected" | "compared" | "difference"; + kind: "compared" | "difference" | "selected"; label: string; - values: ComparisonProps["values"][number]["selected"]; percentages?: ComparisonProps["values"][number]["percentages"]; + values: ComparisonProps["values"][number]["selected"]; +}; +type IncomeComparisonsProps = { + comparison: IncomeDisplayModel["comparison"]; + notice: string; + title: string; }; const IncomeComparisons: FC = (props) => { return ( {props.title} - {props.comparison ? ( - - ) : ( - - - {props.notice} - - - )} + {props.comparison + ? ( + + ) + : ( + + + {props.notice} + + + )} ); }; @@ -42,12 +48,12 @@ const Comparison: FC = (props) => { return (
- {props.values.map((value) => ( + {props.values.map(value => (
= (props) => {
))} - {props.values.length === 0 ? ( - + {props.values.length === 0 && (( + {t("income.comparisonEmpty")} - ) : null} + ))}
); @@ -87,30 +93,28 @@ const ComparisonValues: FC = (props) => { className={classes.comparisonPanel} data-kind={props.kind} data-tone={ - props.kind === "difference" - ? differenceTone(props.values.total.value) - : undefined + (props.kind === "difference") ? (differenceTone(props.values.total.value)) : undefined } > - + {props.label}
{(["total", "coupon", "dividend"] as const).map((key) => { - const money = props.values[key]; - const percentage = props.percentages?.[key]; - const tone = - props.kind === "difference" + const money = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.values[key]; + const percentage = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.percentages?.[key]; + const tone + = props.kind === "difference" ? differenceTone(money.value) : undefined; return (
{t(`income.${key}`)}
@@ -118,11 +122,11 @@ const ComparisonValues: FC = (props) => { {tone === "positive" ? "+" : ""} {formatMoney(money)} - {percentage ? ( + {!!(percentage) && (( {percentage} - ) : null} + ))}
); @@ -132,7 +136,7 @@ const ComparisonValues: FC = (props) => { ); }; -function differenceTone(value: string): "positive" | "negative" | "neutral" { +function differenceTone(value: string): "negative" | "neutral" | "positive" { if (!/[1-9]/.test(value)) return "neutral"; return value.startsWith("-") ? "negative" : "positive"; } diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx index 92499e8..cf418ed 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomePayments.view.tsx @@ -1,19 +1,23 @@ -import { Stack, Title } from "@mantine/core"; import type { FC } from "react"; + +import { Stack, Title } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import { LedgerEntryRow } from "@/entities/broker-operation"; -import classes from "../AccountIncomePage.module.css"; + import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm"; -type LoadedProps = Extract; +import classes from "../AccountIncomePage.module.css"; + type IncomePaymentsProps = { entries: LoadedProps["display"]["entries"] }; +type LoadedProps = Extract; const IncomePayments: FC = (props) => { const { t } = useTranslation(); return ( - + {t("income.payments")} - + {props.entries.map(({ key, operation }) => (
  • diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx index 9d246ca..8109871 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.stories.tsx @@ -1,12 +1,15 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import type { FC } from "react"; + import { FormProvider, useForm, useFormState } from "react-hook-form"; + import type { IncomeForm } from "../../../../model/period"; + import { IncomePeriodForm } from "./IncomePeriodForm.view"; const period = { from: "01.08.2026", to: "27.08.2026" }; const errors = { - to: { type: "manual", message: "Синтетическая ошибка периода" }, + to: { message: "Синтетическая ошибка периода", type: "manual" }, }; type PeriodExampleProps = { invalid?: boolean }; @@ -17,14 +20,14 @@ const PeriodExample: FC = (props) => { errors: props.invalid ? errors : undefined, }); const { isSubmitSuccessful } = useFormState({ control: methods.control }); - const submitted = isSubmitSuccessful ? methods.getValues() : null; + const submitted = isSubmitSuccessful ? methods.getValues() : /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null; return ( undefined)} onReset={() => { methods.reset(period); }} + onSubmit={methods.handleSubmit(() => {})} /> {submitted @@ -36,9 +39,7 @@ const PeriodExample: FC = (props) => { }; const meta = { - title: "Product/IncomePeriodForm", component: PeriodExample, - tags: ["autodocs"], parameters: { docs: { description: { @@ -48,6 +49,8 @@ const meta = { }, }, render: () => , + tags: ["autodocs"], + title: "Product/IncomePeriodForm", } satisfies Meta; export default meta; diff --git a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx index b9ab7aa..61d9953 100644 --- a/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx +++ b/src/pages/account-income/ui/AccountIncomePage/components/IncomePeriodForm/IncomePeriodForm.view.tsx @@ -1,8 +1,11 @@ +import type { FC, SubmitEventHandler } from "react"; + import { Button, Paper, Stack, Text } from "@mantine/core"; import { DatePickerInput } from "@mantine/dates"; -import type { FC, FormEventHandler } from "react"; +import { useState } from "react"; import { useController, useFormContext, useWatch } from "react-hook-form"; import { useTranslation } from "react-i18next"; + import { formatDraftDate, type IncomeForm, @@ -12,8 +15,8 @@ import { import classes from "../../AccountIncomePage.module.css"; type IncomePeriodFormProps = { - onSubmit: FormEventHandler; onReset: () => void; + onSubmit: SubmitEventHandler; }; const IncomePeriodForm: FC = (props) => { @@ -23,15 +26,15 @@ const IncomePeriodForm: FC = (props) => { formState: { isSubmitting }, } = useFormContext(); const { - field: { ref: fromRef, onChange: onFromChange, onBlur: onFromBlur }, + field: { onBlur: onFromBlur, onChange: onFromChange, ref: fromRef }, fieldState: { error: fromError }, } = useController({ control, name: "from" }); const { - field: { onChange: onToChange, onBlur: onToBlur }, + field: { onBlur: onToBlur, onChange: onToChange }, fieldState: { error: toError }, } = useController({ control, name: "to" }); const [from, to] = useWatch({ control, name: ["from", "to"] }); - const today = moscowDate(new Date()); + const [today, setToday] = useState(() => moscowDate(new Date())); const start = parseDraftDate(from); const end = parseDraftDate(to); return ( @@ -46,39 +49,40 @@ const IncomePeriodForm: FC = (props) => { {t("income.period")}
    { - onFromChange(from ? formatDraftDate(from) : ""); - onToChange(to ? formatDraftDate(to) : ""); - }} + maxDate={today} onBlur={() => { onFromBlur(); onToBlur(); }} - maxDate={today} - error={fromError?.message ?? toError?.message} - disabled={isSubmitting} - popoverProps={{ - returnFocus: true, - middlewares: { shift: { crossAxis: true } }, + onChange={([from, to]) => { + onFromChange(from ? formatDraftDate(from) : ""); + onToChange(to ? formatDraftDate(to) : ""); }} + popoverProps={{ + middlewares: { shift: { crossAxis: true } }, + onOpen: () => setToday(moscowDate(new Date())), + returnFocus: true, + }} + ref={fromRef} + type="range" + value={[start, end]} + valueFormat="DD.MM.YYYY" />
    - - @@ -58,8 +63,8 @@ const Navigation: FC = () => { function configureTestAuth() { configureAuthClient({ accessToken: () => "token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); } @@ -72,8 +77,8 @@ function renderPage(search = "") { > } + path="/accounts/:accountId/operations" /> @@ -95,9 +100,9 @@ describe("LedgerEntryRow", () => { expect(screen.getByText("Без движения денег")).toBeInTheDocument(); expect( screen.queryByRole("button", { name: "Показать детали" }), - ).toBeNull(); - expect(screen.queryByText("Цена: 100 ₽")).toBeNull(); - expect(screen.queryByText("Количество: 2")).toBeNull(); + ).not.toBeInTheDocument(); + expect(screen.queryByText("Цена: 100 ₽")).not.toBeInTheDocument(); + expect(screen.queryByText("Количество: 2")).not.toBeInTheDocument(); }); it("labels a positive payment with its category type", () => { @@ -125,9 +130,9 @@ describe("LedgerEntryRow", () => { @@ -145,9 +150,9 @@ describe("LedgerEntryRow", () => { @@ -165,9 +170,9 @@ describe("LedgerEntryRow", () => { @@ -193,7 +198,7 @@ describe("LedgerEntryRow", () => { ); expect(screen.getByText("Без движения денег")).toBeInTheDocument(); - expect(screen.queryByText("Сделка")).toBeNull(); + expect(screen.queryByText("Сделка")).not.toBeInTheDocument(); }); it("uses an instrument initial when the ledger entry has no logo", () => { @@ -222,9 +227,9 @@ describe("AccountOperationsPage", () => { searches.push(new URL(request.url).searchParams); return HttpResponse.json( resource({ + hasNext: true, items: [operation], nextCursor: "next", - hasNext: true, }), ); }, @@ -234,20 +239,20 @@ describe("AccountOperationsPage", () => { `/accounts/${accountId}/operations${search}`)} + ].map(search => `/accounts/${accountId}/operations${search}`)} + initialIndex={0} > } + path="/accounts/:accountId/operations" /> @@ -266,6 +271,7 @@ describe("AccountOperationsPage", () => { screen.getByRole("button", { name: "History forward" }), ); await waitFor(() => + // eslint-disable-next-line jest-dom/prefer-to-have-text-content -- URL history requires exact equality, including empty search. expect(screen.getByLabelText("URL").textContent).toBe(expected), ); await screen.findByLabelText("Период"); @@ -287,11 +293,11 @@ describe("AccountOperationsPage", () => { expect(screen.getByLabelText("Период")).toHaveTextContent("01.02.2026"), ); expect(screen.getByRole("button", { name: "Назад" })).toBeDisabled(); - expect(searches.map((query) => query.get("from"))).not.toContain( + expect(searches.map(query => query.get("from"))).not.toContain( "badT00:00:00.000Z", ); expect( - searches.every((query) => query.get("categories") === "trade"), + searches.every(query => query.get("categories") === "trade"), ).toBe(true); }, ); @@ -307,7 +313,9 @@ describe("AccountOperationsPage", () => { new URL(request.url).searchParams.has("from") ? HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }) : HttpResponse.json( - resource({ items: [], hasNext: false, nextCursor: null }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { hasNext: false, items: [], nextCursor: null } + /* eslint-enable unicorn/no-null */)), ), ), ); @@ -322,8 +330,8 @@ describe("AccountOperationsPage", () => { } + path="/accounts/:accountId/operations" /> @@ -333,7 +341,7 @@ describe("AccountOperationsPage", () => { await screen.findByRole("button", { name: "Повторить" }); fireEvent.click(screen.getByRole("button", { name: "Сбросить" })); await screen.findByLabelText("Период"); - expect(screen.getByLabelText("URL").textContent).toBe(""); + expect(screen.getByLabelText("URL")).toBeEmptyDOMElement(); }, ); @@ -347,13 +355,15 @@ describe("AccountOperationsPage", () => { const url = new URL(request.url); searches.push(url.search); return HttpResponse.json( - resource({ - accountId: "account-1", - items: [operation], - nextCursor: url.searchParams.get("cursor") ? null : "next-1", - hasNext: !url.searchParams.get("cursor"), - observedAt: "2026-08-14T00:00:00Z", - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + hasNext: !url.searchParams.get("cursor"), + items: [operation], + nextCursor: url.searchParams.get("cursor") ? null : "next-1", + observedAt: "2026-08-14T00:00:00Z", + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -385,13 +395,15 @@ describe("AccountOperationsPage", () => { const url = new URL(request.url); searches.push(url.search); return HttpResponse.json( - resource({ - accountId: "account-1", - items: [operation], - nextCursor: null, - hasNext: false, - observedAt: "2026-08-14T00:00:00Z", - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + hasNext: false, + items: [operation], + nextCursor: null, + observedAt: "2026-08-14T00:00:00Z", + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -405,9 +417,9 @@ describe("AccountOperationsPage", () => { const countBefore = searches.length; fireEvent.click(screen.getByRole("combobox", { name: "Категории" })); fireEvent.click(await screen.findByText("Налог")); - await new Promise((resolve) => setTimeout(resolve, 100)); - expect(searches.length).toBe(countBefore); - expect(searches.some((s) => s.includes("categories=tax"))).toBe(false); + await new Promise(resolve => setTimeout(resolve, 100)); + expect(searches).toHaveLength(countBefore); + expect(searches.some(s => s.includes("categories=tax"))).toBe(false); }); it("reset clears filters and refetches unfiltered", async () => { @@ -420,13 +432,15 @@ describe("AccountOperationsPage", () => { const url = new URL(request.url); searches.push(url.search); return HttpResponse.json( - resource({ - accountId: "account-1", - items: [operation], - nextCursor: null, - hasNext: false, - observedAt: "2026-08-14T00:00:00Z", - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + hasNext: false, + items: [operation], + nextCursor: null, + observedAt: "2026-08-14T00:00:00Z", + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -440,7 +454,7 @@ describe("AccountOperationsPage", () => { fireEvent.click(await screen.findByText("Налог")); fireEvent.click(screen.getByRole("button", { name: "Применить" })); await waitFor(() => - expect(searches.some((s) => s.includes("categories=tax"))).toBe(true), + expect(searches.some(s => s.includes("categories=tax"))).toBe(true), ); fireEvent.click(screen.getByRole("button", { name: "Сбросить" })); await waitFor(() => expect(searches.at(-1)).not.toContain("categories=")); @@ -471,9 +485,11 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () => ({ request }) => { requested.push(Object.fromEntries(new URL(request.url).searchParams)); return HttpResponse.json( - resource(null, { - sync: { id: null, state: "failed", errorCode: "TBANK_UNAVAILABLE" }, - }), + resource(null, (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + sync: { errorCode: "TBANK_UNAVAILABLE", id: null, state: "failed" }, + } + /* eslint-enable unicorn/no-null */)), ); }, ), @@ -486,10 +502,10 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () => const retry = await screen.findByRole("button", { name: "Повторить" }); expect(requested).toEqual([ { - from: "2024-02-29T00:00:00.000Z", - to: "2024-03-01T23:59:59.999Z", categories: "trade", + from: "2024-02-29T00:00:00.000Z", limit: "100", + to: "2024-03-01T23:59:59.999Z", }, ]); expect(syncRequests).toEqual([]); @@ -497,12 +513,12 @@ it("keeps UTC operation boundaries in GET and source sync requests", async () => await waitFor(() => expect(syncRequests).toEqual([ { - screen: "operations", accountId: "account-1", - from: "2024-02-29T00:00:00.000Z", - to: "2024-03-01T23:59:59.999Z", categories: ["trade"], + from: "2024-02-29T00:00:00.000Z", limit: 100, + screen: "operations", + to: "2024-03-01T23:59:59.999Z", }, ]), ); @@ -514,12 +530,14 @@ it("does not label incomplete empty operations as a confirmed empty period", asy http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => HttpResponse.json( resource( - { - accountId: "account-1", - items: [], - hasNext: false, - nextCursor: null, - }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + hasNext: false, + items: [], + nextCursor: null, + } + /* eslint-enable unicorn/no-null */), { availability: "partial" }, ), ), @@ -537,17 +555,17 @@ it("recovers an invalid cursor at the first page without clearing applied filter http.get( "*/api/v1/brokerage-accounts/:accountId/operations", ({ request }) => { - const params = new URL(request.url).searchParams; - searches.push(params); - if (params.has("cursor")) + const parameters = new URL(request.url).searchParams; + searches.push(parameters); + if (parameters.has("cursor")) return HttpResponse.json( { code: "INVALID_OPERATIONS_CURSOR" }, { status: 400 }, ); return HttpResponse.json( resource({ - items: [operation], hasNext: true, + items: [operation], nextCursor: "old-cursor", }), ); @@ -557,7 +575,7 @@ it("recovers an invalid cursor at the first page without clearing applied filter renderPage("?from=2026-08-01&to=2026-08-14&categories=trade"); fireEvent.click(await screen.findByRole("button", { name: "Далее" })); fireEvent.click(await screen.findByRole("button", { name: "Повторить" })); - await waitFor(() => expect(searches.length).toBe(3)); + await waitFor(() => expect(searches).toHaveLength(3)); expect(searches[2].get("cursor")).toBeNull(); for (const key of ["from", "to", "categories"]) expect(searches[2].get(key)).toBe(searches[0].get(key)); diff --git a/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx b/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx index 153ee24..1ed7045 100644 --- a/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx +++ b/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; + import { useAccountOperationsPageVm } from "./AccountOperationsPage.vm"; import { AccountOperationsPageError } from "./components/AccountOperationsPageError.view"; import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageLoaded.view"; @@ -13,11 +14,7 @@ const AccountOperationsPage: FC = (props) => { return ; } - if (viewModel.state === "error") { - return ; - } - - return ; + return viewModel.state === "error" ? : ; }; export { AccountOperationsPage }; diff --git a/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts b/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts index 17549a5..daa423b 100644 --- a/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts +++ b/src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts @@ -2,44 +2,44 @@ import { useQueryClient } from "@tanstack/react-query"; import { useEffect, useState } from "react"; import { useParams, useSearchParams } from "react-router"; import { z } from "zod"; + import { type BrokerageOperation, brokerageOperationsQueryOptions, - type OperationCategory, operationCategories, + type OperationCategory, useBrokerageOperations, } from "@/entities/broker-operation"; - import { useScreenSync } from "@/features/tbank-connection"; import { apiErrorCode } from "@/shared/api"; -type AccountOperationsPageViewModel = - | { state: "loading" } - | { state: "error"; retry: () => void; onReset: () => void } - | { - state: "loaded"; - sourceError?: boolean; - lastSuccessfulAt?: string | null; - partial?: boolean; - historyLoading?: boolean; - refreshing?: boolean; - refreshError?: boolean; - retry?: () => void; - draftFrom: string | null; - draftTo: string | null; - draftCategories: OperationCategory[]; - items: BrokerageOperation[]; - hasNext: boolean; - hasPrevious: boolean; - canApply: boolean; - onDraftFromChange: (value: string | null) => void; - onDraftToChange: (value: string | null) => void; - onDraftCategoriesChange: (value: OperationCategory[]) => void; - onApply: () => void; - onReset: () => void; - onNext: () => void; - onPrevious: () => void; - }; +type AccountOperationsPageViewModel + = | { + canApply: boolean; + draftCategories: OperationCategory[]; + draftFrom: null | string; + draftTo: null | string; + hasNext: boolean; + hasPrevious: boolean; + historyLoading?: boolean; + items: BrokerageOperation[]; + lastSuccessfulAt?: null | string; + onApply: () => void; + onDraftCategoriesChange: (value: OperationCategory[]) => void; + onDraftFromChange: (value: null | string) => void; + onDraftToChange: (value: null | string) => void; + onNext: () => void; + onPrevious: () => void; + onReset: () => void; + partial?: boolean; + refreshError?: boolean; + refreshing?: boolean; + retry?: () => void; + sourceError?: boolean; + state: "loaded"; + } + | { onReset: () => void; retry: () => void; state: "error" } + | { state: "loading" }; const useAccountOperationsPageVm = ( scopeId?: string, @@ -47,19 +47,19 @@ const useAccountOperationsPageVm = ( const { accountId: routeAccountId } = useParams(); const accountId = scopeId ?? routeAccountId; const queryClient = useQueryClient(); - const [searchParams, setSearchParams] = useSearchParams(); - const urlFrom = searchParams.get("from"); - const urlTo = searchParams.get("to"); - const validUrlPeriod = isValidPeriod(urlFrom, urlTo); - const appliedFrom = validUrlPeriod ? urlFrom : null; - const appliedTo = validUrlPeriod ? urlTo : null; - const appliedCategories = operationCategories.filter((category) => - (searchParams.get("categories") ?? "").split(",").includes(category), + const [searchParameters, setSearchParameters] = useSearchParams(); + const urlFrom = searchParameters.get("from"); + const urlTo = searchParameters.get("to"); + const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo); + const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + const appliedCategories = operationCategories.filter(category => + (searchParameters.get("categories") ?? "").split(",").includes(category), ); - const [draftFrom, setDraftFrom] = useState(appliedFrom); - const [draftTo, setDraftTo] = useState(appliedTo); - const [draftCategories, setDraftCategories] = - useState(appliedCategories); + const [draftFrom, setDraftFrom] = useState(appliedFrom); + const [draftTo, setDraftTo] = useState(appliedTo); + const [draftCategories, setDraftCategories] + = useState(appliedCategories); const scopeKey = JSON.stringify([ accountId, urlFrom, @@ -67,147 +67,146 @@ const useAccountOperationsPageVm = ( appliedCategories, ]); const [pagination, setPagination] = useState<{ - scopeKey: string; cursors: string[]; - }>({ scopeKey, cursors: [] }); + scopeKey: string; + }>({ cursors: [], scopeKey }); const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : []; const cursor = cursors.at(-1); if (pagination.scopeKey !== scopeKey) { - setPagination({ scopeKey, cursors: [] }); + setPagination({ cursors: [], scopeKey }); } useEffect(() => { - if (validUrlPeriod) return; - const normalized = new URLSearchParams(searchParams); + if (isValidUrlPeriod) return; + const normalized = new URLSearchParams(searchParameters); normalized.delete("from"); normalized.delete("to"); - setSearchParams(normalized, { replace: true }); - }, [validUrlPeriod, searchParams, setSearchParams]); - const [previousSearch, setPreviousSearch] = useState(searchParams); - if (previousSearch !== searchParams) { - setPreviousSearch(searchParams); + setSearchParameters(normalized, { replace: true }); + }, [isValidUrlPeriod, searchParameters, setSearchParameters]); + const [previousSearch, setPreviousSearch] = useState(searchParameters); + if (previousSearch !== searchParameters) { + setPreviousSearch(searchParameters); setDraftFrom(appliedFrom); setDraftTo(appliedTo); setDraftCategories( - operationCategories.filter((category) => - (searchParams.get("categories") ?? "").split(",").includes(category), + operationCategories.filter(category => + (searchParameters.get("categories") ?? "").split(",").includes(category), ), ); } const firstPageQuery = { from: dateStart(appliedFrom), to: dateEnd(appliedTo), - ...(appliedCategories.length ? { categories: appliedCategories } : {}), + ...((appliedCategories.length > 0) && { categories: appliedCategories }), limit: 100, }; const operations = useBrokerageOperations(accountId, { ...firstPageQuery, - ...(cursor ? { cursor } : {}), + ...(cursor && { cursor }), }); const sync = useScreenSync( - { screen: "operations", accountId, ...firstPageQuery }, + { accountId, screen: "operations", ...firstPageQuery }, [operations], ); + if (operations.isLoading) return { state: "loading" }; const resetQueryKey = brokerageOperationsQueryOptions(accountId, { limit: 100, }).queryKey; - const resetCursors = () => setPagination({ scopeKey, cursors: [] }); + const resetCursors = () => setPagination({ cursors: [], scopeKey }); const retry = () => { if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") { void queryClient.invalidateQueries({ + exact: true, queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery) .queryKey, - exact: true, }); resetCursors(); - } else void sync.retry(); + } + else void sync.retry(); }; const onReset = () => { setDraftFrom(null); setDraftTo(null); setDraftCategories([]); - setSearchParams({}); + setSearchParameters({}); resetCursors(); void queryClient.invalidateQueries({ queryKey: resetQueryKey }); }; - if (operations.isLoading) return { state: "loading" }; if ( - (operations.isError || operations.meta?.sync.state === "failed") && - (!operations.data || - apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") + (operations.isError || operations.meta?.sync.state === "failed") + && (!operations.data + || apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") ) - return { state: "error", retry, onReset }; + return { onReset, retry, state: "error" }; if (!operations.data) return { state: "loading" }; const nextCursor = operations.data.nextCursor; - const isDirty = - draftFrom !== appliedFrom || - draftTo !== appliedTo || - !sameCategories(draftCategories, appliedCategories); + const isDirty + = draftFrom !== appliedFrom + || draftTo !== appliedTo + || !isSameCategories(draftCategories, appliedCategories); return { - state: "loaded", - sourceError: sync.sourceError, - lastSuccessfulAt: operations.meta?.lastSuccessfulAt, - partial: operations.meta?.availability !== "complete", - historyLoading: - operations.meta?.coverage?.historyState === "loading" || - operations.meta?.coverage?.historyState === "partial", - refreshing: operations.isFetching || sync.refreshing, - refreshError: operations.isError || sync.sourceError || sync.transportError, - retry, + canApply: isDirty && isValidPeriod(draftFrom, draftTo), + draftCategories, draftFrom, draftTo, - draftCategories, + hasNext: Boolean(nextCursor && operations.data.hasNext), + hasPrevious: cursors.length > 0, + historyLoading: + operations.meta?.coverage?.historyState === "loading" + || operations.meta?.coverage?.historyState === "partial", items: operations.data.items, - hasNext: Boolean(operations.data.hasNext && nextCursor), - hasPrevious: Boolean(cursors.length), - canApply: isDirty && isValidPeriod(draftFrom, draftTo), - onDraftFromChange: setDraftFrom, - onDraftToChange: setDraftTo, - onDraftCategoriesChange: setDraftCategories, + lastSuccessfulAt: operations.meta?.lastSuccessfulAt, onApply: () => { if (!isValidPeriod(draftFrom, draftTo)) return; - setSearchParams({ - ...(draftFrom ? { from: draftFrom } : {}), - ...(draftTo ? { to: draftTo } : {}), - ...(draftCategories.length - ? { categories: draftCategories.join(",") } - : {}), + setSearchParameters({ + ...(draftFrom && { from: draftFrom }), + ...(draftTo && { to: draftTo }), + ...((draftCategories.length > 0) && { categories: draftCategories.join(",") }), }); resetCursors(); }, - onReset, + onDraftCategoriesChange: setDraftCategories, + onDraftFromChange: setDraftFrom, + onDraftToChange: setDraftTo, onNext: () => { if (nextCursor) - setPagination({ scopeKey, cursors: [...cursors, nextCursor] }); + setPagination({ cursors: [...cursors, nextCursor], scopeKey }); }, onPrevious: () => - setPagination({ scopeKey, cursors: cursors.slice(0, -1) }), + setPagination({ cursors: cursors.slice(0, -1), scopeKey }), + onReset, + partial: operations.meta?.availability !== "complete", + refreshError: operations.isError || sync.sourceError || sync.transportError, + refreshing: operations.isFetching || sync.refreshing, + retry, + sourceError: sync.sourceError, + state: "loaded", }; }; -const calendarDate = z.string().date(); -function isValidPeriod(from: string | null, to: string | null) { - return ( - [from, to].every( - (date) => date === null || calendarDate.safeParse(date).success, - ) && - (!from || !to || from <= to) - ); -} - -function dateStart(value: string | null) { - return value ? `${value}T00:00:00.000Z` : undefined; -} - -function dateEnd(value: string | null) { +const calendarDate = z.iso.date(); +function dateEnd(value: null | string) { return value ? `${value}T23:59:59.999Z` : undefined; } -function sameCategories(a: OperationCategory[], b: OperationCategory[]) { - return a.length === b.length && a.every((value) => b.includes(value)); +function dateStart(value: null | string) { + return value ? `${value}T00:00:00.000Z` : undefined; +} + +function isSameCategories(a: OperationCategory[], b: OperationCategory[]) { + return a.length === b.length && a.every(value => b.includes(value)); +} + +function isValidPeriod(from: null | string, to: null | string) { + return ( + [from, to].every( + date => date === null || calendarDate.safeParse(date).success, + ) + && (!from || !to || from <= to) + ); } export { type AccountOperationsPageViewModel, useAccountOperationsPageVm }; diff --git a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx index aa5aa2c..3a8e4cb 100644 --- a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx +++ b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx @@ -1,7 +1,9 @@ +import type { FC } from "react"; + import { Button, Group } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm"; type AccountOperationsPageErrorProps = Extract< @@ -17,17 +19,17 @@ const AccountOperationsPageError: FC = ( return ( - - } + )} + error + text={t("ledger.errorText")} + title={t("ledger.errorTitle")} /> ); }; diff --git a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx index 077f6ac..84d7fa1 100644 --- a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx +++ b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx @@ -1,3 +1,5 @@ +import type { FC, ReactNode } from "react"; + import { Alert, Button, @@ -10,14 +12,15 @@ import { } from "@mantine/core"; import { DatePickerInput } from "@mantine/dates"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import { LedgerEntryRow, - type OperationCategory, operationCategories, + type OperationCategory, } from "@/entities/broker-operation"; import { formatSnapshotTime } from "@/shared/lib"; + import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm"; type AccountOperationsPageLoadedProps = Extract< @@ -54,99 +57,106 @@ const AccountOperationsPageLoaded: FC = ( } = props; const { t } = useTranslation(); - const categoryData = operationCategories.map((category) => ({ - value: category, + const categoryData = operationCategories.map(category => ({ label: t(`ledger.category.${category}`), + value: category, })); + // eslint-disable-next-line sonarjs/function-return-type -- ReactNode deliberately includes lists, elements and empty output. + function renderOperations(): ReactNode { + if (items.length > 0) { + return items.map(operation => ( + + )); + } + if (props.partial) { + return; + } + return ( + + ); + } return ( - {props.lastSuccessfulAt ? ( - + {!!(props.lastSuccessfulAt) && (( + {t("investment.sourceTime", { date: formatSnapshotTime(props.lastSuccessfulAt), })} - ) : null} + ))} {t("ledger.title")} - - {props.partial ? ( + {!!(props.partial) && (( {t("investment.partial")} - ) : null} - {props.historyLoading ? {t("investment.history")} : null} - {props.refreshing ? ( - - ) : null} - {props.refreshError ? ( - + ))} + {!!(props.historyLoading) && ({t("investment.history")})} + {!!(props.refreshing) && (( + + ))} + {!!(props.refreshError) && (( + {t( props.sourceError ? "investment.syncFailed" : "accounts.refreshError", )} - - ) : null} + ))} { onDraftFromChange(from); onDraftToChange(to); }} - valueFormat="DD.MM.YYYY" popoverProps={{ - returnFocus: true, middlewares: { shift: { crossAxis: true } }, + returnFocus: true, }} + type="range" + value={[draftFrom, draftTo]} + valueFormat="DD.MM.YYYY" /> - onDraftCategoriesChange(fromMultiSelectValue(value)) - } clearable clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }} + data={categoryData} + label={t("ledger.categories")} + onChange={value => + onDraftCategoriesChange(fromMultiSelectValue(value))} + placeholder={t("ledger.categoriesPlaceholder")} + value={draftCategories} /> - - - {items.length ? ( - items.map((operation) => ( - - )) - ) : !props.partial ? ( - - ) : null} - {hasNext || hasPrevious ? ( + {renderOperations()} + {!!(hasNext || hasPrevious) && (( - ) : null} + ))} ); }; diff --git a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx index 63b8310..fbbcc98 100644 --- a/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx +++ b/src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx @@ -1,6 +1,7 @@ +import type { FC } from "react"; + import { Group, Skeleton, Stack } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; const skeletonRowIds = ["first", "second", "third", "fourth"]; @@ -17,12 +18,12 @@ const AccountOperationsPageLoading: FC = () => { - - + + - {skeletonRowIds.map((id) => ( - + {skeletonRowIds.map(id => ( + ))} diff --git a/src/pages/account/ui/AccountPage/AccountPage.test.tsx b/src/pages/account/ui/AccountPage/AccountPage.test.tsx index c9b718c..ab19dbf 100644 --- a/src/pages/account/ui/AccountPage/AccountPage.test.tsx +++ b/src/pages/account/ui/AccountPage/AccountPage.test.tsx @@ -7,26 +7,53 @@ import { waitFor, within, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, Route, Routes } from "react-router"; import { describe, expect, it, vi } from "vitest"; + import type { BrokerageEvent } from "@/entities/brokerage-event"; + import { type Portfolio, portfolioQueryOptions } from "@/entities/portfolio"; import { configureAuthClient } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; -import { AccountPage } from "./AccountPage"; + import type { AccountPageRecentEvents, AccountPageRecentOperations, } from "./AccountPage.vm"; + +import { AccountPage } from "./AccountPage"; import { toAccountPagePositionSections } from "./AccountPage.vm"; import { AccountPageEmpty } from "./components/AccountPageEmpty.view"; import { AccountPageError } from "./components/AccountPageError.view"; import { AccountPageLoaded } from "./components/AccountPageLoaded.view"; import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view"; +function configureTestAuth() { + configureAuthClient({ + accessToken: () => "test-token", + clear: vi.fn(), + refresh: () => Promise.resolve(true), + }); +} + +function renderAccountRoute(queryClient: QueryClient) { + configureTestAuth(); + return render( + + + + + } path="/accounts/:accountId" /> + + + + , + ); +} + function renderPage(ui: React.ReactNode) { const queryClient = createTestQueryClient(); return render( @@ -38,62 +65,41 @@ function renderPage(ui: React.ReactNode) { ); } -function configureTestAuth() { - configureAuthClient({ - accessToken: () => "test-token", - refresh: async () => true, - clear: vi.fn(), - }); -} - -function renderAccountRoute(queryClient: QueryClient) { - configureTestAuth(); - return render( - - - - - } /> - - - - , - ); -} - -const portfolio: Portfolio = { - lastSuccessfulAt: "2026-08-13T10:00:00Z", - isStale: true, - totalsByCurrency: [{ currency: "RUB", value: "1234.5" }], - positions: [ - { - figi: "FIGI-2", - displayName: "Вторая", - type: "STOCK", - quantity: "2", - currentValue: null, - averagePurchasePrice: null, - absoluteReturn: null, - isin: null, - ticker: null, - logoName: "vtoraya.png", - }, - { - figi: "FIGI-1", - displayName: "Первая", - type: "BOND", - quantity: "1", - currentValue: { currency: "RUB", value: "10" }, - averagePurchasePrice: { currency: "RUB", value: "11" }, - absoluteReturn: { currency: "RUB", value: "-1" }, - isin: "RU000A0JX0J2", - ticker: null, - logoName: null, - }, - ], - structure: { currencies: [], unvaluedCategories: [] }, - cashBalances: [{ currency: "USD", value: "0.5" }], -}; +const portfolio: Portfolio = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + cashBalances: [{ currency: "USD", value: "0.5" }], + isStale: true, + lastSuccessfulAt: "2026-08-13T10:00:00Z", + positions: [ + { + absoluteReturn: null, + averagePurchasePrice: null, + currentValue: null, + displayName: "Вторая", + figi: "FIGI-2", + isin: null, + logoName: "vtoraya.png", + quantity: "2", + ticker: null, + type: "STOCK", + }, + { + absoluteReturn: { currency: "RUB", value: "-1" }, + averagePurchasePrice: { currency: "RUB", value: "11" }, + currentValue: { currency: "RUB", value: "10" }, + displayName: "Первая", + figi: "FIGI-1", + isin: "RU000A0JX0J2", + logoName: null, + quantity: "1", + ticker: null, + type: "BOND", + }, + ], + structure: { currencies: [], unvaluedCategories: [] }, + totalsByCurrency: [{ currency: "RUB", value: "1234.5" }], + } +/* eslint-enable unicorn/no-null */); const emptyRecentOperations: AccountPageRecentOperations = { state: "empty", @@ -105,44 +111,46 @@ const emptyRecentEvents: AccountPageRecentEvents = { to: "/accounts/account-1/events", }; +function emptyProps() { + return { + recentEvents: emptyRecentEvents, + recentOperations: emptyRecentOperations, + }; +} + function loadedProps(nextPortfolio: Portfolio = portfolio) { return { portfolio: nextPortfolio, positionSections: toAccountPagePositionSections(nextPortfolio), - recentOperations: emptyRecentOperations, recentEvents: emptyRecentEvents, - }; -} - -function emptyProps() { - return { recentOperations: emptyRecentOperations, - recentEvents: emptyRecentEvents, }; } describe("AccountPage states", () => { it.each( - ["account-1", "all"].flatMap((accountId) => - ["STOCK", "BOND"].flatMap((type) => - [true, false].map((hasMetadata) => ({ accountId, type, hasMetadata })), + ["account-1", "all"].flatMap(accountId => + ["STOCK", "BOND"].flatMap(type => + [true, false].map(hasMetadata => ({ accountId, hasMetadata, type })), ), ), )( "keeps portfolio metadata authoritative and links the exact issue in $accountId for $type (metadata: $hasMetadata)", - async ({ accountId, type, hasMetadata }) => { + async ({ accountId, hasMetadata, type }) => { const collection = type === "STOCK" ? "stocks" : "bonds"; const slug = type === "STOCK" ? "SBERP" : "SU26238RMFS4"; const uid = "c190ff1f-1447-4227-b543-316332699ca5"; const requests = vi.fn(); - const position = { - ...portfolio.positions[0], - type, - instrumentUid: uid, - ticker: hasMetadata ? slug : null, - displayName: hasMetadata ? "Сбербанк привилегированные" : "FIGI-2", - logoName: hasMetadata ? "vtoraya.png" : null, - }; + const position = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...portfolio.positions[0], + displayName: hasMetadata ? "Сбербанк привилегированные" : "FIGI-2", + instrumentUid: uid, + logoName: hasMetadata ? "vtoraya.png" : null, + ticker: hasMetadata ? slug : null, + type, + } + /* eslint-enable unicorn/no-null */); server.use( http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => HttpResponse.json( @@ -150,7 +158,7 @@ describe("AccountPage states", () => { ...portfolio, positions: accountId === "all" - ? ["account-1", "account-2"].map((id) => ({ + ? ["account-1", "account-2"].map(id => ({ ...position, account: { id, name: id }, })) @@ -163,11 +171,11 @@ describe("AccountPage states", () => { return HttpResponse.json( resource({ instrumentUid: uid, - slug, - name: "Название из карточки инструмента", - ticker: "OTHER-TICKER", isin: "OTHER-ISIN", logoName: "other.png", + name: "Название из карточки инструмента", + slug, + ticker: "OTHER-TICKER", }), ); }), @@ -194,10 +202,12 @@ describe("AccountPage states", () => { ).not.toBeInTheDocument(); const logo = screen.queryByRole("img", { name: position.displayName }); if (hasMetadata) + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(logo).toHaveAttribute( "src", "https://invest-brands.cdn-tinkoff.ru/vtorayax160.png", ); + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. else expect(logo).not.toBeInTheDocument(); }, ); @@ -250,15 +260,16 @@ describe("AccountPage states", () => { screen.getByRole("region", { name: "Структура портфеля" }), ).toHaveTextContent("Данные о структуре портфеля пока недоступны."); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1 234,5 ₽", "0,5 $"]); }); it("keeps initial placeholders decorative without amounts or focus targets", () => { const { container } = renderPage(); expect(screen.getByRole("status")).toHaveAttribute("aria-busy", "true"); expect(screen.queryByRole("definition")).not.toBeInTheDocument(); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. expect(container.querySelector("[tabindex], button, a, input")).toBeNull(); - expect(container).not.toHaveTextContent(/₽|\$|€|0,00/); + expect(container).not.toHaveTextContent(/[₽$€]|0,00/); }); it.each(["NOT_FOUND", "TBANK_NOT_CONNECTED", "INVALID_TBANK_TOKEN"])( @@ -277,7 +288,7 @@ describe("AccountPage states", () => { it.each(["TBANK_UNAVAILABLE", "UNKNOWN"])( "allows retry for %s", - async (code) => { + (code) => { const retry = vi.fn(); renderPage(); fireEvent.click(screen.getByRole("button", { name: "Повторить" })); @@ -290,22 +301,22 @@ describe("AccountPage states", () => { , ); @@ -313,10 +324,10 @@ describe("AccountPage states", () => { screen.getByRole("region", { name: "Денежные остатки" }), ); expect( - balances.getAllByRole("definition").map((node) => node.textContent), + balances.getAllByRole("definition").map(node => node.textContent), ).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]); expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument(); expect( @@ -332,14 +343,14 @@ describe("AccountPage states", () => { HttpResponse.json( resource({ ...portfolio, - totalsByCurrency: [], positions: hasPositions ? portfolio.positions : [], + totalsByCurrency: [], }), ), ), ); renderAccountRoute(createTestQueryClient()); - await screen.findByRole("heading", { name: "Портфель", level: 1 }); + await screen.findByRole("heading", { level: 1, name: "Портфель" }); expect(screen.getByRole("definition")).toHaveTextContent("0,5 $"); expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument(); }, @@ -353,17 +364,17 @@ describe("AccountPage states", () => { async ({ totalsByCurrency }) => { const snapshot: Portfolio = { ...portfolio, - totalsByCurrency, + cashBalances: [], positions: [ { ...portfolio.positions[0], + currentValue: { currency: "RUB", value: "100" }, displayName: "Торгуемая валюта", type: "CURRENCY", - currentValue: { currency: "RUB", value: "100" }, }, ], structure: { currencies: [], unvaluedCategories: [] }, - cashBalances: [], + totalsByCurrency, }; server.use( http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => @@ -373,7 +384,7 @@ describe("AccountPage states", () => { const queryClient = createTestQueryClient(); renderAccountRoute(queryClient); - await screen.findByRole("heading", { name: "Портфель", level: 1 }); + await screen.findByRole("heading", { level: 1, name: "Портфель" }); expect( screen.queryByRole("button", { name: "Другие позиции" }), ).not.toBeInTheDocument(); @@ -385,8 +396,8 @@ describe("AccountPage states", () => { ).queryByRole("definition"), ).not.toBeInTheDocument(); expect( - screen.queryAllByRole("definition").map((node) => node.textContent), - ).toEqual(totalsByCurrency.length ? ["100 ₽"] : []); + screen.queryAllByRole("definition").map(node => node.textContent), + ).toEqual(totalsByCurrency.length > 0 ? ["100 ₽"] : []); expect( queryClient.getQueryData(portfolioQueryOptions("account-1").queryKey), ).toEqual(resource(snapshot)); @@ -417,7 +428,7 @@ describe("AccountPage states", () => { ).toHaveAttribute("href", "/settings"); renderPage(); - screen.getByRole("button", { name: "Повторить" }).click(); + fireEvent.click(screen.getByRole("button", { name: "Повторить" })); expect(retry).toHaveBeenCalledOnce(); }); @@ -438,7 +449,7 @@ describe("AccountPage states", () => { ).toBeInTheDocument(); const positions = screen .getAllByText(/Вторая|Первая/) - .map((element) => element.textContent); + .map(element => element.textContent); expect(positions).toEqual(["Вторая", "Первая"]); expect(screen.getByText("10 ₽")).toBeInTheDocument(); expect(screen.getByText("-1 ₽")).toBeInTheDocument(); @@ -459,35 +470,37 @@ describe("AccountPage states", () => { it("renders stock cards with logo fallback and signed unlabeled return", () => { renderPage( , ); expect(screen.getByText("А")).toBeInTheDocument(); @@ -500,23 +513,25 @@ describe("AccountPage states", () => { it("groups stock supporting metrics into quiet single lines", () => { renderPage( , ); @@ -531,47 +546,49 @@ describe("AccountPage states", () => { it("uses the ticker only for stock cards and otherwise keeps the ISIN", () => { renderPage( , ); @@ -587,35 +604,37 @@ describe("AccountPage states", () => { it("renders bond cards with logo, fallback, and signed unlabeled return like stocks", () => { renderPage( , ); expect(screen.getByRole("img", { name: "Долг" })).toHaveAttribute( @@ -634,23 +653,25 @@ describe("AccountPage states", () => { it("renders bond cards in expanded layout with bond-specific classes", () => { renderPage( , ); expect(screen.getByText("О")).toBeInTheDocument(); @@ -663,23 +684,25 @@ describe("AccountPage states", () => { it("keeps other-position cards compact with labeled return and no logo", () => { renderPage( , ); expect(screen.getByText("Доход: -5 ₽")).toBeInTheDocument(); @@ -690,13 +713,15 @@ describe("AccountPage states", () => { renderPage( , ); expect( @@ -725,29 +750,31 @@ describe("AccountPage states", () => { renderPage( , ); @@ -756,48 +783,52 @@ describe("AccountPage states", () => { }); it("keeps future events ordered with calendar dates and projected rather than posted amounts", () => { - const event: BrokerageEvent = { - type: "coupon", - date: "2026-09-10", - dateKind: "event", - figi: null, - instrumentUid: null, - ticker: "DEMO", - displayName: "Облигация", - logoName: null, - isin: "RU000A0JX0J2", - projectedAmount: { currency: "RUB", value: "850.50" }, - }; + const event: BrokerageEvent = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + date: "2026-09-10", + dateKind: "event", + displayName: "Облигация", + figi: null, + instrumentUid: null, + isin: "RU000A0JX0J2", + logoName: null, + projectedAmount: { currency: "RUB", value: "850.50" }, + ticker: "DEMO", + type: "coupon", + } + /* eslint-enable unicorn/no-null */); renderPage( , ); @@ -811,8 +842,8 @@ describe("AccountPage states", () => { "Оферта · Облигация", ]; for (const title of titles) expect(content.getByText(title)).toBeVisible(); - expect(titles.map((title) => text.indexOf(title))).toEqual( - titles.map((title) => text.indexOf(title)).sort((a, b) => a - b), + expect(titles.map(title => text.indexOf(title))).toEqual( + titles.map(title => text.indexOf(title)).toSorted((a, b) => a - b), ); expect(content.getByText("10.09.2026 · RU000A0JX0J2")).toBeVisible(); expect(content.getAllByText(/RU000A0JX0J2$/)).toHaveLength(4); @@ -846,9 +877,13 @@ describe("AccountPage states", () => { const skeleton = content.getByRole("status", { name: "Загрузка будущих событий", }); + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(skeleton).toHaveAttribute("aria-busy", "true"); + // eslint-disable-next-line vitest/no-conditional-expect -- The fixed table case selects the expected outcome; every case asserts its own branch. expect(within(skeleton).queryByRole("link")).not.toBeInTheDocument(); - } else { + } + else { + // eslint-disable-next-line vitest/no-conditional-expect -- The table case deterministically selects the empty state. expect( content.getByText("На ближайшие 30 дней событий не найдено."), ).toBeVisible(); @@ -879,20 +914,22 @@ describe("AccountPage states", () => { it.each([503])( "preserves totals and UTC snapshot through refresh error %i, retry and success", async (status) => { - const initialPortfolio: Portfolio = { - ...portfolio, - structure: { - unvaluedCategories: [{ type: "STOCK", count: 1 }], - currencies: [ - { - currency: "RUB", - totalValue: "10", - hasNegativeValues: false, - categories: [{ type: "BOND", value: "10", sharePercent: null }], - }, - ], - }, - }; + const initialPortfolio: Portfolio = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...portfolio, + structure: { + currencies: [ + { + categories: [{ sharePercent: null, type: "BOND", value: "10" }], + currency: "RUB", + hasNegativeValues: false, + totalValue: "10", + }, + ], + unvaluedCategories: [{ count: 1, type: "STOCK" }], + }, + } + /* eslint-enable unicorn/no-null */); let requestCount = 0; let resolveRetry: ((response: Response) => void) | undefined; server.use( @@ -900,25 +937,27 @@ describe("AccountPage states", () => { HttpResponse.json( { id: "overview", - scope: { screen: "account", accountId: "account-1" }, now: "2026-09-25T00:00:00Z", + scope: { accountId: "account-1", screen: "account" }, }, { status: 202 }, ), ), http.get("*/api/v1/tbank-sync/:id", () => - HttpResponse.json({ - id: "overview", - scope: { screen: "account", accountId: "account-1" }, - now: "2026-09-25T00:00:00Z", - state: "succeeded", - errorCode: null, - progress: { total: 1, completed: 1, discovering: false }, - resources: [ - resource(null, { resourceKey: "portfolio", stateVersion: "2" }) - .meta, - ], - }), + HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "overview", + now: "2026-09-25T00:00:00Z", + progress: { completed: 1, discovering: false, total: 1 }, + resources: [ + resource(null, { resourceKey: "portfolio", stateVersion: "2" }) + .meta, + ], + scope: { accountId: "account-1", screen: "account" }, + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)), ), http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => { requestCount += 1; @@ -926,10 +965,11 @@ describe("AccountPage states", () => { return HttpResponse.json( resource(initialPortfolio, { resourceKey: "portfolio" }), ); - if (requestCount === 3) - return new Promise((resolve) => { - resolveRetry = resolve; - }); + if (requestCount === 3) { + const deferred = Promise.withResolvers(); + resolveRetry = deferred.resolve; + return deferred.promise; + } return HttpResponse.json( { code: status === 404 ? "NOT_FOUND" : "TBANK_UNAVAILABLE" }, { status }, @@ -962,8 +1002,9 @@ describe("AccountPage states", () => { ).toBeInTheDocument(); expect(screen.getByText("Вторая")).toBeInTheDocument(); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1 234,5 ₽", "0,5 $"]); + // eslint-disable-next-line jest-dom/prefer-to-have-text-content -- The cached timestamp must remain exactly unchanged. expect(screen.getByText(/Данные получены/).textContent).toBe( snapshotText, ); @@ -971,8 +1012,9 @@ describe("AccountPage states", () => { await waitFor(() => expect(requestCount).toBe(3)); expect(structure).toHaveTextContent("10 ₽"); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1 234,5 ₽", "0,5 $"]); + // eslint-disable-next-line jest-dom/prefer-to-have-text-content -- The cached timestamp must remain exactly unchanged. expect(screen.getByText(/Данные получены/).textContent).toBe( snapshotText, ); @@ -981,11 +1023,11 @@ describe("AccountPage states", () => { resource( { ...portfolio, + cashBalances: [{ currency: "EUR", value: "2.50" }], isStale: false, lastSuccessfulAt: "2026-08-14T11:30:00Z", - totalsByCurrency: [{ currency: "USD", value: "-0.5" }], structure: { currencies: [], unvaluedCategories: [] }, - cashBalances: [{ currency: "EUR", value: "2.50" }], + totalsByCurrency: [{ currency: "USD", value: "-0.5" }], }, { resourceKey: "portfolio", stateVersion: "2" }, ), @@ -993,7 +1035,7 @@ describe("AccountPage states", () => { ); await waitFor(() => expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["-0,5 $", "2,50 €"]), ); expect(screen.getByText(/Данные получены/)).toHaveTextContent("11:30"); @@ -1015,9 +1057,11 @@ describe("AccountPage states", () => { http.get("*/api/v1/brokerage-accounts/:accountId/portfolio", () => { requestCount += 1; if (requestCount === 1) return HttpResponse.json(resource(portfolio)); - return new Promise((resolve) => { - resolveRefresh = resolve; - }); + { + const deferred = Promise.withResolvers(); + resolveRefresh = deferred.resolve; + return deferred.promise; + } }), ); const queryClient = createTestQueryClient(); @@ -1031,7 +1075,7 @@ describe("AccountPage states", () => { await waitFor(() => expect(requestCount).toBe(2)); expect(screen.getByText("Вторая")).toBeInTheDocument(); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1 234,5 ₽", "0,5 $"]); expect(screen.getByText(/Данные получены/)).toHaveTextContent("10:00"); expect( diff --git a/src/pages/account/ui/AccountPage/AccountPage.tsx b/src/pages/account/ui/AccountPage/AccountPage.tsx index 0b3e294..6a9f1b4 100644 --- a/src/pages/account/ui/AccountPage/AccountPage.tsx +++ b/src/pages/account/ui/AccountPage/AccountPage.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; + import { useAccountPageViewModel } from "./AccountPage.vm"; import { AccountPageEmpty } from "./components/AccountPageEmpty.view"; import { AccountPageError } from "./components/AccountPageError.view"; @@ -16,29 +17,29 @@ const AccountPage: FC = (props) => { ); return ( ); }; diff --git a/src/pages/account/ui/AccountPage/AccountPage.vm.test.tsx b/src/pages/account/ui/AccountPage/AccountPage.vm.test.tsx index 31aaf08..b3eff24 100644 --- a/src/pages/account/ui/AccountPage/AccountPage.vm.test.tsx +++ b/src/pages/account/ui/AccountPage/AccountPage.vm.test.tsx @@ -1,81 +1,87 @@ +import type { FC, PropsWithChildren } from "react"; + import { MantineProvider } from "@mantine/core"; import { act, renderHook, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; -import type { FC, PropsWithChildren } from "react"; +import { http, HttpResponse } from "msw"; import { MemoryRouter, Route, Routes } from "react-router"; import { describe, expect, it, vi } from "vitest"; + import type { Portfolio } from "@/entities/portfolio"; + import { configureAuthClient } from "@/shared/api"; import { createQueryWrapper } from "@/test/query"; import { resource } from "@/test/resource"; import { server } from "@/test/server"; + import { toAccountPagePositionSections, useAccountPageViewModel, } from "./AccountPage.vm"; -const portfolio: Portfolio = { - lastSuccessfulAt: "2026-08-13T10:00:00Z", - isStale: true, - totalsByCurrency: [{ currency: "RUB", value: "150" }], - positions: [ - { - figi: "FIGI-STOCK", - displayName: "Акция", - type: "STOCK", - quantity: "2", - currentValue: { currency: "RUB", value: "100" }, - averagePurchasePrice: null, - absoluteReturn: { currency: "RUB", value: "10" }, - isin: null, - ticker: null, - logoName: "akciya.png", - }, - { - figi: "FIGI-BOND", - displayName: "Облигация", - type: "BOND", - quantity: "1", - currentValue: { currency: "RUB", value: "50" }, - averagePurchasePrice: { currency: "RUB", value: "45" }, - absoluteReturn: { currency: "RUB", value: "-5" }, - isin: "RU000A0JX0J2", - ticker: null, - logoName: null, - }, - { - figi: "FIGI-FUND", - displayName: "Фонд", - type: "FUND", - quantity: "3", - currentValue: null, - averagePurchasePrice: null, - absoluteReturn: null, - isin: null, - ticker: null, - logoName: "fond.png", - }, - ], - structure: { currencies: [], unvaluedCategories: [] }, - cashBalances: [{ currency: "USD", value: "1" }], -}; +const portfolio: Portfolio = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + cashBalances: [{ currency: "USD", value: "1" }], + isStale: true, + lastSuccessfulAt: "2026-08-13T10:00:00Z", + positions: [ + { + absoluteReturn: { currency: "RUB", value: "10" }, + averagePurchasePrice: null, + currentValue: { currency: "RUB", value: "100" }, + displayName: "Акция", + figi: "FIGI-STOCK", + isin: null, + logoName: "akciya.png", + quantity: "2", + ticker: null, + type: "STOCK", + }, + { + absoluteReturn: { currency: "RUB", value: "-5" }, + averagePurchasePrice: { currency: "RUB", value: "45" }, + currentValue: { currency: "RUB", value: "50" }, + displayName: "Облигация", + figi: "FIGI-BOND", + isin: "RU000A0JX0J2", + logoName: null, + quantity: "1", + ticker: null, + type: "BOND", + }, + { + absoluteReturn: null, + averagePurchasePrice: null, + currentValue: null, + displayName: "Фонд", + figi: "FIGI-FUND", + isin: null, + logoName: "fond.png", + quantity: "3", + ticker: null, + type: "FUND", + }, + ], + structure: { currencies: [], unvaluedCategories: [] }, + totalsByCurrency: [{ currency: "RUB", value: "150" }], + } +/* eslint-enable unicorn/no-null */); function configureTestAuth() { configureAuthClient({ accessToken: () => "test-token", - refresh: async () => true, clear: vi.fn(), + refresh: () => Promise.resolve(true), }); } function createWrapper() { const { wrapper: QueryWrapper } = createQueryWrapper(); - const Wrapper: FC = (props) => ( + const Wrapper: FC = props => ( - + @@ -91,30 +97,32 @@ function mockLoadedAccountPage() { ), http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => HttpResponse.json( - resource({ - accountId: "account-1", - items: [ - { - id: "operation-1", - occurredAt: "2026-08-13T10:00:00Z", - type: "Buy", - category: "trade", - description: "Покупка акции", - figi: "FIGI-STOCK", - instrumentUid: null, - ticker: "STK", - instrumentType: "share", - payment: { currency: "RUB", value: "-100" }, - quantity: "1", - price: null, - accruedInterest: null, - commission: null, - }, - ], - nextCursor: null, - hasNext: false, - observedAt: "2026-08-13T10:00:00Z", - }), + resource((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + accountId: "account-1", + hasNext: false, + items: [ + { + accruedInterest: null, + category: "trade", + commission: null, + description: "Покупка акции", + figi: "FIGI-STOCK", + id: "operation-1", + instrumentType: "share", + instrumentUid: null, + occurredAt: "2026-08-13T10:00:00Z", + payment: { currency: "RUB", value: "-100" }, + price: null, + quantity: "1", + ticker: "STK", + type: "Buy", + }, + ], + nextCursor: null, + observedAt: "2026-08-13T10:00:00Z", + } + /* eslint-enable unicorn/no-null */)), ), ), http.get("*/api/v1/brokerage-accounts/:accountId/events", () => @@ -122,16 +130,18 @@ function mockLoadedAccountPage() { resource({ accountId: "account-1", calculatedAt: "2026-08-13T10:00:00Z", - events: Array.from({ length: 6 }, (_, index) => ({ - type: "coupon", - date: `2026-09-${String(index + 1).padStart(2, "0")}`, - dateKind: "event", - figi: `FIGI-EVENT-${index}`, - instrumentUid: null, - ticker: `BND${index}`, - displayName: `Купон ${index}`, - projectedAmount: { currency: "RUB", value: String(index + 1) }, - })), + events: Array.from({ length: 6 }, (_, index) => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + date: `2026-09-${String(index + 1).padStart(2, "0")}`, + dateKind: "event", + displayName: `Купон ${index}`, + figi: `FIGI-EVENT-${index}`, + instrumentUid: null, + projectedAmount: { currency: "RUB", value: String(index + 1) }, + ticker: `BND${index}`, + type: "coupon", + } + /* eslint-enable unicorn/no-null */))), }), ), ), @@ -150,38 +160,40 @@ describe("useAccountPageViewModel", () => { ] as const; const snapshot: Portfolio = { ...portfolio, - totalsByCurrency: [{ currency: "RUB", value: "1250" }], - structure: { currencies: [], unvaluedCategories: [] }, cashBalances: [{ currency: "RUB", value: "1000" }], positions: [ ...portfolio.positions, { ...portfolio.positions[0], + currentValue: { currency: "RUB", value: "50" }, figi: "FIGI-CURRENCY", type: "CURRENCY", - currentValue: { currency: "RUB", value: "50" }, }, - ...otherTypes.map((type) => ({ - ...portfolio.positions[2], - figi: `FIGI-${type}-NEXT`, - type, - currentValue: + ...otherTypes.map(type => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...portfolio.positions[2], + currentValue: type === "OPTION" ? { currency: "RUB", value: "50" } : null, - })), + figi: `FIGI-${type}-NEXT`, + type, + } + /* eslint-enable unicorn/no-null */))), ], + structure: { currencies: [], unvaluedCategories: [] }, + totalsByCurrency: [{ currency: "RUB", value: "1250" }], }; const original = structuredClone(snapshot); const sections = toAccountPagePositionSections(snapshot); - expect(sections.map((section) => section.kind)).toEqual([ + expect(sections.map(section => section.kind)).toEqual([ "stocks", "bonds", "other", ]); - expect(sections[2].groups.map((group) => group.positions[0].figi)).toEqual([ + expect(sections[2].groups.map(group => group.positions[0].figi)).toEqual([ "FIGI-FUND", - ...otherTypes.map((type) => `FIGI-${type}-NEXT`), + ...otherTypes.map(type => `FIGI-${type}-NEXT`), ]); expect(sections[0].groups[0].positions[0].shareText).toBe("40 %"); expect(sections[1].groups[0].positions[0].shareText).toBe("20 %"); @@ -203,9 +215,9 @@ describe("useAccountPageViewModel", () => { { state: "loaded" } >; expect( - loaded.positionSections.map(({ kind, groups }) => ({ + loaded.positionSections.map(({ groups, kind }) => ({ kind, - positions: groups.flatMap((group) => group.positions), + positions: groups.flatMap(group => group.positions), })), ).toMatchObject([ { @@ -213,37 +225,41 @@ describe("useAccountPageViewModel", () => { positions: [ { displayName: "Акция", - shareText: "66,7 %", + logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png", returnText: "+10 ₽", returnTone: "positive", - logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png", - }, - ], - }, - { - kind: "bonds", - positions: [ - { - displayName: "Облигация", - shareText: "33,3 %", - returnText: "-5 ₽", - returnTone: "negative", - logoSrc: null, - }, - ], - }, - { - kind: "other", - positions: [ - { - displayName: "Фонд", - shareText: null, - returnText: null, - returnTone: undefined, - logoSrc: null, + shareText: "66,7 %", }, ], }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + kind: "bonds", + positions: [ + { + displayName: "Облигация", + logoSrc: null, + returnText: "-5 ₽", + returnTone: "negative", + shareText: "33,3 %", + }, + ], + } + /* eslint-enable unicorn/no-null */), + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + kind: "other", + positions: [ + { + displayName: "Фонд", + logoSrc: null, + returnText: null, + returnTone: undefined, + shareText: null, + }, + ], + } + /* eslint-enable unicorn/no-null */), ]); }); @@ -265,13 +281,11 @@ describe("useAccountPageViewModel", () => { { state: "loaded" } >; expect(loaded.recentOperations).toMatchObject({ + items: [{ description: "Покупка акции", id: "operation-1" }], state: "loaded", to: "/accounts/account-1/operations", - items: [{ id: "operation-1", description: "Покупка акции" }], }); expect(loaded.recentEvents).toMatchObject({ - state: "loaded", - to: "/accounts/account-1/events", items: [ { ticker: "BND0" }, { ticker: "BND1" }, @@ -279,6 +293,8 @@ describe("useAccountPageViewModel", () => { { ticker: "BND3" }, { ticker: "BND4" }, ], + state: "loaded", + to: "/accounts/account-1/events", }); }); @@ -302,9 +318,9 @@ describe("useAccountPageViewModel", () => { await waitFor(() => expect(result.current).toMatchObject({ - state: "loaded", - recentOperations: { state: "error" }, recentEvents: { state: "error" }, + recentOperations: { state: "error" }, + state: "loaded", }), ); }); @@ -320,7 +336,9 @@ it("keeps overview sections independent when their source data is incomplete", a http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => HttpResponse.json( resource( - { items: [], hasNext: false, nextCursor: null }, + (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { hasNext: false, items: [], nextCursor: null } + /* eslint-enable unicorn/no-null */), { availability: "partial" }, ), ), @@ -341,20 +359,22 @@ it("keeps overview sections independent when their source data is incomplete", a await waitFor(() => expect(result.current).toMatchObject({ partial: true, - recentOperations: { state: "partial", items: [] }, - recentEvents: { state: "partial", items: [] }, + recentEvents: { items: [], state: "partial" }, + recentOperations: { items: [], state: "partial" }, }), ); }); it("refreshes every overview section through one account descriptor and observational reads", async () => { configureTestAuth(); - const sections: Record = { - portfolio, - operations: { items: [], hasNext: false, nextCursor: null }, - events: { events: [], incomeTotalsByCurrency: [] }, - "income-summary": { totalsByCurrency: [] }, - }; + const sections: Record = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + "events": { events: [], incomeTotalsByCurrency: [] }, + "income-summary": { totalsByCurrency: [] }, + "operations": { hasNext: false, items: [], nextCursor: null }, + portfolio, + } + /* eslint-enable unicorn/no-null */); const observed: string[] = []; const scopes: unknown[] = []; let version = "1"; @@ -377,25 +397,27 @@ it("refreshes every overview section through one account descriptor and observat return HttpResponse.json( { id: "overview", - scope: { screen: "account", accountId: "account-1" }, now: "2026-09-25T00:00:00Z", + scope: { accountId: "account-1", screen: "account" }, }, { status: 202 }, ); }), http.get("*/api/v1/tbank-sync/:id", () => - HttpResponse.json({ - id: "overview", - scope: null, - now: "2026-09-25T00:00:00Z", - state: "succeeded", - errorCode: null, - progress: { total: 4, completed: 4, discovering: false }, - resources: Object.keys(sections).map( - (resourceKey) => - resource(null, { resourceKey, stateVersion: version }).meta, - ), - }), + HttpResponse.json((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + errorCode: null, + id: "overview", + now: "2026-09-25T00:00:00Z", + progress: { completed: 4, discovering: false, total: 4 }, + resources: Object.keys(sections).map( + resourceKey => + resource(null, { resourceKey, stateVersion: version }).meta, + ), + scope: null, + state: "succeeded", + } + /* eslint-enable unicorn/no-null */)), ), ); const { result } = renderHook(() => useAccountPageViewModel(), { @@ -403,10 +425,10 @@ it("refreshes every overview section through one account descriptor and observat }); await waitFor(() => expect(result.current).toMatchObject({ - state: "loaded", - recentOperations: { state: "empty" }, - recentEvents: { state: "empty" }, incomeSummary: { state: "empty" }, + recentEvents: { state: "empty" }, + recentOperations: { state: "empty" }, + state: "loaded", }), ); await act(async () => { @@ -415,5 +437,5 @@ it("refreshes every overview section through one account descriptor and observat await waitFor(() => expect(new Set(observed)).toEqual(new Set(Object.keys(sections))), ); - expect(scopes).toEqual([{ screen: "account", accountId: "account-1" }]); + expect(scopes).toEqual([{ accountId: "account-1", screen: "account" }]); }); diff --git a/src/pages/account/ui/AccountPage/AccountPage.vm.ts b/src/pages/account/ui/AccountPage/AccountPage.vm.ts index a03d11a..8bfa236 100644 --- a/src/pages/account/ui/AccountPage/AccountPage.vm.ts +++ b/src/pages/account/ui/AccountPage/AccountPage.vm.ts @@ -1,5 +1,8 @@ import { useParams } from "react-router"; + import type { BrokerageOperation } from "@/entities/broker-operation"; +import type { Portfolio } from "@/entities/portfolio"; + import { useBrokerageOperations } from "@/entities/broker-operation"; import { type BrokerageAccount, @@ -10,7 +13,6 @@ import { useBrokerageEvents, } from "@/entities/brokerage-event"; import { type IncomeSummary, useIncomeSummary } from "@/entities/income"; -import type { Portfolio } from "@/entities/portfolio"; import { formatShare, usePortfolio } from "@/entities/portfolio"; import { useStocks } from "@/entities/stock"; import { useScreenSync } from "@/features/tbank-connection"; @@ -19,15 +21,46 @@ import { formatMoney, instrumentLogoUrl } from "@/shared/lib"; const RECENT_EVENTS_LIMIT = 5; -type PositionSectionKind = "stocks" | "bonds" | "other"; -type AccountPageReturnTone = "positive" | "negative"; +type AccountPageContent = { + account?: BrokerageAccount; + accountId?: string; + incomeSummary: AccountPageIncomeSummary; + partial?: boolean; + recentEvents: AccountPageRecentEvents; + recentOperations: AccountPageRecentOperations; + refreshError: boolean; + refreshing: boolean; + retry: () => Promise | undefined; + sourceError?: boolean; +}; +type AccountPageEmptyViewModel = AccountPageContent & { + state: "empty"; +}; + +type AccountPageIncomeSummary + = | { + lastSuccessfulAt?: null | string; + refreshError?: boolean; + stale?: boolean; + state: "loaded"; + summary: IncomeSummary; + to: string; + } + | { retry: () => Promise | undefined; state: "error"; to: string } + | { state: "empty" | "loading" | "partial"; to: string }; + +type AccountPageLoadedViewModel = AccountPageContent & { + portfolio: Portfolio; + positionSections: AccountPagePositionSection[]; + state: "loaded"; +}; type AccountPagePosition = Portfolio["positions"][number] & { - shareText: string | null; - returnText: string | null; - returnTone?: AccountPageReturnTone; - logoSrc: string | null; instrumentTo?: string; + logoSrc: null | string; + returnText: null | string; + returnTone?: AccountPageReturnTone; + shareText: null | string; }; type AccountPagePositionGroup = { @@ -36,223 +69,72 @@ type AccountPagePositionGroup = { }; type AccountPagePositionSection = { - kind: PositionSectionKind; groups: AccountPagePositionGroup[]; + kind: PositionSectionKind; }; -type AccountPageRecentOperations = - | { - state: "loading" | "error" | "empty"; - to: string; - } - | { - state: "loaded" | "partial"; - to: string; - items: BrokerageOperation[]; - lastSuccessfulAt?: string | null; - stale?: boolean; - refreshError?: boolean; - }; - type AccountPageRecentEvents = BrokerageEventsPreviewState; -type AccountPageIncomeSummary = - | { state: "loading" | "partial" | "empty"; to: string } - | { state: "error"; to: string; retry: () => undefined | Promise } - | { - state: "loaded"; - to: string; - summary: IncomeSummary; - lastSuccessfulAt?: string | null; - stale?: boolean; - refreshError?: boolean; - }; - -type AccountPageContent = { - sourceError?: boolean; - partial?: boolean; - account?: BrokerageAccount; - accountId?: string; - refreshing: boolean; - refreshError: boolean; - retry: () => undefined | Promise; - recentOperations: AccountPageRecentOperations; - recentEvents: AccountPageRecentEvents; - incomeSummary: AccountPageIncomeSummary; -}; - -type AccountPageLoadedViewModel = AccountPageContent & { - state: "loaded"; - portfolio: Portfolio; - positionSections: AccountPagePositionSection[]; -}; - -type AccountPageEmptyViewModel = AccountPageContent & { - state: "empty"; -}; - -type AccountPageViewModel = - | { state: "loading" } - | { state: "error"; code?: string; retry: () => undefined | Promise } - | AccountPageEmptyViewModel - | AccountPageLoadedViewModel; - -function useAccountPageViewModel(scopeId?: string): AccountPageViewModel { - const { accountId: routeAccountId } = useParams(); - const accountId = scopeId ?? routeAccountId; - const portfolio = usePortfolio(accountId); - const stocks = useStocks( - portfolio.data?.positions.flatMap((position) => - position.type === "STOCK" && position.instrumentUid - ? [position.instrumentUid] - : [], - ) ?? [], - ); - const instrumentDetails = stocks; - const operations = useBrokerageOperations(accountId, { - limit: 5, - }); - const events = useBrokerageEvents(accountId); - const income = useIncomeSummary(accountId); - const accounts = useBrokerageAccounts(); - const sync = useScreenSync({ screen: "account", accountId }, [ - accounts, - portfolio, - operations, - events, - income, - ]); - const account = accounts.data?.find((item) => item.id === accountId); - const recentOperations = toRecentOperations(accountId, operations); - const recentEvents = toRecentEvents(accountId, events); - const incomeSummary = toIncomeSummary(accountId, income); - if (!portfolio.data) { - if (portfolio.isError || portfolio.meta?.sync.state === "failed") - return { - state: "error" as const, - code: apiErrorCode(portfolio.error), - retry: sync.retry, - }; - return { state: "loading" as const }; +type AccountPageRecentOperations + = | { + items: BrokerageOperation[]; + lastSuccessfulAt?: null | string; + refreshError?: boolean; + stale?: boolean; + state: "loaded" | "partial"; + to: string; } - const refresh = { - partial: portfolio.meta?.availability === "partial", - refreshing: portfolio.isFetching || sync.refreshing, - sourceError: sync.sourceError, - refreshError: portfolio.isError || sync.transportError || sync.sourceError, - retry: sync.retry, - }; - if ( - portfolio.meta?.availability === "complete" && - !portfolio.data.positions.length && - !portfolio.data.cashBalances.length - ) - return { - state: "empty" as const, - account, - accountId, - recentOperations, - recentEvents, - incomeSummary, - ...refresh, - }; - return { - state: "loaded" as const, - account, - accountId, - portfolio: portfolio.data, - positionSections: toAccountPagePositionSections( - portfolio.data, - instrumentDetails, - ), - recentOperations, - recentEvents, - incomeSummary, - ...refresh, + | { + state: "empty" | "error" | "loading"; + to: string; }; + +type AccountPageReturnTone = "negative" | "positive"; + +type AccountPageViewModel + = | AccountPageEmptyViewModel + | AccountPageLoadedViewModel + | { code?: string; retry: () => Promise | undefined; state: "error" } + | { state: "loading" }; + +type PositionSectionKind = "bonds" | "other" | "stocks"; + +function groupPositions( + positions: AccountPagePosition[], +): AccountPagePositionGroup[] { + const groups = new Map(); + for (const [index, position] of positions.entries()) { + const identity = positionIdentity(position); + const rowKey = JSON.stringify(["row", position.account?.id, index]); + const key + = identity && position.account + ? JSON.stringify([position.type, ...identity]) + : rowKey; + const group = groups.get(key); + if ( + group + && group.positions.every(item => item.account?.id !== position.account?.id) + ) { + group.positions.push(position); + } + else { + const uniqueKey = group ? rowKey : key; + groups.set(uniqueKey, { key: uniqueKey, positions: [position] }); + } + } + // eslint-disable-next-line unicorn/prefer-iterator-to-array -- Production targets ES2023; Iterator helpers require a newer browser baseline. + return [...groups.values()]; } -function toIncomeSummary( - accountId: string | undefined, - income: ReturnType, -): AccountPageIncomeSummary { - const to = `/accounts/${accountId}/income`; - if (!income.data && !income.isError && income.meta?.sync.state !== "failed") - return { state: "loading", to }; - if (income.meta?.availability === "partial") return { state: "partial", to }; - if (!income.data && (income.isError || income.meta?.sync.state === "failed")) - return { state: "error", to, retry: () => income.refetch() }; - if (!income.data?.totalsByCurrency.length) return { state: "empty", to }; - return { - state: "loaded", - to, - summary: income.data, - lastSuccessfulAt: income.meta?.lastSuccessfulAt, - stale: income.meta?.freshness === "stale", - refreshError: income.isError || income.meta?.sync.state === "failed", - }; -} - -function toRecentOperations( - accountId: string | undefined, - operations: ReturnType, -): AccountPageRecentOperations { - const to = `/accounts/${accountId}/operations`; - if ( - !operations.data && - !operations.isError && - operations.meta?.sync.state !== "failed" - ) - return { state: "loading", to }; - if (operations.meta?.availability === "partial") - return { state: "partial", to, items: operations.data?.items ?? [] }; - if ( - !operations.data && - (operations.isError || operations.meta?.sync.state === "failed") - ) - return { state: "error", to }; - if (!operations.data?.items.length) return { state: "empty", to }; - return { - state: "loaded", - to, - items: operations.data.items, - lastSuccessfulAt: operations.meta?.lastSuccessfulAt, - stale: operations.meta?.freshness === "stale", - refreshError: - operations.isError || operations.meta?.sync.state === "failed", - }; -} - -function toRecentEvents( - accountId: string | undefined, - events: ReturnType, -): AccountPageRecentEvents { - const to = `/accounts/${accountId}/events`; - if (!events.data && !events.isError && events.meta?.sync.state !== "failed") - return { state: "loading", to }; - if (events.meta?.availability === "partial") - return { - state: "partial", - to, - items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [], - }; - if (!events.data && (events.isError || events.meta?.sync.state === "failed")) - return { state: "error", to }; - const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? []; - if (!items.length) return { state: "empty", to }; - return { - state: "loaded", - to, - items, - lastSuccessfulAt: events.meta?.lastSuccessfulAt, - stale: events.meta?.freshness === "stale", - refreshError: events.isError || events.meta?.sync.state === "failed", - }; +function positionIdentity(position: AccountPagePosition) { + if (position.instrumentUid?.trim()) return ["uid", position.instrumentUid.trim()]; + if (position.figi?.trim()) return ["figi", position.figi.trim()]; + return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined; } function toAccountPagePositionSections( portfolio: Portfolio, - instrumentDetails: Map = new Map(), + instrumentDetails: Map = new Map(), ): AccountPagePositionSection[] { const denominators = new Map(); for (const position of portfolio.positions) { @@ -271,104 +153,225 @@ function toAccountPagePositionSections( ); const bonds = toSection("bonds", portfolio, denominators, instrumentDetails); const other = toSection("other", portfolio, denominators, instrumentDetails); - return [stocks, bonds, other].filter((section) => section.groups.length > 0); + return [stocks, bonds, other].filter(section => section.groups.length > 0); } -function toSection( - kind: PositionSectionKind, - portfolio: Portfolio, - denominators: Map, - instrumentDetails: Map, -): AccountPagePositionSection { +function toIncomeSummary( + accountId: string | undefined, + income: ReturnType, +): AccountPageIncomeSummary { + const to = `/accounts/${accountId}/income`; + if (!income.data && !income.isError && income.meta?.sync.state !== "failed") + return { state: "loading", to }; + if (income.meta?.availability === "partial") return { state: "partial", to }; + if (!income.data && (income.isError || income.meta?.sync.state === "failed")) + return { retry: () => income.refetch(), state: "error", to }; + if (!income.data?.totalsByCurrency.length) return { state: "empty", to }; return { - kind, - groups: groupPositions( - portfolio.positions - .filter((position) => { - if (kind === "stocks") return position.type === "STOCK"; - if (kind === "bonds") return position.type === "BOND"; - return ( - position.type !== "STOCK" && - position.type !== "BOND" && - position.type !== "CURRENCY" - ); - }) - .map((position) => - toPosition( - position, - denominators, - kind, - instrumentDetails.get(position.instrumentUid ?? "")?.slug, - ), - ), - ), + lastSuccessfulAt: income.meta?.lastSuccessfulAt, + refreshError: income.isError || income.meta?.sync.state === "failed", + stale: income.meta?.freshness === "stale", + state: "loaded", + summary: income.data, + to, }; } -function groupPositions( - positions: AccountPagePosition[], -): AccountPagePositionGroup[] { - const groups = new Map(); - for (const [index, position] of positions.entries()) { - const identity = position.instrumentUid?.trim() - ? ["uid", position.instrumentUid.trim()] - : position.figi?.trim() - ? ["figi", position.figi.trim()] - : position.isin?.trim() - ? ["isin", position.isin.trim()] - : null; - const rowKey = JSON.stringify(["row", position.account?.id, index]); - const key = - position.account && identity - ? JSON.stringify([position.type, ...identity]) - : rowKey; - const group = groups.get(key); - if ( - group && - !group.positions.some((item) => item.account?.id === position.account?.id) - ) { - group.positions.push(position); - } else { - const uniqueKey = group ? rowKey : key; - groups.set(uniqueKey, { key: uniqueKey, positions: [position] }); - } - } - return [...groups.values()]; -} - function toPosition( position: Portfolio["positions"][number], denominators: Map, kind: PositionSectionKind, instrumentSlug: string | undefined, ): AccountPagePosition { - const expanded = kind !== "other"; + const isExpanded = kind !== "other"; const returnValue = position.absoluteReturn ? Number(position.absoluteReturn.value) - : null; - const returnTone = - returnValue === null || returnValue === 0 - ? undefined - : returnValue > 0 - ? "positive" - : "negative"; + : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null; + let returnTone: AccountPageReturnTone | undefined; + if (returnValue !== null && returnValue !== 0) returnTone = returnValue > 0 ? "positive" : "negative"; + const returnPrefix = isExpanded && returnValue !== null && returnValue > 0 ? "+" : ""; return { ...position, instrumentTo: (kind === "stocks" || kind === "bonds") && position.instrumentUid ? `/${kind}/${encodeURIComponent(instrumentSlug ?? position.instrumentUid)}` : undefined, + logoSrc: isExpanded ? instrumentLogoUrl(position.logoName) : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null, + returnText: position.absoluteReturn + ? `${returnPrefix}${formatMoney(position.absoluteReturn)}` + : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null, + returnTone, shareText: position.currentValue?.currency ? formatShare(position.currentValue, { currency: position.currentValue.currency, value: String(denominators.get(position.currentValue.currency) ?? 0), }) - : null, - returnText: position.absoluteReturn - ? `${expanded && returnValue !== null && returnValue > 0 ? "+" : ""}${formatMoney(position.absoluteReturn)}` - : null, - returnTone, - logoSrc: expanded ? instrumentLogoUrl(position.logoName) : null, + : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null, + }; +} + +function toRecentEvents( + accountId: string | undefined, + events: ReturnType, +): AccountPageRecentEvents { + const to = `/accounts/${accountId}/events`; + if (!events.data && !events.isError && events.meta?.sync.state !== "failed") + return { state: "loading", to }; + if (events.meta?.availability === "partial") + return { + items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [], + state: "partial", + to, + }; + if (!events.data && (events.isError || events.meta?.sync.state === "failed")) + return { state: "error", to }; + const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? []; + if (items.length === 0) return { state: "empty", to }; + return { + items, + lastSuccessfulAt: events.meta?.lastSuccessfulAt, + refreshError: events.isError || events.meta?.sync.state === "failed", + stale: events.meta?.freshness === "stale", + state: "loaded", + to, + }; +} + +function toRecentOperations( + accountId: string | undefined, + operations: ReturnType, +): AccountPageRecentOperations { + const to = `/accounts/${accountId}/operations`; + if ( + !operations.data + && !operations.isError + && operations.meta?.sync.state !== "failed" + ) + return { state: "loading", to }; + if (operations.meta?.availability === "partial") + return { items: operations.data?.items ?? [], state: "partial", to }; + if ( + !operations.data + && (operations.isError || operations.meta?.sync.state === "failed") + ) + return { state: "error", to }; + if (!operations.data?.items.length) return { state: "empty", to }; + return { + items: operations.data.items, + lastSuccessfulAt: operations.meta?.lastSuccessfulAt, + refreshError: + operations.isError || operations.meta?.sync.state === "failed", + stale: operations.meta?.freshness === "stale", + state: "loaded", + to, + }; +} + +function toSection( + kind: PositionSectionKind, + portfolio: Portfolio, + denominators: Map, + instrumentDetails: Map, +): AccountPagePositionSection { + return { + groups: groupPositions( + portfolio.positions + .filter((position) => { + if (kind === "stocks") return position.type === "STOCK"; + return kind === "bonds" + ? position.type === "BOND" + : ( + position.type !== "STOCK" + && position.type !== "BOND" + && position.type !== "CURRENCY" + ); + }) + .map(position => + toPosition( + position, + denominators, + kind, + instrumentDetails.get(position.instrumentUid ?? "")?.slug, + ), + ), + ), + kind, + }; +} + +function useAccountPageViewModel(scopeId?: string): AccountPageViewModel { + const { accountId: routeAccountId } = useParams(); + const accountId = scopeId ?? routeAccountId; + const portfolio = usePortfolio(accountId); + const stocks = useStocks( + portfolio.data?.positions.flatMap(position => + position.type === "STOCK" && position.instrumentUid + ? [position.instrumentUid] + : [], + ) ?? [], + ); + const instrumentDetails = stocks; + const operations = useBrokerageOperations(accountId, { + limit: 5, + }); + const events = useBrokerageEvents(accountId); + const income = useIncomeSummary(accountId); + const accounts = useBrokerageAccounts(); + const sync = useScreenSync({ accountId, screen: "account" }, [ + accounts, + portfolio, + operations, + events, + income, + ]); + + if (!portfolio.data) { + if (portfolio.isError || portfolio.meta?.sync.state === "failed") + return { + code: apiErrorCode(portfolio.error), + retry: sync.retry, + state: "error" as const, + }; + return { state: "loading" as const }; + } + const account = accounts.data?.find(item => item.id === accountId); + const recentOperations = toRecentOperations(accountId, operations); + const recentEvents = toRecentEvents(accountId, events); + const incomeSummary = toIncomeSummary(accountId, income); + const refresh = { + partial: portfolio.meta?.availability === "partial", + refreshError: portfolio.isError || sync.transportError || sync.sourceError, + refreshing: portfolio.isFetching || sync.refreshing, + retry: sync.retry, + sourceError: sync.sourceError, + }; + if ( + portfolio.meta?.availability === "complete" + && portfolio.data.positions.length === 0 + && portfolio.data.cashBalances.length === 0 + ) + return { + account, + accountId, + incomeSummary, + recentEvents, + recentOperations, + state: "empty" as const, + ...refresh, + }; + return { + account, + accountId, + incomeSummary, + portfolio: portfolio.data, + positionSections: toAccountPagePositionSections( + portfolio.data, + instrumentDetails, + ), + recentEvents, + recentOperations, + state: "loaded" as const, + ...refresh, }; } diff --git a/src/pages/account/ui/AccountPage/components/AccountHeading.view.tsx b/src/pages/account/ui/AccountPage/components/AccountHeading.view.tsx index 3d89f4d..3cc11ea 100644 --- a/src/pages/account/ui/AccountPage/components/AccountHeading.view.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountHeading.view.tsx @@ -1,7 +1,10 @@ -import { Stack, Text, Title } from "@mantine/core"; import type { FC } from "react"; + +import { Stack, Text, Title } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import type { BrokerageAccount } from "@/entities/brokerage-account"; + import { accountTypeKey } from "@/entities/brokerage-account"; type AccountHeadingProps = { @@ -13,6 +16,10 @@ const AccountHeading: FC = (props) => { const { account } = props; const { t } = useTranslation(); + let description: string | undefined; + if (props.accountId === "all") description = t("accounts.allDescription"); + else if (account) description = t(accountTypeKey(account.type)); + return ( @@ -20,15 +27,7 @@ const AccountHeading: FC<AccountHeadingProps> = (props) => { ? t("accounts.all") : (account?.name ?? t("portfolio.title"))} - {props.accountId === "all" ? ( - - {t("accounts.allDescription")} - - ) : account ? ( - - {t(accountTypeKey(account.type))} - - ) : null} + {description && {description}} ); }; diff --git a/src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx b/src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx index 6c6b076..c3c83a2 100644 --- a/src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx @@ -1,14 +1,19 @@ +import type { FC } from "react"; + import { Stack } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import type { BrokerageAccount } from "@/entities/brokerage-account"; + import { BrokerageEventsPreview } from "@/entities/brokerage-event"; + import type { AccountPageIncomeSummary, AccountPageRecentEvents, AccountPageRecentOperations, } from "../AccountPage.vm"; + import { AccountHeading } from "./AccountHeading.view"; import { IncomeSummary } from "./IncomeSummary.view"; import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view"; @@ -18,13 +23,13 @@ import { RecentOperations } from "./RecentOperations.view"; type AccountPageEmptyProps = { account?: BrokerageAccount; accountId?: string; - refreshing?: boolean; - sourceError?: boolean; - refreshError?: boolean; - retry?: () => void; - recentOperations: AccountPageRecentOperations; - recentEvents: AccountPageRecentEvents; incomeSummary?: AccountPageIncomeSummary; + recentEvents: AccountPageRecentEvents; + recentOperations: AccountPageRecentOperations; + refreshError?: boolean; + refreshing?: boolean; + retry?: () => void; + sourceError?: boolean; }; const AccountPageEmpty: FC = (props) => { @@ -33,25 +38,25 @@ const AccountPageEmpty: FC = (props) => { - {props.incomeSummary ? : null} + {!!(props.incomeSummary) && ()} ); }; diff --git a/src/pages/account/ui/AccountPage/components/AccountPageError.view.tsx b/src/pages/account/ui/AccountPage/components/AccountPageError.view.tsx index 4d85c56..381335b 100644 --- a/src/pages/account/ui/AccountPage/components/AccountPageError.view.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountPageError.view.tsx @@ -1,6 +1,7 @@ +import type { FC } from "react"; + import { Button } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; @@ -12,44 +13,44 @@ const AccountPageError: FC = (props) => { if (code === "NOT_FOUND") return ( {t("portfolio.back")} - } + )} + error + text={t("portfolio.accountUnavailableText")} + title={t("portfolio.accountUnavailableTitle")} /> ); if (code === "TBANK_NOT_CONNECTED" || code === "INVALID_TBANK_TOKEN") return ( {t("accounts.openSettings")} - } + )} + error + text={t("portfolio.connectionErrorText")} + title={t("portfolio.connectionErrorTitle")} /> ); if (code === "TBANK_UNAVAILABLE") return ( {t("accounts.retry")}} + error + text={t("accounts.unavailableText")} + title={t("accounts.unavailableTitle")} /> ); return ( {t("accounts.retry")}} + error + text={t("states.errorText")} + title={t("states.errorTitle")} /> ); }; diff --git a/src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx b/src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx index 9bce2ff..f085fca 100644 --- a/src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx @@ -1,17 +1,22 @@ -import { Accordion, Alert, Stack, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Accordion, Alert, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import type { BrokerageAccount } from "@/entities/brokerage-account"; -import { BrokerageEventsPreview } from "@/entities/brokerage-event"; import type { Portfolio } from "@/entities/portfolio"; + +import { BrokerageEventsPreview } from "@/entities/brokerage-event"; import { formatSnapshotTime } from "@/shared/lib"; -import classes from "../AccountPage.module.css"; + import type { AccountPageIncomeSummary, AccountPagePositionSection, AccountPageRecentEvents, AccountPageRecentOperations, } from "../AccountPage.vm"; + +import classes from "../AccountPage.module.css"; import { AccountHeading } from "./AccountHeading.view"; import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view"; import { IncomeSummary } from "./IncomeSummary.view"; @@ -23,16 +28,16 @@ import { RecentOperations } from "./RecentOperations.view"; type AccountPageLoadedProps = { account?: BrokerageAccount; accountId?: string; + incomeSummary?: AccountPageIncomeSummary; partial?: boolean; portfolio: Portfolio; positionSections: AccountPagePositionSection[]; - refreshing?: boolean; - sourceError?: boolean; - refreshError?: boolean; - retry?: () => void; - recentOperations: AccountPageRecentOperations; recentEvents: AccountPageRecentEvents; - incomeSummary?: AccountPageIncomeSummary; + recentOperations: AccountPageRecentOperations; + refreshError?: boolean; + refreshing?: boolean; + retry?: () => void; + sourceError?: boolean; }; const AccountPageLoaded: FC = (props) => { @@ -41,14 +46,14 @@ const AccountPageLoaded: FC = (props) => { - {props.portfolio.isStale ? ( + {!!(props.portfolio.isStale) && (( {t("portfolio.staleWarning")} - ) : null} + ))} {t( props.accountId === "all" @@ -59,34 +64,36 @@ const AccountPageLoaded: FC = (props) => { }, )} - {props.partial ? ( - {t("investment.partial")} - ) : ( - - )} - {!props.partial ? ( + {props.partial + ? ( + {t("investment.partial")} + ) + : ( + + )} + {!(props.partial) && (( - ) : null} + ))} section.kind), + ...props.positionSections.map(section => section.kind), "cash", "recentOperations", "recentEvents", "incomeSummary", ]} - classNames={{ - control: classes.accordionControl, - label: classes.accordionLabel, - chevron: classes.accordionChevron, - panel: classes.accordionPanel, - }} + multiple > - {props.positionSections.map((section) => ( + {props.positionSections.map(section => ( {t(positionSectionTitleKey(section.kind))} @@ -117,9 +124,9 @@ const AccountPageLoaded: FC = (props) => { {t("income.summaryTitle")} - {props.incomeSummary ? ( + {!!(props.incomeSummary) && (( - ) : null} + ))} @@ -129,8 +136,7 @@ const AccountPageLoaded: FC = (props) => { function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) { if (kind === "stocks") return "portfolio.stocks"; - if (kind === "bonds") return "portfolio.bonds"; - return "portfolio.otherPositions"; + return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions"; } export { AccountPageLoaded }; diff --git a/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.stories.tsx b/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.stories.tsx index 4bad647..ab07983 100644 --- a/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.stories.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.stories.tsx @@ -1,10 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import { AccountPageLoading } from "./AccountPageLoading.view"; const meta = { - title: "Product/AccountPageLoading", component: AccountPageLoading, - tags: ["autodocs"], parameters: { docs: { description: { @@ -13,6 +12,8 @@ const meta = { }, }, }, + tags: ["autodocs"], + title: "Product/AccountPageLoading", } satisfies Meta; export default meta; diff --git a/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx b/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx index c5e6553..8f96f4d 100644 --- a/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx +++ b/src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx @@ -1,7 +1,9 @@ +import type { FC } from "react"; + import { Paper, SimpleGrid, Skeleton } from "@mantine/core"; import { LoadingSkeleton } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; + import classes from "../../AccountPage.module.css"; const AccountPageLoading: FC = () => { @@ -10,25 +12,25 @@ const AccountPageLoading: FC = () => { - {[0, 1, 2].map((index) => ( - + {["first", "second", "third"].map(placeholder => ( + ))} ); diff --git a/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.test.tsx b/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.test.tsx index 1366e63..39482af 100644 --- a/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.test.tsx +++ b/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.test.tsx @@ -1,6 +1,7 @@ import { MantineProvider } from "@mantine/core"; import { render, screen } from "@testing-library/react"; import { describe, expect, it } from "vitest"; + import { CurrencyCards } from "./CurrencyCards.view"; describe("CurrencyCards currency presentation", () => { @@ -20,12 +21,14 @@ describe("CurrencyCards currency presentation", () => { , ); expect( - screen.queryAllByRole("definition").map((node) => node.textContent), + screen.queryAllByRole("definition").map(node => node.textContent), ).toEqual( ["3,00 €", "2,00 $", "1,00 ₽", "4,00 CAD", "5,00 XYZ"].slice(0, count), ); + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. expect(container.querySelectorAll("dl")).toHaveLength(count); expect( + // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. container.querySelector("[tabindex], button, a, input"), ).toBeNull(); }, @@ -57,11 +60,14 @@ describe("CurrencyCards currency presentation", () => { ); const term = screen.getByRole("term"); expect(term).toHaveTextContent(name); - expect(term.querySelector('[aria-hidden="true"]')).toHaveTextContent( + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. + expect(term.querySelector("[aria-hidden=\"true\"]")).toHaveTextContent( symbol, ); expect(screen.getByRole("definition")).toHaveTextContent(expected); + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. expect(term.parentElement).toBe( + // eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish. screen.getByRole("definition").parentElement, ); }, @@ -79,7 +85,7 @@ describe("CurrencyCards currency presentation", () => { , ); expect( - screen.getAllByRole("definition").map((node) => node.textContent), + screen.getAllByRole("definition").map(node => node.textContent), ).toEqual(["1,00 $", "2,00 CAD"]); }); }); diff --git a/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.view.tsx b/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.view.tsx index 63f2395..2e2536d 100644 --- a/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.view.tsx +++ b/src/pages/account/ui/AccountPage/components/CurrencyCards/CurrencyCards.view.tsx @@ -1,10 +1,16 @@ -import { Paper, SimpleGrid, Text, VisuallyHidden } from "@mantine/core"; import type { FC } from "react"; + +import { Paper, SimpleGrid, Text, VisuallyHidden } from "@mantine/core"; import { useTranslation } from "react-i18next"; + import type { Portfolio } from "@/entities/portfolio"; + import { formatDecimal } from "@/shared/lib"; + import classes from "../../AccountPage.module.css"; +const SIGN_PREFIX_LENGTH = 2; + type CurrencyCardsProps = { amounts: Portfolio["totalsByCurrency"]; }; @@ -12,25 +18,25 @@ type CurrencyCardsProps = { const CurrencyCards: FC = (props) => { const { amounts } = props; const { t } = useTranslation(); - const currencies: Record = { - RUB: { symbol: "₽", name: t("portfolio.currencies.RUB") }, - USD: { symbol: "$", name: t("portfolio.currencies.USD") }, - EUR: { symbol: "€", name: t("portfolio.currencies.EUR") }, + const currencies: Record = { + EUR: { name: t("portfolio.currencies.EUR"), symbol: "€" }, + RUB: { name: t("portfolio.currencies.RUB"), symbol: "₽" }, + USD: { name: t("portfolio.currencies.USD"), symbol: "$" }, }; return ( - + {amounts.map((money) => { const amount = formatDecimal(money.value); return ( - + @@ -38,17 +44,20 @@ const CurrencyCards: FC = (props) => { {currencies[money.currency]?.name ?? money.currency} - - {amount.startsWith("-") ? ( - <> - - {amount.slice(0, 2)} - - {amount.slice(2)} - - ) : ( - amount - )}{" "} + + {amount.startsWith("-") + ? ( + <> + + {amount.slice(0, SIGN_PREFIX_LENGTH)} + + {amount.slice(SIGN_PREFIX_LENGTH)} + + ) + : ( + amount + )} + {" "} {currencies[money.currency]?.symbol ?? money.currency} diff --git a/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx b/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx index 1ca3cd2..c73cf1c 100644 --- a/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx +++ b/src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx @@ -1,30 +1,33 @@ +import type { FC } from "react"; + import { Button, Paper, Stack, Text } from "@mantine/core"; import { StateView } from "@wealthledger/ui"; -import type { FC } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router"; + import type { IncomeSummary as IncomeSummaryData } from "@/entities/income"; + import { formatMoney, formatSnapshotTime } from "@/shared/lib"; -type IncomeSummaryProps = - | { state: "loading"; to: string } - | { state: "partial"; to: string } - | { state: "error"; to: string; retry: () => void } +type IncomeSummaryProps + = | { + lastSuccessfulAt?: null | string; + refreshError?: boolean; + stale?: boolean; + state: "loaded"; + summary: IncomeSummaryData; + to: string; + } + | { retry: () => void; state: "error"; to: string } | { state: "empty"; to: string } - | { - state: "loaded"; - to: string; - summary: IncomeSummaryData; - lastSuccessfulAt?: string | null; - stale?: boolean; - refreshError?: boolean; - }; + | { state: "loading"; to: string } + | { state: "partial"; to: string }; const IncomeSummary: FC = (props) => { const { t } = useTranslation(); if (props.state === "loading" || props.state === "partial") return ( - + {t( props.state === "partial" ? "investment.partial" @@ -35,12 +38,12 @@ const IncomeSummary: FC = (props) => { if (props.state === "error") return ( {t("income.summaryRetry")} } + error + text={t("income.errorText")} + title={t("income.summaryError")} /> ); if (props.state === "empty") @@ -54,23 +57,32 @@ const IncomeSummary: FC = (props) => { ); return ( - {props.lastSuccessfulAt ? ( - + {!!(props.lastSuccessfulAt) && (( + {t("investment.sourceTime", { date: formatSnapshotTime(props.lastSuccessfulAt), })} - ) : null} - {props.stale ? {t("investment.stale")} : null} - {props.refreshError ? ( + ))} + {!!(props.stale) && ({t("investment.stale")})} + {!!(props.refreshError) && (( {t("income.refreshError")} - ) : null} - {props.summary.totalsByCurrency.map((total) => ( + ))} + {props.summary.totalsByCurrency.map(total => ( {formatMoney(total.total)} - {t("income.coupon")}: {formatMoney(total.coupon)} ·{" "} - {t("income.dividend")}: {formatMoney(total.dividend)} + {t("income.coupon")} + : + {" "} + {formatMoney(total.coupon)} + {" "} + · + {" "} + {t("income.dividend")} + : + {" "} + {formatMoney(total.dividend)} ))} diff --git a/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.stories.tsx b/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.stories.tsx index 28f7d9a..95af73c 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.stories.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.stories.tsx @@ -1,19 +1,19 @@ -import { Stack } from "@mantine/core"; import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { Stack } from "@mantine/core"; import { fn } from "storybook/test"; + import { CurrencyCards } from "../CurrencyCards/CurrencyCards.view"; import { PortfolioRefreshState } from "./PortfolioRefreshState.view"; const meta = { - title: "Product/PortfolioRefreshState", - component: PortfolioRefreshState, - tags: ["autodocs"], - args: { refreshing: false, refreshError: false, retry: fn() }, + args: { refreshError: false, refreshing: false, retry: fn() }, argTypes: { - refreshing: { control: "boolean" }, refreshError: { control: "boolean" }, + refreshing: { control: "boolean" }, retry: { control: false }, }, + component: PortfolioRefreshState, parameters: { docs: { description: { @@ -22,7 +22,7 @@ const meta = { }, }, }, - render: (args) => ( + render: arguments_ => ( - + ), + tags: ["autodocs"], + title: "Product/PortfolioRefreshState", } satisfies Meta; export default meta; @@ -40,15 +42,15 @@ export default meta; type Story = StoryObj; export const Idle: Story = { name: "Сохранённые данные" }; export const Refreshing: Story = { - name: "Фоновое обновление", args: { refreshing: true }, + name: "Фоновое обновление", }; export const RefreshError: Story = { - name: "Ошибка обновления с retry", args: { refreshError: true }, + name: "Ошибка обновления с retry", }; export const SourceFailure: Story = { - name: "Ошибка синхронизации сохраняет суммы", args: { refreshError: true, sourceError: true }, + name: "Ошибка синхронизации сохраняет суммы", }; diff --git a/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.view.tsx b/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.view.tsx index 514dd6f..89eab6f 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.view.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.view.tsx @@ -1,38 +1,39 @@ -import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core"; import type { FC } from "react"; + +import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; type PortfolioRefreshStateProps = { - sourceError?: boolean; - refreshing: boolean; refreshError: boolean; + refreshing: boolean; retry?: () => void; + sourceError?: boolean; }; const PortfolioRefreshState: FC = (props) => { - const { refreshing, refreshError, retry } = props; + const { refreshError, refreshing, retry } = props; const { t } = useTranslation(); return ( <> - {refreshing ? ( - + {!!(refreshing) && (( + {t("portfolio.refreshing")} - ) : null} - {refreshError ? ( - + ))} + {!!(refreshError) && (( + {t( @@ -43,7 +44,7 @@ const PortfolioRefreshState: FC = (props) => { - ) : null} + ))} ); }; diff --git a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.stories.tsx b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.stories.tsx index 469de63..6d83480 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.stories.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.stories.tsx @@ -1,23 +1,23 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; + import type { Portfolio } from "@/entities/portfolio"; + import { PortfolioStructure } from "./PortfolioStructure"; const rub: Portfolio["structure"]["currencies"][number] = { - currency: "RUB", - totalValue: "1250000", - hasNegativeValues: false, categories: [ - { type: "STOCK", value: "650000", sharePercent: "52" }, - { type: "BOND", value: "375000", sharePercent: "30" }, - { type: "OTHER", value: "125000", sharePercent: "10" }, - { type: "CASH", value: "100000", sharePercent: "8" }, + { sharePercent: "52", type: "STOCK", value: "650000" }, + { sharePercent: "30", type: "BOND", value: "375000" }, + { sharePercent: "10", type: "OTHER", value: "125000" }, + { sharePercent: "8", type: "CASH", value: "100000" }, ], + currency: "RUB", + hasNegativeValues: false, + totalValue: "1250000", }; const meta = { - title: "Product/PortfolioStructure", - component: PortfolioStructure, - tags: ["autodocs"], args: { structure: { currencies: [rub], unvaluedCategories: [] } }, + component: PortfolioStructure, parameters: { docs: { description: { @@ -26,6 +26,8 @@ const meta = { }, }, }, + tags: ["autodocs"], + title: "Product/PortfolioStructure", } satisfies Meta; export default meta; @@ -37,10 +39,10 @@ export const MultipleCurrencies: Story = { currencies: [ rub, { + categories: [{ sharePercent: "100", type: "CASH", value: "500" }], currency: "USD", - totalValue: "500", hasNegativeValues: false, - categories: [{ type: "CASH", value: "500", sharePercent: "100" }], + totalValue: "500", }, ], unvaluedCategories: [], @@ -52,14 +54,14 @@ export const CashOnly: Story = { structure: { currencies: [ { - currency: "RUB", - totalValue: "100000", - hasNegativeValues: false, - categories: rub.categories.map((row) => ({ + categories: rub.categories.map(row => ({ ...row, - value: row.type === "CASH" ? "100000" : "0", sharePercent: row.type === "CASH" ? "100" : "0", + value: row.type === "CASH" ? "100000" : "0", })), + currency: "RUB", + hasNegativeValues: false, + totalValue: "100000", }, ], unvaluedCategories: [], @@ -75,13 +77,15 @@ export const Incomplete: Story = { currencies: [ { ...rub, - categories: rub.categories.map((row) => ({ - ...row, - sharePercent: null, - })), + categories: rub.categories.map(row => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...row, + sharePercent: null, + } + /* eslint-enable unicorn/no-null */))), }, ], - unvaluedCategories: [{ type: "STOCK", count: 2 }], + unvaluedCategories: [{ count: 2, type: "STOCK" }], }, }, }; @@ -89,7 +93,7 @@ export const UnknownOnly: Story = { args: { structure: { currencies: [], - unvaluedCategories: [{ type: "BOND", count: 1 }], + unvaluedCategories: [{ count: 1, type: "BOND" }], }, }, }; @@ -99,13 +103,15 @@ export const Negative: Story = { currencies: [ { ...rub, + categories: rub.categories.map(row => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...row, + sharePercent: null, + value: row.type === "OTHER" ? "25000" : row.value, + } + /* eslint-enable unicorn/no-null */))), hasNegativeValues: true, totalValue: "1150000", - categories: rub.categories.map((row) => ({ - ...row, - value: row.type === "OTHER" ? "25000" : row.value, - sharePercent: null, - })), }, ], unvaluedCategories: [], diff --git a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.test.tsx b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.test.tsx index 1b8f51b..6551b9f 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.test.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.test.tsx @@ -1,28 +1,30 @@ import { MantineProvider } from "@mantine/core"; import { fireEvent, render, screen, within } from "@testing-library/react"; import { describe, expect, it } from "vitest"; + import type { Portfolio } from "@/entities/portfolio"; + import { PortfolioStructure } from "./PortfolioStructure"; const rub: Portfolio["structure"]["currencies"][number] = { - currency: "RUB", - totalValue: "100", - hasNegativeValues: false, categories: [ - { type: "STOCK", value: "60", sharePercent: "60" }, - { type: "BOND", value: "20", sharePercent: "20" }, - { type: "OTHER", value: "0", sharePercent: "0" }, - { type: "CASH", value: "20", sharePercent: "20" }, + { sharePercent: "60", type: "STOCK", value: "60" }, + { sharePercent: "20", type: "BOND", value: "20" }, + { sharePercent: "0", type: "OTHER", value: "0" }, + { sharePercent: "20", type: "CASH", value: "20" }, ], + currency: "RUB", + hasNegativeValues: false, + totalValue: "100", }; -const ui = (structure: Portfolio["structure"] | null | undefined) => ( +const ui = (structure: null | Portfolio["structure"] | undefined) => ( ); describe("portfolio structure", () => { - it.each([undefined, null])( + it.each([undefined, /* eslint-disable-line unicorn/no-null -- Exercise the explicit null returned by the production API/DOM contract. */ null])( "keeps an older snapshot without structure available (%s) and recovers on refresh", (structure) => { const view = render(ui(structure)); @@ -66,15 +68,17 @@ describe("portfolio structure", () => { currencies: [ { ...rub, - categories: rub.categories.map((row) => ({ - ...row, - sharePercent: null, - })), + categories: rub.categories.map(row => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...row, + sharePercent: null, + } + /* eslint-enable unicorn/no-null */))), }, ], unvaluedCategories: [ - { type: "OTHER", count: 2 }, - { type: "STOCK", count: 1 }, + { count: 2, type: "OTHER" }, + { count: 1, type: "STOCK" }, ], }), ); @@ -93,12 +97,14 @@ describe("portfolio structure", () => { currencies: [ { ...rub, + categories: rub.categories.map(row => ((/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + ...row, + sharePercent: null, + value: row.type === "STOCK" ? "-60" : row.value, + } + /* eslint-enable unicorn/no-null */))), hasNegativeValues: true, - categories: rub.categories.map((row) => ({ - ...row, - value: row.type === "STOCK" ? "-60" : row.value, - sharePercent: null, - })), }, ], unvaluedCategories: [], @@ -115,7 +121,7 @@ describe("portfolio structure", () => { }); it("handles unknown-only and empty compositions", () => { const view = render( - ui({ currencies: [], unvaluedCategories: [{ type: "BOND", count: 1 }] }), + ui({ currencies: [], unvaluedCategories: [{ count: 1, type: "BOND" }] }), ); expect(screen.getByText("Облигации: без оценки — 1")).toBeInTheDocument(); expect(screen.queryByRole("list")).not.toBeInTheDocument(); @@ -130,9 +136,9 @@ describe("portfolio structure", () => { ...rub, categories: [ { + sharePercent: "0.000001", type: "CASH", value: "9007199254740993.000000001", - sharePercent: "0.000001", }, ], }, diff --git a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.tsx b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.tsx index cd28b97..bcd3372 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.tsx @@ -1,72 +1,72 @@ import { type FC, useState } from "react"; import { useTranslation } from "react-i18next"; + import type { Portfolio } from "@/entities/portfolio"; + import { formatMoney } from "@/shared/lib"; + import { PortfolioStructureView } from "./PortfolioStructure.view"; const MIN_VISIBLE_SHARE_PERCENT = 0.01; // A cached snapshot or an older running server can predate this response field. -type PortfolioStructureProps = { structure?: Portfolio["structure"] | null }; +type PortfolioStructureProps = { structure?: null | Portfolio["structure"] }; const categoryPresentation = { - STOCK: { label: "portfolio.stocks", color: "blue.6" }, - BOND: { label: "portfolio.bonds", color: "grape.6" }, - OTHER: { label: "portfolio.structure.other", color: "orange.6" }, - CASH: { label: "portfolio.structure.cash", color: "green.6" }, + BOND: { color: "grape.6", label: "portfolio.bonds" }, + CASH: { color: "green.6", label: "portfolio.structure.cash" }, + OTHER: { color: "orange.6", label: "portfolio.structure.other" }, + STOCK: { color: "blue.6", label: "portfolio.stocks" }, } as const; const PortfolioStructure: FC = (props) => { const { structure } = props; const { t } = useTranslation(); - const [currency, setCurrency] = useState(null); - const selected = - structure?.currencies.find((item) => item.currency === currency) ?? - structure?.currencies[0]; - const incomplete = (structure?.unvaluedCategories.length ?? 0) > 0; + const [currency, setCurrency] = useState(null); + const selected + = structure?.currencies.find(item => item.currency === currency) + ?? structure?.currencies[0]; + const isIncomplete = (structure?.unvaluedCategories.length ?? 0) > 0; const rows = selected ? selected.categories.map((category) => { const presentation = categoryPresentation[category.type]; - const percentage = - category.sharePercent === null ? null : Number(category.sharePercent); + const percentage + = category.sharePercent === null ? /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null : Number(category.sharePercent); const unknown = structure?.unvaluedCategories.some( - (item) => item.type === category.type, + item => item.type === category.type, ); const amount = formatMoney({ currency: selected.currency, value: category.value, }); + let displayedAmount = amount; + if (unknown) displayedAmount = category.value === "0" ? t("portfolio.structure.unvalued") : t("portfolio.structure.knownAmount", { amount }); + let share = t("portfolio.structure.shareUnavailable"); + if (percentage !== null) share = percentage > 0 && percentage < MIN_VISIBLE_SHARE_PERCENT + ? t("portfolio.structure.smallShare") + : `${new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 2 }).format(percentage)} %`; return { - name: t(presentation.label), + amount: displayedAmount, color: presentation.color, - amount: unknown - ? category.value === "0" - ? t("portfolio.structure.unvalued") - : t("portfolio.structure.knownAmount", { amount }) - : amount, - share: - percentage === null - ? t("portfolio.structure.shareUnavailable") - : percentage > 0 && percentage < MIN_VISIBLE_SHARE_PERCENT - ? t("portfolio.structure.smallShare") - : `${new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 2 }).format(percentage)} %`, + name: t(presentation.label), + share, value: percentage ?? 0, }; }) : []; - const chartData = rows.filter((row) => row.value > 0); + const chartData = rows.filter(row => row.value > 0); return ( item.currency) ?? []} - currency={selected?.currency ?? null} + chartData={chartData} + currencies={structure?.currencies.map(item => item.currency) ?? []} + currency={selected?.currency ?? /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null} + incomplete={isIncomplete} + negative={selected?.hasNegativeValues ?? false} onCurrencyChange={setCurrency} rows={rows} - chartData={chartData} - incomplete={incomplete} - negative={selected?.hasNegativeValues ?? false} + unavailable={!structure} unvalued={ - structure?.unvaluedCategories.map((category) => + structure?.unvaluedCategories.map(category => t("portfolio.structure.unvaluedCategory", { category: t(categoryPresentation[category.type].label), count: category.count, diff --git a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.view.tsx b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.view.tsx index fc0395f..468791e 100644 --- a/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.view.tsx +++ b/src/pages/account/ui/AccountPage/components/PortfolioStructure/PortfolioStructure.view.tsx @@ -2,123 +2,130 @@ import { DonutChart } from "@mantine/charts"; import { Box, Group, Paper, Select, Stack, Text, Title } from "@mantine/core"; import { type FC, useId } from "react"; import { useTranslation } from "react-i18next"; + import classes from "./PortfolioStructure.module.css"; -type StructureRow = { - name: string; - color: string; - amount: string; - share: string; - value: number; -}; type PortfolioStructureViewProps = { - unavailable: boolean; - currencies: string[]; - currency: string | null; - onCurrencyChange: (currency: string | null) => void; - rows: StructureRow[]; chartData: StructureRow[]; + currencies: string[]; + currency: null | string; incomplete: boolean; negative: boolean; + onCurrencyChange: (currency: null | string) => void; + rows: StructureRow[]; + unavailable: boolean; unvalued: string[]; }; +type StructureRow = { + amount: string; + color: string; + name: string; + share: string; + value: number; +}; const PortfolioStructureView: FC = (props) => { const { t } = useTranslation(); const titleId = useId(); return ( - - + <Group align="center" justify="space-between"> + <Title id={titleId} order={2} size="h4"> {t("portfolio.structure.title")} - {props.currencies.length > 1 ? ( + {(props.currencies.length > 1) && (( - {vm.rows ? ( - vm.rows.length ? ( - vm.rows.map((row) => ( -
    - - } - value={row.value} - valueLabel={t(`bank.kinds.${row.item.kind}`)} - tone={row.tone} - details={ - row.otherCard ? ( - - {t("bank.card")} - - ) : null - } - actions={ - - vm.setOperation(row.item)} - > - - - vm.setDeleting(row.item)} - > - - - - } - /> -
    - )) - ) : ( - {t("bank.noOperations")} - ) - ) : vm.history.isLoading ? ( - - - - - - - ) : null} + {renderHistory()}     {vm.history.isError && ( @@ -299,34 +315,34 @@ const CardPageView: FC = (props) => { )} {vm.history.data && vm.pageSize !== "all" && ( { - if (paginationRef.current) - pendingPage.current = { - scope, - page, - top: paginationRef.current.getBoundingClientRect().top, - }; - vm.setPage(page); - }} disabled={vm.history.isFetching} - siblings={0} - getItemProps={(page) => ({ - "aria-label": t("bank.page", { page }), - })} - getControlProps={(control) => ({ + getControlProps={control => ({ "aria-label": t( control === "previous" ? "bank.previous" : "bank.next", ), })} + getItemProps={page => ({ + "aria-label": t("bank.page", { page }), + })} + onChange={(page) => { + if (paginationRef.current) + pendingPageRef.current = { + page, + scope, + top: paginationRef.current.getBoundingClientRect().top, + }; + vm.setPage(page); + }} + siblings={0} + total={vm.totalPages} + value={vm.page} /> )} diff --git a/src/pages/card/ui/CardPage/CardPage.vm.ts b/src/pages/card/ui/CardPage/CardPage.vm.ts index 3bdb67d..9919403 100644 --- a/src/pages/card/ui/CardPage/CardPage.vm.ts +++ b/src/pages/card/ui/CardPage/CardPage.vm.ts @@ -1,6 +1,7 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useParams, useSearchParams } from "react-router"; + import { type BankOperation, bankPeriod, @@ -13,18 +14,19 @@ import { import { apiErrorCode } from "@/shared/api"; import { formatDate, formatMoney } from "@/shared/lib"; -const PAGE_SIZES = ["5", "10", "20", "50", "100", "all"]; +const PAGE_SIZES = new Set(["5", "10", "20", "50", "100", "all"]); +type CardPageVm = ReturnType; function useCardPageVm() { const { cardId } = useParams(); - const [params, setParams] = useSearchParams(); + const [parameters, setParameters] = useSearchParams(); const { t } = useTranslation(); - const period = bankPeriod(params); - const requestedSize = params.get("limit") ?? "10"; - const pageSize = PAGE_SIZES.includes(requestedSize) ? requestedSize : "10"; - const rawPage = Number(params.get("page") ?? 1); - const page = - pageSize !== "all" && Number.isSafeInteger(rawPage) && rawPage > 0 + const period = bankPeriod(parameters); + const requestedSize = parameters.get("limit") ?? "10"; + const pageSize = PAGE_SIZES.has(requestedSize) ? requestedSize : "10"; + const rawPage = Number(parameters.get("page") ?? 1); + const page + = pageSize !== "all" && Number.isSafeInteger(rawPage) && rawPage > 0 ? rawPage : 1; const card = useBankCard(cardId); @@ -33,94 +35,90 @@ function useCardPageVm() { const cards = useBankCards(true); const history = useBankOperations(cardId, { ...period, - page, limit: pageSize === "all" ? "all" : Number(pageSize), + page, }); const summary = useBankSummary(period, cardId); const [editingCard, setEditingCard] = useState(false); - const [operation, setOperation] = useState( + const [operation, setOperation] = useState<"new" | BankOperation | null>( null, ); const [deleting, setDeleting] = useState(null); const rows = history.data?.items.map((item) => { - const outgoing = - item.kind === "expense" || - (item.kind === "transfer" && item.cardId === cardId); + const isOutgoing + = item.kind === "expense" + || (item.kind === "transfer" && item.cardId === cardId); + const otherCardId = isOutgoing ? item.targetCardId : item.cardId; + let title = t(`bank.kinds.${item.kind}`); + if (item.kind === "transfer") title = t(isOutgoing ? "bank.transferTo" : "bank.transferFrom", { name: isOutgoing ? item.targetCardName : item.cardName }); return { + color: isOutgoing ? "red" : "green", + editable: + Boolean(cards.data) + && !cards.data?.some( + c => + (c.id === item.cardId || c.id === item.targetCardId) + && c.archivedAt, + ), item, - color: outgoing ? "red" : "green", - title: - item.kind === "transfer" - ? t(outgoing ? "bank.transferTo" : "bank.transferFrom", { - name: outgoing ? item.targetCardName : item.cardName, - }) - : t(`bank.kinds.${item.kind}`), metadata: [formatDate(item.date), item.categoryName, item.description] .filter(Boolean) .join(" · "), - value: `${outgoing ? "−" : "+"}${formatMoney(item.amount)}`, - tone: outgoing ? ("negative" as const) : ("positive" as const), otherCard: item.kind === "transfer" - ? outgoing - ? item.targetCardId - : item.cardId - : null, - editable: - Boolean(cards.data) && - !cards.data?.some( - (c) => - (c.id === item.cardId || c.id === item.targetCardId) && - c.archivedAt, - ), + ? otherCardId + : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null, + title, + tone: isOutgoing ? ("negative" as const) : ("positive" as const), + value: `${isOutgoing ? "−" : "+"}${formatMoney(item.amount)}`, }; }); return { - card, - cards, archiveError, archivePending: updateCard.isPending, + card, + cards, + deleting, + editingCard, + history, + notFound: apiErrorCode(card.error) === "BANK_NOT_FOUND", + operation, + page, + pageSize, + period, + rows, + setDeleting, + setEditingCard, + setOperation, + setPage: (value: number) => + setParameters({ ...period, limit: pageSize, page: String(value) }), + setPageSize: (value: null | string) => { + if (value && PAGE_SIZES.has(value)) + setParameters({ ...period, limit: value }); + }, + setPeriod: (value: [null | string, null | string]) => { + if (value[0] && value[1]) + setParameters({ from: value[0], limit: pageSize, to: value[1] }); + }, + summary, toggleArchive: async () => { if (!card.data) return; setArchiveError(undefined); try { await updateCard.mutateAsync({ + body: { archived: !card.data.archivedAt, version: card.data.version }, id: card.data.id, - body: { version: card.data.version, archived: !card.data.archivedAt }, }); - } catch (failure) { - setArchiveError(failure); + } + catch (error) { + setArchiveError(error); } }, - history, - summary, - period, - page, - pageSize, totalPages: pageSize === "all" ? 1 : Math.max(1, Math.ceil((history.data?.total ?? 0) / Number(pageSize))), - rows, - editingCard, - setEditingCard, - operation, - setOperation, - deleting, - setDeleting, - notFound: apiErrorCode(card.error) === "BANK_NOT_FOUND", - setPeriod: (value: [string | null, string | null]) => { - if (value[0] && value[1]) - setParams({ from: value[0], to: value[1], limit: pageSize }); - }, - setPageSize: (value: string | null) => { - if (value && PAGE_SIZES.includes(value)) - setParams({ ...period, limit: value }); - }, - setPage: (value: number) => - setParams({ ...period, page: String(value), limit: pageSize }), }; } -type CardPageVm = ReturnType; export { type CardPageVm, useCardPageVm }; diff --git a/src/pages/card/ui/DeleteOperation/DeleteOperation.test.tsx b/src/pages/card/ui/DeleteOperation/DeleteOperation.test.tsx index 914bb96..dcc2f1e 100644 --- a/src/pages/card/ui/DeleteOperation/DeleteOperation.test.tsx +++ b/src/pages/card/ui/DeleteOperation/DeleteOperation.test.tsx @@ -1,37 +1,42 @@ import { MantineProvider } from "@mantine/core"; import { QueryClientProvider } from "@tanstack/react-query"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import type { BankOperation } from "@/entities/bank-card"; + import { configureAuthClient } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { server } from "@/test/server"; + import { DeleteOperation } from "./DeleteOperation"; -const transfer: BankOperation = { - id: "transfer", - kind: "transfer", - cardId: "a", - cardName: "Основная", - targetCardId: "b", - targetCardName: "Запасная", - categoryId: null, - categoryName: null, - originalExpenseId: null, - amount: { currency: "RUB", value: "100" }, - availableRefund: null, - date: "2026-08-01", - description: null, - version: 1, - createdAt: "2026-08-01T00:00:00Z", -}; +const transfer: BankOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + amount: { currency: "RUB", value: "100" }, + availableRefund: null, + cardId: "a", + cardName: "Основная", + categoryId: null, + categoryName: null, + createdAt: "2026-08-01T00:00:00Z", + date: "2026-08-01", + description: null, + id: "transfer", + kind: "transfer", + originalExpenseId: null, + targetCardId: "b", + targetCardName: "Запасная", + version: 1, + } +/* eslint-enable unicorn/no-null */); describe("DeleteOperation", () => { it("names both sides and requires a deliberate fresh version after conflict", async () => { configureAuthClient({ accessToken: () => "test", - refresh: async () => false, clear: () => {}, + refresh: () => Promise.resolve(false), }); const versions: string[] = []; server.use( @@ -53,7 +58,7 @@ describe("DeleteOperation", () => { render( - + , ); diff --git a/src/pages/card/ui/DeleteOperation/DeleteOperation.tsx b/src/pages/card/ui/DeleteOperation/DeleteOperation.tsx index 4e59973..ab9c8d4 100644 --- a/src/pages/card/ui/DeleteOperation/DeleteOperation.tsx +++ b/src/pages/card/ui/DeleteOperation/DeleteOperation.tsx @@ -1,6 +1,7 @@ import { Button, Group, Modal, Stack, Text } from "@mantine/core"; import { type FC, useState } from "react"; import { useTranslation } from "react-i18next"; + import { BankFeedback, type BankOperation, @@ -10,7 +11,7 @@ import { } from "@/entities/bank-card"; import { formatDate, formatMoney } from "@/shared/lib"; -type DeleteOperationProps = { operation: BankOperation; onClose: () => void }; +type DeleteOperationProps = { onClose: () => void; operation: BankOperation }; const DeleteOperation: FC = (props) => { useBankFormFocus(); const [opened, setOpened] = useState(true); @@ -19,20 +20,20 @@ const DeleteOperation: FC = (props) => { const [latest, setLatest] = useState(); const [error, setError] = useState(); const query = useBankOperation(record.id); - const { deleteOperation } = useBankMutations(); - const pending = - !opened || - deleteOperation.isPending || - (query.isFetching && Boolean(error)); + const { deleteOperation: operationDeletion } = useBankMutations(); + const isPending + = !opened + || operationDeletion.isPending + || (query.isFetching && Boolean(error)); return ( !isPending && setOpened(false)} onExitTransitionEnd={props.onClose} - onClose={() => !pending && setOpened(false)} + opened={opened} title={t("bank.deleteTitle")} - closeOnEscape={!pending} - closeOnClickOutside={!pending} - closeButtonProps={{ "aria-label": t("bank.close"), disabled: pending }} > @@ -43,27 +44,27 @@ const DeleteOperation: FC = (props) => { target: record.targetCardName, }) : t("bank.deleteHint", { - kind: t(`bank.kinds.${record.kind}`), amount: formatMoney(record.amount), card: record.cardName, + kind: t(`bank.kinds.${record.kind}`), })} - {error ? ( + {!!(error) && (( <> - ) : null} + ))} {latest && ( <> @@ -72,13 +73,13 @@ const DeleteOperation: FC = (props) => { })} @@ -87,26 +88,27 @@ const DeleteOperation: FC = (props) => { diff --git a/src/pages/card/ui/OperationForm/OperationForm.stories.tsx b/src/pages/card/ui/OperationForm/OperationForm.stories.tsx index 181a5b0..8ecbfea 100644 --- a/src/pages/card/ui/OperationForm/OperationForm.stories.tsx +++ b/src/pages/card/ui/OperationForm/OperationForm.stories.tsx @@ -1,74 +1,36 @@ -import { Alert } from "@mantine/core"; import type { Meta, StoryObj } from "@storybook/react-vite"; + +import { Alert } from "@mantine/core"; import { type FC, useState } from "react"; import { FormProvider, useForm, useWatch } from "react-hook-form"; + import type { OperationValues } from "./OperationForm.types"; + import { OperationFormView } from "./OperationForm.view"; -type ExampleProps = { pending?: boolean; conflict?: boolean }; +type ExampleProps = { conflict?: boolean; pending?: boolean }; const OperationExample: FC = (props) => { const [opened, setOpened] = useState(true); const [action, setAction] = useState(""); const methods = useForm({ defaultValues: { - kind: "refund", - cardId: "demo", - targetCardId: "", - categoryId: "", - originalExpenseId: "purchase", amount: "500", + cardId: "demo", + categoryId: "", date: "2026-08-01", description: "Синтетический возврат", + kind: "refund", + originalExpenseId: "purchase", + targetCardId: "", }, }); const kind = useWatch({ control: methods.control, name: "kind" }); return ( !props.pending && setOpened(false)} - onCancel={() => setOpened(false)} - onExitTransitionEnd={() => setAction("Форма закрыта")} - onSubmit={(event) => { - event.preventDefault(); - setAction("Локальный submit"); - }} - fields={{ - editing: true, - refundCardId: "demo", - kind, - cards: [{ value: "demo", label: "Учебная карта" }], - targets: [], - categories: [], - defaultCategory: "", - kinds: [{ value: "refund", label: "Возврат" }], - dateInputValue: () => "2026-08-01", - validDate: (value) => value === "2026-08-01", - maxDate: () => "2026-08-27", - }} - refund={{ - editing: true, - expenses: [ - { - value: "purchase", - label: "01.07.2026 · Учебная покупка · 500 ₽", - }, - ], - onSelect: () => undefined, - limit: { currency: "RUB", value: "500" }, - }} - loadingExpenses={false} + editing emptyExpenses={false} - sourcePage={1} - previousDisabled - nextDisabled - onPrevious={() => undefined} - onNext={() => undefined} - onAddCategory={() => undefined} - saveDisabled={false} feedback={ props.conflict && ( @@ -76,27 +38,66 @@ const OperationExample: FC = (props) => { ) } - onReload={ - props.conflict ? () => setAction("Локальный reload") : undefined - } + fields={{ + cards: [{ label: "Учебная карта", value: "demo" }], + categories: [], + dateInputValue: () => "2026-08-01", + defaultCategory: "", + editing: true, + kind, + kinds: [{ label: "Возврат", value: "refund" }], + maxDate: () => "2026-08-27", + refundCardId: "demo", + targets: [], + validDate: value => value === "2026-08-01", + }} latest={ - props.conflict - ? { - version: 2, + (props.conflict) + ? ({ details: "Учебная версия", onAdopt: () => setAction("Локальное принятие версии"), - } + version: 2, + }) : undefined } + loadingExpenses={false} + nextDisabled + onAddCategory={() => {}} + onCancel={() => setOpened(false)} + onClose={() => !props.pending && setOpened(false)} + onExitTransitionEnd={() => setAction("Форма закрыта")} + onNext={() => {}} + onPrevious={() => {}} + onReload={ + (props.conflict) ? () => setAction("Локальный reload") : undefined + } + onSubmit={(event) => { + event.preventDefault(); + setAction("Локальный submit"); + }} + opened={opened} + pending={Boolean(props.pending)} + previousDisabled + refund={{ + editing: true, + expenses: [ + { + label: "01.07.2026 · Учебная покупка · 500 ₽", + value: "purchase", + }, + ], + limit: { currency: "RUB", value: "500" }, + onSelect: () => {}, + }} + saveDisabled={false} + sourcePage={1} /> {action} ); }; const meta = { - title: "Product/OperationForm", component: OperationExample, - tags: ["autodocs"], parameters: { docs: { description: { @@ -105,6 +106,8 @@ const meta = { }, }, }, + tags: ["autodocs"], + title: "Product/OperationForm", } satisfies Meta; export default meta; type Story = StoryObj; diff --git a/src/pages/card/ui/OperationForm/OperationForm.test.tsx b/src/pages/card/ui/OperationForm/OperationForm.test.tsx index 342fecf..332ac9f 100644 --- a/src/pages/card/ui/OperationForm/OperationForm.test.tsx +++ b/src/pages/card/ui/OperationForm/OperationForm.test.tsx @@ -7,37 +7,46 @@ import { waitFor, within, } from "@testing-library/react"; -import { HttpResponse, http } from "msw"; +import { http, HttpResponse } from "msw"; import { describe, expect, it, vi } from "vitest"; + import type { BankCard, BankOperation } from "@/entities/bank-card"; + import { configureAuthClient } from "@/shared/api"; import { createTestQueryClient } from "@/test/query"; import { server } from "@/test/server"; + import { OperationForm } from "./OperationForm"; const money = (value: string) => ({ currency: "RUB", value }); -const card: BankCard = { - id: "a", - name: "Повседневная", - bankName: null, - lastFour: null, - paymentSystem: null, - balance: money("0"), - openingBalance: money("0"), - openingDate: "2026-01-01", - archivedAt: null, - version: 1, -}; +const card: BankCard = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + archivedAt: null, + balance: money("0"), + bankName: null, + id: "a", + lastFour: null, + name: "Повседневная", + openingBalance: money("0"), + openingDate: "2026-01-01", + paymentSystem: null, + version: 1, + } +/* eslint-enable unicorn/no-null */); +async function select(label: RegExp, value: RegExp | string) { + fireEvent.click(screen.getByRole("combobox", { name: label })); + fireEvent.click(await screen.findByRole("option", { name: value })); +} function setup(operation?: BankOperation) { configureAuthClient({ accessToken: () => "test", - refresh: async () => false, clear: () => {}, + refresh: () => Promise.resolve(false), }); server.use( http.get("*/api/v1/bank-cards/categories", () => HttpResponse.json([ - { id: "default", name: "Остальное", isDefault: true, version: 2 }, + { id: "default", isDefault: true, name: "Остальное", version: 2 }, ]), ), ); @@ -46,35 +55,28 @@ function setup(operation?: BankOperation) { , ); return close; } -async function select(label: string, value: string | RegExp) { - fireEvent.click(screen.getByRole("combobox", { name: new RegExp(label) })); - fireEvent.click(await screen.findByRole("option", { name: value })); -} describe("OperationForm", () => { it("blocks closing and editing while save is pending, then closes after success", async () => { - let finish: () => void = () => {}; - const response = new Promise((resolve) => { - finish = resolve; - }); + const { promise: response, resolve: finish } = Promise.withResolvers(); const received = vi.fn(); server.use( http.post("*/api/v1/bank-cards/operations", async () => { @@ -101,7 +103,8 @@ describe("OperationForm", () => { fireEvent.keyDown(document, { key: "Escape" }); expect(close).not.toHaveBeenCalled(); expect(screen.getByRole("dialog")).toBeInTheDocument(); - } finally { + } + finally { finish(); } await waitFor(() => expect(close).toHaveBeenCalledOnce()); @@ -132,16 +135,16 @@ describe("OperationForm", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(close).toHaveBeenCalled()); expect(body).toMatchObject({ - kind: "expense", + amount: money("92233720368547758.07"), categoryId: "default", date: "2026-08-07", - amount: money("92233720368547758.07"), + kind: "expense", }); }); it("checks both transfer opening dates, excludes archive and reuses intent after a lost response", async () => { setup(); - await select("Вид операции", "Перевод"); - await select("Карта-получатель", "Запасная"); + await select(/Вид операции/, "Перевод"); + await select(/Карта-получатель/, "Запасная"); fireEvent.change(screen.getByLabelText(/Сумма/), { target: { value: "0" }, }); @@ -176,15 +179,15 @@ describe("OperationForm", () => { await waitFor(() => expect(bodies).toHaveLength(2)); expect(bodies[0]).toEqual(bodies[1]); expect(bodies[0]).toMatchObject({ - kind: "transfer", - cardId: "a", - targetCardId: "b", amount: money("150.01"), + cardId: "a", + kind: "transfer", + targetCardId: "b", }); }); it("topup omits categories and preserves entered description", async () => { setup(); - await select("Вид операции", "Пополнение"); + await select(/Вид операции/, "Пополнение"); expect( screen.queryByRole("combobox", { name: /Категория/ }), ).not.toBeInTheDocument(); @@ -204,40 +207,42 @@ describe("OperationForm", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(body).toBeDefined()); expect(body).toMatchObject({ - kind: "topup", amount: money("0.10"), description: "Внесение", + kind: "topup", }); expect(body).not.toHaveProperty("categoryId"); }); it("finds a previous-month purchase across pages, checks remaining refund and retains the complete-refund intent", async () => { - const purchase: BankOperation = { - id: "purchase", - kind: "expense", - cardId: "a", - cardName: card.name, - targetCardId: null, - targetCardName: null, - categoryId: "default", - categoryName: "Остальное", - originalExpenseId: null, - amount: money("500"), - availableRefund: money("500"), - date: "2026-07-01", - description: "Прошлая покупка", - version: 1, - createdAt: "2026-07-01T00:00:00Z", - }; + const purchase: BankOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + amount: money("500"), + availableRefund: money("500"), + cardId: "a", + cardName: card.name, + categoryId: "default", + categoryName: "Остальное", + createdAt: "2026-07-01T00:00:00Z", + date: "2026-07-01", + description: "Прошлая покупка", + id: "purchase", + kind: "expense", + originalExpenseId: null, + targetCardId: null, + targetCardName: null, + version: 1, + } + /* eslint-enable unicorn/no-null */); server.use( http.get("*/api/v1/bank-cards/a/expenses", ({ request }) => { return HttpResponse.json({ + hasNext: new URL(request.url).searchParams.get("page") !== "2", items: new URL(request.url).searchParams.get("page") === "2" ? [purchase] : [], page: 1, total: 1, - hasNext: new URL(request.url).searchParams.get("page") !== "2", }); }), http.get("*/api/v1/bank-cards/operations/purchase", () => @@ -245,7 +250,7 @@ describe("OperationForm", () => { ), ); const close = setup(); - await select("Вид операции", "Возврат"); + await select(/Вид операции/, "Возврат"); await waitFor(() => expect(screen.getByRole("button", { name: "Далее" })).toBeEnabled(), ); @@ -253,7 +258,7 @@ describe("OperationForm", () => { await waitFor(() => expect(screen.getByRole("button", { name: "Назад" })).toBeEnabled(), ); - await select("Исходная покупка", /Прошлая покупка/); + await select(/Исходная покупка/, /Прошлая покупка/); await screen.findByText("Доступно к возврату: 500 ₽"); fireEvent.change(screen.getByLabelText(/Сумма/), { target: { value: "500.01" }, @@ -284,43 +289,45 @@ describe("OperationForm", () => { await waitFor(() => expect(close).toHaveBeenCalled()); expect(bodies[0]).toEqual(bodies[1]); expect(bodies[0]).toMatchObject({ + date: "2026-08-01", kind: "refund", originalExpenseId: "purchase", - date: "2026-08-01", }); }); it("edits a full refund with its own amount excluded from the limit and immutable purchase", async () => { - const refund: BankOperation = { - id: "refund", - kind: "refund", - cardId: "a", - cardName: card.name, - targetCardId: null, - targetCardName: null, - categoryId: "default", - categoryName: "Остальное", - originalExpenseId: "purchase", - amount: money("500"), - availableRefund: money("500"), - date: "2026-08-01", - description: "", - version: 2, - createdAt: "2026-08-01T00:00:00Z", - }; + const refund: BankOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + amount: money("500"), + availableRefund: money("500"), + cardId: "a", + cardName: card.name, + categoryId: "default", + categoryName: "Остальное", + createdAt: "2026-08-01T00:00:00Z", + date: "2026-08-01", + description: "", + id: "refund", + kind: "refund", + originalExpenseId: "purchase", + targetCardId: null, + targetCardName: null, + version: 2, + } + /* eslint-enable unicorn/no-null */); const purchase = { ...refund, + availableRefund: money("0"), + date: "2026-07-01", id: "purchase", kind: "expense", - date: "2026-07-01", - availableRefund: money("0"), }; server.use( http.get("*/api/v1/bank-cards/a/expenses", () => HttpResponse.json({ + hasNext: false, items: [purchase], page: 1, total: 1, - hasNext: false, }), ), http.get("*/api/v1/bank-cards/operations/purchase", () => @@ -357,39 +364,41 @@ describe("OperationForm", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(close).toHaveBeenCalled()); expect(body).toMatchObject({ - version: 2, amount: money("500"), - originalExpenseId: "purchase", description: "Полностью возвращено", + originalExpenseId: "purchase", + version: 2, }); }); it("keeps edit draft and stale version until explicit adoption after conflict", async () => { - const operation: BankOperation = { - id: "expense", - kind: "expense", - cardId: "a", - cardName: card.name, - targetCardId: null, - targetCardName: null, - categoryId: "default", - categoryName: "Остальное", - originalExpenseId: null, - amount: money("100"), - availableRefund: money("100"), - date: "2026-08-01", - description: "Первое", - version: 1, - createdAt: "2026-08-01T00:00:00Z", - }; + const operation: BankOperation = (/* eslint-disable unicorn/no-null -- Fixture preserves the production contract’s explicit null values. */ + { + amount: money("100"), + availableRefund: money("100"), + cardId: "a", + cardName: card.name, + categoryId: "default", + categoryName: "Остальное", + createdAt: "2026-08-01T00:00:00Z", + date: "2026-08-01", + description: "Первое", + id: "expense", + kind: "expense", + originalExpenseId: null, + targetCardId: null, + targetCardName: null, + version: 1, + } + /* eslint-enable unicorn/no-null */); let readVersion = 1; const bodies: Record[] = []; server.use( http.get("*/api/v1/bank-cards/operations/expense", () => HttpResponse.json({ ...operation, - version: readVersion, description: readVersion === 1 ? "Первое" : "Другое исправление", + version: readVersion, }), ), http.patch( @@ -434,9 +443,9 @@ describe("OperationForm", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(close).toHaveBeenCalled()); expect(bodies[2]).toMatchObject({ - version: 2, - description: "Мой черновик", amount: money("150"), + description: "Мой черновик", + version: 2, }); }); it("creates a category inside expense without losing operation fields", async () => { @@ -452,20 +461,20 @@ describe("OperationForm", () => { fireEvent.change(within(dialog).getByLabelText(/Название категории/), { target: { value: " кафе " }, }); - let created = false; + let isCreated = false; server.use( http.post("*/api/v1/bank-cards/categories", () => { - created = true; + isCreated = true; return HttpResponse.json( - { id: "new", name: "кафе", version: 1, isDefault: false }, + { id: "new", isDefault: false, name: "кафе", version: 1 }, { status: 201 }, ); }), http.get("*/api/v1/bank-cards/categories", () => HttpResponse.json([ - { id: "default", name: "Остальное", isDefault: true, version: 2 }, - ...(created - ? [{ id: "new", name: "кафе", isDefault: false, version: 1 }] + { id: "default", isDefault: true, name: "Остальное", version: 2 }, + ...(isCreated + ? [{ id: "new", isDefault: false, name: "кафе", version: 1 }] : []), ]), ), @@ -495,9 +504,9 @@ describe("OperationForm", () => { fireEvent.click(screen.getByRole("button", { name: "Сохранить" })); await waitFor(() => expect(body).toBeDefined()); expect(body).toMatchObject({ + amount: money("1.20"), categoryId: "new", description: "Черновик расхода", - amount: money("1.20"), }); }); }); diff --git a/src/pages/card/ui/OperationForm/OperationForm.tsx b/src/pages/card/ui/OperationForm/OperationForm.tsx index 44adeb0..251e6c2 100644 --- a/src/pages/card/ui/OperationForm/OperationForm.tsx +++ b/src/pages/card/ui/OperationForm/OperationForm.tsx @@ -1,7 +1,11 @@ import type { FC } from "react"; + import { FormProvider } from "react-hook-form"; + import { BankFeedback, CategoryManager } from "@/entities/bank-card"; + import type { OperationFormProps } from "./OperationForm.types"; + import { OperationFormView } from "./OperationForm.view"; import { useOperationFormVm } from "./OperationForm.vm"; @@ -12,34 +16,35 @@ const OperationForm: FC = (props) => { - {vm.expensesError && ( - - )}{" "} - {vm.sourceError && ( - - )} - - } categoriesFeedback={ vm.categoriesError && ( ) } - feedback={vm.error ? : null} + feedback={(vm.error) ? () : undefined} + refundFeedback={( + <> + {vm.expensesError && ( + + )} + {" "} + {vm.sourceError && ( + + )} + + )} /> {vm.categoriesOpen && ( diff --git a/src/pages/card/ui/OperationForm/OperationForm.types.ts b/src/pages/card/ui/OperationForm/OperationForm.types.ts index 6cadc82..09ba82e 100644 --- a/src/pages/card/ui/OperationForm/OperationForm.types.ts +++ b/src/pages/card/ui/OperationForm/OperationForm.types.ts @@ -1,21 +1,21 @@ import type { BankCard, BankOperation } from "@/entities/bank-card"; -type OperationValues = { - kind: BankOperation["kind"]; - cardId: string; - targetCardId: string; - categoryId: string; - originalExpenseId: string; - amount: string; - date: string; - description: string; -}; - type OperationFormProps = { card: BankCard; cards: BankCard[]; - operation?: BankOperation; onClose: () => void; + operation?: BankOperation; +}; + +type OperationValues = { + amount: string; + cardId: string; + categoryId: string; + date: string; + description: string; + kind: BankOperation["kind"]; + originalExpenseId: string; + targetCardId: string; }; export type { OperationFormProps, OperationValues }; diff --git a/src/pages/card/ui/OperationForm/OperationForm.view.tsx b/src/pages/card/ui/OperationForm/OperationForm.view.tsx index 28cb5d0..dcf3e46 100644 --- a/src/pages/card/ui/OperationForm/OperationForm.view.tsx +++ b/src/pages/card/ui/OperationForm/OperationForm.view.tsx @@ -1,3 +1,5 @@ +import type { FC, ReactNode, SubmitEventHandler } from "react"; + import { Button, Group, @@ -9,35 +11,38 @@ import { TextInput, } from "@mantine/core"; import { DateInput } from "@mantine/dates"; -import type { FC, FormEventHandler, ReactNode } from "react"; import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; + import type { BankOperation } from "@/entities/bank-card"; + import { formatMoney } from "@/shared/lib"; -import classes from "./OperationForm.module.css"; + import type { OperationValues } from "./OperationForm.types"; -type Choice = { value: string; label: string }; +import classes from "./OperationForm.module.css"; + +type Choice = { label: string; value: string }; type OperationFieldsProps = { - editing: boolean; - refundCardId: string; - kind: OperationValues["kind"]; cards: Choice[]; - targets: Choice[]; categories: Choice[]; - defaultCategory: string; - kinds: Choice[]; dateInputValue: (value: string) => string; - validDate: (value: string) => boolean; + defaultCategory: string; + editing: boolean; + kind: OperationValues["kind"]; + kinds: Choice[]; maxDate: () => string; + refundCardId: string; + targets: Choice[]; + validDate: (value: string) => boolean; }; const OperationFields: FC = (props) => { const { t } = useTranslation(); const { control, + formState: { errors, isSubmitting }, register, setValue, - formState: { errors, isSubmitting }, } = useFormContext(); return ( @@ -46,9 +51,9 @@ const OperationFields: FC = (props) => { name="kind" render={({ field }) => ( = (props) => { name="targetCardId" render={({ field }) => ( )} /> @@ -158,8 +161,8 @@ const OperationFields: FC = (props) => { type RefundFieldsProps = { editing: boolean; expenses: Choice[]; - onSelect: (id: string) => void; limit: BankOperation["availableRefund"] | undefined; + onSelect: (id: string) => void; }; const RefundFields: FC = (props) => { const { t } = useTranslation(); @@ -174,16 +177,16 @@ const RefundFields: FC = (props) => { name="originalExpenseId" render={({ field }) => (