shellphone.app/app/routes/__app.tsx

69 lines
2.0 KiB
TypeScript
Raw Normal View History

2022-05-14 22:35:51 +00:00
import { type LoaderFunction, json } from "@remix-run/node";
2022-05-14 10:22:06 +00:00
import { Outlet, useCatch, useMatches } from "@remix-run/react";
2022-05-14 22:35:51 +00:00
import { type SessionData, type SessionOrganization, requireLoggedIn } from "~/utils/auth.server";
2022-05-14 10:22:06 +00:00
import Footer from "~/features/core/components/footer";
2022-05-14 22:35:51 +00:00
import db from "~/utils/db.server";
2022-05-19 22:55:02 +00:00
export type AppLoaderData = SessionData;
2022-05-14 10:22:06 +00:00
2022-05-19 22:55:02 +00:00
export const loader: LoaderFunction = async ({ request }) => {
2022-05-14 22:35:51 +00:00
const user = await requireLoggedIn(request);
const organization = await db.organization.findUnique({
where: { id: user.organizations[0].id },
include: {
memberships: {
where: { userId: user.id },
select: { role: true },
},
2022-05-19 22:55:02 +00:00
phoneNumbers: {
where: { isCurrent: true },
select: { id: true, number: true },
},
2022-05-14 22:35:51 +00:00
},
});
const currentOrganization: SessionOrganization = {
id: organization!.id,
twilioAccountSid: organization!.twilioAccountSid,
2022-05-19 22:55:02 +00:00
twilioSubAccountSid: organization!.twilioSubAccountSid,
2022-05-14 22:35:51 +00:00
role: organization!.memberships[0].role,
};
2022-05-19 22:55:02 +00:00
const currentPhoneNumber = organization!.phoneNumbers[0];
2022-05-14 22:35:51 +00:00
2022-05-19 22:55:02 +00:00
return json<AppLoaderData>({ ...user, currentOrganization, currentPhoneNumber });
};
2022-05-14 10:22:06 +00:00
export default function __App() {
const matches = useMatches();
2022-05-19 23:05:06 +00:00
const hideFooter = matches.some(match => match.handle?.hideFooter === true);
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">
<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 ? <Footer /> : null}
</div>
</div>
);
}
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>
);
}