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

chore: codify React component style

Browse Source
This commit is contained in:
ksv741
2026-08-25 15:33:20 +03:00
parent 268acdf2e1
commit d10e1dd182
65 changed files with 711 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/model/auth.test.tsx
+28 -16
View File
@@ -1,7 +1,7 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import type { ReactNode } from "react";
import type { FC, PropsWithChildren } from "react";
import { describe, expect, it } from "vitest";
import { apiClient } from "@/shared/api";
import { server } from "@/test/server";
@@ -22,11 +22,15 @@ describe("AuthProvider", () => {
return HttpResponse.json([]);
}),
);
const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={new QueryClient()}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
const wrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<QueryClientProvider client={new QueryClient()}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
};
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() => expect(result.current.ready).toBe(true));
@@ -39,11 +43,15 @@ describe("AuthProvider", () => {
server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error()));
const queryClient = new QueryClient();
queryClient.setQueryData(["cached-query"], { value: "stale" });
const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
const wrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
};
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() => expect(result.current.ready).toBe(true));
@@ -71,11 +79,15 @@ describe("AuthProvider", () => {
);
const queryClient = new QueryClient();
queryClient.setQueryData(["cached-query"], { value: "stale" });
const wrapper = ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
const wrapper: FC<PropsWithChildren> = (props) => {
const { children } = props;
return (
<QueryClientProvider client={queryClient}>
<AuthProvider>{children}</AuthProvider>
</QueryClientProvider>
);
};
const { result } = renderHook(() => useAuth(), { wrapper });
await waitFor(() =>
src/features/auth/model/auth.tsx
+7 -4
View File
@@ -1,4 +1,5 @@
import { useQueryClient } from "@tanstack/react-query";
import type { FC, PropsWithChildren } from "react";
import {
createContext,
useCallback,
@@ -25,7 +26,6 @@ type AuthContextValue = {
logout: () => Promise<void>;
refresh: () => Promise<boolean>;
};
const AuthContext = createContext<AuthContextValue | null>(null);
async function request(
@@ -40,7 +40,8 @@ async function request(
return data as Authentication;
}
export function AuthProvider({ children }: { children: React.ReactNode }) {
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);
@@ -138,10 +139,12 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
{children}
</AuthContext>
);
}
};
export function useAuth() {
function useAuth() {
const context = useContext(AuthContext);
if (!context) throw new Error("AuthProvider is required");
return context;
}
export { AuthProvider, useAuth };
src/features/auth/ui/AuthForm.tsx
+9 -7
View File
@@ -1,5 +1,6 @@
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";
@@ -50,14 +51,13 @@ const registerSchema = loginSchema.refine(
}),
);
type AuthFormValues = z.input<typeof loginSchema>;
export function AuthForm({
register,
onSubmit,
}: {
type AuthFormProps = {
register?: true;
onSubmit: (email: string, password: string) => Promise<void>;
}) {
};
const AuthForm: FC<AuthFormProps> = (props) => {
const { register, onSubmit } = props;
const { t } = useTranslation();
const schema = register ? registerSchema : loginSchema;
const methods = useForm<AuthFormValues>({
@@ -114,4 +114,6 @@ export function AuthForm({
</form>
</FormProvider>
);
}
};
export { AuthForm };
src/features/auth/ui/LoginForm.tsx
+6 -2
View File
@@ -1,13 +1,15 @@
import type { FC } from "react";
import { useLocation, useNavigate } from "react-router";
import { useAuth } from "../model/auth";
import { AuthForm } from "./AuthForm";
export function LoginForm() {
const LoginForm: FC = () => {
const { login } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const returnTo =
(location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts";
return (
<AuthForm
onSubmit={async (email, password) => {
@@ -16,4 +18,6 @@ export function LoginForm() {
}}
/>
);
}
};
export { LoginForm };
src/features/auth/ui/RegisterForm.tsx
+6 -2
View File
@@ -1,13 +1,15 @@
import type { FC } from "react";
import { useLocation, useNavigate } from "react-router";
import { useAuth } from "../model/auth";
import { AuthForm } from "./AuthForm";
export function RegisterForm() {
const RegisterForm: FC = () => {
const { register } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const returnTo =
(location.state as { returnTo?: string } | null)?.returnTo ?? "/accounts";
return (
<AuthForm
register
@@ -17,4 +19,6 @@ export function RegisterForm() {
}}
/>
);
}
};
export { RegisterForm };
src/features/tbank-connection/ui/TbankConnectionSection.tsx
+13 -4
View File
@@ -7,6 +7,7 @@ import {
Text,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import type { FC } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
@@ -24,6 +25,9 @@ import {
type Status =
paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
type TbankConnectionSectionLoadedProps = {
status: Status;
};
function errorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
@@ -31,15 +35,18 @@ function errorCode(error: unknown): string | undefined {
: undefined;
}
export function TbankConnectionSection() {
const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel();
if (viewModel.state === "loading") return <TbankConnectionLoading />;
if (viewModel.state === "error")
return <TbankConnectionError retry={viewModel.retry} />;
return <TbankConnectionSectionLoaded status={viewModel.status} />;
}
};
function TbankConnectionSectionLoaded({ status }: { status: Status }) {
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
props,
) => {
const { status } = props;
const { t } = useTranslation();
const queryClient = useQueryClient();
const [deleteOpened, setDeleteOpened] = useState(false);
@@ -151,4 +158,6 @@ function TbankConnectionSectionLoaded({ status }: { status: Status }) {
</Modal>
</Stack>
);
}
};
export { TbankConnectionSection };
src/features/tbank-connection/ui/TbankConnectionSection.view.tsx
+14 -4
View File
@@ -1,12 +1,20 @@
import { Alert, Button, Text } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
export function TbankConnectionLoading() {
type TbankConnectionErrorProps = {
retry: () => void;
};
const TbankConnectionLoading: FC = () => {
const { t } = useTranslation();
return <Text>{t("states.loadingText")}</Text>;
}
export function TbankConnectionError({ retry }: { retry: () => void }) {
};
const TbankConnectionError: FC<TbankConnectionErrorProps> = (props) => {
const { retry } = props;
const { t } = useTranslation();
return (
<Alert color="red" title={t("tbank.statusError")}>
<Button variant="subtle" onClick={retry}>
@@ -14,4 +22,6 @@ export function TbankConnectionError({ retry }: { retry: () => void }) {
</Button>
</Alert>
);
}
};
export { TbankConnectionError, TbankConnectionLoading };
src/features/tbank-connection/ui/TbankConnectionSection.vm.ts
+4 -2
View File
@@ -5,9 +5,9 @@ import { apiQueryClient } from "@/shared/api";
const tbankConnectionQueryOptions = () =>
apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
export const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
const tbankConnectionQueryKey = tbankConnectionQueryOptions().queryKey;
export function useTbankConnectionViewModel() {
function useTbankConnectionViewModel() {
const { accessToken } = useAuth();
const status = useQuery({
...tbankConnectionQueryOptions(),
@@ -18,3 +18,5 @@ export function useTbankConnectionViewModel() {
return { state: "error" as const, retry: () => status.refetch() };
return { state: "loaded" as const, status: status.data };
}
export { tbankConnectionQueryKey, useTbankConnectionViewModel };