Ability to load past meetings + URL management

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

@@ -0,0 +1,67 @@
+"use client";
+import Modal from "../modal";
+import getApi from "../../lib/getApi";
+import useTranscript from "../useTranscript";
+import useTopics from "../useTopics";
+import useWaveform from "../useWaveform";
+import { Dashboard } from "../dashboard";
+import Recorder from "../recorder";
+import { Topic } from "../webSocketTypes";
+import React, { useEffect, useState } from "react";
+import "../../styles/button.css";
+
+type TranscriptDetails = {
+  params: {
+    transcriptId: string;
+  };
+};
+
+export default function TranscriptDetails(details: TranscriptDetails) {
+  const api = getApi();
+  const transcript = useTranscript(null, api, details.params.transcriptId);
+  const topics = useTopics(api, details.params.transcriptId);
+  const waveform = useWaveform(api, details.params.transcriptId);
+  const useActiveTopic = useState<Topic | null>(null);
+
+  if (transcript?.error || topics?.error || waveform?.error) {
+    return (
+      <Modal
+        title="Transcription Not Found"
+        text="A trascription with this ID does not exist."
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className="w-full flex flex-col items-center h-[100svh]">
+        {transcript?.loading === true ||
+        waveform?.loading == true ||
+        topics?.loading == true ? (
+          <Modal
+            title="Loading"
+            text={"Loading transcript..." + transcript.loading}
+          />
+        ) : (
+          <>
+            <Recorder
+              topics={topics?.topics || []}
+              useActiveTopic={useActiveTopic}
+              waveform={waveform?.waveform}
+              isPastMeeting={true}
+              transcriptId={transcript?.response?.id}
+            />
+
+            <Dashboard
+              transcriptionText={""}
+              finalSummary={{ summary: transcript?.response?.shortSummary }}
+              topics={topics?.topics || []}
+              disconnected={false}
+              useActiveTopic={useActiveTopic}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}