debugging convo state, useSWR now within convos component

src/App.jsx

@@ -4,26 +4,20 @@ import Messages from './components/main/Messages';
 import TextChat from './components/main/TextChat';
 import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
-import { swr } from './utils/fetchers';
-import useDidMountEffect from './hooks/useDidMountEffect';
 
 const App = () => {
   const { messages } = useSelector((state) => state.messages);
-  const { conversationId } = useSelector((state) => state.convo);
   const { title } = useSelector((state) => state.convo);
-  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
-  useDidMountEffect(() => mutate(), [conversationId]);
 
   return (
     <div className="flex h-screen">
-      <Nav conversations={data} />
+      <Nav />
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
         <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden dark:bg-gray-800">
           <MobileNav />
           <Messages messages={messages} title={title}/>
           <TextChat
             messages={messages}
-            reloadConvos={mutate}
           />
         </div>
       </div>

src/components/Conversations/index.jsx

@@ -1,10 +1,16 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import Conversation from './Conversation';
+import { swr } from '~/utils/fetchers';
+import useDidMountEffect from '~/hooks/useDidMountEffect';
 
-export default function Conversations({ conversations }) {
+export default function Conversations() {
+  const { data, error, isLoading, mutate } = swr('http://localhost:3050/convos');
+  const conversations = data;
   const [isHovering, setIsHovering] = useState(false);
   const { conversationId } = useSelector((state) => state.convo);
+
+  useDidMountEffect(() => mutate(), [conversationId]);
   // const currentRef = useRef(null);
 
   // const scrollToTop = () => {

src/components/Nav/index.jsx

@@ -3,14 +3,14 @@ import NewChat from './NewChat';
 import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
 
-export default function Nav({ conversations, conversationId }) {
+export default function Nav() {
   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 />
             <NavLinks />
           </nav>
         </div>

src/components/main/TextChat.jsx

@@ -38,12 +38,14 @@ export default function TextChat({ messages, reloadConvos }) {
     const convoHandler = (data) => {
       console.log('in convo handler');
       if (convo.conversationId === null && convo.parentMessageId === null) {
-        const { title, conversationId, parentMessageId } = data;
+        const { title, conversationId, id } = data;
         console.log('convo is null');
-        dispatch(setConversation({ title, conversationId, parentMessageId: data.id }));
+        console.log('title, convoId, id', title, conversationId, id);
+        dispatch(setConversation({ title, conversationId, parentMessageId: id }));
+        console.log('convo after dispatch', convo);
       }
 
-      reloadConvos();
+      // reloadConvos();
       dispatch(setSubmitState(false));
     };
 
@@ -111,7 +113,7 @@ export default function TextChat({ messages, reloadConvos }) {
               errorMessage={errorMessage}
             />
           ) : (
-            <div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-md dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-lg md:py-3 md:pl-4">
+            <div className="relative flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-gray-700 dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4">
               <TextareaAutosize
                 tabIndex="0"
                 // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}

src/style.css

@@ -392,3 +392,199 @@ body,html {
 .text-ellipsis,.truncate {
   text-overflow: ellipsis
 }
+
+.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\],
+.shadow-lg {
+ box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);
+ box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
+}
+
+.group:hover .group-hover\:visible {
+  visibility:visible
+ }
+ .group:hover .group-hover\:from-\[\#2A2B32\] {
+  --tw-gradient-from:#2a2b32;
+  --tw-gradient-to:rgba(42,43,50,0);
+  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
+ }
+ .group:hover .group-hover\:text-gray-500 {
+  --tw-text-opacity:1;
+  color:rgba(142,142,160,var(--tw-text-opacity))
+ }
+ .group:hover .group-hover\:text-gray-700 {
+  --tw-text-opacity:1;
+  color:rgba(64,65,79,var(--tw-text-opacity))
+ }
+ .dark .dark\:prose-invert {
+  --tw-prose-body:var(--tw-prose-invert-body);
+  --tw-prose-headings:var(--tw-prose-invert-headings);
+  --tw-prose-lead:var(--tw-prose-invert-lead);
+  --tw-prose-links:var(--tw-prose-invert-links);
+  --tw-prose-bold:var(--tw-prose-invert-bold);
+  --tw-prose-counters:var(--tw-prose-invert-counters);
+  --tw-prose-bullets:var(--tw-prose-invert-bullets);
+  --tw-prose-hr:var(--tw-prose-invert-hr);
+  --tw-prose-quotes:var(--tw-prose-invert-quotes);
+  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
+  --tw-prose-captions:var(--tw-prose-invert-captions);
+  --tw-prose-code:var(--tw-prose-invert-code);
+  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
+  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
+  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
+  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
+ }
+ .dark .dark\:border-gray-600 {
+  --tw-border-opacity:1;
+  border-color:rgba(86,88,105,var(--tw-border-opacity))
+ }
+ .dark .dark\:border-gray-900\/50 {
+  border-color:rgba(32,33,35,.5)
+ }
+ .dark .dark\:border-gray-700 {
+  --tw-border-opacity:1;
+  border-color:rgba(64,65,79,var(--tw-border-opacity))
+ }
+ .dark .dark\:border-white\/20 {
+  border-color:hsla(0,0%,100%,.2)
+ }
+ .dark .dark\:border-white\/10 {
+  border-color:hsla(0,0%,100%,.1)
+ }
+ .dark .dark\:border-black\/20 {
+  border-color:rgba(0,0,0,.2)
+ }
+ .dark .dark\:bg-gray-800 {
+  --tw-bg-opacity:1;
+  background-color:rgba(52,53,65,var(--tw-bg-opacity))
+ }
+ .dark .dark\:bg-\[\#444654\] {
+  --tw-bg-opacity:1;
+  background-color:rgba(68,70,84,var(--tw-bg-opacity))
+ }
+ .dark .dark\:bg-gray-700 {
+  --tw-bg-opacity:1;
+  background-color:rgba(64,65,79,var(--tw-bg-opacity))
+ }
+ .dark .dark\:bg-gray-800\/90 {
+  background-color:rgba(52,53,65,.9)
+ }
+ .dark .dark\:bg-gray-900 {
+  --tw-bg-opacity:1;
+  background-color:rgba(32,33,35,var(--tw-bg-opacity))
+ }
+ .dark .dark\:bg-transparent {
+  background-color:transparent
+ }
+ .dark .dark\:bg-white\/10 {
+  background-color:hsla(0,0%,100%,.1)
+ }
+ .dark .dark\:bg-white\/5 {
+  background-color:hsla(0,0%,100%,.05)
+ }
+ .dark .dark\:bg-gray-500 {
+  --tw-bg-opacity:1;
+  background-color:rgba(142,142,160,var(--tw-bg-opacity))
+ }
+ .dark .dark\:bg-green-700 {
+  --tw-bg-opacity:1;
+  background-color:rgba(26,127,100,var(--tw-bg-opacity))
+ }
+ .dark .dark\:text-gray-100 {
+  --tw-text-opacity:1;
+  color:rgba(236,236,241,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-gray-200 {
+  --tw-text-opacity:1;
+  color:rgba(217,217,227,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-gray-400 {
+  --tw-text-opacity:1;
+  color:rgba(172,172,190,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-white {
+  --tw-text-opacity:1;
+  color:rgba(255,255,255,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-white\/50 {
+  color:hsla(0,0%,100%,.5)
+ }
+ .dark .dark\:text-gray-600 {
+  --tw-text-opacity:1;
+  color:rgba(86,88,105,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-gray-500 {
+  --tw-text-opacity:1;
+  color:rgba(142,142,160,var(--tw-text-opacity))
+ }
+ .dark .dark\:text-gray-300 {
+  --tw-text-opacity:1;
+  color:rgba(197,197,210,var(--tw-text-opacity))
+ }
+ .dark .dark\:opacity-100 {
+  opacity:1
+ }
+ .dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
+  --tw-shadow:0 0 15px rgba(0,0,0,.1);
+  --tw-shadow-colored:0 0 15px var(--tw-shadow-color);
+  box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);
+  box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)
+ }
+ .dark .dark\:ring-gray-600 {
+  --tw-ring-opacity:1;
+  --tw-ring-color:rgba(86,88,105,var(--tw-ring-opacity))
+ }
+ .dark .dark\:ring-white\/20 {
+  --tw-ring-color:hsla(0,0%,100%,.2)
+ }
+ .dark .dark\:last\:border-0:last-child {
+  border-width:0
+ }
+ .dark .dark\:hover\:bg-black\/10:hover {
+  background-color:rgba(0,0,0,.1)
+ }
+ .dark .dark\:hover\:bg-gray-700:hover {
+  --tw-bg-opacity:1;
+  background-color:rgba(64,65,79,var(--tw-bg-opacity))
+ }
+ .dark .dark\:hover\:bg-gray-900:hover {
+  --tw-bg-opacity:1;
+  background-color:rgba(32,33,35,var(--tw-bg-opacity))
+ }
+ .dark .dark\:hover\:bg-gray-100:hover {
+  --tw-bg-opacity:1;
+  background-color:rgba(236,236,241,var(--tw-bg-opacity))
+ }
+ .dark .dark\:hover\:bg-gray-500\/10:hover {
+  background-color:hsla(240,9%,59%,.1)
+ }
+ .dark .dark\:hover\:text-gray-200:hover {
+  --tw-text-opacity:1;
+  color:rgba(217,217,227,var(--tw-text-opacity))
+ }
+ .dark .dark\:hover\:text-white:hover {
+  --tw-text-opacity:1;
+  color:rgba(255,255,255,var(--tw-text-opacity))
+ }
+ .dark .dark\:hover\:text-gray-400:hover {
+  --tw-text-opacity:1;
+  color:rgba(172,172,190,var(--tw-text-opacity))
+ }
+ .dark .dark\:focus\:border-white:focus {
+  --tw-border-opacity:1;
+  border-color:rgba(255,255,255,var(--tw-border-opacity))
+ }
+ .dark .dark\:focus\:ring-white:focus {
+  --tw-ring-opacity:1;
+  --tw-ring-color:rgba(255,255,255,var(--tw-ring-opacity))
+ }
+ .dark .dark\:disabled\:text-gray-400:disabled {
+  --tw-text-opacity:1;
+  color:rgba(172,172,190,var(--tw-text-opacity))
+ }
+ .dark .dark\:disabled\:hover\:bg-transparent:hover:disabled {
+  background-color:transparent
+ }
+ .dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
+  --tw-text-opacity:1;
+  color:rgba(172,172,190,var(--tw-text-opacity))
+ }