import { json, Links, Meta as MetaComponent, Outlet, Scripts, ScrollRestoration, useLoaderData, useRouteError, useRouteLoaderData, } from "@remix-run/react"; import { LoaderFunctionArgs } from "@remix-run/node"; import { useChangeLanguage } from "remix-i18next/react"; import { useTranslation } from "react-i18next"; import serverRequest, { getCookie, writeCookie } from "./lib/request.server"; import Meta from "./lib/api/meta"; import Navbar from "./components/nav/Navbar"; import { User, UserSettings } from "./lib/api/user"; import { ApiError, ErrorCode } from "./lib/api/error"; import "./app.scss"; import getLocalSettings from "./lib/settings.server"; import { LANGUAGE } from "~/env.server"; import { errorCodeDesc } from "./components/ErrorAlert"; import { Container } from "react-bootstrap"; import { ReactNode } from "react"; import BaseNavbar from "~/components/nav/BaseNavbar"; export const loader = async ({ request }: LoaderFunctionArgs) => { const meta = await serverRequest("GET", "/meta"); const token = getCookie(request, "pronounscc-token"); let setCookie = ""; let meUser: User | undefined; let settings = getLocalSettings(request); if (token) { try { meUser = await serverRequest("GET", "/users/@me", { token }); settings = await serverRequest("GET", "/users/@me/settings", { token }); } catch (e) { // If we get an unauthorized error, clear the token, as it's not valid anymore. if ((e as ApiError).code === ErrorCode.AuthenticationRequired) { setCookie = writeCookie("pronounscc-token", token, 0); } } } return json( { meta, meUser, settings, locale: LANGUAGE }, { headers: { "Set-Cookie": setCookie }, }, ); }; export function Layout({ children }: { children: ReactNode }) { const { locale, settings } = useRouteLoaderData("root") || { meta: { users: { total: 0, active_month: 0, active_week: 0, active_day: 0, }, members: 0, version: "", hash: "", }, }; const { i18n } = useTranslation(); i18n.language = locale || "en"; useChangeLanguage(locale || "en"); return ( {children} ); } export function ErrorBoundary() { const data = useRouteLoaderData("root"); // eslint-disable-next-line @typescript-eslint/no-explicit-any const error: any = useRouteError(); const { t } = useTranslation(); console.log(error); const errorElem = "code" in error && "message" in error ? ( ) : ( <>{t("error.errors.generic-error")} ); return ( {t("error.title")} {data?.meUser && data?.settings && data?.meta ? ( ) : ( )} {errorElem} ); } function ApiErrorElem({ error }: { error: ApiError }) { const { t } = useTranslation(); const errorDesc = errorCodeDesc(t, error.code); return ( <>

{t("error.heading")}

{errorDesc}

{t("error.more-info")}

					{JSON.stringify(error, null, "  ")}

); } export default function App() { const { meta, meUser, settings } = useLoaderData(); return ( <> ); }