diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx index 0a180143..7c7f3e06 100644 --- a/www/app/[domain]/browse/page.tsx +++ b/www/app/[domain]/browse/page.tsx @@ -6,81 +6,176 @@ import { Title } from "../../lib/textComponents"; import Pagination from "./pagination"; import Link from "next/link"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faGear } from "@fortawesome/free-solid-svg-icons"; +import { + faCheck, + faGear, + faMicrophone, + faStar, + faTrash, + faX, +} from "@fortawesome/free-solid-svg-icons"; import useTranscriptList from "../transcripts/useTranscriptList"; +import { formatTime } from "../../lib/time"; +import getApi from "../../api"; +import { useError } from "../../(errors)/errorContext"; export default function TranscriptBrowser() { const [page, setPage] = useState(1); - const { loading, response } = useTranscriptList(page); + const { loading, response, refetch } = useTranscriptList(page); + const [transcriptToDeleteId, setTranscriptToDeleteId] = useState(""); + const [deletionLoading, setDeletionLoading] = useState(false); + const [deletedItems, setDeletedItems] = useState([]); + const api = getApi(); + const { setError } = useError(); - return ( -
-
- Past transcripts - +
+ ); - {loading && ( -
- + No transcripts found, but you can  + + record a meeting + +  to get started. +
+ ); + + const handleDelete = + (id: string) => (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + setTranscriptToDeleteId(id); + }; + + const deleteTranscript = () => (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!deletionLoading) { + api + ?.v1TranscriptDelete({ transcriptId: transcriptToDeleteId }) + .then(() => { + setDeletionLoading(false); + setDeletedItems([...deletedItems, transcriptToDeleteId]); + setTranscriptToDeleteId(""); + refetch(); + }) + .catch((err) => { + setDeletionLoading(false); + setError(err, "There was an error deleting the transcript"); + }); + } + }; + const cancelDelete = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + setTranscriptToDeleteId(""); + }; + + return ( +
+
+
+ Past transcripts +
- )} - {!loading && !response && ( -
- No transcripts found, but you can  - - record a meeting - -  to get started. -
- )} -
-
- {response?.items.map((item: GetTranscript) => ( -
-
-
- - {item.title || item.name} - +
+ {response?.items + .filter((item) => !deletedItems.includes(item.id)) + .map((item: GetTranscript) => ( + +
+
+

+ {item.title || item.name} +

- {item.locked ? ( -
- Locked -
- ) : ( - <> - )} + {item.locked && ( +
+ Locked +
+ )} - {item.source_language ? ( -
- {item.source_language} + {item.status == "ended" && ( + + )} + {item.status == "error" && ( + + )} + {item.status == "idle" && ( + + )} + {item.status == "processing" && ( + + )} + {item.status == "recording" && ( + + )} + + {item.sourceLanguage && ( +
+ {item.sourceLanguage} +
+ )} +
+
+
+ {new Date(item.createdAt).toLocaleDateString("en-US")} + {"\u00A0"}-{"\u00A0"} + {formatTime(Math.floor(item.duration))} +
{item.shortSummary}
- ) : ( - <> - )} + {item.status !== "ended" && ( + + )} + +

Are you sure you want to delete {item.title} ?

+

This action is not reversible.

+ + + +
-
- {new Date(item.created_at).toLocaleDateString("en-US")} -
-
{item.short_summary}
-
-
- ))} + + ))}
diff --git a/www/app/[domain]/browse/pagination.tsx b/www/app/[domain]/browse/pagination.tsx index e10d5321..721d1747 100644 --- a/www/app/[domain]/browse/pagination.tsx +++ b/www/app/[domain]/browse/pagination.tsx @@ -1,3 +1,6 @@ +import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + type PaginationProps = { page: number; setPage: (page: number) => void; @@ -40,13 +43,13 @@ export default function Pagination(props: PaginationProps) { return (
{pageNumbers.map((pageNumber) => ( @@ -62,13 +65,13 @@ export default function Pagination(props: PaginationProps) { ))}
); diff --git a/www/app/[domain]/transcripts/createTranscript.ts b/www/app/[domain]/transcripts/createTranscript.ts index 8435e6c2..6ad6ad6e 100644 --- a/www/app/[domain]/transcripts/createTranscript.ts +++ b/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(null); const [loading, setLoading] = useState(false); const [error, setErrorState] = useState(null); diff --git a/www/app/[domain]/transcripts/useTranscriptList.ts b/www/app/[domain]/transcripts/useTranscriptList.ts index 7621a9f8..15e17372 100644 --- a/www/app/[domain]/transcripts/useTranscriptList.ts +++ b/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(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;