Igor/mathieu/frontend openapi react query (#597)

* small typing

* typing fixes

---------

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

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

@@ -86,7 +86,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 useActiveTopic={useActiveTopic}
                 waveform={waveform.waveform}
                 media={mp3.media}
-                mediaDuration={transcript.response?.duration}
+                mediaDuration={transcript.response?.duration || null}
               />
             ) : !mp3.loading && (waveform.error || mp3.error) ? (
               <Box p={4} bg="red.100" borderRadius="md">

www/app/(app)/transcripts/player.tsx

@@ -20,7 +20,7 @@ type PlayerProps = {
   ];
   waveform: AudioWaveform;
   media: HTMLMediaElement;
-  mediaDuration: number;
+  mediaDuration: number | null;
 };
 
 export default function Player(props: PlayerProps) {
@@ -52,7 +52,9 @@ export default function Player(props: PlayerProps) {
         container: waveformRef.current,
         peaks: [props.waveform.data],
         height: "auto",
-        duration: Math.floor(props.mediaDuration / 1000),
+        duration: props.mediaDuration
+          ? Math.floor(props.mediaDuration / 1000)
+          : undefined,
         media: props.media,
 
         ...waveSurferStyles.playerSettings,

www/app/(app)/transcripts/shareAndPrivacy.tsx

@@ -76,7 +76,7 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
       });
       setShareMode(
         shareOptionsData.find(
-          (option) => option.value === (updatedTranscript as any).share_mode,
+          (option) => option.value === updatedTranscript.share_mode,
         ) || shareOptionsData[0],
       );
     } catch (err) {

www/app/(app)/transcripts/shareZulip.tsx

@@ -15,7 +15,6 @@ import {
   Checkbox,
   Combobox,
   Spinner,
-  Portal,
   useFilter,
   useListCollection,
 } from "@chakra-ui/react";
@@ -37,10 +36,6 @@ interface Stream {
   name: string;
 }
 
-interface Topic {
-  name: string;
-}
-
 export default function ShareZulip(props: ShareZulipProps & BoxProps) {
   const [showModal, setShowModal] = useState(false);
   const [stream, setStream] = useState<string | undefined>(undefined);
@@ -49,26 +44,23 @@ export default function ShareZulip(props: ShareZulipProps & BoxProps) {
   const [includeTopics, setIncludeTopics] = useState(false);
 
   // React Query hooks
-  const { data: streams = [], isLoading: isLoadingStreams } =
-    useZulipStreams() as { data: Stream[]; isLoading: boolean };
-  const { data: topics = [] } = useZulipTopics(selectedStreamId) as {
-    data: Topic[];
-  };
+  const { data: streams = [], isLoading: isLoadingStreams } = useZulipStreams();
+  const { data: topics = [] } = useZulipTopics(selectedStreamId);
   const postToZulipMutation = useTranscriptPostToZulip();
 
   const { contains } = useFilter({ sensitivity: "base" });
 
   const streamItems = useMemo(() => {
-    return (streams || []).map((stream: Stream) => ({
+    return streams.map((stream: Stream) => ({
       label: stream.name,
       value: stream.name,
     }));
   }, [streams]);
 
   const topicItems = useMemo(() => {
-    return (topics || []).map((topic: Topic) => ({
-      label: topic.name,
-      value: topic.name,
+    return topics.map(({ name }) => ({
+      label: name,
+      value: name,
     }));
   }, [topics]);
 

www/app/(app)/transcripts/useParticipants.ts

@@ -41,7 +41,7 @@ const useParticipants = (transcriptId: string): UseParticipants => {
       loading: false,
       response: null,
       refetch,
-    } as ErrorParticipants & { refetch: () => void };
+    } satisfies ErrorParticipants & { refetch: () => void };
   }
 
   if (loading || !response) {
@@ -50,7 +50,7 @@ const useParticipants = (transcriptId: string): UseParticipants => {
       loading: true,
       error: null,
       refetch,
-    } as LoadingParticipants & { refetch: () => void };
+    } satisfies LoadingParticipants & { refetch: () => void };
   }
 
   return {
@@ -58,7 +58,7 @@ const useParticipants = (transcriptId: string): UseParticipants => {
     loading: false,
     error: null,
     refetch,
-  } as SuccessParticipants & { refetch: () => void };
+  } satisfies SuccessParticipants & { refetch: () => void };
 };
 
 export default useParticipants;

www/app/(app)/transcripts/useTopicWithWords.ts

@@ -42,14 +42,13 @@ const useTopicWithWords = (
     topicId || null,
   );
 
-  // Type-safe return based on state
   if (error) {
     return {
       error: error as Error,
       loading: false,
       response: null,
       refetch,
-    } as ErrorTopicWithWords & { refetch: () => void };
+    } satisfies ErrorTopicWithWords & { refetch: () => void };
   }
 
   if (loading || !response) {
@@ -58,7 +57,7 @@ const useTopicWithWords = (
       loading: true,
       error: false,
       refetch,
-    } as LoadingTopicWithWords & { refetch: () => void };
+    } satisfies LoadingTopicWithWords & { refetch: () => void };
   }
 
   return {
@@ -66,7 +65,7 @@ const useTopicWithWords = (
     loading: false,
     error: null,
     refetch,
-  } as SuccessTopicWithWords & { refetch: () => void };
+  } satisfies SuccessTopicWithWords & { refetch: () => void };
 };
 
 export default useTopicWithWords;

www/app/(app)/transcripts/useTranscript.ts

@@ -59,7 +59,7 @@ const useTranscript = (
   }
 
   return {
-    response: data as GetTranscript,
+    response: data,
     loading: false,
     error: null,
     reload: refetch,

www/app/(app)/transcripts/useWebRTC.ts

@@ -11,7 +11,7 @@ const useWebRTC = (
 ): Peer => {
   const [peer, setPeer] = useState<Peer | null>(null);
   const { setError } = useError();
-  const webRTCMutation = useTranscriptWebRTC();
+  const { mutateAsync: mutateWebRtcTranscriptAsync } = useTranscriptWebRTC();
 
   useEffect(() => {
     if (!stream || !transcriptId) {
@@ -41,7 +41,7 @@ const useWebRTC = (
         };
 
         try {
-          const answer = await webRTCMutation.mutateAsync({
+          const answer = await mutateWebRtcTranscriptAsync({
             params: {
               path: {
                 transcript_id: transcriptId,
@@ -69,7 +69,7 @@ const useWebRTC = (
     return () => {
       p.destroy();
     };
-  }, [stream, transcriptId, webRTCMutation]);
+  }, [stream, transcriptId, mutateWebRtcTranscriptAsync]);
 
   return peer;
 };