Final touches and testing

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

@@ -92,7 +92,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             <Player
               topics={topics?.topics || []}
               useActiveTopic={useActiveTopic}
-              waveform={waveform.waveform.data}
+              waveform={waveform.waveform}
               media={mp3.media}
               mediaDuration={transcript.response.duration}
             />

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

@@ -14,7 +14,7 @@ type PlayerProps = {
     Topic | null,
     React.Dispatch<React.SetStateAction<Topic | null>>,
   ];
-  waveform: AudioWaveform["data"];
+  waveform: AudioWaveform;
   media: HTMLMediaElement;
   mediaDuration: number;
 };

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

@@ -7,7 +7,7 @@ import "../../styles/button.css";
 import "../../styles/form.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { DefaultService, UpdateTranscript } from "../../api";
+import { UpdateTranscript } from "../../api";
 import { ShareMode, toShareMode } from "../../lib/shareMode";
 import useApi from "../../lib/useApi";
 type ShareLinkProps = {
@@ -18,7 +18,6 @@ type ShareLinkProps = {
 
 const ShareLink = (props: ShareLinkProps) => {
   const [isCopied, setIsCopied] = useState(false);
-  const [api, setApi] = useState<DefaultService | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [currentUrl, setCurrentUrl] = useState<string>("");
   const requireLogin = featureEnabled("requireLogin");
@@ -26,11 +25,10 @@ const ShareLink = (props: ShareLinkProps) => {
   const [shareMode, setShareMode] = useState<ShareMode>(props.shareMode);
   const [shareLoading, setShareLoading] = useState(false);
   const userinfo = useFiefUserinfo();
+  const api = useApi();
 
   useEffect(() => {
     setCurrentUrl(window.location.href);
-    const api = useApi();
-    setApi(api);
   }, []);
 
   useEffect(() => {
@@ -51,14 +49,13 @@ const ShareLink = (props: ShareLinkProps) => {
   };
 
   const updateShareMode = async (selectedShareMode: string) => {
+    if (!api)
+      throw new Error("ShareLink's API should always be ready at this point");
+
     setShareLoading(true);
     const requestBody: UpdateTranscript = {
       share_mode: toShareMode(selectedShareMode),
     };
-    const api = useApi();
-
-    if (!api)
-      throw new Error("ShareLink's API should always be ready at this point");
 
     const updatedTranscript = await api.v1TranscriptUpdate(
       props.transcriptId,
@@ -68,7 +65,6 @@ const ShareLink = (props: ShareLinkProps) => {
     setShareLoading(false);
   };
   const privacyEnabled = featureEnabled("privacy");
-  const apiReady = api != null;
 
   return (
     <div
@@ -89,8 +85,8 @@ const ShareLink = (props: ShareLinkProps) => {
             <p>This transcript is public. Everyone can access it.</p>
           )}
 
-          {isOwner &&
-            apiReady(
+          {isOwner && api && (
+            
               <div className="relative">
                 <SelectSearch
                   className="select-search--top select-search"
@@ -111,7 +107,7 @@ const ShareLink = (props: ShareLinkProps) => {
                     />
                   </div>
                 )}
-              </div>,
+              </div>
             )}
         </div>
       )}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { UpdateTranscript } from "../../api";
 import useApi from "../../lib/useApi";
 
@@ -11,8 +11,10 @@ const TranscriptTitle = (props: TranscriptTitle) => {
   const [displayedTitle, setDisplayedTitle] = useState(props.title);
   const [preEditTitle, setPreEditTitle] = useState(props.title);
   const [isEditing, setIsEditing] = useState(false);
+  const api = useApi();
 
   const updateTitle = async (newTitle: string, transcriptId: string) => {
+    if (!api) return;
     try {
       const requestBody: UpdateTranscript = {
         title: newTitle,

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

@@ -52,7 +52,7 @@ const useTranscript = (
         }
         setErrorState(error);
       });
-  }, [id, api]);
+  }, [id, !api]);
 
   return { response, loading, error } as
     | ErrorTranscript

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

@@ -18,8 +18,8 @@ const useTranscriptList = (page: number): TranscriptList => {
   const api = useApi();
 
   useEffect(() => {
-    setLoading(true);
     if (!api) return;
+    setLoading(true);
     api
       .v1TranscriptsList(page)
       .then((response) => {
@@ -32,7 +32,7 @@ const useTranscriptList = (page: number): TranscriptList => {
         setError(err);
         setErrorState(err);
       });
-  }, [api, page]);
+  }, [!api, page]);
 
   return { response, loading, error };
 };

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

@@ -13,7 +13,7 @@ const useWebRTC = (
   const api = useApi();
 
   useEffect(() => {
-    if (!stream || !transcriptId || !api) {
+    if (!stream || !transcriptId) {
       return;
     }
 

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

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
 import { useError } from "../../(errors)/errorContext";
 import { DomainContext } from "../domainContext";
-import { AudioWaveform } from "../../api";
+import { AudioWaveform, GetTranscriptSegmentTopic } from "../../api";
 
 export type UseWebSockets = {
   transcriptText: string;
@@ -11,7 +11,7 @@ export type UseWebSockets = {
   topics: Topic[];
   finalSummary: FinalSummary;
   status: Status;
-  waveform: AudioWaveform["data"] | null;
+  waveform: AudioWaveform | null;
   duration: number | null;
 };
 
@@ -57,6 +57,39 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   useEffect(() => {
     document.onkeyup = (e) => {
       if (e.key === "a" && process.env.NEXT_PUBLIC_ENV === "development") {
+        const segments : GetTranscriptSegmentTopic[] = [
+        {
+          speaker: 1,
+          start: 0,
+          text: "This is the transcription of an example title",
+        },
+        {
+          speaker: 2,
+          start: 10,
+          text: "This is the second speaker",
+        },
+        {
+          speaker: 3,
+          start: 90,
+          text: "This is the third speaker",
+        },
+        {
+          speaker: 4,
+          start: 90,
+          text: "This is the fourth speaker",
+        },
+        {
+          speaker: 5,
+          start: 123,
+          text: "This is the fifth speaker",
+        },
+        {
+          speaker: 6,
+          start: 300,
+          text: "This is the sixth speaker",
+        }
+        ];
+
         setTranscriptText("Lorem Ipsum");
         setTopics([
           {
@@ -67,39 +100,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
             title: "Topic 1: Introduction to Quantum Mechanics",
             transcript:
               "A brief overview of quantum mechanics and its principles.",
-            segments: [
-              {
-                speaker: 1,
-                start: 0,
-                text: "This is the transcription of an example title",
-              },
-              {
-                speaker: 2,
-                start: 10,
-                text: "This is the second speaker",
-              },
-              ,
-              {
-                speaker: 3,
-                start: 90,
-                text: "This is the third speaker",
-              },
-              {
-                speaker: 4,
-                start: 90,
-                text: "This is the fourth speaker",
-              },
-              {
-                speaker: 5,
-                start: 123,
-                text: "This is the fifth speaker",
-              },
-              {
-                speaker: 6,
-                start: 300,
-                text: "This is the sixth speaker",
-              },
-            ],
           },
           {
             id: "2",

www/app/lib/useApi.ts

@@ -8,7 +8,6 @@ export default function useApi(): DefaultService | null {
   const accessTokenInfo = useFiefAccessTokenInfo();
   const api_url = useContext(DomainContext).api_url;
   const requireLogin = featureEnabled("requireLogin");
-  const [ready, setReady] = useState<boolean>(false);
   const [api, setApi] = useState<OpenApi | null>(null);
   const { hasAuthCookie } = useContext(CookieContext);
 

www/app/lib/zulip.ts

@@ -30,7 +30,7 @@ export function getZulipMessage(
   topics: GetTranscriptTopic[] | null,
   includeTopics: boolean,
 ) {
-  const date = new Date(transcript.createdAt);
+  const date = new Date(transcript.created_at);
 
   // Get the timezone offset in minutes and convert it to hours and minutes
   const timezoneOffset = -date.getTimezoneOffset();
@@ -72,7 +72,7 @@ export function getZulipMessage(
   }
 
   let summary = "```spoiler Summary\n";
-  summary += transcript.longSummary;
+  summary += transcript.long_summary;
   summary += "```\n\n";
 
   const message = headerText + summary + topicText + "-----\n";