From a45b30ee70d080fead2d6ae82ee1251c729a35bf Mon Sep 17 00:00:00 2001
From: Mathieu Virbel <mat@meltingrocks.com>
Date: Wed, 25 Oct 2023 19:50:08 +0200
Subject: [PATCH] www: ensure login waited before recording

if you refresh the record page, it does not work and return 404 because the transcript is accessed without token
---
 .../[domain]/transcripts/[transcriptId]/page.tsx  |  2 +-
 .../transcripts/[transcriptId]/record/page.tsx    | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
index d4f40428..3e30b97f 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -35,7 +35,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   useEffect(() => {
     if (requireLogin && !isAuthenticated) return;
     setTranscriptId(details.params.transcriptId);
-  }, [api]);
+  }, [api, details.params.transcriptId, isAuthenticated]);
 
   if (transcript?.error /** || topics?.error || waveform?.error **/) {
     return (
diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
index 8e31327c..51a318a4 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
@@ -14,6 +14,8 @@ import DisconnectedIndicator from "../../disconnectedIndicator";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
+import { featRequireLogin } from "../../../../../app/lib/utils";
+import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
 
 type TranscriptDetails = {
   params: {
@@ -36,16 +38,23 @@ const TranscriptRecord = (details: TranscriptDetails) => {
     }
   }, []);
 
+  const isAuthenticated = useFiefIsAuthenticated();
   const api = getApi();
-  const transcript = useTranscript(api, details.params.transcriptId);
-  const webRTC = useWebRTC(stream, details.params.transcriptId, api);
-  const webSockets = useWebSockets(details.params.transcriptId);
+  const [transcriptId, setTranscriptId] = useState<string>("");
+  const transcript = useTranscript(api, transcriptId);
+  const webRTC = useWebRTC(stream, transcriptId, api);
+  const webSockets = useWebSockets(transcriptId);
 
   const { audioDevices, getAudioStream } = useAudioDevice();
 
   const [hasRecorded, setHasRecorded] = useState(false);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
 
+  useEffect(() => {
+    if (featRequireLogin() && !isAuthenticated) return;
+    setTranscriptId(details.params.transcriptId);
+  }, [api, details.params.transcriptId, isAuthenticated]);
+
   useEffect(() => {
     if (!transcriptStarted && webSockets.transcriptText.length !== 0)
       setTranscriptStarted(true);