From 4ef844fe99dfb8361a46e606d12768150d89aaa3 Mon Sep 17 00:00:00 2001
From: Jose B <jose.zdy@gmail.com>
Date: Mon, 14 Aug 2023 18:23:24 -0500
Subject: [PATCH] use topic object instead timestamp

---
 www/app/components/dashboard.js | 8 +++-----
 www/app/components/record.js    | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/www/app/components/dashboard.js b/www/app/components/dashboard.js
index d7d5dde9..79e15efb 100644
--- a/www/app/components/dashboard.js
+++ b/www/app/components/dashboard.js
@@ -78,9 +78,7 @@ export function Dashboard({
               <div
                 className="flex justify-between items-center cursor-pointer px-4"
                 onClick={() =>
-                  setActiveTopic(
-                    activeTopic == item.timestamp ? null : item.timestamp,
-                  )
+                  setActiveTopic(activeTopic?.id == item.id ? null : item)
                 }
               >
                 <div className="w-1/4">{formatTime(item.timestamp)}</div>
@@ -89,14 +87,14 @@ export function Dashboard({
                   <FontAwesomeIcon
                     className={`transform transition-transform duration-200`}
                     icon={
-                      activeTopic == item.timestamp
+                      activeTopic?.id == item.id
                         ? faChevronDown
                         : faChevronRight
                     }
                   />
                 </div>
               </div>
-              {activeTopic == item.timestamp && (
+              {activeTopic?.id == item.id && (
                 <div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
                   {item.transcript}
                 </div>
diff --git a/www/app/components/record.js b/www/app/components/record.js
index 3b178125..c77d3838 100644
--- a/www/app/components/record.js
+++ b/www/app/components/record.js
@@ -138,7 +138,7 @@ export default function Recorder(props) {
           });
           region.on("click", (e) => {
             e.stopPropagation();
-            setActiveTopic(region.start);
+            setActiveTopic(topic);
             wavesurfer.setTime(region.start);
           });
         }
@@ -164,7 +164,7 @@ export default function Recorder(props) {
 
   useEffect(() => {
     if (activeTopic) {
-      wavesurfer.setTime(activeTopic);
+      wavesurfer.setTime(activeTopic.timestamp);
     }
   }, [activeTopic]);