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

* small typing

* typing fixes

---------

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

www/app/(app)/browse/_components/FilterSidebar.tsx

@@ -47,7 +47,7 @@ export default function FilterSidebar({
                 key={room.id}
                 as={NextLink}
                 href="#"
-                onClick={() => onFilterChange("room" as SourceKind, room.id)}
+                onClick={() => onFilterChange("room", room.id)}
                 color={
                   selectedSourceKind === "room" && selectedRoomId === room.id
                     ? "blue.500"

www/app/(app)/browse/page.tsx

@@ -203,7 +203,11 @@ export default function TranscriptBrowser() {
 
   const [urlSourceKind, setUrlSourceKind] = useQueryState(
     "source",
-    parseAsStringLiteral(["room", "live", "file"] as const).withOptions({
+    parseAsStringLiteral([
+      "room",
+      "live",
+      "file",
+    ] as const satisfies SourceKind[]).withOptions({
       shallow: false,
     }),
   );

www/app/(app)/rooms/page.tsx

@@ -93,33 +93,26 @@ export default function RoomsList() {
   const createRoomMutation = useRoomCreate();
   const updateRoomMutation = useRoomUpdate();
   const deleteRoomMutation = useRoomDelete();
-  const { data: streams = [] } = useZulipStreams() as { data: any[] };
-  const { data: topics = [] } = useZulipTopics(selectedStreamId) as {
-    data: Topic[];
-  };
-  interface Topic {
-    name: string;
-  }
+  const { data: streams = [] } = useZulipStreams();
+  const { data: topics = [] } = useZulipTopics(selectedStreamId);
 
   // Update selected stream ID when zulip stream changes
   useEffect(() => {
     if (room.zulipStream && streams.length > 0) {
-      const selectedStream = streams.find(
-        (s: any) => s.name === room.zulipStream,
-      );
-      if (selectedStream) {
-        setSelectedStreamId((selectedStream as any).stream_id);
+      const selectedStream = streams.find((s) => s.name === room.zulipStream);
+      if (selectedStream !== undefined) {
+        setSelectedStreamId(selectedStream.stream_id);
       }
     } else {
       setSelectedStreamId(null);
     }
   }, [room.zulipStream, streams]);
 
-  const streamOptions: SelectOption[] = streams.map((stream: any) => {
+  const streamOptions: SelectOption[] = streams.map((stream) => {
     return { label: stream.name, value: stream.name };
   });
 
-  const topicOptions: SelectOption[] = topics.map((topic: any) => ({
+  const topicOptions: SelectOption[] = topics.map((topic) => ({
     label: topic.name,
     value: topic.name,
   }));

www/app/(app)/rooms/useRoomList.tsx

@@ -11,6 +11,12 @@ type RoomList = {
   refetch: () => void;
 };
 
+type ValidationError = components["schemas"]["ValidationError"];
+
+const formatValidationErrors = (errors: ValidationError[]) => {
+  return errors.map((error) => error.msg).join(", ");
+};
+
 // Wrapper to maintain backward compatibility
 const useRoomList = (page: PaginationPage): RoomList => {
   const { data, isLoading, error, refetch } = useRoomsList(page);
@@ -18,7 +24,11 @@ const useRoomList = (page: PaginationPage): RoomList => {
   return {
     response: data || null,
     loading: isLoading,
-    error: error as Error | null,
+    error: error
+      ? new Error(
+          error.detail ? formatValidationErrors(error.detail) : undefined,
+        )
+      : null,
     refetch,
   };
 };

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;
 };