From 20681b081041154ca32871ff4724636843f9812c Mon Sep 17 00:00:00 2001 From: Sara Date: Thu, 25 Jan 2024 13:51:22 +0100 Subject: [PATCH] Improvements based on feedback --- www/app/[domain]/browse/page.tsx | 248 +++++++++++++++++++++---------- www/app/lib/expandableText.tsx | 46 ++++++ 2 files changed, 214 insertions(+), 80 deletions(-) create mode 100644 www/app/lib/expandableText.tsx diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx index 560b8c42..211c927b 100644 --- a/www/app/[domain]/browse/page.tsx +++ b/www/app/[domain]/browse/page.tsx @@ -1,9 +1,9 @@ "use client"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { GetTranscript } from "../../api"; import Pagination from "./pagination"; -import Link from "next/link"; +import NextLink from "next/link"; import { FaGear } from "react-icons/fa6"; import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa"; import { MdError } from "react-icons/md"; @@ -11,12 +11,14 @@ import useTranscriptList from "../transcripts/useTranscriptList"; import { formatTime } from "../../lib/time"; import useApi from "../../lib/useApi"; import { useError } from "../../(errors)/errorContext"; +import { FaEllipsisVertical } from "react-icons/fa6"; import { Flex, Spinner, Heading, Button, Card, + Link, CardBody, CardFooter, Stack, @@ -33,8 +35,22 @@ import { PopoverBody, PopoverFooter, IconButton, + Spacer, + Menu, + MenuButton, + MenuItem, + MenuList, + AlertDialog, + AlertDialogOverlay, + AlertDialogContent, + AlertDialogHeader, + AlertDialogBody, + AlertDialogFooter, + keyframes, + Tooltip, } from "@chakra-ui/react"; import { PlusSquareIcon } from "@chakra-ui/icons"; +import { ExpandableText } from "../../lib/expandableText"; // import { useFiefUserinfo } from "@fief/fief/nextjs/react"; export default function TranscriptBrowser() { @@ -43,11 +59,19 @@ export default function TranscriptBrowser() { const [deletionLoading, setDeletionLoading] = useState(false); const api = useApi(); const { setError } = useError(); + const cancelRef = React.useRef(null); + const [transcriptToDeleteId, setTranscriptToDeleteId] = + React.useState(); + const [deletedItemIds, setDeletedItemIds] = React.useState(); // Todo: fief add name field to userinfo // const user = useFiefUserinfo(); // console.log(user); + useEffect(() => { + setDeletedItemIds([]); + }, [page, response]); + if (loading && !response) return ( @@ -67,6 +91,7 @@ export default function TranscriptBrowser() { ); + const onCloseDeletion = () => setTranscriptToDeleteId(undefined); const handleDeleteTranscript = (transcriptToDeleteId) => (e) => { e.stopPropagation(); @@ -77,6 +102,11 @@ export default function TranscriptBrowser() { .then(() => { setDeletionLoading(false); refetch(); + onCloseDeletion(); + setDeletedItemIds((deletedItemIds) => [ + deletedItemIds, + ...transcriptToDeleteId, + ]); }) .catch((err) => { setDeletionLoading(false); @@ -94,23 +124,27 @@ export default function TranscriptBrowser() { overflowY="scroll" maxH="100%" > - + {/* {user?.fields?.name}'s Meetings */} Your Meetings - - {loading || (deletionLoading && )} + {loading || (deletionLoading && )} - + + - - + - {response?.items.map((item: GetTranscript) => ( - - - - {item.title || item.name || "Unamed Transcript"} + {response?.items + .filter((i) => !deletedItemIds?.includes(i.id)) + .map((item: GetTranscript) => ( + + + + {item.status == "ended" && ( + + + + + + )} + {item.status == "error" && ( + + + + + + )} + {item.status == "idle" && ( + + + + + + )} + {item.status == "processing" && ( + + + + + + )} + {item.status == "recording" && ( + + + + + + )} + + + {item.title || item.name || "Unamed Transcript"} + + - {item.status == "ended" && ( - - )} - {item.status == "error" && ( - - )} - {item.status == "idle" && ( - - )} - {item.status == "processing" && ( - - )} - {item.status == "recording" && ( - - )} - - - - {new Date(item.created_at).toLocaleString("en-US")} - {"\u00A0"}-{"\u00A0"} - {formatTime(Math.floor(item.duration / 1000))} - - {item.short_summary} - - - - {item.status !== "ended" && ( - <> - - - - - + + } + aria-label="actions" + /> + + } - aria-label="Delete" - /> - - - - - - Are you sure you want to delete {item.title} ? - - This action is not reversible. - - - - - - - - )} - - ))} + onClick={() => setTranscriptToDeleteId(item.id)} + icon={} + > + Delete + + + + + + Delete{" "} + {item.title || item.name || "Unamed Transcript"} + + + + Are you sure? You can't undo this action + afterwards. + + + + + + + + + + + + + + + {new Date(item.created_at).toLocaleString("en-US")} + {"\u00A0"}-{"\u00A0"} + {formatTime(Math.floor(item.duration / 1000))} + + + {item.short_summary} + + + + + ))} ); diff --git a/www/app/lib/expandableText.tsx b/www/app/lib/expandableText.tsx new file mode 100644 index 00000000..1925d1f7 --- /dev/null +++ b/www/app/lib/expandableText.tsx @@ -0,0 +1,46 @@ +import type { BoxProps } from "@chakra-ui/react"; +import { Box, Button, Text } from "@chakra-ui/react"; +import React, { forwardRef, useState } from "react"; + +interface Props extends BoxProps { + children: React.ReactNode; + noOfLines: number; +} + +export const ExpandableText = forwardRef( + ({ children, noOfLines, ...rest }, ref) => { + const [expandedCount, setExpandedCount] = useState( + noOfLines, + ); + const [isClicked, setIsClicked] = useState(false); + const handleToggle = () => { + setIsClicked(true); + setExpandedCount(expandedCount ? undefined : noOfLines); + }; + + const inputRef = React.useRef(null); + + const isTextClamped = + (inputRef.current?.scrollHeight as number) > + (inputRef.current?.clientHeight as number) || isClicked; + + return ( + + + {children} + + + + ); + }, +); + +ExpandableText.displayName = "ExpandableText";