optimistic ui for message sending and submit state

src/components/Conversations/Conversation.jsx

@@ -4,32 +4,29 @@ import DeleteButton from './DeleteButton';
 import { useSelector, useDispatch } from 'react-redux';
 import { setConversation } from '~/store/convoSlice';
 import { setMessages } from '~/store/messageSlice';
-import useSWRMutation from 'swr/mutation';
-
-const fetcher = (url) => fetch(url).then((res) => res.json());
+import manualSWR from '~/utils/fetchers';
 
 export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
   const dispatch = useDispatch();
   const conversationId = useSelector((state) => state.convo.conversationId);
-
-  const { trigger, isMutating } = useSWRMutation(
+  const { trigger, isMutating } = manualSWR(
     `http://localhost:3050/messages/${id}`,
-    fetcher,
-    {
-      onSuccess: function (res) {
-        dispatch(setMessages(res));
-      }
-    }
+    'get',
+    (res) => dispatch(setMessages(res))
   );
 
-  const onConvoClick = (id, parentMessageId) => {
+  const clickHandler = () => {
+    if (conversationId === id) {
+      return;
+    }
+
     dispatch(setConversation({ conversationId: id, parentMessageId }));
     trigger();
   };
 
   return (
     <a
-      onClick={() => onConvoClick(id, parentMessageId)}
+      onClick={() => clickHandler()}
       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
@@ -50,8 +47,8 @@ export default function Conversation({ id, parentMessageId, title = 'New convers
         {title}
       </div>
       <div className="visible absolute right-1 z-10 flex text-gray-300">
-        {id === conversationId && <RenameButton />}
-        {id === conversationId && <DeleteButton />}
+        {id === conversationId && <RenameButton conversationId={id} />}
+        {id === conversationId && <DeleteButton conversationId={id} />}
       </div>
     </a>
   );

src/components/Conversations/DeleteButton.jsx

@@ -1,37 +1,29 @@
 import React from 'react';
 import TrashIcon from '../svg/TrashIcon';
+import manualSWR from '~/utils/fetchers';
+import { useDispatch } from 'react-redux';
+import { setConversation } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
+
+export default function DeleteButton({ conversationId }) {
+  const dispatch = useDispatch();
+  const { trigger, isMutating } = manualSWR(
+    'http://localhost:3050/clear_convos',
+    'post',
+    () => {
+      dispatch(setMessages([]));
+      dispatch(setConversation({ conversationId: null, parentMessageId: null }));
+    }
+  );
+
+  const clickHandler = () => trigger({ conversationId });
 
-export default function DeleteButton({ onClick, disabled }) {
   return (
-    <button className="p-1 hover:text-white">
+    <button
+      className="p-1 hover:text-white"
+      onClick={clickHandler}
+    >
       <TrashIcon />
-      {/* <svg
-        stroke="currentColor"
-        fill="none"
-        strokeWidth="2"
-        viewBox="0 0 24 24"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="h-4 w-4"
-        height="1em"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline points="3 6 5 6 21 6" />
-        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-        <line
-          x1="10"
-          y1="11"
-          x2="10"
-          y2="17"
-        />
-        <line
-          x1="14"
-          y1="11"
-          x2="14"
-          y2="17"
-        />
-      </svg> */}
     </button>
   );
 }