clicking on convo to go to page with the url proper

packages/web/components/Conversations/ConversationFullRow.tsx

@@ -21,6 +21,8 @@ import { ConversationMemberState } from "../../../common/models/conversation";
 import { conversationService } from "@nirvana/common/services";
 import { useAuth } from "../../contexts/authContext";
 import toast from "react-hot-toast";
+import { useRouter } from "next/router";
+import { Routes } from "@nirvana/common/helpers/routes";
 
 export default function ConversationFullRow(props: {
   conversation: Conversation;
@@ -51,8 +53,18 @@ export default function ConversationFullRow(props: {
     }
   };
 
+  const router = useRouter();
+
+  const handleViewConversationDetails = (e) => {
+    router.push({
+      pathname: Routes.home,
+      query: { convoId: props.conversation.id },
+    });
+  };
+
   return (
     <span
+      onClick={handleViewConversationDetails}
       className="py-5 px-4 border-t border-t-slate-200 flex flex-row
        hover:bg-slate-50 transition-all items-center group relative"
     >

packages/web/components/Conversations/PriorityConvoRow.tsx

@@ -15,6 +15,8 @@ import {
 } from "react-icons/fa";
 import { useCallback } from "react";
 import { FaAngleRight } from "react-icons/fa";
+import { useRouter } from "next/router";
+import { Routes } from "@nirvana/common/helpers/routes";
 
 export default function PriorityConvoRow(props: {
   conversation: Conversation;
@@ -39,6 +41,17 @@ export default function PriorityConvoRow(props: {
     setSelectedConvo(props.conversation.id);
   }, [props.conversation]);
 
+  const router = useRouter();
+
+  const handleViewConversationDetails = (e) => {
+    e.stopPropagation();
+
+    router.push({
+      pathname: Routes.home,
+      query: { convoId: props.conversation.id },
+    });
+  };
+
   return (
     <span
       onClick={handleSelectConvo}
@@ -88,7 +101,10 @@ justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer text-xs"
             </span>
           </Tooltip>
           <Tooltip title={"View Details"}>
-            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+            <span
+              onClick={handleViewConversationDetails}
+              className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+            >
               <FaAngleRight className="ml-auto text-md text-slate-400" />
             </span>
           </Tooltip>