selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

www: add transcripts list

Browse Source
This commit is contained in:
Mathieu Virbel
2023-10-18 18:58:27 +02:00
committed by Mathieu Virbel
parent ef2f579fc1
commit 76f95aad66
1 changed files with 69 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
www/app/browse/page.tsx
View File

@@ -9,21 +9,35 @@ import {
import { Title } from "../lib/textComponents"; import { Title } from "../lib/textComponents";
import Pagination from "./pagination"; import Pagination from "./pagination";
import Link from "next/link"; import Link from "next/link";
import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear } from "@fortawesome/free-solid-svg-icons";
export default function TranscriptBrowser() { export default function TranscriptBrowser() {
const api = getApi(); const api = getApi();
const [results, setResults] = useState<PageGetTranscript | null>(null); const [results, setResults] = useState<PageGetTranscript | null>(null);
const [page, setPage] = useState<number>(1); const [page, setPage] = useState<number>(1);
const [isLoading, setIsLoading] = useState<boolean>(false);
const isAuthenticated = useFiefIsAuthenticated();
useEffect(() => { useEffect(() => {
api.v1TranscriptsList({ page }).then((response) => { if (!isAuthenticated) return;
// issue with API layer, conversion for items is not happening setIsLoading(true);
response.items = response.items.map((item) => api
GetTranscriptFromJSON(item), .v1TranscriptsList({ page })
); .then((response) => {
setResults(response); // issue with API layer, conversion for items is not happening
}); response.items = response.items.map((item) =>
}, [page]); GetTranscriptFromJSON(item),
);
setResults(response);
setIsLoading(false);
})
.catch(() => {
setResults(null);
setIsLoading(false);
});
}, [page, isAuthenticated]);
return ( return (
<div> <div>
@@ -45,43 +59,57 @@ export default function TranscriptBrowser() {
<div /** center and max 900px wide */ className="mx-auto max-w-[900px]"> <div /** center and max 900px wide */ className="mx-auto max-w-[900px]">
<div className="grid grid-cols-1 gap-2 lg:gap-4 h-full"> <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full">
{results?.items.map((item: GetTranscript) => ( {isLoading ? (
<div <FontAwesomeIcon
key={item.id} icon={faGear}
className="flex flex-col bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4" className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
> />
<div className="flex flex-col"> ) : (
<div className="flex flex-row gap-2 items-start"> <>
<Link {results === null ? (
href={`/transcripts/${item.id}`} <div className="text-gray-500">No transcripts found.</div>
className="text-1xl font-semibold flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2" ) : (
> <></>
{item.title || item.name} )}
</Link> {results?.items.map((item: GetTranscript) => (
<div
key={item.id}
className="flex flex-col bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4"
>
<div className="flex flex-col">
<div className="flex flex-row gap-2 items-start">
<Link
href={`/transcripts/${item.id}`}
className="text-1xl font-semibold flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
>
{item.title || item.name}
</Link>
{item.locked ? ( {item.locked ? (
<div className="inline-block bg-red-500 text-white px-2 py-1 rounded-full text-xs font-semibold"> <div className="inline-block bg-red-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
Locked Locked
</div> </div>
) : ( ) : (
<></> <></>
)} )}
{item.sourceLanguage ? ( {item.sourceLanguage ? (
<div className="inline-block bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-semibold"> <div className="inline-block bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
{item.sourceLanguage} {item.sourceLanguage}
</div>
) : (
<></>
)}
</div> </div>
) : ( <div className="text-xs text-gray-700">
<></> {new Date(item.createdAt).toLocaleDateString("en-US")}
)} </div>
<div className="text-sm">{item.shortSummary}</div>
</div>
</div> </div>
<div className="text-xs text-gray-700"> ))}
{new Date(item.createdAt).toLocaleDateString("en-US")} </>
</div> )}
<div className="text-sm">{item.shortSummary}</div>
</div>
</div>
))}
</div> </div>
</div> </div>
</div> </div>