add delete conversation mutation, fix withAuthentication on post requests

Author: danorlando

client/src/components/Conversations/Conversation.jsx

@@ -61,30 +61,20 @@ export default function Conversation({ conversation, retainView }) {
     if (titleInput === title) {
       return;
     }
-    updateConvoMutation.mutate({ arg: { conversationId, title: titleInput }});
-    
-    // rename.trigger({ conversationId, title: titleInput }).then(() => {
-    //   refreshConversations();
-    //   if (conversationId == currentConversation?.conversationId)
-    //     setCurrentConversation(prevState => ({
-    //       ...prevState,
-    //       title: titleInput
-    //     }));
-    // });
+    updateConvoMutation.mutate({ conversationId, title: titleInput });
   };
 
   useEffect(() => {   
-  if (updateConvoMutation.isSuccess) {
-    // debugger;
-    refreshConversations();
-    if (conversationId == currentConversation?.conversationId)
-
-      setCurrentConversation(prevState => ({
-        ...prevState,
-        title: titleInput
-      }));
-  }
-}, [updateConvoMutation.isSuccess]);
+    if (updateConvoMutation.isSuccess) {
+      refreshConversations();
+      if (conversationId == currentConversation?.conversationId) {
+        setCurrentConversation(prevState => ({
+          ...prevState,
+          title: titleInput
+        }));
+      }
+    }
+  }, [updateConvoMutation.isSuccess]);
 
   const handleKeyDown = e => {
     if (e.key === 'Enter') {

client/src/components/Conversations/DeleteButton.jsx

@@ -1,22 +1,32 @@
-import React from 'react';
+import { useEffect } from 'react';
 import TrashIcon from '../svg/TrashIcon';
 import CrossIcon from '../svg/CrossIcon';
-import manualSWR from '~/utils/fetchers';
 import { useRecoilValue } from 'recoil';
+import { useDeleteConversationMutation } from '~/data-provider';
 
 import store from '~/store';
 
 export default function DeleteButton({ conversationId, renaming, cancelHandler, retainView }) {
   const currentConversation = useRecoilValue(store.conversation) || {};
   const { newConversation } = store.useConversation();
   const { refreshConversations } = store.useConversations();
-  const { trigger } = manualSWR(`/api/convos/clear`, 'post', () => {
-    if (currentConversation?.conversationId == conversationId) newConversation();
-    refreshConversations();
-    retainView();
-  });
 
-  const clickHandler = () => trigger({ conversationId, source: 'button' });
+  const deleteConvoMutation = useDeleteConversationMutation(conversationId);
+
+  useEffect(() => {
+    if(deleteConvoMutation.isSuccess) {
+      if (currentConversation?.conversationId == conversationId) newConversation(); 
+      
+      refreshConversations();
+      retainView();
+    }
+  }, [deleteConvoMutation.isSuccess]);
+
+
+  const clickHandler = () => {
+    deleteConvoMutation.mutate({conversationId, source: 'button' });
+  };
+
   const handler = renaming ? cancelHandler : clickHandler;
 
   return (

client/src/data-provider/react-query-service.ts

@@ -8,7 +8,6 @@ import {
 } from "@tanstack/react-query";
 import * as t from "./types";
 import * as dataService from "./data-service";
-import store from '~/store';
 
 export enum QueryKeys {
   messages = "messsages",
@@ -74,16 +73,27 @@ export const useUpdateConversationMutation = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([QueryKeys.conversation, id]);
-        queryClient.invalidateQueries([QueryKeys.allConversations, id]);
+        queryClient.invalidateQueries([QueryKeys.allConversations]);
       },
     }
   );
 };
 
-// export const useDeleteConversationMutation = (
-//   id: string
-// ): UseMutationResult<
-
+export const useDeleteConversationMutation = (
+  id: string
+): UseMutationResult<t.TDeleteConversationResponse, unknown, t.TDeleteConversationRequest, unknown> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (payload: t.TDeleteConversationRequest) =>
+      dataService.deleteConversation(payload),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([QueryKeys.conversation, id]);
+        queryClient.invalidateQueries([QueryKeys.allConversations]);
+      },
+    }
+  );
+};
 
 export const useUpdateCustomGptMutation = (): UseMutationResult<
   t.TUpdateCustomGptResponse,

client/src/data-provider/request.ts

@@ -1,13 +1,13 @@
 import axios, { AxiosRequestConfig } from "axios";
 
 async function _get<T>(url: string, options?: AxiosRequestConfig): Promise<T> {
-  const response = await axios.get(url, { withCredentials: true, ...options});
+  const response = await axios.get(url, {...options});
   return response.data;
 }
 
-async function _post(url: string, data?: any) {
-  const response = await axios.post(url, JSON.stringify(data), {
-    withCredentials: true,
+async function _post(url: string, arg?: any) {
+  const modifiedData = {arg, withCredentials: true}
+  const response = await axios.post(url, modifiedData, {
     headers: { "Content-Type": "application/json" },
   });
   return response.data;
@@ -19,7 +19,6 @@ async function _postMultiPart(
   options?: AxiosRequestConfig
 ) {
   const response = await axios.post(url, formData, {
-    withCredentials: true,
     ...options,
     headers: { "Content-Type": "multipart/form-data" },
   });
@@ -28,28 +27,26 @@ async function _postMultiPart(
 
 async function _put(url: string, data?: any) {
   const response = await axios.put(url, JSON.stringify(data), {
-    withCredentials: true,
     headers: { "Content-Type": "application/json" },
   });
   return response.data;
 }
 
 async function _delete<T>(url: string): Promise<T> {
-  const response = await axios.delete(url, { withCredentials: true });
+  const response = await axios.delete(url);
   return response.data;
 }
 
 async function _deleteWithOptions<T>(
   url: string,
   options?: AxiosRequestConfig
 ): Promise<T> {
-  const response = await axios.delete(url, { withCredentials: true, ...options});
+  const response = await axios.delete(url, {...options});
   return response.data;
 }
 
 async function _patch(url: string, data?: any) {
   const response = await axios.patch(url, JSON.stringify(data), {
-    withCredentials: true,
     headers: { "Content-Type": "application/json" },
   });
   return response.data;

client/src/data-provider/types.ts

@@ -106,10 +106,6 @@ export type TGetMessagesResponse = {
   data: TMessage[]
 };
 
-export type TDeleteConversationRequest = {
-  conversationId: string
-};
-
 export type TAICompletionRequest = {
   chatGptLabel?: string,
   conversationId: string,
@@ -150,15 +146,31 @@ export type TConversationUpdate = {
   conversationId: string,
   title?: string
 };
+
 export type TUpdateConversationRequest = {
-  arg: {},
+  conversationId: string,
+  title: string,
   withCredentials?: boolean
 };
 
 export type TUpdateConversationResponse = {
   data: TConversation
 };
 
+export type TDeleteConversationRequest = {
+  conversationId: string,
+  source: string
+}
+
+export type TDeleteConversationResponse = {
+  acknowledged: boolean,
+  deletedCount: number,
+  messages: {
+    acknowledged: boolean,
+    deletedCount: number
+  }
+};
+
 export type TUpdateCustomGptRequest = {
   value: string,
   chatGptLabel: string,