From 23b52a6d1fa9e075a0766a4efbed65971d758d40 Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 15 Jan 2024 15:54:02 +0100 Subject: [PATCH] change browse page to new design --- www/app/[domain]/browse/page.tsx | 281 ++++++++++-------- www/app/[domain]/layout.tsx | 29 +- .../[domain]/transcripts/useTranscriptList.ts | 4 - www/yarn.lock | 5 + 4 files changed, 178 insertions(+), 141 deletions(-) diff --git a/www/app/[domain]/browse/page.tsx b/www/app/[domain]/browse/page.tsx index 7c7f3e06..6303f1a0 100644 --- a/www/app/[domain]/browse/page.tsx +++ b/www/app/[domain]/browse/page.tsx @@ -2,70 +2,83 @@ import React, { useState } from "react"; import { GetTranscript } from "../../api"; -import { Title } from "../../lib/textComponents"; import Pagination from "./pagination"; import Link from "next/link"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faCheck, - faGear, - faMicrophone, - faStar, - faTrash, - faX, -} from "@fortawesome/free-solid-svg-icons"; +import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa"; +import { MdError } from "react-icons/md"; import useTranscriptList from "../transcripts/useTranscriptList"; import { formatTime } from "../../lib/time"; -import getApi from "../../api"; +import useApi from "../../lib/useApi"; import { useError } from "../../(errors)/errorContext"; +import { + Flex, + Spinner, + Heading, + Button, + Card, + CardBody, + CardFooter, + Stack, + Text, + Icon, + Grid, + Divider, + Popover, + PopoverTrigger, + PopoverContent, + PopoverArrow, + PopoverCloseButton, + PopoverHeader, + PopoverBody, + PopoverFooter, +} from "@chakra-ui/react"; +import { PlusSquareIcon } from "@chakra-ui/icons"; +// import { useFiefUserinfo } from "@fief/fief/nextjs/react"; export default function TranscriptBrowser() { const [page, setPage] = useState(1); const { loading, response, refetch } = useTranscriptList(page); - const [transcriptToDeleteId, setTranscriptToDeleteId] = useState(""); const [deletionLoading, setDeletionLoading] = useState(false); const [deletedItems, setDeletedItems] = useState([]); - const api = getApi(); + const api = useApi(); const { setError } = useError(); + // Todo: fief add name field to userinfo + // const user = useFiefUserinfo(); + // console.log(user); + if (loading && !response) return ( -
- -
+ + + ); if (!loading && !response) return ( -
- No transcripts found, but you can  - - record a meeting - -  to get started. -
+ + + 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) => { + const prevent = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); + }; + + const handleDeleteTranscript = (transcriptToDeleteId) => (e) => { if (!deletionLoading) { api - ?.v1TranscriptDelete({ transcriptId: transcriptToDeleteId }) + ?.v1TranscriptDelete(transcriptToDeleteId) .then(() => { setDeletionLoading(false); setDeletedItems([...deletedItems, transcriptToDeleteId]); - setTranscriptToDeleteId(""); refetch(); }) .catch((err) => { @@ -74,110 +87,118 @@ export default function TranscriptBrowser() { }); } }; - const cancelDelete = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - setTranscriptToDeleteId(""); - }; return ( -
-
-
- Past transcripts + + + {/* {user?.fields?.name}'s Meetings */} + Your Meetings + + {loading && } + -
-
- {response?.items - .filter((item) => !deletedItems.includes(item.id)) - .map((item: GetTranscript) => ( - -
-
-

- {item.title || item.name} -

- {item.locked && ( -
- Locked -
- )} + + + - {item.status == "ended" && ( - - )} - {item.status == "error" && ( - - )} - {item.status == "idle" && ( - - )} - {item.status == "processing" && ( - - )} - {item.status == "recording" && ( - - )} + + {response?.items + .filter((item) => !deletedItems.includes(item.id)) + .map((item: GetTranscript) => ( + + + + {item.title || item.name || "Unamed Transcript"} - {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.

- - - -
-
- - ))} -
-
-
+ {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" && ( + <> + + + + + + + + + + + Are you sure you want to delete {item.title} ? + + + This action is not reversible. + + + + + + + + + )} + + ))} + + ); } diff --git a/www/app/[domain]/layout.tsx b/www/app/[domain]/layout.tsx index cce65fc3..95d0f544 100644 --- a/www/app/[domain]/layout.tsx +++ b/www/app/[domain]/layout.tsx @@ -6,7 +6,6 @@ import UserInfo from "../(auth)/userInfo"; import { ErrorProvider } from "../(errors)/errorContext"; import ErrorMessage from "../(errors)/errorMessage"; import Image from "next/image"; -import Link from "next/link"; import About from "../(aboutAndPrivacy)/about"; import Privacy from "../(aboutAndPrivacy)/privacy"; import { DomainContextProvider } from "./domainContext"; @@ -15,6 +14,8 @@ import { ErrorBoundary } from "@sentry/nextjs"; import { cookies } from "next/dist/client/components/headers"; import { SESSION_COOKIE_NAME } from "../lib/fief"; import { Providers } from "../providers"; +import NextLink from "next/link"; +import { Container, Flex, Link } from "@chakra-ui/react"; const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] }); @@ -91,13 +92,25 @@ export default async function RootLayout({ children, params }: LayoutProps) { -
-
+ {/* Logo on the left */} @@ -120,6 +133,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
{/* Text link on the right */} @@ -130,6 +144,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {  ยท  @@ -158,10 +173,10 @@ export default async function RootLayout({ children, params }: LayoutProps) { <> )}
-
+ {children} -
+ diff --git a/www/app/[domain]/transcripts/useTranscriptList.ts b/www/app/[domain]/transcripts/useTranscriptList.ts index 15e17372..2cfab374 100644 --- a/www/app/[domain]/transcripts/useTranscriptList.ts +++ b/www/app/[domain]/transcripts/useTranscriptList.ts @@ -23,10 +23,6 @@ const useTranscriptList = (page: number): TranscriptList => { setRefetchCount(refetchCount + 1); }; - useEffect(() => { - setResponse(null); - }, [page]); - useEffect(() => { if (!api) return; setLoading(true); diff --git a/www/yarn.lock b/www/yarn.lock index b2d55ac1..baac24ec 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -4674,6 +4674,11 @@ react-focus-lock@^2.9.4: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-icons@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee" + integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"