adding all logic for sending request and should work?

packages/desktop/src/controller/index.tsx

@@ -48,6 +48,20 @@ const getConversationDetails = async (
   return response.data;
 };
 
+const sendContactRequest = async (
+  idToken: string,
+  otherUserGoogleId: string
+) => {
+  const response = await axios.post(
+    localHost + `/contacts/${otherUserGoogleId}`,
+    {
+      headers: { Authorization: idToken },
+    }
+  );
+
+  return response.data;
+};
+
 // ====== QUERIES
 export enum Querytypes {
   GET_USER_DETAILS = "GET_USER_DETAILS",
@@ -74,7 +88,7 @@ export function useSearch() {
   return useQuery(
     Querytypes.GET_SEARCH_RESULTS,
     () => search(authTokens.idToken, searchQuery),
-    { enabled: searchQuery ? true : false }
+    { enabled: searchQuery ? true : false, refetchOnWindowFocus: false }
   );
 }
 
@@ -96,3 +110,19 @@ export function useCreateUser() {
     },
   });
 }
+
+export function useSendContactRequest() {
+  const authTokens = useRecoilValue($authTokens);
+
+  return useMutation(
+    (otherGoogleUserId: string) =>
+      sendContactRequest(authTokens.idToken, otherGoogleUserId),
+    {
+      onSettled: (data, error) => {
+        return queryClient.invalidateQueries(
+          Querytypes.GET_CONVERSATION_DETAILS + "/" + ""
+        );
+      },
+    }
+  );
+}

packages/desktop/src/pages/Home/selectedConversation/index.tsx

@@ -1,4 +1,8 @@
-import { useConversationDetails, useGetUserDetails } from "../../../controller";
+import {
+  useConversationDetails,
+  useGetUserDetails,
+  useSendContactRequest,
+} from "../../../controller";
 
 import { $selectedConversation } from "../../../controller/recoil";
 import { Dimensions } from "../../../electron/constants";
@@ -13,8 +17,9 @@ export default function SelectedConversation() {
     $selectedConversation
   );
   const { data: userDetailsData } = useGetUserDetails();
-  const { data: convoDetailsResponse, isLoading } =
+  const { data: convoDetailsResponse, isFetching } =
     useConversationDetails(selectedConvo);
+  const { mutate } = useSendContactRequest();
 
   useEffect(() => {
     // if selected, then change the bounds of this window as well
@@ -31,7 +36,7 @@ export default function SelectedConversation() {
     return <></>;
   }
 
-  if (isLoading) {
+  if (isFetching) {
     return <span className="text-slate-200">Loading conversation details</span>;
   }
 
@@ -41,6 +46,7 @@ export default function SelectedConversation() {
     const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
 
     // todo mutation to create a user
+    mutate(otherUserGoogleId);
   };
 
   const renderMainContent = () => {