fix: message list shouldn't get stuck loading (#1009)

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
     ]
   },

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)}
       />

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>

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>

src/components/utils/hooks/useGetConversation.tsx

@@ -8,22 +8,20 @@ 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);
   };
 
   useEffect(() => {
     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
   };
 };

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[]) => {