chore: codify React component style

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

@@ -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

@@ -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 };