From a5360944d4ece1c274d522a6739d3d0d1113d84e Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Wed, 20 Dec 2023 11:48:46 +0100
Subject: [PATCH] save current topic and small styling

---
 .../[transcriptId]/correct/page.tsx           |  2 +-
 .../[transcriptId]/correct/topicHeader.tsx    | 20 ++++++++++++++++++-
 .../[transcriptId]/correct/topicWords.tsx     | 15 +++++++-------
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx
index 4695a431..a0e55c30 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx
@@ -51,7 +51,7 @@ export default function TranscriptCorrect({
 
   return (
     <div className="h-full grid grid-cols-2 gap-4">
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full ">
         <TopicHeader
           stateCurrentTopic={stateCurrentTopic}
           transcriptId={transcriptId}
diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx
index f9df3eaf..2307f0dd 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx
@@ -23,9 +23,20 @@ export default function TopicHeader({
 
   useEffect(() => {
     if (!topics.loading && !currentTopic) {
-      setCurrentTopic(topics?.topics?.at(0));
+      const sessionTopic = window.localStorage.getItem(
+        transcriptId + "correct",
+      );
+      console.log(sessionTopic, window.localStorage);
+      if (sessionTopic && topics?.topics?.find((t) => t.id == sessionTopic)) {
+        setCurrentTopic(topics?.topics?.find((t) => t.id == sessionTopic));
+        console.log("he", sessionTopic, !!sessionTopic);
+      } else {
+        setCurrentTopic(topics?.topics?.at(0));
+        console.log("hi");
+      }
     }
   }, [topics.loading]);
+  // console.log(currentTopic)
 
   const number = topics.topics?.findIndex(
     (topic) => topic.id == currentTopic?.id,
@@ -43,6 +54,13 @@ export default function TopicHeader({
     canGoNext && setCurrentTopic(topics.topics?.at(number + 1));
   };
 
+  useEffect(() => {
+    console.log(currentTopic?.id);
+
+    currentTopic?.id &&
+      window.localStorage.setItem(transcriptId + "correct", currentTopic?.id);
+  }, [currentTopic?.id]);
+
   const keyHandler = (e) => {
     if (e.key == "ArrowLeft") {
       onPrev();
diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx
index 0c420463..2cd5a483 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx
@@ -150,17 +150,18 @@ const topicWords = ({
     participants.response
   ) {
     return (
-      <div onMouseUp={onMouseUp} className="p-5 h-full w-full">
+      <div onMouseUp={onMouseUp} className="p-5 h-full w-full overflow-scroll">
         {topicWithWords.response.wordsPerSpeaker.map(
           (speakerWithWords, index) => (
-            <p key={index}>
+            <p key={index} className="mb-2 last:mb-0">
               <span
                 data-speaker={speakerWithWords.speaker}
-                className={
-                  selectedText == speakerWithWords.speaker
-                    ? "bg-yellow-200"
-                    : ""
-                }
+                className={`
+                  font-semibold ${
+                    selectedText == speakerWithWords.speaker
+                      ? "bg-yellow-200"
+                      : ""
+                  }`}
               >
                 {getSpeakerName(speakerWithWords.speaker)}&nbsp;:&nbsp;
               </span>