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";
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: React.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() {
// 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")} - pronouns.cc</>
{errorElem}
);
}
function ApiErrorElem({ error }: { error: ApiError }) {
const { t } = useTranslation();
const errorDesc = errorCodeDesc(t, error.code);
return (
<>
{t("error.heading")}
{errorDesc}
);
}
export default function App() {
const { meta, meUser, settings } = useLoaderData();
return (
<>
);
}