refactor past meeting

www/app/[domain]/browse/page.tsx

@@ -100,6 +100,7 @@ export default function TranscriptBrowser() {
       api
         .v1TranscriptDelete(transcriptToDeleteId)
         .then(() => {
+          refetch();
           setDeletionLoading(false);
           refetch();
           onCloseDeletion();

www/app/[domain]/transcripts/[transcriptId]/finalSummary.tsx

@@ -1,25 +1,38 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import React from "react";
 import Markdown from "react-markdown";
-import "../../styles/markdown.css";
+import "../../../styles/markdown.css";
-import { featureEnabled } from "../domainContext";
+import { UpdateTranscript } from "../../../api";
-import { UpdateTranscript } from "../../api";
+import useApi from "../../../lib/useApi";
-import useApi from "../../lib/useApi";
+import useTranscript from "../useTranscript";
+import useTopics from "../useTopics";
+import { Box, Flex, IconButton, Modal, ModalContent } from "@chakra-ui/react";
+import { FaShare } from "react-icons/fa";
+import ShareTranscript from "../shareTranscript";
 
 type FinalSummaryProps = {
-  summary: string;
-  fullTranscript: string;
   transcriptId: string;
-  openZulipModal: () => void;
 };
 
 export default function FinalSummary(props: FinalSummaryProps) {
+  const transcript = useTranscript(props.transcriptId);
+  const topics = useTopics(props.transcriptId);
+
   const finalSummaryRef = useRef<HTMLParagraphElement>(null);
-  const [isCopiedSummary, setIsCopiedSummary] = useState(false);
+
-  const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
-  const [preEditSummary, setPreEditSummary] = useState(props.summary);
+  const [preEditSummary, setPreEditSummary] = useState("");
-  const [editedSummary, setEditedSummary] = useState(props.summary);
+  const [editedSummary, setEditedSummary] = useState("");
+
+  const [showShareModal, setShowShareModal] = useState(false);
+
+  useEffect(() => {
+    setEditedSummary(transcript.response?.long_summary || "");
+  }, [transcript.response?.long_summary]);
+
+  if (!topics.topics || !transcript.response) {
+    return null;
+  }
 
   const updateSummary = async (newSummary: string, transcriptId: string) => {
     try {
@@ -37,28 +50,6 @@ export default function FinalSummary(props: FinalSummaryProps) {
     }
   };
 
-  const onCopySummaryClick = () => {
-    let text_to_copy = finalSummaryRef.current?.innerText;
-
-    text_to_copy &&
-      navigator.clipboard.writeText(text_to_copy).then(() => {
-        setIsCopiedSummary(true);
-        // Reset the copied state after 2 seconds
-        setTimeout(() => setIsCopiedSummary(false), 2000);
-      });
-  };
-
-  const onCopyTranscriptClick = () => {
-    let text_to_copy = props.fullTranscript;
-
-    text_to_copy &&
-      navigator.clipboard.writeText(text_to_copy).then(() => {
-        setIsCopiedTranscript(true);
-        // Reset the copied state after 2 seconds
-        setTimeout(() => setIsCopiedTranscript(false), 2000);
-      });
-  };
-
   const onEditClick = () => {
     setPreEditSummary(editedSummary);
     setIsEditMode(true);
@@ -119,17 +110,6 @@ export default function FinalSummary(props: FinalSummaryProps) {
 
           {!isEditMode && (
             <>
-              {featureEnabled("sendToZulip") && (
-                <button
-                  className={
-                    "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
-                  }
-                  onClick={() => props.openZulipModal()}
-                >
-                  <span className="text-xs">➡️ Zulip</span>
-                </button>
-              )}
-
               <button
                 onClick={onEditClick}
                 className={
@@ -138,30 +118,26 @@ export default function FinalSummary(props: FinalSummaryProps) {
               >
                 <span className="text-xs">✏️ Summary</span>
               </button>
-              <button
+              <IconButton
-                onClick={onCopyTranscriptClick}
+                icon={<FaShare />}
-                className={
+                onClick={() => setShowShareModal(true)}
-                  (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
+                aria-label="Share"
-                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+              />
-                }
+              {showShareModal && (
-                style={{ minHeight: "30px" }}
+                <Modal
+                  isOpen={showShareModal}
+                  onClose={() => setShowShareModal(false)}
+                  size="xl"
                 >
-                <span className="text-xs">
+                  <ModalContent>
-                  {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
+                    <ShareTranscript
-                </span>
+                      finalSummaryRef={finalSummaryRef}
-              </button>
+                      transcriptResponse={transcript.response}
-              <button
+                      topicsResponse={topics.topics}
-                onClick={onCopySummaryClick}
+                    />
-                className={
+                  </ModalContent>
-                  (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
+                </Modal>
-                  " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+              )}
-                }
-                style={{ minHeight: "30px" }}
-              >
-                <span className="text-xs">
-                  {isCopiedSummary ? "Copied!" : "Copy Summary"}
-                </span>
-              </button>
             </>
           )}
         </div>
@@ -177,9 +153,9 @@ export default function FinalSummary(props: FinalSummaryProps) {
           />
         </div>
       ) : (
-        <p ref={finalSummaryRef} className="markdown">
+        <div ref={finalSummaryRef} className="markdown">
           <Markdown>{editedSummary}</Markdown>
-        </p>
+        </div>
       )}
     </div>
   );

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -8,7 +8,7 @@ import { TopicList } from "../topicList";
 import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState } from "react";
 import "../../../styles/button.css";
-import FinalSummary from "../finalSummary";
+import FinalSummary from "./finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
@@ -17,7 +17,16 @@ import Player from "../player";
 import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
 import { featureEnabled } from "../../domainContext";
-import { toShareMode } from "../../../lib/shareMode";
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  IconButton,
+  Text,
+} from "@chakra-ui/react";
+import { FaPen } from "react-icons/fa";
 
 type TranscriptDetails = {
   params: {
@@ -34,7 +43,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const waveform = useWaveform(transcriptId);
   const useActiveTopic = useState<Topic | null>(null);
   const mp3 = useMp3(transcriptId);
-  const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
     const statusToRedirect = ["idle", "recording", "processing"];
@@ -43,18 +51,11 @@ export default function TranscriptDetails(details: TranscriptDetails) {
       // Shallow redirection does not work on NextJS 13
       // https://github.com/vercel/next.js/discussions/48110
       // https://github.com/vercel/next.js/discussions/49540
-      router.push(newUrl, undefined);
+      router.replace(newUrl);
       // history.replaceState({}, "", newUrl);
     }
   }, [transcript.response?.status]);
 
-  const fullTranscript =
-    topics.topics
-      ?.map((topic) => topic.transcript)
-      .join("\n\n")
-      .replace(/ +/g, " ")
-      .trim() || "";
-
   if (transcript.error || topics?.error) {
     return (
       <Modal
@@ -69,22 +70,48 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   }
 
   return (
-    <div className="grid grid-rows-layout-topbar h-full max-h-full gap-2 lg:gap-4">
+    <>
-      {featureEnabled("sendToZulip") && (
+      <Grid templateColumns="1fr" templateRows="minmax(0, 1fr) auto">
-        <ShareModal
+        <Grid
-          transcript={transcript.response}
+          templateColumns="repeat(2, 1fr)"
-          topics={topics ? topics.topics : null}
+          templateRows="auto minmax(0, 1fr)"
-          show={showModal}
+          gap={4}
-          setShow={(v) => setShowModal(v)}
+          padding={4}
-        />
+          background="gray.100"
-      )}
+          borderRadius={2}
-      <div className="flex flex-col">
+        >
-        {transcript?.response?.title && (
+          <GridItem display="flex" flexDir="row" colSpan={2}>
             <TranscriptTitle
-            title={transcript.response.title}
+              title={transcript.response.title || "Unamed Transcript"}
-            transcriptId={transcript.response.id}
+              transcriptId={transcriptId}
             />
+            <IconButton icon={<FaPen />} aria-label="Edit Transcript Title" />
+          </GridItem>
+          <TopicList
+            topics={topics.topics || []}
+            useActiveTopic={useActiveTopic}
+            autoscroll={false}
+            transcriptId={transcriptId}
+          />
+          {transcript.response.long_summary ? (
+            <>
+              <FinalSummary transcriptId={transcript.response.id} />
+            </>
+          ) : (
+            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
+              <div className="flex flex-col h-full justify-center content-center">
+                {transcript.response.status == "processing" ? (
+                  <Text>Loading Transcript</Text>
+                ) : (
+                  <Text>
+                    There was an error generating the final summary, please come
+                    back later
+                  </Text>
                 )}
+              </div>
+            </Flex>
+          )}
+        </Grid>
         {waveform.waveform && mp3.media ? (
           <Player
             topics={topics?.topics || []}
@@ -98,56 +125,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         ) : (
           <WaveformLoading />
         )}
-      </div>
+      </Grid>
-      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-2 lg:gap-4 h-full">
+    </>
-        <TopicList
-          topics={topics.topics || []}
-          useActiveTopic={useActiveTopic}
-          autoscroll={false}
-          transcriptId={transcriptId}
-        />
-
-        <div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">
-          <section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
-            {transcript.response.long_summary ? (
-              <FinalSummary
-                fullTranscript={fullTranscript}
-                summary={transcript.response.long_summary}
-                transcriptId={transcript.response.id}
-                openZulipModal={() => setShowModal(true)}
-              />
-            ) : (
-              <div className="flex flex-col h-full justify-center content-center">
-                {transcript.response.status == "processing" ? (
-                  <p>Loading Transcript</p>
-                ) : (
-                  <p>
-                    There was an error generating the final summary, please come
-                    back later
-                  </p>
-                )}
-              </div>
-            )}
-          </section>
-
-          <section className="flex items-center">
-            <div className="mr-4 hidden md:block h-auto">
-              <QRCode
-                value={`${location.origin}/transcripts/${details.params.transcriptId}`}
-                level="L"
-                size={98}
-              />
-            </div>
-            <div className="flex-grow max-w-full">
-              <ShareLink
-                transcriptId={transcript.response.id}
-                userId={transcript.response.user_id}
-                shareMode={toShareMode(transcript.response.share_mode)}
-              />
-            </div>
-          </section>
-        </div>
-      </div>
-    </div>
   );
 }

www/app/[domain]/transcripts/shareLink.tsx

@@ -10,9 +10,10 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { UpdateTranscript } from "../../api";
 import { ShareMode, toShareMode } from "../../lib/shareMode";
 import useApi from "../../lib/useApi";
+
 type ShareLinkProps = {
   transcriptId: string;
-  userId: string | null;
+  transcriptUserId: string | null;
   shareMode: ShareMode;
 };
 
@@ -24,16 +25,16 @@ const ShareLink = (props: ShareLinkProps) => {
   const [isOwner, setIsOwner] = useState(false);
   const [shareMode, setShareMode] = useState<ShareMode>(props.shareMode);
   const [shareLoading, setShareLoading] = useState(false);
-  const userinfo = useFiefUserinfo();
   const api = useApi();
+  const userId = useFiefUserinfo()?.sub;
 
   useEffect(() => {
     setCurrentUrl(window.location.href);
   }, []);
 
   useEffect(() => {
-    setIsOwner(!!(requireLogin && userinfo?.sub === props.userId));
+    setIsOwner(!!(requireLogin && userId === props.transcriptUserId));
-  }, [userinfo, props.userId]);
+  }, [userId, props.transcriptUserId]);
 
   const handleCopyClick = () => {
     if (inputRef.current) {

www/app/[domain]/transcripts/shareTranscript.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { featureEnabled } from "../domainContext";
+import ShareModal from "./[transcriptId]/shareModal";
+import ShareLink from "./shareLink";
+import QRCode from "react-qr-code";
+import { toShareMode } from "../../lib/shareMode";
+import { GetTranscript, GetTranscriptTopic } from "../../api";
+
+type ShareTranscriptProps = {
+  finalSummaryRef: any;
+  transcriptResponse: GetTranscript;
+  topicsResponse: GetTranscriptTopic[];
+};
+
+export default function ShareTranscript(props: ShareTranscriptProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [isCopiedSummary, setIsCopiedSummary] = useState(false);
+  const [isCopiedTranscript, setIsCopiedTranscript] = useState(false);
+
+  const onCopySummaryClick = () => {
+    let text_to_copy = props.finalSummaryRef.current?.innerText;
+
+    text_to_copy &&
+      navigator.clipboard.writeText(text_to_copy).then(() => {
+        setIsCopiedSummary(true);
+        // Reset the copied state after 2 seconds
+        setTimeout(() => setIsCopiedSummary(false), 2000);
+      });
+  };
+
+  const onCopyTranscriptClick = () => {
+    let text_to_copy =
+      props.topicsResponse
+        ?.map((topic) => topic.transcript)
+        .join("\n\n")
+        .replace(/ +/g, " ")
+        .trim() || "";
+
+    text_to_copy &&
+      navigator.clipboard.writeText(text_to_copy).then(() => {
+        setIsCopiedTranscript(true);
+        // Reset the copied state after 2 seconds
+        setTimeout(() => setIsCopiedTranscript(false), 2000);
+      });
+  };
+
+  return (
+    <div>
+      <>
+        {featureEnabled("sendToZulip") && (
+          <button
+            className={
+              "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+            }
+            onClick={() => setShowModal(true)}
+          >
+            <span className="text-xs">➡️ Zulip</span>
+          </button>
+        )}
+
+        <button
+          onClick={onCopyTranscriptClick}
+          className={
+            (isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+          }
+          style={{ minHeight: "30px" }}
+        >
+          <span className="text-xs">
+            {isCopiedTranscript ? "Copied!" : "Copy Transcript"}
+          </span>
+        </button>
+        <button
+          onClick={onCopySummaryClick}
+          className={
+            (isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
+            " hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2 sm:text-base"
+          }
+          style={{ minHeight: "30px" }}
+        >
+          <span className="text-xs">
+            {isCopiedSummary ? "Copied!" : "Copy Summary"}
+          </span>
+        </button>
+        {featureEnabled("sendToZulip") && (
+          <ShareModal
+            transcript={props.transcriptResponse}
+            topics={props.topicsResponse}
+            show={showModal}
+            setShow={(v) => setShowModal(v)}
+          />
+        )}
+
+        <QRCode
+          value={`${location.origin}/transcripts/${props.transcriptResponse.id}`}
+          level="L"
+          size={98}
+        />
+
+        <ShareLink
+          transcriptId={props.transcriptResponse.id}
+          transcriptUserId={props.transcriptResponse.user_id}
+          shareMode={toShareMode(props.transcriptResponse.share_mode)}
+        />
+      </>
+    </div>
+  );
+}

www/app/[domain]/transcripts/useTranscriptList.ts

@@ -20,6 +20,7 @@ const useTranscriptList = (page: number): TranscriptList => {
   const [refetchCount, setRefetchCount] = useState(0);
 
   const refetch = () => {
+    setLoading(true);
     setRefetchCount(refetchCount + 1);
   };
 

www/app/lib/time.ts

@@ -1,3 +1,5 @@
+// TODO format duraction in be ?
+
 export const formatTime = (seconds: number): string => {
   let hours = Math.floor(seconds / 3600);
   let minutes = Math.floor((seconds % 3600) / 60);