fix: anonymous users transcript permissions (#621)

* fix: public transcript visibility * fix: transcript permissions frontend * dead code removal * chore: remove unused code * fix search tests * fix search tests --------- Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>
2025-12-20 12:19:06 +00:00 · 2025-09-09 10:50:29 -04:00
parent 5a5b323382
commit f81fe9948a
18 changed files with 90 additions and 143 deletions
--- a/www/app/(app)/browse/_components/TranscriptStatusIcon.tsx
+++ b/www/app/(app)/browse/_components/TranscriptStatusIcon.tsx
@@ -7,9 +7,10 @@ import {
  FaMicrophone,
  FaGear,
 } from "react-icons/fa6";
+import { TranscriptStatus } from "../../../lib/transcript";

 interface TranscriptStatusIconProps {
-  status: string;
+  status: TranscriptStatus;
 }

 export default function TranscriptStatusIcon({
--- a/www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx
@@ -5,6 +5,7 @@ import useParticipants from "../../useParticipants";
 import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
 import { featureEnabled } from "../../../../domainContext";
 import { TopicItem } from "./TopicItem";
+import { TranscriptStatus } from "../../../../lib/transcript";

 type TopicListProps = {
  topics: Topic[];
@@ -14,7 +15,7 @@ type TopicListProps = {
  ];
  autoscroll: boolean;
  transcriptId: string;
-  status: string;
+  status: TranscriptStatus | null;
  currentTranscriptText: any;
 };

--- a/www/app/(app)/transcripts/[transcriptId]/correct/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/correct/page.tsx
@@ -9,8 +9,10 @@ import ParticipantList from "./participantList";
 import type { components } from "../../../../reflector-api";
 type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];
 import { SelectedText, selectedTextIsTimeSlice } from "./types";
-import { useTranscriptUpdate } from "../../../../lib/apiHooks";
-import useTranscript from "../../useTranscript";
+import {
+  useTranscriptGet,
+  useTranscriptUpdate,
+} from "../../../../lib/apiHooks";
 import { useError } from "../../../../(errors)/errorContext";
 import { useRouter } from "next/navigation";
 import { Box, Grid } from "@chakra-ui/react";
@@ -25,7 +27,7 @@ export default function TranscriptCorrect({
  params: { transcriptId },
 }: TranscriptCorrect) {
  const updateTranscriptMutation = useTranscriptUpdate();
-  const transcript = useTranscript(transcriptId);
+  const transcript = useTranscriptGet(transcriptId);
  const stateCurrentTopic = useState<GetTranscriptTopic>();
  const [currentTopic, _sct] = stateCurrentTopic;
  const stateSelectedText = useState<SelectedText>();
@@ -36,7 +38,7 @@ export default function TranscriptCorrect({
  const router = useRouter();

  const markAsDone = async () => {
-    if (transcript.response && !transcript.response.reviewed) {
+    if (transcript.data && !transcript.data.reviewed) {
      try {
        await updateTranscriptMutation.mutateAsync({
          params: {
@@ -114,7 +116,7 @@ export default function TranscriptCorrect({
          }}
        />
      </Grid>
-      {transcript.response && !transcript.response?.reviewed && (
+      {transcript.data && !transcript.data?.reviewed && (
        <div className="flex flex-row justify-end">
          <button
            className="p-2 px-4 rounded bg-green-400"
--- a/www/app/(app)/transcripts/[transcriptId]/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import Modal from "../modal";
-import useTranscript from "../useTranscript";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
@@ -12,6 +11,8 @@ import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import { useRouter } from "next/navigation";
 import { Box, Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
+import { useTranscriptGet } from "../../../lib/apiHooks";
+import { TranscriptStatus } from "../../../lib/transcript";

 type TranscriptDetails = {
  params: {
@@ -22,11 +23,15 @@ type TranscriptDetails = {
 export default function TranscriptDetails(details: TranscriptDetails) {
  const transcriptId = details.params.transcriptId;
  const router = useRouter();
-  const statusToRedirect = ["idle", "recording", "processing"];
+  const statusToRedirect = [
+    "idle",
+    "recording",
+    "processing",
+  ] satisfies TranscriptStatus[] as TranscriptStatus[];

-  const transcript = useTranscript(transcriptId);
-  const transcriptStatus = transcript.response?.status;
-  const waiting = statusToRedirect.includes(transcriptStatus || "");
+  const transcript = useTranscriptGet(transcriptId);
+  const waiting =
+    transcript.data && statusToRedirect.includes(transcript.data.status);

  const mp3 = useMp3(transcriptId, waiting);
  const topics = useTopics(transcriptId);
@@ -56,7 +61,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
    );
  }

-  if (transcript?.loading || topics?.loading) {
+  if (transcript?.isLoading || topics?.loading) {
    return <Modal title="Loading" text={"Loading transcript..."} />;
  }

@@ -86,7 +91,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                useActiveTopic={useActiveTopic}
                waveform={waveform.waveform}
                media={mp3.media}
-                mediaDuration={transcript.response?.duration || null}
+                mediaDuration={transcript.data?.duration || null}
              />
            ) : !mp3.loading && (waveform.error || mp3.error) ? (
              <Box p={4} bg="red.100" borderRadius="md">
@@ -116,10 +121,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
            <Flex direction="column" gap={0}>
              <Flex alignItems="center" gap={2}>
                <TranscriptTitle
-                  title={transcript.response?.title || "Unnamed Transcript"}
+                  title={transcript.data?.title || "Unnamed Transcript"}
                  transcriptId={transcriptId}
                  onUpdate={(newTitle) => {
-                    transcript.reload();
+                    transcript.refetch().then(() => {});
                  }}
                />
              </Flex>
@@ -136,23 +141,23 @@ export default function TranscriptDetails(details: TranscriptDetails) {
            useActiveTopic={useActiveTopic}
            autoscroll={false}
            transcriptId={transcriptId}
-            status={transcript.response?.status}
+            status={transcript.data?.status || null}
            currentTranscriptText=""
          />
-          {transcript.response && topics.topics ? (
+          {transcript.data && topics.topics ? (
            <>
              <FinalSummary
-                transcriptResponse={transcript.response}
+                transcriptResponse={transcript.data}
                topicsResponse={topics.topics}
-                onUpdate={(newSummary) => {
-                  transcript.reload();
+                onUpdate={() => {
+                  transcript.refetch();
                }}
              />
            </>
          ) : (
            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
              <div className="flex flex-col h-full justify-center content-center">
-                {transcript.response.status == "processing" ? (
+                {transcript?.data?.status == "processing" ? (
                  <Text>Loading Transcript</Text>
                ) : (
                  <Text>
--- a/www/app/(app)/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/record/page.tsx
@@ -2,7 +2,6 @@
 import { useEffect, useState } from "react";
 import Recorder from "../../recorder";
 import { TopicList } from "../_components/TopicList";
-import useTranscript from "../../useTranscript";
 import { useWebSockets } from "../../useWebSockets";
 import { Topic } from "../../webSocketTypes";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
@@ -11,6 +10,8 @@ import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
 import LiveTrancription from "../../liveTranscription";
+import { useTranscriptGet } from "../../../../lib/apiHooks";
+import { TranscriptStatus } from "../../../../lib/transcript";

 type TranscriptDetails = {
  params: {
@@ -19,7 +20,7 @@ type TranscriptDetails = {
 };

 const TranscriptRecord = (details: TranscriptDetails) => {
-  const transcript = useTranscript(details.params.transcriptId);
+  const transcript = useTranscriptGet(details.params.transcriptId);
  const [transcriptStarted, setTranscriptStarted] = useState(false);
  const useActiveTopic = useState<Topic | null>(null);

@@ -29,8 +30,8 @@ const TranscriptRecord = (details: TranscriptDetails) => {

  const router = useRouter();

-  const [status, setStatus] = useState(
-    webSockets.status.value || transcript.response?.status || "idle",
+  const [status, setStatus] = useState<TranscriptStatus>(
+    webSockets.status?.value || transcript.data?.status || "idle",
  );

  useEffect(() => {
@@ -41,7 +42,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
  useEffect(() => {
    //TODO HANDLE ERROR STATUS BETTER
    const newStatus =
-      webSockets.status.value || transcript.response?.status || "idle";
+      webSockets.status?.value || transcript.data?.status || "idle";
    setStatus(newStatus);
    if (newStatus && (newStatus == "ended" || newStatus == "error")) {
      console.log(newStatus, "redirecting");
@@ -49,7 +50,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
      const newUrl = "/transcripts/" + details.params.transcriptId;
      router.replace(newUrl);
    }
-  }, [webSockets.status.value, transcript.response?.status]);
+  }, [webSockets.status?.value, transcript.data?.status]);

  useEffect(() => {
    if (webSockets.waveform && webSockets.waveform) mp3.getNow();
--- a/www/app/(app)/transcripts/[transcriptId]/upload/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/upload/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 import { useEffect, useState } from "react";
-import useTranscript from "../../useTranscript";
 import { useWebSockets } from "../../useWebSockets";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
 import useMp3 from "../../useMp3";
 import { Center, VStack, Text, Heading, Button } from "@chakra-ui/react";
 import FileUploadButton from "../../fileUploadButton";
+import { useTranscriptGet } from "../../../../lib/apiHooks";

 type TranscriptUpload = {
  params: {
@@ -15,7 +15,7 @@ type TranscriptUpload = {
 };

 const TranscriptUpload = (details: TranscriptUpload) => {
-  const transcript = useTranscript(details.params.transcriptId);
+  const transcript = useTranscriptGet(details.params.transcriptId);
  const [transcriptStarted, setTranscriptStarted] = useState(false);

  const webSockets = useWebSockets(details.params.transcriptId);
@@ -25,13 +25,13 @@ const TranscriptUpload = (details: TranscriptUpload) => {
  const router = useRouter();

  const [status_, setStatus] = useState(
-    webSockets.status.value || transcript.response?.status || "idle",
+    webSockets.status?.value || transcript.data?.status || "idle",
  );

  // status is obviously done if we have transcript
  const status =
-    !transcript.loading && transcript.response?.status === "ended"
-      ? transcript.response?.status
+    !transcript.isLoading && transcript.data?.status === "ended"
+      ? transcript.data?.status
      : status_;

  useEffect(() => {
@@ -43,9 +43,9 @@ const TranscriptUpload = (details: TranscriptUpload) => {
    //TODO HANDLE ERROR STATUS BETTER
    // TODO deprecate webSockets.status.value / depend on transcript.response?.status from query lib
    const newStatus =
-      transcript.response?.status === "ended"
+      transcript.data?.status === "ended"
        ? "ended"
-        : webSockets.status.value || transcript.response?.status || "idle";
+        : webSockets.status?.value || transcript.data?.status || "idle";
    setStatus(newStatus);
    if (newStatus && (newStatus == "ended" || newStatus == "error")) {
      console.log(newStatus, "redirecting");
@@ -53,7 +53,7 @@ const TranscriptUpload = (details: TranscriptUpload) => {
      const newUrl = "/transcripts/" + details.params.transcriptId;
      router.replace(newUrl);
    }
-  }, [webSockets.status.value, transcript.response?.status]);
+  }, [webSockets.status?.value, transcript.data?.status]);

  useEffect(() => {
    if (webSockets.waveform && webSockets.waveform) mp3.getNow();
--- a/www/app/(app)/transcripts/recorder.tsx
+++ b/www/app/(app)/transcripts/recorder.tsx
@@ -11,10 +11,11 @@ import useAudioDevice from "./useAudioDevice";
 import { Box, Flex, IconButton, Menu, RadioGroup } from "@chakra-ui/react";
 import { LuScreenShare, LuMic, LuPlay, LuCircleStop } from "react-icons/lu";
 import { RECORD_A_MEETING_URL } from "../../api/urls";
+import { TranscriptStatus } from "../../lib/transcript";

 type RecorderProps = {
  transcriptId: string;
-  status: string;
+  status: TranscriptStatus;
 };

 export default function Recorder(props: RecorderProps) {
--- a/www/app/(app)/transcripts/useTranscript.ts
+++ b/www/app/(app)/transcripts/useTranscript.ts
@@ -1,69 +0,0 @@
-import type { components } from "../../reflector-api";
-import { useTranscriptGet } from "../../lib/apiHooks";
-
-type GetTranscript = components["schemas"]["GetTranscript"];
-
-type ErrorTranscript = {
-  error: Error;
-  loading: false;
-  response: null;
-  reload: () => void;
-};
-
-type LoadingTranscript = {
-  response: null;
-  loading: true;
-  error: false;
-  reload: () => void;
-};
-
-type SuccessTranscript = {
-  response: GetTranscript;
-  loading: false;
-  error: null;
-  reload: () => void;
-};
-
-const useTranscript = (
-  id: string | null,
-): ErrorTranscript | LoadingTranscript | SuccessTranscript => {
-  const { data, isLoading, error, refetch } = useTranscriptGet(id);
-
-  // Map to the expected return format
-  if (isLoading) {
-    return {
-      response: null,
-      loading: true,
-      error: false,
-      reload: refetch,
-    };
-  }
-
-  if (error) {
-    return {
-      error: error as Error,
-      loading: false,
-      response: null,
-      reload: refetch,
-    };
-  }
-
-  // Check if data is undefined or null
-  if (!data) {
-    return {
-      response: null,
-      loading: true,
-      error: false,
-      reload: refetch,
-    };
-  }
-
-  return {
-    response: data,
-    loading: false,
-    error: null,
-    reload: refetch,
-  };
-};
-
-export default useTranscript;
--- a/www/app/(app)/transcripts/useWebSockets.ts
+++ b/www/app/(app)/transcripts/useWebSockets.ts
@@ -16,7 +16,7 @@ export type UseWebSockets = {
  title: string;
  topics: Topic[];
  finalSummary: FinalSummary;
-  status: Status;
+  status: Status | null;
  waveform: AudioWaveform | null;
  duration: number | null;
 };
@@ -34,7 +34,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
  const [finalSummary, setFinalSummary] = useState<FinalSummary>({
    summary: "",
  });
-  const [status, setStatus] = useState<Status>({ value: "" });
+  const [status, setStatus] = useState<Status | null>(null);
  const { setError } = useError();

  const { websocket_url: websocketUrl } = useContext(DomainContext);
--- a/www/app/(app)/transcripts/webSocketTypes.ts
+++ b/www/app/(app)/transcripts/webSocketTypes.ts
@@ -1,4 +1,5 @@
 import type { components } from "../../reflector-api";
+import type { TranscriptStatus } from "../../lib/transcript";

 type GetTranscriptTopic = components["schemas"]["GetTranscriptTopic"];

@@ -13,7 +14,7 @@ export type FinalSummary = {
 };

 export type Status = {
-  value: string;
+  value: TranscriptStatus;
 };

 export type TranslatedTopic = {
--- a/www/app/lib/apiHooks.ts
+++ b/www/app/lib/apiHooks.ts
@@ -96,8 +96,6 @@ export function useTranscriptProcess() {
 }

 export function useTranscriptGet(transcriptId: string | null) {
-  const { isAuthenticated } = useAuthReady();
-
  return $api.useQuery(
    "get",
    "/v1/transcripts/{transcript_id}",
@@ -109,7 +107,7 @@ export function useTranscriptGet(transcriptId: string | null) {
      },
    },
    {
-      enabled: !!transcriptId && isAuthenticated,
+      enabled: !!transcriptId,
    },
  );
 }
@@ -292,18 +290,16 @@ export function useTranscriptUploadAudio() {
 }

 export function useTranscriptWaveform(transcriptId: string | null) {
-  const { isAuthenticated } = useAuthReady();
-
  return $api.useQuery(
    "get",
    "/v1/transcripts/{transcript_id}/audio/waveform",
    {
      params: {
-        path: { transcript_id: transcriptId || "" },
+        path: { transcript_id: transcriptId! },
      },
    },
    {
-      enabled: !!transcriptId && isAuthenticated,
+      enabled: !!transcriptId,
    },
  );
 }
@@ -316,7 +312,7 @@ export function useTranscriptMP3(transcriptId: string | null) {
    "/v1/transcripts/{transcript_id}/audio/mp3",
    {
      params: {
-        path: { transcript_id: transcriptId || "" },
+        path: { transcript_id: transcriptId! },
      },
    },
    {
@@ -326,8 +322,6 @@ export function useTranscriptMP3(transcriptId: string | null) {
 }

 export function useTranscriptTopics(transcriptId: string | null) {
-  const { isAuthenticated } = useAuthReady();
-
  return $api.useQuery(
    "get",
    "/v1/transcripts/{transcript_id}/topics",
@@ -337,7 +331,7 @@ export function useTranscriptTopics(transcriptId: string | null) {
      },
    },
    {
-      enabled: !!transcriptId && isAuthenticated,
+      enabled: !!transcriptId,
    },
  );
 }
--- a/www/app/lib/transcript.ts
+++ b/www/app/lib/transcript.ts
@@ -0,0 +1,5 @@
+import { components } from "../reflector-api";
+
+type ApiTranscriptStatus = components["schemas"]["GetTranscript"]["status"];
+
+export type TranscriptStatus = ApiTranscriptStatus;
--- a/www/app/reflector-api.d.ts
+++ b/www/app/reflector-api.d.ts
@@ -926,8 +926,17 @@ export interface components {
      source_kind: components["schemas"]["SourceKind"];
      /** Created At */
      created_at: string;
-      /** Status */
-      status: string;
+      /**
+       * Status
+       * @enum {string}
+       */
+      status:
+        | "idle"
+        | "uploaded"
+        | "recording"
+        | "processing"
+        | "error"
+        | "ended";
      /** Rank */
      rank: number;
      /**