convo successfully changes on convo click

src/App.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Messages from './components/Messages';
 import TextChat from './components/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/MobileNav';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
+import useDidMountEffect from './hooks/useDidMountEffect.js';
 import axios from 'axios';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
@@ -13,23 +14,32 @@ const App = () => {
   const [messages, setMessages] = useState([]);
   const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
   const { data, error, isLoading, mutate } = useSWR('http://localhost:3050/convos', fetcher);
-  const { trigger, isMutating } = useSWRMutation('http://localhost:3050/messages', fetcher, {
-    onSuccess: function (res) {
-      console.log('success', res);
-      // setMessages(res);
+
+  const { trigger, isMutating } = useSWRMutation(
+    `http://localhost:3050/messages/${convo.conversationId}`,
+    fetcher,
+    {
+      onSuccess: function (res) {
+        console.log('success', res);
+        setMessages(res);
+      }
     }
-  });
+  );
+
+  useDidMountEffect(() => trigger(), [convo]);
 
   const onConvoClick = (conversationId, parentMessageId) => {
+    console.log('convo was clicked');
     setConvo({ conversationId, parentMessageId });
-    trigger();
-    // console.log(e, e.target);
   };
 
   return (
     <div className="flex h-screen">
       {/* <div className="w-80 bg-slate-800"></div> */}
-      <Nav conversations={data} convoHandler={onConvoClick}/>
+      <Nav
+        conversations={data}
+        convoHandler={onConvoClick}
+      />
       {/* <div className="flex h-full flex-1 flex-col md:pl-[260px]"> */}
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         {/* <main className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1"> */}

src/components/Conversation.jsx

@@ -1,8 +1,16 @@
 import React from 'react';
 
-export default function Conversation({ id, title = 'New conversation'}) {
+export default function Conversation({
+  id,
+  parentMessageId,
+  convoHandler,
+  title = 'New conversation'
+}) {
   return (
-    <a className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800">
+    <a
+      onClick={() => convoHandler(id, parentMessageId)}
+      className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800"
+    >
       <svg
         stroke="currentColor"
         fill="none"

src/components/Conversations.jsx

@@ -9,8 +9,10 @@ export default function Conversations({ conversations, convoHandler }) {
           conversations.map((convo, i) => (
             <Conversation
               key={convo.conversationId}
+              id={convo.conversationId}
+              parentMessageId={convo.parentMessageId}
               title={convo.title}
-              onClick={() => convoHandler(convo.conversationId)}
+              convoHandler={convoHandler}
             />
           ))}
         {conversations && conversations.length >= 12 && (

src/components/Message.jsx

@@ -1,11 +1,23 @@
 import React from 'react';
 
 export default function Message({ sender, text }) {
+  const props = {
+    className:
+      'group w-full border-b border-black/10 text-gray-800 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-100'
+  };
+
+  if (sender === 'GPT') {
+    props.className =
+      'group w-full border-b border-black/10 bg-gray-100 text-gray-800 dark:border-gray-900/50 dark:bg-[#444654] dark:text-gray-100';
+  }
+
   return (
-    <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-      <strong className="relative flex w-[30px] flex-col items-end">{sender}:</strong>
-      <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
-        {text}
+    <div {...props}>
+      <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
+        <strong className="relative flex w-[30px] flex-col items-end">{sender}:</strong>
+        <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 whitespace-pre-wrap md:gap-3 lg:w-[calc(100%-115px)]">
+          {text}
+        </div>
       </div>
     </div>
   );

src/hooks/useDidMountEffect.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+const useDidMountEffect = (func, deps) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) {
+      func();
+    } else {
+      didMount.current = true;
+    }
+
+    return func;
+  }, deps);
+};
+
+export default useDidMountEffect;