improve list view

www/app/[domain]/transcripts/createTranscript.ts

@@ -1,16 +1,17 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
 import { useError } from "../../(errors)/errorContext";
-import { GetTranscript, CreateTranscript } from "../../api";
+import { CreateTranscript } from "../../api";
 import useApi from "../../lib/useApi";
 
-type UseTranscript = {
+type UseCreateTranscript = {
   transcript: GetTranscript | null;
   loading: boolean;
   error: Error | null;
   create: (transcriptCreationDetails: CreateTranscript) => void;
 };
 
-const useCreateTranscript = (): UseTranscript => {
+const useCreateTranscript = (): UseCreateTranscript => {
   const [transcript, setTranscript] = useState<GetTranscript | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);

www/app/[domain]/transcripts/useTranscriptList.ts

@@ -7,6 +7,7 @@ type TranscriptList = {
   response: Page_GetTranscript_ | null;
   loading: boolean;
   error: Error | null;
+  refetch: () => void;
 };
 
 //always protected
@@ -16,6 +17,15 @@ const useTranscriptList = (page: number): TranscriptList => {
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
   const api = useApi();
+  const [refetchCount, setRefetchCount] = useState(0);
+
+  const refetch = () => {
+    setRefetchCount(refetchCount + 1);
+  };
+
+  useEffect(() => {
+    setResponse(null);
+  }, [page]);
 
   useEffect(() => {
     if (!api) return;
@@ -32,9 +42,9 @@ const useTranscriptList = (page: number): TranscriptList => {
         setError(err);
         setErrorState(err);
       });
-  }, [!api, page]);
+  }, [!api, page, refetchCount]);
 
-  return { response, loading, error };
+  return { response, loading, error, refetch };
 };
 
 export default useTranscriptList;