From 47c746982805fa72af15442dc191775ffd2a66af Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sat, 25 Sep 2021 07:34:48 +0800
Subject: [PATCH] empty state for messages

---
 .../components/conversations-list.tsx         |  4 +-
 app/messages/components/empty-messages.tsx    | 43 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/messages/components/empty-messages.tsx

diff --git a/app/messages/components/conversations-list.tsx b/app/messages/components/conversations-list.tsx
index 82757a8..340ec7f 100644
--- a/app/messages/components/conversations-list.tsx
+++ b/app/messages/components/conversations-list.tsx
@@ -5,6 +5,7 @@ import getConversationsQuery from "../queries/get-conversations";
 import { formatRelativeDate } from "../../core/helpers/date-formatter";
 import { useEffect } from "react";
 import PhoneInitLoader from "../../core/components/phone-init-loader";
+import EmptyMessages from "./empty-messages";
 
 export default function ConversationsList() {
 	const [conversations, query] = useQuery(getConversationsQuery, {});
@@ -17,11 +18,12 @@ export default function ConversationsList() {
 	}, [conversations, query]);
 
 	if (!conversations) {
+		// we're still importing messages from twilio
 		return <PhoneInitLoader />;
 	}
 
 	if (Object.keys(conversations).length === 0) {
-		return <div>empty state</div>;
+		return <EmptyMessages />;
 	}
 
 	return (
diff --git a/app/messages/components/empty-messages.tsx b/app/messages/components/empty-messages.tsx
new file mode 100644
index 0000000..d027f8f
--- /dev/null
+++ b/app/messages/components/empty-messages.tsx
@@ -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>
+	);
+}