frontend/src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

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

type RouteErrorFallbackProps = {
	authenticated: boolean;
};

type State = { hasError: boolean };

class Boundary extends Component<BoundaryProps, State> {
	state: State = { hasError: false };

	static getDerivedStateFromError(): State {
		return { hasError: true };
	}

	componentDidUpdate(previousProps: BoundaryProps) {
		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
			this.setState({ hasError: false });
		}
	}

	render() {
		if (this.state.hasError) {
			return <RouteErrorFallback authenticated={this.props.authenticated} />;
		}
		return this.props.children;
	}
}

const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
	const { authenticated } = props;
	const { t } = useTranslation();
	useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
	const to = authenticated ? "/accounts" : "/login";

	return (
		<Stack>
			<Title order={1}>{t("routeError.title")}</Title>
			<Text>{t("routeError.text")}</Text>
			<Button component={Link} to={to}>
				{t("routeError.action")}
			</Button>
			<Button component="a" href={to} variant="default">
				{t("routeError.reload")}
			</Button>
		</Stack>
	);
};

const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
	const { children } = props;
	const { pathname, search, key } = useLocation();
	const { user } = useAuth();

	return (
		<Boundary
			authenticated={Boolean(user)}
			routeKey={`${pathname}${search}:${key}`}
		>
			{children}
		</Boundary>
	);
};

export { RouteErrorBoundary };