import { type LinksFunction, type LoaderFunction, json } from "@remix-run/node"; import { Outlet, useCatch, useLoaderData, useMatches } from "@remix-run/react"; import * as Sentry from "@sentry/browser"; import serverConfig from "~/config/config.server"; import { type SessionData, requireLoggedIn } from "~/utils/auth.server"; import Footer from "~/features/core/components/footer"; import ServiceWorkerUpdateNotifier from "~/features/core/components/service-worker-update-notifier"; import Notification from "~/features/core/components/notification"; import useServiceWorkerRevalidate from "~/features/core/hooks/use-service-worker-revalidate"; import useDevice from "~/features/phone-calls/hooks/use-device"; import footerStyles from "~/features/core/components/footer.css"; import appStyles from "~/styles/app.css"; import { useEffect } from "react"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: appStyles }, { rel: "stylesheet", href: footerStyles }, ]; export type AppLoaderData = { sessionData: SessionData; config: { webPushPublicKey: string }; }; export const loader: LoaderFunction = async ({ request }) => { const sessionData = await requireLoggedIn(request); return json({ sessionData, config: { webPushPublicKey: serverConfig.webPush.publicKey, }, }); }; export default function __App() { useDevice(); useServiceWorkerRevalidate(); const { sessionData } = useLoaderData(); const matches = useMatches(); const hideFooter = matches.some((match) => match.handle?.hideFooter === true); useEffect(() => { Sentry.setUser(sessionData.user); }, []); return ( <>
{hideFooter ? null :
}
); } export function CatchBoundary() { const caught = useCatch(); console.log("caught", caught); return (
{caught.status}
); }