shellphone.app/app/messages/pages/messages.tsx

61 lines
1.7 KiB
TypeScript
Raw Normal View History

2021-08-01 16:28:47 +00:00
import { Suspense, useEffect } from "react";
2021-08-01 16:52:23 +00:00
import dynamic from "next/dynamic";
import type { BlitzPage } from "blitz";
2021-08-01 03:05:40 +00:00
import { Routes } from "blitz";
2021-08-01 16:52:23 +00:00
import { atom, useAtom } from "jotai";
2021-07-31 14:33:18 +00:00
2021-10-15 22:24:28 +00:00
import Layout from "app/core/layouts/layout";
import ConversationsList from "../components/conversations-list";
2021-08-01 07:40:18 +00:00
import NewMessageButton from "../components/new-message-button";
2021-10-15 22:24:28 +00:00
import MissingTwilioCredentials from "app/core/components/missing-twilio-credentials";
import useNotifications from "app/core/hooks/use-notifications";
import useCurrentUser from "app/core/hooks/use-current-user";
import PageTitle from "../../core/components/page-title";
2021-07-31 14:33:18 +00:00
const Messages: BlitzPage = () => {
2021-10-15 22:24:28 +00:00
const { hasFilledTwilioCredentials } = useCurrentUser();
2021-08-01 16:28:47 +00:00
const { subscription, subscribe } = useNotifications();
2021-08-01 07:40:18 +00:00
const setIsOpen = useAtom(bottomSheetOpenAtom)[1];
2021-07-31 14:33:18 +00:00
2021-08-01 16:28:47 +00:00
useEffect(() => {
if (!subscription) {
subscribe();
}
2021-08-29 23:13:06 +00:00
}, [subscribe, subscription]);
2021-08-01 16:28:47 +00:00
2021-10-15 22:24:28 +00:00
if (!hasFilledTwilioCredentials) {
return (
<>
<MissingTwilioCredentials />
<PageTitle className="filter blur-sm absolute top-0" title="Messages" />
</>
);
}
2021-07-31 14:33:18 +00:00
return (
2021-08-01 03:05:40 +00:00
<>
2021-10-15 22:24:28 +00:00
<PageTitle title="Messages" />
2021-09-24 23:07:40 +00:00
<section className="flex flex-grow flex-col">
<Suspense fallback="Loading...">
<ConversationsList />
</Suspense>
</section>
2021-08-01 07:40:18 +00:00
<NewMessageButton onClick={() => setIsOpen(true)} />
<NewMessageBottomSheet />
2021-08-01 03:05:40 +00:00
</>
);
};
2021-07-31 14:33:18 +00:00
2021-08-01 16:52:23 +00:00
const NewMessageBottomSheet = dynamic(() => import("../components/new-message-bottom-sheet"), {
ssr: false,
loading: () => null,
});
export const bottomSheetOpenAtom = atom(false);
2021-08-01 03:05:40 +00:00
Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
2021-08-01 10:36:32 +00:00
Messages.authenticate = { redirectTo: Routes.SignIn().pathname };
2021-07-31 14:33:18 +00:00
export default Messages;