🚨 Fix typescript issues after frontend dependency updates

frontend/src/api.ts

@@ -1,6 +1,6 @@
 import { paths } from './openapi-schema';
 import { ApiResponse, Fetcher, Middleware } from 'openapi-typescript-fetch';
-import useSwr, { SWRConfiguration } from 'swr';
+import useSwr, { SWRConfiguration, SWRResponse } from 'swr';
 import { defaultConfig } from 'swr/_internal';
 
 export function getShareToken(): string | null {
@@ -70,3 +70,8 @@ export function makeRetrySwrHook<P, R>(
       ...options,
     });
 }
+
+export type RequestDataType<T extends (...args: never) => SWRResponse> = Exclude<
+  ReturnType<T>['data'],
+  undefined
+>;

frontend/src/app.tsx

@@ -57,7 +57,7 @@ export function LoggedInRedirectRoute<T extends DefaultParams = DefaultParams>({
   if (isLoading) {
     return <Route component={LoadingPage} />;
   }
-  if (!isLoggedIn && !configLoading) {
+  if (!isLoggedIn && !configLoading && config !== undefined) {
     if (config.logged_out_redirect_url) {
       window.location.replace(config.logged_out_redirect_url);
     } else {

frontend/src/editor/share.tsx

@@ -9,8 +9,9 @@ import { HiOutlineClipboardCopy } from 'react-icons/hi';
 import clsx from 'clsx';
 import { DialogSeparator } from '../components/dialog';
 import { Tooltip } from '../components/tooltip';
+import { RequestDataType } from '../api';
 
-type ShareToken = ReturnType<typeof useListShareTokens>['data'][0];
+type ShareToken = RequestDataType<typeof useListShareTokens>[0];
 
 function pad(number: number) {
   if (number < 10) {
@@ -235,7 +236,7 @@ export function ShareModal({
         </section>
         <section className="w-full pt-4 border-t-2 sm:border-t-0 sm:border-l-2 sm:pb-6 sm:pl-6 sm:w-1/2 sm:-mb-6">
           <ShareTokenTable
-            shareTokens={shareTokens}
+            shareTokens={shareTokens !== undefined ? shareTokens : []}
             mutateShareTokens={mutateShareTokens}
             documentId={documentId}
           />

frontend/src/editor/worker_status.tsx

@@ -5,8 +5,9 @@ import { BsRobot } from 'react-icons/bs';
 import clsx from 'clsx';
 import React from 'react';
 import { useMediaQuery } from '../utils/use_media_query';
+import { RequestDataType } from '../api';
 
-type Task = ReturnType<typeof useGetDocumentTasks>['data'][0];
+type Task = RequestDataType<typeof useGetDocumentTasks>[0];
 
 function formatProgress(task: Task | null): string | undefined {
   if (!task) return;
@@ -45,7 +46,7 @@ export function getWorkerStatusString(isWorking: boolean, isFailed: boolean): st
 export function WorkerStatus({ documentId }: { documentId: string }) {
   const { data } = useGetDocumentTasks({ document_id: documentId }, { refreshInterval: 1 });
 
-  return <WorkerStatusWithData data={data} />;
+  return <WorkerStatusWithData data={data !== undefined ? data : []} />;
 }
 
 export function WorkerStatusWithData({ data }: { data: Task[] }) {

frontend/src/pages/new_document.tsx

@@ -13,6 +13,7 @@ import { useGetConfig } from '../api/config';
 import { BlobReader, BlobWriter, ZipReader, Entry } from '@zip.js/zip.js';
 import * as Automerge from '@automerge/automerge';
 import { getDocumentWsUrl } from '../utils/auth';
+import { RequestDataType } from '../api';
 
 type FieldValues = {
   name: string;
@@ -23,7 +24,7 @@ type FieldValues = {
   numberOfSpeakers: number;
 };
 
-type ModelConfig = ReturnType<typeof useGetConfig>['data']['models'];
+type ModelConfig = RequestDataType<typeof useGetConfig>['models'];
 
 export function getLanguages(models: ModelConfig, model: string | undefined): string[] | null {
   if (model === undefined) {
@@ -53,6 +54,7 @@ export function NewDocumentPage() {
   const audioFileRef = useRef<HTMLInputElement | null>(null);
   const [loading, setLoading] = useState(false);
   const { data: config, isLoading } = useGetConfig({});
+  const models = config !== undefined ? config.models : {};
   const {
     register,
     handleSubmit,
@@ -290,7 +292,7 @@ export function NewDocumentPage() {
                       className="flex-grow mr-2"
                     >
                       <Select {...register('model')}>
-                        {Object.values(config.models).map((cur_model) =>
+                        {Object.values(models).map((cur_model) =>
                           cur_model !== undefined ? (
                             <option value={cur_model.id} key={cur_model.id}>
                               {cur_model.name}
@@ -307,7 +309,7 @@ export function NewDocumentPage() {
                       className="flex-grow"
                     >
                       <Select {...register('language')}>
-                        {getLanguages(config.models, model)?.map((lang) => (
+                        {getLanguages(models, model)?.map((lang) => (
                           <option value={lang} key={lang}>
                             {lang}
                           </option>

frontend/src/pages/user_home.tsx

@@ -9,9 +9,10 @@ import { IoMdTrash } from 'react-icons/io';
 import { IconButton } from '../components/button';
 import { WorkerStatusWithData } from '../editor/worker_status';
 import { ComponentProps, useEffect, useState } from 'react';
+import { RequestDataType } from '../api';
 
-type ApiDocument = ReturnType<typeof useListDocuments>['data'][0];
-type Tasks = ReturnType<typeof useListDocuments>['data'][0]['tasks'];
+type ApiDocument = RequestDataType<typeof useListDocuments>[0];
+type Tasks = RequestDataType<typeof useListDocuments>[0]['tasks'];
 
 function getTaskProgress(tasks: Tasks) {
   if (tasks.length == 0) return 0;