From 210d819f97e09e21f6920b6a1ec82d5dde5797ff Mon Sep 17 00:00:00 2001
From: Elise Alix <elise@xmtp.com>
Date: Sun, 30 Oct 2022 16:50:53 -0400
Subject: [PATCH] fix: message list shouldn't get stuck loading (#1009)

---
 data/feature-flags.ts                             |  1 +
 src/components/Messages/Composer.tsx              |  6 ++++--
 src/components/Messages/Message.tsx               |  6 +++++-
 src/components/Messages/MessagesList.tsx          |  2 +-
 src/components/utils/hooks/useGetConversation.tsx | 15 ++++++---------
 src/store/message.ts                              |  8 ++++++++
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/data/feature-flags.ts b/data/feature-flags.ts
index b1e8fc4807d8..1d11030cceb4 100644
--- a/data/feature-flags.ts
+++ b/data/feature-flags.ts
@@ -28,6 +28,7 @@ export const featureFlags = [
       '0x016b24', // bhavyam.lens
       '0x016b0b', // xmtplabs.lens
       '0xf5ff', // anoopr.lens
+      '0x016b2e', // kenziestokes.lens
       '0x0122d4' // darick.lens
     ]
   },
diff --git a/src/components/Messages/Composer.tsx b/src/components/Messages/Composer.tsx
index e7cdc4d0cd9d..3b2bb960eb2a 100644
--- a/src/components/Messages/Composer.tsx
+++ b/src/components/Messages/Composer.tsx
@@ -9,13 +9,14 @@ import toast from 'react-hot-toast';
 interface Props {
   sendMessage: (message: string) => Promise<boolean>;
   conversationKey: string;
+  disabledInput: boolean;
 }
 
-const Composer: FC<Props> = ({ sendMessage, conversationKey }) => {
+const Composer: FC<Props> = ({ sendMessage, conversationKey, disabledInput }) => {
   const [message, setMessage] = useState<string>('');
   const [sending, setSending] = useState<boolean>(false);
 
-  const canSendMessage = !sending && message.length > 0;
+  const canSendMessage = !disabledInput && !sending && message.length > 0;
 
   const handleSend = async () => {
     if (!canSendMessage) {
@@ -47,6 +48,7 @@ const Composer: FC<Props> = ({ sendMessage, conversationKey }) => {
         type="text"
         placeholder="Type Something"
         value={message}
+        disabled={disabledInput}
         onKeyDown={handleKeyDown}
         onChange={(event) => setMessage(event.target.value)}
       />
diff --git a/src/components/Messages/Message.tsx b/src/components/Messages/Message.tsx
index f3f483f88f94..7933b0c3d624 100644
--- a/src/components/Messages/Message.tsx
+++ b/src/components/Messages/Message.tsx
@@ -76,7 +76,11 @@ const Message: FC<MessageProps> = ({ conversationKey }) => {
                 hasMore={hasMore}
                 missingXmtpAuth={missingXmtpAuth ?? false}
               />
-              <Composer sendMessage={sendMessage} conversationKey={conversationKey} />
+              <Composer
+                sendMessage={sendMessage}
+                conversationKey={conversationKey}
+                disabledInput={missingXmtpAuth ?? false}
+              />
             </>
           )}
         </Card>
diff --git a/src/components/Messages/MessagesList.tsx b/src/components/Messages/MessagesList.tsx
index 1b8028bcbb66..729df0dd351a 100644
--- a/src/components/Messages/MessagesList.tsx
+++ b/src/components/Messages/MessagesList.tsx
@@ -85,7 +85,7 @@ const DateDivider: FC<{ date?: Date }> = ({ date }) => (
 );
 
 const MissingXmtpAuth: FC = () => (
-  <Card as="aside" className="mb-4 border-gray-400 !bg-gray-300 !bg-opacity-20 space-y-2.5 p-5">
+  <Card as="aside" className="mb-2 mr-4 border-gray-400 !bg-gray-300 !bg-opacity-20 space-y-2.5 p-5">
     <div className="flex items-center space-x-2 font-bold">
       <EmojiSadIcon className="w-5 h-5" />
       <p>This fren hasn't enabled DMs yet</p>
diff --git a/src/components/utils/hooks/useGetConversation.tsx b/src/components/utils/hooks/useGetConversation.tsx
index 01fbc8b249de..b5c720231939 100644
--- a/src/components/utils/hooks/useGetConversation.tsx
+++ b/src/components/utils/hooks/useGetConversation.tsx
@@ -8,13 +8,12 @@ import { useMessageStore } from 'src/store/message';
 
 const useGetConversation = (conversationKey: string, profile?: Profile) => {
   const client = useMessageStore((state) => state.client);
-  const conversations = useMessageStore((state) => state.conversations);
-  const setConversations = useMessageStore((state) => state.setConversations);
+  const selectedConversation = useMessageStore((state) => state.conversations.get(conversationKey));
+  const addConversation = useMessageStore((state) => state.addConversation);
   const currentProfile = useAppStore((state) => state.currentProfile);
   const [missingXmtpAuth, setMissingXmtpAuth] = useState<boolean>();
 
   const reset = () => {
-    setConversations(new Map());
     setMissingXmtpAuth(false);
   };
 
@@ -22,8 +21,7 @@ const useGetConversation = (conversationKey: string, profile?: Profile) => {
     if (!profile || !client) {
       return;
     }
-    const conversation = conversations.get(conversationKey);
-    if (conversation) {
+    if (selectedConversation) {
       setMissingXmtpAuth(false);
       return;
     }
@@ -39,12 +37,11 @@ const useGetConversation = (conversationKey: string, profile?: Profile) => {
         conversationId: conversationId,
         metadata: {}
       });
-      conversations.set(conversationKey, conversation);
-      setConversations(new Map(conversations));
+      addConversation(conversationKey, conversation);
     };
     createNewConversation();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profile]);
+  }, [profile, selectedConversation]);
 
   useEffect(() => {
     if (!currentProfile) {
@@ -54,7 +51,7 @@ const useGetConversation = (conversationKey: string, profile?: Profile) => {
   }, [currentProfile]);
 
   return {
-    selectedConversation: conversations.get(conversationKey),
+    selectedConversation,
     missingXmtpAuth
   };
 };
diff --git a/src/store/message.ts b/src/store/message.ts
index d866d1c7a2c3..4674c886e75c 100644
--- a/src/store/message.ts
+++ b/src/store/message.ts
@@ -8,6 +8,7 @@ interface MessageState {
   setClient: (client: Client | undefined) => void;
   conversations: Map<string, Conversation>;
   setConversations: (conversations: Map<string, Conversation>) => void;
+  addConversation: (key: string, newConversation: Conversation) => void;
   messages: Map<string, DecodedMessage[]>;
   setMessages: (messages: Map<string, DecodedMessage[]>) => void;
   addMessages: (key: string, newMessages: DecodedMessage[]) => number;
@@ -26,6 +27,13 @@ export const useMessageStore = create<MessageState>((set) => ({
   setClient: (client) => set(() => ({ client })),
   conversations: new Map(),
   setConversations: (conversations) => set(() => ({ conversations })),
+  addConversation: (key: string, newConverstaion: Conversation) => {
+    set((state) => {
+      const conversations = new Map(state.conversations);
+      conversations.set(key, newConverstaion);
+      return { conversations };
+    });
+  },
   messages: new Map(),
   setMessages: (messages) => set(() => ({ messages })),
   addMessages: (key: string, newMessages: DecodedMessage[]) => {