mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
Mathieu Virbel
fc38345d65
* feat: limit the amount of transcripts to 10 by default * feat: separate page into different component, greatly improving the loading and reactivity * fix: current implementation immediately invokes the onDelete and onReprocess From pr-agent-monadical: Suggestion: The current implementation immediately invokes the onDelete and onReprocess functions when the component renders, rather than when the menu items are clicked. This can cause unexpected behavior and potential memory leaks. Use callback functions that only execute when the menu items are actually clicked. [possible issue, importance: 9]
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { Box, Stack, Text, Flex, Link, Spinner } from "@chakra-ui/react";
|
|
import NextLink from "next/link";
|
|
import { GetTranscriptMinimal } from "../../../api";
|
|
import { formatTimeMs, formatLocalDate } from "../../../lib/time";
|
|
import TranscriptStatusIcon from "./TranscriptStatusIcon";
|
|
import TranscriptActionsMenu from "./TranscriptActionsMenu";
|
|
|
|
interface TranscriptCardsProps {
|
|
transcripts: GetTranscriptMinimal[];
|
|
onDelete: (transcriptId: string) => (e: any) => void;
|
|
onReprocess: (transcriptId: string) => (e: any) => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export default function TranscriptCards({
|
|
transcripts,
|
|
onDelete,
|
|
onReprocess,
|
|
loading,
|
|
}: TranscriptCardsProps) {
|
|
return (
|
|
<Box display={{ base: "block", md: "none" }} position="relative">
|
|
{loading && (
|
|
<Flex
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
bottom={0}
|
|
bg="rgba(255, 255, 255, 0.8)"
|
|
zIndex={10}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<Spinner size="xl" color="gray.700" thickness="4px" />
|
|
</Flex>
|
|
)}
|
|
<Box
|
|
opacity={loading ? 0.9 : 1}
|
|
pointerEvents={loading ? "none" : "auto"}
|
|
transition="opacity 0.2s ease-in-out"
|
|
>
|
|
<Stack spacing={2}>
|
|
{transcripts.map((item) => (
|
|
<Box key={item.id} borderWidth={1} p={4} borderRadius="md">
|
|
<Flex justify="space-between" alignItems="flex-start" gap="2">
|
|
<Box>
|
|
<TranscriptStatusIcon status={item.status} />
|
|
</Box>
|
|
<Box flex="1">
|
|
<Link
|
|
as={NextLink}
|
|
href={`/transcripts/${item.id}`}
|
|
fontWeight="bold"
|
|
display="block"
|
|
>
|
|
{item.title || "Unnamed Transcript"}
|
|
</Link>
|
|
<Text>
|
|
Source:{" "}
|
|
{item.source_kind === "room"
|
|
? item.room_name
|
|
: item.source_kind}
|
|
</Text>
|
|
<Text>Date: {formatLocalDate(item.created_at)}</Text>
|
|
<Text>Duration: {formatTimeMs(item.duration)}</Text>
|
|
</Box>
|
|
<TranscriptActionsMenu
|
|
transcriptId={item.id}
|
|
onDelete={onDelete}
|
|
onReprocess={onReprocess}
|
|
/>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|