empty state for messages
This commit is contained in:
parent
9dea1ed499
commit
47c7469828
@ -5,6 +5,7 @@ import getConversationsQuery from "../queries/get-conversations";
|
|||||||
import { formatRelativeDate } from "../../core/helpers/date-formatter";
|
import { formatRelativeDate } from "../../core/helpers/date-formatter";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import PhoneInitLoader from "../../core/components/phone-init-loader";
|
import PhoneInitLoader from "../../core/components/phone-init-loader";
|
||||||
|
import EmptyMessages from "./empty-messages";
|
||||||
|
|
||||||
export default function ConversationsList() {
|
export default function ConversationsList() {
|
||||||
const [conversations, query] = useQuery(getConversationsQuery, {});
|
const [conversations, query] = useQuery(getConversationsQuery, {});
|
||||||
@ -17,11 +18,12 @@ export default function ConversationsList() {
|
|||||||
}, [conversations, query]);
|
}, [conversations, query]);
|
||||||
|
|
||||||
if (!conversations) {
|
if (!conversations) {
|
||||||
|
// we're still importing messages from twilio
|
||||||
return <PhoneInitLoader />;
|
return <PhoneInitLoader />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (Object.keys(conversations).length === 0) {
|
if (Object.keys(conversations).length === 0) {
|
||||||
return <div>empty state</div>;
|
return <EmptyMessages />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
43
app/messages/components/empty-messages.tsx
Normal file
43
app/messages/components/empty-messages.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { HiPlus } from "react-icons/hi";
|
||||||
|
import { useAtom } from "jotai";
|
||||||
|
import { bottomSheetOpenAtom } from "../pages/messages";
|
||||||
|
|
||||||
|
export default function EmptyMessages() {
|
||||||
|
const setIsBottomSheetOpen = useAtom(bottomSheetOpenAtom)[1];
|
||||||
|
const openNewMessageArea = () => setIsBottomSheetOpen(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="text-center my-auto">
|
||||||
|
<svg
|
||||||
|
className="mx-auto h-12 w-12 text-gray-400"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 48 48"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M34 40h10v-4a6 6 0 00-10.712-3.714M34 40H14m20 0v-4a9.971 9.971 0 00-.712-3.714M14 40H4v-4a6 6 0 0110.713-3.714M14 40v-4c0-1.313.253-2.566.713-3.714m0 0A10.003 10.003 0 0124 26c4.21 0 7.813 2.602 9.288 6.286M30 14a6 6 0 11-12 0 6 6 0 0112 0zm12 6a4 4 0 11-8 0 4 4 0 018 0zm-28 0a4 4 0 11-8 0 4 4 0 018 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No messages</h3>
|
||||||
|
<p className="mt-1 text-sm text-gray-500">
|
||||||
|
Get started by sending a message
|
||||||
|
<br />
|
||||||
|
to someone you know.
|
||||||
|
</p>
|
||||||
|
<div className="mt-6">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#007AFF] focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||||
|
onClick={openNewMessageArea}
|
||||||
|
>
|
||||||
|
<HiPlus className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
|
||||||
|
New Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user