mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lazy load new message bottom sheet

Browse Source
This commit is contained in:
m5r 2021-08-02 00:52:23 +08:00
parent fef4c03458
commit 4ee105b46a
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/messages/components/new-message-bottom-sheet.tsx
View File

@ -1,18 +1,22 @@
import { Suspense, useState } from "react"; import { Suspense, useEffect, useRef, useState } from "react";
import { BottomSheet } from "react-spring-bottom-sheet"; import { BottomSheet } from "react-spring-bottom-sheet";
import { atom, useAtom } from "jotai"; import { useAtom } from "jotai";
import { useRouter, Routes } from "blitz"; import { useRouter, Routes } from "blitz";
import "react-spring-bottom-sheet/dist/style.css"; import "react-spring-bottom-sheet/dist/style.css";
import NewMessageArea from "./new-message-area"; import NewMessageArea from "./new-message-area";
import { bottomSheetOpenAtom } from "../pages/messages";
export const bottomSheetOpenAtom = atom(false);
export default function NewMessageBottomSheet() { export default function NewMessageBottomSheet() {
const router = useRouter(); const router = useRouter();
const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom); const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
const [recipient, setRecipient] = useState(""); const [recipient, setRecipient] = useState("");
const recipientRef = useRef<HTMLInputElement>(null);
useEffect(() => {
recipientRef.current?.focus();
});
return ( return (
<BottomSheet <BottomSheet
@ -33,6 +37,7 @@ export default function NewMessageBottomSheet() {
<div className="flex items-center p-4 border-t border-b"> <div className="flex items-center p-4 border-t border-b">
<span className="mr-4 text-[#333]">To:</span> <span className="mr-4 text-[#333]">To:</span>
<input <input
ref={recipientRef}
onChange={(event) => setRecipient(event.target.value)} onChange={(event) => setRecipient(event.target.value)}
className="bg-none border-none outline-none flex-1 text-black" className="bg-none border-none outline-none flex-1 text-black"
/> />

11
app/messages/pages/messages.tsx
View File

@ -1,12 +1,12 @@
import { Suspense, useEffect } from "react"; import { Suspense, useEffect } from "react";
import dynamic from "next/dynamic";
import type { BlitzPage } from "blitz"; import type { BlitzPage } from "blitz";
import { Routes } from "blitz"; import { Routes } from "blitz";
import { useAtom } from "jotai"; import { atom, useAtom } from "jotai";
import Layout from "../../core/layouts/layout"; import Layout from "../../core/layouts/layout";
import ConversationsList from "../components/conversations-list"; import ConversationsList from "../components/conversations-list";
import NewMessageButton from "../components/new-message-button"; import NewMessageButton from "../components/new-message-button";
import NewMessageBottomSheet, { bottomSheetOpenAtom } from "../components/new-message-bottom-sheet";
import useRequireOnboarding from "../../core/hooks/use-require-onboarding"; import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
import useNotifications from "../../core/hooks/use-notifications"; import useNotifications from "../../core/hooks/use-notifications";
@ -35,6 +35,13 @@ const Messages: BlitzPage = () => {
); );
}; };
const NewMessageBottomSheet = dynamic(() => import("../components/new-message-bottom-sheet"), {
ssr: false,
loading: () => null,
});
export const bottomSheetOpenAtom = atom(false);
Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>; Messages.getLayout = (page) => <Layout title="Messages">{page}</Layout>;
Messages.authenticate = { redirectTo: Routes.SignIn().pathname }; Messages.authenticate = { redirectTo: Routes.SignIn().pathname };