shellphone.app/app/routes/__app.tsx

81 lines
2.4 KiB
TypeScript
Raw Normal View History

2022-07-13 21:57:07 +00:00
import { useEffect } from "react";
import { type LinksFunction, type LoaderFunction, json } from "@remix-run/node";
2022-06-26 15:01:55 +00:00
import { Outlet, useCatch, useLoaderData, useMatches } from "@remix-run/react";
import * as Sentry from "@sentry/browser";
2022-05-14 10:22:06 +00:00
import serverConfig from "~/config/config.server";
import { type SessionData, requireLoggedIn } from "~/utils/auth.server";
2022-05-14 10:22:06 +00:00
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";
2022-06-14 23:28:32 +00:00
import useDevice from "~/features/phone-calls/hooks/use-device";
import footerStyles from "~/features/core/components/footer.css";
import appStyles from "~/styles/app.css";
2022-05-14 22:35:51 +00:00
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: appStyles },
{ rel: "stylesheet", href: footerStyles },
];
export type AppLoaderData = {
sessionData: SessionData;
config: { webPushPublicKey: string };
};
2022-05-14 10:22:06 +00:00
2022-05-19 22:55:02 +00:00
export const loader: LoaderFunction = async ({ request }) => {
const sessionData = await requireLoggedIn(request);
2022-05-14 22:35:51 +00:00
return json<AppLoaderData>({
sessionData,
config: {
webPushPublicKey: serverConfig.webPush.publicKey,
},
});
2022-05-19 22:55:02 +00:00
};
2022-05-14 10:22:06 +00:00
export default function __App() {
2022-06-14 23:28:32 +00:00
useDevice();
useServiceWorkerRevalidate();
2022-06-26 15:01:55 +00:00
const { sessionData } = useLoaderData<AppLoaderData>();
2022-05-14 10:22:06 +00:00
const matches = useMatches();
const hideFooter = matches.some((match) => match.handle?.hideFooter === true);
2022-05-14 10:22:06 +00:00
2022-06-26 15:01:55 +00:00
useEffect(() => {
Sentry.setUser(sessionData.user);
}, []);
2022-05-14 10:22:06 +00:00
return (
<>
<div className="h-full w-full overflow-hidden fixed bg-gray-100">
<div className="flex flex-col w-full h-full">
<ServiceWorkerUpdateNotifier />
<div className="flex flex-col flex-1 w-full overflow-y-auto">
<main className="flex flex-col flex-1 my-0 h-full">
<Outlet />
</main>
</div>
{hideFooter ? null : <Footer />}
2022-05-14 10:22:06 +00:00
</div>
</div>
<Notification />
</>
2022-05-14 10:22:06 +00:00
);
}
export function CatchBoundary() {
const caught = useCatch();
console.log("caught", caught);
return (
<div className="h-full w-full overflow-hidden fixed bg-gray-100">
<div className="flex flex-col w-full h-full">
<div className="flex flex-col flex-1 w-full overflow-y-auto">
2022-05-19 22:55:02 +00:00
<main className="flex flex-col flex-1 my-0 h-full">{caught.status}</main>
2022-05-14 10:22:06 +00:00
</div>
<Footer />
</div>
</div>
);
}