From 76f95aad667196acaee3007f7404a19311914eee Mon Sep 17 00:00:00 2001
From: Mathieu Virbel <mat@meltingrocks.com>
Date: Wed, 18 Oct 2023 18:58:27 +0200
Subject: [PATCH] www: add transcripts list

---
 www/app/browse/page.tsx | 110 +++++++++++++++++++++++++---------------
 1 file changed, 69 insertions(+), 41 deletions(-)

diff --git a/www/app/browse/page.tsx b/www/app/browse/page.tsx
index 9c6db369..10c7d936 100644
--- a/www/app/browse/page.tsx
+++ b/www/app/browse/page.tsx
@@ -9,21 +9,35 @@ import {
 import { Title } from "../lib/textComponents";
 import Pagination from "./pagination";
 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() {
   const api = getApi();
   const [results, setResults] = useState<PageGetTranscript | null>(null);
   const [page, setPage] = useState<number>(1);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isAuthenticated = useFiefIsAuthenticated();
 
   useEffect(() => {
-    api.v1TranscriptsList({ page }).then((response) => {
-      // issue with API layer, conversion for items is not happening
-      response.items = response.items.map((item) =>
-        GetTranscriptFromJSON(item),
-      );
-      setResults(response);
-    });
-  }, [page]);
+    if (!isAuthenticated) return;
+    setIsLoading(true);
+    api
+      .v1TranscriptsList({ page })
+      .then((response) => {
+        // issue with API layer, conversion for items is not happening
+        response.items = response.items.map((item) =>
+          GetTranscriptFromJSON(item),
+        );
+        setResults(response);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setResults(null);
+        setIsLoading(false);
+      });
+  }, [page, isAuthenticated]);
 
   return (
     <div>
@@ -45,43 +59,57 @@ export default function TranscriptBrowser() {
 
       <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">
-          {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>
+          {isLoading ? (
+            <FontAwesomeIcon
+              icon={faGear}
+              className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
+            />
+          ) : (
+            <>
+              {results === null ? (
+                <div className="text-gray-500">No transcripts found.</div>
+              ) : (
+                <></>
+              )}
+              {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 ? (
-                    <div className="inline-block bg-red-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
-                      Locked
-                    </div>
-                  ) : (
-                    <></>
-                  )}
+                      {item.locked ? (
+                        <div className="inline-block bg-red-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
+                          Locked
+                        </div>
+                      ) : (
+                        <></>
+                      )}
 
-                  {item.sourceLanguage ? (
-                    <div className="inline-block bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
-                      {item.sourceLanguage}
+                      {item.sourceLanguage ? (
+                        <div className="inline-block bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-semibold">
+                          {item.sourceLanguage}
+                        </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 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>