chore: codify React component style

src/app/routes/AppRoutes.tsx

@@ -1,4 +1,5 @@
 import { Loader } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
 import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router";
 import { useAuth } from "@/features/auth";
@@ -40,11 +41,14 @@ const ProtectedLayout = lazy(async () => {
 	return { default: ProtectedLayout };
 });
 
-function LazyPage({ children }: { children: React.ReactNode }) {
-	return <Suspense fallback={<Loader />}>{children}</Suspense>;
-}
+const LazyPage: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 
-function Protected({ children }: { children: React.ReactNode }) {
+	return <Suspense fallback={<Loader />}>{children}</Suspense>;
+};
+
+const Protected: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { user, ready } = useAuth();
 	const location = useLocation();
 	if (!ready) return null;
@@ -57,15 +61,16 @@ function Protected({ children }: { children: React.ReactNode }) {
 			replace
 		/>
 	);
-}
+};
 
-function Public({ children }: { children: React.ReactNode }) {
+const Public: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { user, ready } = useAuth();
 	if (!ready) return null;
 	return user ? <Navigate to="/accounts" replace /> : children;
-}
+};
 
-export function AppRoutes() {
+const AppRoutes: FC = () => {
 	return (
 		<Routes>
 			<Route path="/" element={<Navigate to="/accounts" replace />} />
@@ -149,4 +154,6 @@ export function AppRoutes() {
 			/>
 		</Routes>
 	);
-}
+};
+
+export { AppRoutes };

src/app/routes/ProtectedLayout.tsx

@@ -1,6 +1,9 @@
+import type { FC } from "react";
 import { AppBreadcrumbs } from "@/app/ui";
 import { AppShell } from "@/shared/ui";
 
-export function ProtectedLayout() {
+const ProtectedLayout: FC = () => {
 	return <AppShell contentAboveOutlet={<AppBreadcrumbs />} />;
-}
+};
+
+export { ProtectedLayout };

src/app/routes/RouteErrorBoundary.test.tsx

@@ -1,5 +1,6 @@
 import { MantineProvider } from "@mantine/core";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import type { FC } from "react";
 import { MemoryRouter, useLocation, useNavigate } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { RouteErrorBoundary } from "./RouteErrorBoundary";
@@ -9,10 +10,11 @@ vi.mock("@/features/auth", () => ({
 	useAuth: () => ({ user: authenticated ? {} : null }),
 }));
 
-function ThrowingRoute(): never {
+const ThrowingRoute: FC = () => {
 	throw new Error("test route failure");
-}
-function HealthyRoute() {
+};
+
+const HealthyRoute: FC = () => {
 	return (
 		<div>
 			{useLocation().pathname === "/healthy" ? (
@@ -22,9 +24,11 @@ function HealthyRoute() {
 			)}
 		</div>
 	);
-}
-function RouteHarness() {
+};
+
+const RouteHarness: FC = () => {
 	const navigate = useNavigate();
+
 	return (
 		<>
 			<button type="button" onClick={() => navigate("/healthy")}>
@@ -35,7 +39,8 @@ function RouteHarness() {
 			</RouteErrorBoundary>
 		</>
 	);
-}
+};
+
 function renderBoundary(path: string) {
 	return render(
 		<MantineProvider>

src/app/routes/RouteErrorBoundary.tsx

@@ -1,24 +1,29 @@
 import { Button, Stack, Text, Title } from "@mantine/core";
+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 Props = {
-	children: React.ReactNode;
+type BoundaryProps = PropsWithChildren<{
 	routeKey: string;
 	authenticated: boolean;
+}>;
+
+type RouteErrorFallbackProps = {
+	authenticated: boolean;
 };
+
 type State = { hasError: boolean };
 
-class Boundary extends Component<Props, State> {
+class Boundary extends Component<BoundaryProps, State> {
 	state: State = { hasError: false };
 
 	static getDerivedStateFromError(): State {
 		return { hasError: true };
 	}
 
-	componentDidUpdate(previousProps: Props) {
+	componentDidUpdate(previousProps: BoundaryProps) {
 		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
 			this.setState({ hasError: false });
 		}
@@ -32,9 +37,11 @@ class Boundary extends Component<Props, State> {
 	}
 }
 
-function RouteErrorFallback({ authenticated }: { authenticated: boolean }) {
+const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
+	const { authenticated } = props;
 	const { t } = useTranslation();
 	const to = authenticated ? "/accounts" : "/login";
+
 	return (
 		<Stack>
 			<Title order={1}>{t("routeError.title")}</Title>
@@ -44,18 +51,18 @@ function RouteErrorFallback({ authenticated }: { authenticated: boolean }) {
 			</Button>
 		</Stack>
 	);
-}
+};
 
-export function RouteErrorBoundary({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
+const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
 	const { pathname, search } = useLocation();
 	const { user } = useAuth();
+
 	return (
 		<Boundary authenticated={Boolean(user)} routeKey={`${pathname}${search}`}>
 			{children}
 		</Boundary>
 	);
-}
+};
+
+export { RouteErrorBoundary };