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>

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -45,13 +45,6 @@ export default function Conversations() {
     RelativeTimeConvosSections.oldJunk
   );
 
-  const handleViewConversationDetails = (convoId) => {
-    router.push({
-      pathname: Routes.home,
-      query: { convoId },
-    });
-  };
-
   return (
     <>
       {/*  live */}
@@ -81,10 +74,7 @@ export default function Conversations() {
               Today
             </span>
           </span>
-          <span
-            onClick={() => handleViewConversationDetails("woah")}
-            className="flex flex-col w-full items-stretch"
-          >
+          <span className="flex flex-col w-full items-stretch">
             {todayConvos.map((tRoom) => (
               <ConversationFullRow key={tRoom.id} conversation={tRoom} />
             ))}
@@ -100,10 +90,7 @@ export default function Conversations() {
               Last 7 Days
             </span>
           </span>
-          <span
-            onClick={() => handleViewConversationDetails("woah")}
-            className="flex flex-col w-full items-stretch"
-          >
+          <span className="flex flex-col w-full items-stretch">
             {last7DaysConvos.map((tRoom) => (
               <ConversationFullRow key={tRoom.id} conversation={tRoom} />
             ))}
@@ -119,10 +106,7 @@ export default function Conversations() {
               Earlier This Month
             </span>
           </span>
-          <span
-            onClick={() => handleViewConversationDetails("woah")}
-            className="flex flex-col w-full items-stretch"
-          >
+          <span className="flex flex-col w-full items-stretch">
             {earlierMonthConvos.map((tRoom) => (
               <ConversationFullRow key={tRoom.id} conversation={tRoom} />
             ))}
@@ -138,10 +122,7 @@ export default function Conversations() {
               Older Junk
             </span>
           </span>
-          <span
-            onClick={() => handleViewConversationDetails("woah")}
-            className="flex flex-col w-full items-stretch"
-          >
+          <span className="flex flex-col w-full items-stretch">
             {oldJunkConvos.map((tRoom) => (
               <ConversationFullRow key={tRoom.id} conversation={tRoom} />
             ))}