New openapi generator - experimental

www/app/[domain]/transcripts/shareLink.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect, use } from "react";
 import { featureEnabled } from "../domainContext";
-import getApi from "../../lib/getApi";
 import { useFiefUserinfo } from "@fief/fief/nextjs/react";
 import SelectSearch from "react-select-search";
 import "react-select-search/style.css";
@@ -8,26 +7,30 @@ import "../../styles/button.css";
 import "../../styles/form.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-
+import { DefaultService, UpdateTranscript } from "../../api";
+import { ShareMode, toShareMode } from "../../lib/shareMode";
+import useApi from "../../lib/useApi";
 type ShareLinkProps = {
   transcriptId: string;
   userId: string | null;
-  shareMode: string;
+  shareMode: ShareMode;
 };
 
 const ShareLink = (props: ShareLinkProps) => {
   const [isCopied, setIsCopied] = useState(false);
+  const [api, setApi] = useState<DefaultService | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [currentUrl, setCurrentUrl] = useState<string>("");
   const requireLogin = featureEnabled("requireLogin");
   const [isOwner, setIsOwner] = useState(false);
-  const [shareMode, setShareMode] = useState(props.shareMode);
+  const [shareMode, setShareMode] = useState<ShareMode>(props.shareMode);
   const [shareLoading, setShareLoading] = useState(false);
   const userinfo = useFiefUserinfo();
-  const api = getApi();
 
   useEffect(() => {
     setCurrentUrl(window.location.href);
+    const api = useApi();
+    setApi(api);
   }, []);
 
   useEffect(() => {
@@ -48,18 +51,24 @@ const ShareLink = (props: ShareLinkProps) => {
   };
 
   const updateShareMode = async (selectedShareMode: string) => {
-    if (!api) return;
     setShareLoading(true);
-    const updatedTranscript = await api.v1TranscriptUpdate({
-      transcriptId: props.transcriptId,
-      updateTranscript: {
-        shareMode: selectedShareMode,
-      },
-    });
-    setShareMode(updatedTranscript.shareMode);
+    const requestBody: UpdateTranscript = {
+      share_mode: toShareMode(selectedShareMode),
+    };
+    const api = useApi();
+
+    if (!api)
+      throw new Error("ShareLink's API should always be ready at this point");
+
+    const updatedTranscript = await api.v1TranscriptUpdate(
+      props.transcriptId,
+      requestBody,
+    );
+    setShareMode(toShareMode(updatedTranscript.share_mode));
     setShareLoading(false);
   };
   const privacyEnabled = featureEnabled("privacy");
+  const apiReady = api != null;
 
   return (
     <div
@@ -80,7 +89,7 @@ const ShareLink = (props: ShareLinkProps) => {
             <p>This transcript is public. Everyone can access it.</p>
           )}
 
-          {isOwner && api && (
+          {isOwner && apiReady (
             <div className="relative">
               <SelectSearch
                 className="select-search--top select-search"
@@ -89,7 +98,7 @@ const ShareLink = (props: ShareLinkProps) => {
                   { name: "Secure", value: "semi-private" },
                   { name: "Public", value: "public" },
                 ]}
-                value={shareMode}
+                value={shareMode?.toString()}
                 onChange={updateShareMode}
                 closeOnSelect={true}
               />