From 93ba1b450c2dcba704ab3a356d8fc1c0679b30c5 Mon Sep 17 00:00:00 2001
From: Mathieu Virbel <mat@meltingrocks.com>
Date: Tue, 24 Oct 2023 20:23:10 +0200
Subject: [PATCH] www: fix loading of past transcript before the user is
 authenticated

---
 www/app/transcripts/[transcriptId]/page.tsx   | 37 ++++++++++++-------
 .../[transcriptId]/record/page.tsx            |  2 +-
 www/app/transcripts/useTopics.ts              |  7 ++--
 www/app/transcripts/useTranscript.ts          | 11 ++----
 www/app/transcripts/useWaveform.ts            |  3 +-
 5 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/www/app/transcripts/[transcriptId]/page.tsx b/www/app/transcripts/[transcriptId]/page.tsx
index c6dbb501..200f4d87 100644
--- a/www/app/transcripts/[transcriptId]/page.tsx
+++ b/www/app/transcripts/[transcriptId]/page.tsx
@@ -13,6 +13,8 @@ import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
+import { featRequireLogin } from "../../../app/lib/utils";
+import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
 
 type TranscriptDetails = {
   params: {
@@ -21,13 +23,20 @@ type TranscriptDetails = {
 };
 
 export default function TranscriptDetails(details: TranscriptDetails) {
+  const isAuthenticated = useFiefIsAuthenticated();
   const api = getApi();
-  const transcript = useTranscript(details.params.transcriptId);
-  const topics = useTopics(api, details.params.transcriptId);
-  const waveform = useWaveform(api, details.params.transcriptId);
+  const [transcriptId, setTranscriptId] = useState<string>("");
+  const transcript = useTranscript(api, transcriptId);
+  const topics = useTopics(api, transcriptId);
+  const waveform = useWaveform(api, transcriptId);
   const useActiveTopic = useState<Topic | null>(null);
 
-  if (transcript?.error || topics?.error || waveform?.error) {
+  useEffect(() => {
+    if (featRequireLogin() && !isAuthenticated) return;
+    setTranscriptId(details.params.transcriptId);
+  }, [api]);
+
+  if (transcript?.error /** || topics?.error || waveform?.error **/) {
     return (
       <Modal
         title="Transcription Not Found"
@@ -45,9 +54,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   return (
     <>
-      {transcript?.loading === true ||
-      waveform?.loading == true ||
-      topics?.loading == true ? (
+      {transcript?.loading === true || topics?.loading == true ? (
         <Modal title="Loading" text={"Loading transcript..."} />
       ) : (
         <>
@@ -55,13 +62,15 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             {transcript?.response?.title && (
               <TranscriptTitle title={transcript.response.title} />
             )}
-            <Recorder
-              topics={topics?.topics || []}
-              useActiveTopic={useActiveTopic}
-              waveform={waveform?.waveform}
-              isPastMeeting={true}
-              transcriptId={transcript?.response?.id}
-            />
+            {waveform?.loading == true && (
+              <Recorder
+                topics={topics?.topics || []}
+                useActiveTopic={useActiveTopic}
+                waveform={waveform?.waveform}
+                isPastMeeting={true}
+                transcriptId={transcript?.response?.id}
+              />
+            )}
           </div>
           <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
diff --git a/www/app/transcripts/[transcriptId]/record/page.tsx b/www/app/transcripts/[transcriptId]/record/page.tsx
index 2e212c2e..4a67d624 100644
--- a/www/app/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/transcripts/[transcriptId]/record/page.tsx
@@ -36,8 +36,8 @@ const TranscriptRecord = (details: TranscriptDetails) => {
     }
   }, []);
 
-  const transcript = useTranscript(details.params.transcriptId);
   const api = getApi();
+  const transcript = useTranscript(api, details.params.transcriptId);
   const webRTC = useWebRTC(stream, details.params.transcriptId, api);
   const webSockets = useWebSockets(details.params.transcriptId);
 
diff --git a/www/app/transcripts/useTopics.ts b/www/app/transcripts/useTopics.ts
index 510a2ff4..b653bf50 100644
--- a/www/app/transcripts/useTopics.ts
+++ b/www/app/transcripts/useTopics.ts
@@ -13,15 +13,14 @@ type TranscriptTopics = {
   error: Error | null;
 };
 
-const useTranscript = (api: DefaultApi, id: string): TranscriptTopics => {
+const useTopics = (api: DefaultApi, id: string): TranscriptTopics => {
   const [topics, setTopics] = useState<Topic[] | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
 
   const getTopics = (id: string) => {
-    if (!id)
-      throw new Error("Transcript ID is required to get transcript topics");
+    if (!id) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetTopicsRequest = {
@@ -47,4 +46,4 @@ const useTranscript = (api: DefaultApi, id: string): TranscriptTopics => {
   return { topics, loading, error };
 };
 
-export default useTranscript;
+export default useTopics;
diff --git a/www/app/transcripts/useTranscript.ts b/www/app/transcripts/useTranscript.ts
index eb39b202..2523557d 100644
--- a/www/app/transcripts/useTranscript.ts
+++ b/www/app/transcripts/useTranscript.ts
@@ -1,11 +1,7 @@
 import { useEffect, useState } from "react";
-import {
-  V1TranscriptGetRequest,
-  V1TranscriptsCreateRequest,
-} from "../api/apis/DefaultApi";
+import { DefaultApi, V1TranscriptGetRequest } from "../api/apis/DefaultApi";
 import { GetTranscript } from "../api";
 import { useError } from "../(errors)/errorContext";
-import getApi from "../lib/getApi";
 
 type Transcript = {
   response: GetTranscript | null;
@@ -13,15 +9,14 @@ type Transcript = {
   error: Error | null;
 };
 
-const useTranscript = (id: string | null): Transcript => {
+const useTranscript = (api: DefaultApi, id: string | null): Transcript => {
   const [response, setResponse] = useState<GetTranscript | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
-  const api = getApi();
 
   const getTranscript = (id: string | null) => {
-    if (!id) throw new Error("Transcript ID is required to get transcript");
+    if (!id) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetRequest = {
diff --git a/www/app/transcripts/useWaveform.ts b/www/app/transcripts/useWaveform.ts
index b337fb2f..d44b60e7 100644
--- a/www/app/transcripts/useWaveform.ts
+++ b/www/app/transcripts/useWaveform.ts
@@ -19,8 +19,7 @@ const useWaveform = (api: DefaultApi, id: string): AudioWaveFormResponse => {
   const { setError } = useError();
 
   const getWaveform = (id: string) => {
-    if (!id)
-      throw new Error("Transcript ID is required to get transcript waveform");
+    if (!id) return;
 
     setLoading(true);
     const requestParameters: V1TranscriptGetAudioWaveformRequest = {