convo selection handling in progress

server/index.js

@@ -25,6 +25,10 @@ app.get('/convos', async (req, res) => {
   res.status(200).send(await getConversations());
 });
 
+app.get('/messages', async (req, res) => {
+  res.status(200).send(await getConversations());
+});
+
 app.post('/ask', async (req, res) => {
   console.log(req.body);
   const { text, parentMessageId, conversationId } = req.body;

src/App.jsx

@@ -4,18 +4,32 @@ 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 axios from 'axios';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
 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);
-  console.log(data, isLoading);
+  const { trigger, isMutating } = useSWRMutation('http://localhost:3050/messages', fetcher, {
+    onSuccess: function (res) {
+      console.log('success', res);
+      // setMessages(res);
+    }
+  });
+
+  const onConvoClick = (conversationId, parentMessageId) => {
+    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}/>
+      <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"> */}
@@ -25,6 +39,8 @@ const App = () => {
           messages={messages}
           setMessages={setMessages}
           reloadConvos={mutate}
+          convo={convo}
+          setConvo={setConvo}
         />
         {/* </main> */}
       </div>

src/components/Conversations.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Conversation from './Conversation';
 
-export default function Conversations({ conversations }) {
+export default function Conversations({ conversations, convoHandler }) {
   return (
     <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
       <div className="flex flex-col gap-2 text-sm text-gray-100">
@@ -10,6 +10,7 @@ export default function Conversations({ conversations }) {
             <Conversation
               key={convo.conversationId}
               title={convo.title}
+              onClick={() => convoHandler(convo.conversationId)}
             />
           ))}
         {conversations && conversations.length >= 12 && (

src/components/Nav.jsx

@@ -3,14 +3,14 @@ import NewChat from './NewChat';
 import Conversations from './Conversations';
 import NavLinks from './NavLinks';
 
-export default function Nav({ conversations }) {
+export default function Nav({ conversations, convoHandler }) {
   return (
     <div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
       <div className="flex h-full min-h-0 flex-col ">
         <div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
           <nav className="flex h-full flex-1 flex-col space-y-1 p-2">
             <NewChat />
-            <Conversations conversations={conversations}/>
+            <Conversations conversations={conversations} convoHandler={convoHandler}/>
             <NavLinks />
           </nav>
         </div>

src/components/TextChat.jsx

@@ -43,14 +43,15 @@ export default function TextChat({
   messages,
   setMessages,
   reloadConvos,
-  conversation = null
+  convo,
+  setConvo,
 }) {
   const [text, setText] = useState('');
-  const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
+  // const [convo, setConvo] = useState({ conversationId: null, parentMessageId: null });
 
-  if (!!conversation) {
-    setConvo(conversation);
-  }
+  // if (!!conversation) {
+  //   setConvo(conversation);
+  // }
 
   const handleKeyPress = (e) => {
     if (e.key === 'Enter' && e.shiftKey) {