import generalI18next from "i18next"; import NProgress from "nprogress"; import * as React from "react"; import { I18nProvider, RouterProvider } from "react-aria-components"; import { ErrorBoundary as ClientErrorBoundary } from "react-error-boundary"; import { useTranslation } from "react-i18next"; import type { LoaderFunctionArgs, MetaFunction, NavigateOptions, } from "react-router"; import { data, Links, Meta, Outlet, Scripts, ScrollRestoration, type ShouldRevalidateFunction, useHref, useLoaderData, useMatches, useNavigate, useNavigation, useSearchParams, } from "react-router"; import { useDebounce } from "react-use"; import { useChangeLanguage } from "remix-i18next/react"; import * as NotificationRepository from "~/features/notifications/NotificationRepository.server"; import { NOTIFICATIONS } from "~/features/notifications/notifications-contants"; import type { SendouRouteHandle } from "~/utils/remix.server"; import type { Route } from "./+types/root"; import { Catcher } from "./components/Catcher"; import { SendouToastRegion, toastQueue } from "./components/elements/Toast"; import { Layout } from "./components/layout"; import { Ramp } from "./components/ramp/Ramp"; import { apiCorsMiddleware } from "./features/api-public/api-cors-middleware.server"; import { getUser } from "./features/auth/core/user.server"; import { userMiddleware } from "./features/auth/core/user-middleware.server"; import { sessionIdMiddleware } from "./features/session-id/session-id-middleware.server"; import { isTheme, Theme, ThemeHead, ThemeProvider, useTheme, } from "./features/theme/core/provider"; import { getThemeSession } from "./features/theme/core/session.server"; import { useIsMounted } from "./hooks/useIsMounted"; import { DEFAULT_LANGUAGE } from "./modules/i18n/config"; import { i18nCookie, i18next } from "./modules/i18n/i18next.server"; import { IS_E2E_TEST_RUN } from "./utils/e2e"; import { allI18nNamespaces } from "./utils/i18n"; import { isRevalidation, metaTags, type SerializeFrom } from "./utils/remix"; export const middleware: Route.MiddlewareFunction[] = [ sessionIdMiddleware, apiCorsMiddleware, userMiddleware, ]; import "nprogress/nprogress.css"; import "~/styles/common.css"; import "~/styles/elements.css"; import "~/styles/flags.css"; import "~/styles/layout.css"; import "~/styles/reset.css"; import "~/styles/utils.css"; import "~/styles/vars.css"; export const shouldRevalidate: ShouldRevalidateFunction = (args) => { if (isRevalidation(args)) return true; // user settings, lang change etc. require revalidation on root loader const isSettingsPage = args.currentUrl.pathname === "/settings"; if (isSettingsPage) return true; return false; }; export const meta: MetaFunction = (args) => { return metaTags({ title: "sendou.ink", ogTitle: "sendou.ink - Competitive Splatoon Hub", location: args.location, description: "Sendou.ink is the home of competitive Splatoon featuring daily tournaments and a seasonal ladder. Variety of tools and the largest collection of builds by top players allow you to level up your skill in Splatoon 3.", }); }; export type RootLoaderData = SerializeFrom; export type LoggedInUser = NonNullable; export const loader = async ({ request }: LoaderFunctionArgs) => { const user = getUser(); const locale = await i18next.getLocale(request); const themeSession = await getThemeSession(request); return data( { locale, theme: themeSession.getTheme(), user: user ? { username: user.username, discordAvatar: user.discordAvatar, discordId: user.discordId, id: user.id, customUrl: user.customUrl, inGameName: user.inGameName, friendCode: user.friendCode, preferences: user.preferences ?? {}, languages: user.languages ? user.languages.split(",") : [], plusTier: user.plusTier, roles: user.roles, } : undefined, notifications: user ? await NotificationRepository.findByUserId(user.id, { limit: NOTIFICATIONS.PEEK_COUNT, }) : undefined, }, { headers: { "Set-Cookie": await i18nCookie.serialize(locale) }, }, ); }; export const handle: SendouRouteHandle = { i18n: ["common", "game-misc", "weapons"], }; function Document({ children, data, isErrored = false, }: { children: React.ReactNode; data?: RootLoaderData; isErrored?: boolean; }) { const { htmlThemeClass } = useTheme(); const { i18n } = useTranslation(); const navigate = useNavigate(); const locale = data?.locale ?? DEFAULT_LANGUAGE; useChangeLanguage(locale); usePreloadTranslation(); useLoadingIndicator(); useTriggerToasts(); const customizedCSSVars = useCustomizedCSSVars(); return ( {IS_E2E_TEST_RUN && } {children} { return location.pathname; }} /> ); } function useTriggerToasts() { const [searchParams] = useSearchParams(); const navigate = useNavigate(); const error = searchParams.get("__error"); const success = searchParams.get("__success"); React.useEffect(() => { if (!error && !success) return; if (error) { toastQueue.add({ message: error, variant: "error", }); } else if (success) { toastQueue.add( { message: success, variant: "success", }, { timeout: 5000, }, ); } navigate({ search: "" }, { replace: true }); }, [error, success, navigate]); } function useLoadingIndicator() { const transition = useNavigation(); useDebounce( () => { if (transition.state === "loading") { NProgress.start(); } else if (transition.state === "idle") { NProgress.done(); } }, 250, [transition.state], ); } function usePreloadTranslation() { React.useEffect(() => { void generalI18next.loadNamespaces(allI18nNamespaces()); }, []); } const CUSTOMIZED_CSS_VARS_NAME = "css"; function useCustomizedCSSVars() { const matches = useMatches(); for (const match of matches) { if ((match.data as any)?.[CUSTOMIZED_CSS_VARS_NAME]) { return Object.fromEntries( Object.entries( (match.data as any)[CUSTOMIZED_CSS_VARS_NAME] as Record< string, string >, ).map(([key, value]) => [ `--${key}`, `var(--preview-${key}, ${value})`, ]), ) as React.CSSProperties; } } return; } declare module "react-aria-components" { interface RouterConfig { routerOptions: NavigateOptions; } } export default function App() { // prop drilling data instead of using useLoaderData in the child components directly because // useLoaderData can't be used in CatchBoundary and layout is rendered in it as well // // Update 14.10.23: not sure if this still applies as the CatchBoundary is gone const data = useLoaderData(); return ( ); } export const ErrorBoundary = () => { return ( ); }; function HydrationTestIndicator() { const isMounted = useIsMounted(); if (!isMounted) return null; return

; } function Fonts() { return ( <> ); } function PWALinks() { return ( <> ); } function MyRamp({ data }: { data: RootLoaderData | undefined }) { if (!data || data.user?.roles.includes("MINOR_SUPPORT")) { return null; } return ( ); }