import cachified from "@epic-web/cachified"; import type { LoaderFunctionArgs, MetaFunction, SerializeFrom, } from "@remix-run/node"; import { json, redirect } from "@remix-run/node"; import { Links, Meta, Outlet, Scripts, type ShouldRevalidateFunction, useLoaderData, useMatches, useNavigation, } from "@remix-run/react"; import generalI18next from "i18next"; import NProgress from "nprogress"; import * as React from "react"; import { type CustomTypeOptions, useTranslation } from "react-i18next"; import { useChangeLanguage } from "remix-i18next/react"; import * as TournamentRepository from "~/features/tournament/TournamentRepository.server"; import { cache, ttl } from "~/utils/cache.server"; import type { SendouRouteHandle } from "~/utils/remix"; import { Catcher } from "./components/Catcher"; import { ConditionalScrollRestoration } from "./components/ConditionalScrollRestoration"; import { Layout } from "./components/layout"; import { CUSTOMIZED_CSS_VARS_NAME, ONE_HOUR_IN_MS, TEN_MINUTES_IN_MS, } from "./constants"; import { getUser } from "./features/auth/core/user.server"; import { userIsBanned } from "./features/ban/core/banned.server"; import { Theme, ThemeHead, ThemeProvider, isTheme, 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 i18next, { i18nCookie } from "./modules/i18n/i18next.server"; import { COMMON_PREVIEW_IMAGE, SUSPENDED_PAGE } from "./utils/urls"; import "nprogress/nprogress.css"; import "~/styles/common.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 = ({ nextUrl }) => { // // reload on language change so the selected language gets set into the cookie const lang = nextUrl.searchParams.get("lng"); return Boolean(lang); }; export const meta: MetaFunction = () => { return [ { title: "sendou.ink" }, { name: "description", content: "Competitive Splatoon Hub featuring gear planner, event calendar, builds by top players, and more!", }, { property: "og:image", content: COMMON_PREVIEW_IMAGE, }, ]; }; export type RootLoaderData = SerializeFrom; export const loader = async ({ request }: LoaderFunctionArgs) => { const user = await getUser(request, false); const locale = await i18next.getLocale(request); const themeSession = await getThemeSession(request); // avoid redirection loop if ( user && userIsBanned(user?.id) && new URL(request.url).pathname !== SUSPENDED_PAGE ) { return redirect(SUSPENDED_PAGE); } return json( { locale, theme: themeSession.getTheme(), tournaments: await cachified({ key: "tournament-showcase", cache, ttl: ttl(TEN_MINUTES_IN_MS), staleWhileRevalidate: ttl(ONE_HOUR_IN_MS), async getFreshValue() { return TournamentRepository.forShowcase(); }, }), baseUrl: process.env.BASE_URL!, skalopUrl: process.env.SKALOP_WS_URL!, publisherId: process.env.PLAYWIRE_PUBLISHER_ID, websiteId: process.env.PLAYWIRE_WEBSITE_ID, loginDisabled: process.env.LOGIN_DISABLED === "true", user: user ? { username: user.username, discordAvatar: user.discordAvatar, discordId: user.discordId, id: user.id, plusTier: user.plusTier, customUrl: user.customUrl, patronTier: user.patronTier, isArtist: user.isArtist, isVideoAdder: user.isVideoAdder, inGameName: user.inGameName, friendCode: user.friendCode, languages: user.languages ? user.languages.split(",") : [], } : 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 locale = data?.locale ?? DEFAULT_LANGUAGE; useChangeLanguage(locale); usePreloadTranslation(); useLoadingIndicator(); const customizedCSSVars = useCustomizedCSSVars(); return ( {process.env.NODE_ENV === "development" && } {children} ); } function useLoadingIndicator() { const transition = useNavigation(); React.useEffect(() => { if (transition.state === "loading") NProgress.start(); if (transition.state === "idle") NProgress.done(); }, [transition.state]); } // TODO: this should be an array if we can figure out how to make Typescript // enforce that it has every member of keyof CustomTypeOptions["resources"] without duplicating the type manually export const namespaceJsonsToPreloadObj: Record< keyof CustomTypeOptions["resources"], boolean > = { common: true, analyzer: true, badges: true, builds: true, calendar: true, contributions: true, faq: true, "game-misc": true, gear: true, user: true, weapons: true, tournament: true, team: true, vods: true, art: true, q: true, lfg: true, }; const namespaceJsonsToPreload = Object.keys(namespaceJsonsToPreloadObj); function usePreloadTranslation() { React.useEffect(() => { void generalI18next.loadNamespaces(namespaceJsonsToPreload); }, []); } function useCustomizedCSSVars() { const matches = useMatches(); for (const match of matches) { if ((match.data as any)?.[CUSTOMIZED_CSS_VARS_NAME]) { // cheating TypeScript here but no real way to keep up // even an illusion of type safety here return Object.fromEntries( Object.entries( (match.data as any)[CUSTOMIZED_CSS_VARS_NAME] as Record< string, string >, ).map(([key, value]) => [`--${key}`, value]), ) as React.CSSProperties; } } return; } 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 ( <> ); } const Ramp = React.lazy(() => import("./components/ramp/Ramp")); function MyRamp({ data }: { data: RootLoaderData | undefined }) { if ( !data || !data.publisherId || !data.websiteId || data.user?.patronTier || typeof window === "undefined" ) { return null; } return ; }