v0.1.4 (#20)

Error Handling • Enhanced error handling for episode loading and updated translations for error messages (close #17). Localization • Added the accept-language package to improve locale detection. • Updated login page text and enhanced translations in multiple languages. UI and Styling • Refactored footer text styles using Tailwind Variants for improved readability and maintainability. • Refactored episode page to conditionally render the PDF link and restore the source papers section.
nae-lab · Nov 5, 2024 · d3b1122 · d3b1122
1 parent 760c71e
commit d3b1122
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # PaperWave Web
 
+Try the demo at https://paperwave.app
+
 ## Introduction
 
 This repository contains the source code for the PaperWave Web.

diff --git a/app/(protected)/channels/[channelId]/page.tsx b/app/(protected)/channels/[channelId]/page.tsx
@@ -8,20 +8,27 @@ import { useTranslations } from "next-intl";
 
 import Player from "@/components/player";
 import { getEpisodeIds } from "@/lib/episodes";
+import { cn } from "@/lib/cn";
+import { pageTitle } from "@/components/primitives";
 
 const ProgramsPage = ({ params }: { params: { channelId: string } }) => {
   const t = useTranslations("Episodes");
   const [episodeIds, setEpisodeIds] = React.useState<string[]>([]);
   const [episodesReady, setEpisodesReady] = React.useState(false);
+  const [getError, setGetError] = React.useState<string | null>(null);
 
   React.useEffect(() => {
-    getEpisodeIds(params.channelId).then((_episodeIds) => {
-      setEpisodeIds(_episodeIds);
-      setEpisodesReady(true);
-    });
-  }, []);
+    getEpisodeIds(params.channelId)
+      .then((_episodeIds) => {
+        setEpisodeIds(_episodeIds);
+        setEpisodesReady(true);
+      })
+      .catch((error: Error) => {
+        setGetError(error.message);
+      });
+  }, [params.channelId]);
 
-  const contents = episodesReady ? (
+  const episodePlayers = episodesReady ? (
     <div className="flex flex-col items-center justify-start gap-5">
       {episodeIds.map((episodeId) => {
         return <Player key={episodeId} episodeId={episodeId} />;
@@ -33,6 +40,17 @@ const ProgramsPage = ({ params }: { params: { channelId: string } }) => {
     </div>
   );
 
+  const contents = getError ? (
+    <div className="flex flex-col items-center justify-start gap-5">
+      <h1 className={cn(pageTitle(), "text-danger-500")}>
+        {t("Failed to load episodes")}
+      </h1>
+      <p className="text-default-900">{getError}</p>
+    </div>
+  ) : (
+    episodePlayers
+  );
+
   return (
     <div className="flex h-full w-full flex-col flex-nowrap items-stretch justify-start gap-3.5">
       <div className="flex justify-start">

diff --git a/app/(protected)/episodes/[episodeId]/page.tsx b/app/(protected)/episodes/[episodeId]/page.tsx
@@ -14,6 +14,7 @@ import {
   TableBody,
   TableRow,
   TableCell,
+  Link,
 } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 import { TableHeader } from "react-stately";
@@ -53,7 +54,7 @@ const ProgramsPage = ({ params }: { params: { episodeId: string } }) => {
 
   React.useEffect(() => {
     if (episode === null) {
-      router.push("/not-found");
+      // router.push("/not-found");
     }
   }, [episode]);
 
@@ -143,8 +144,9 @@ const ProgramsPage = ({ params }: { params: { episodeId: string } }) => {
                   </ul>
                 </TableCell>
               </TableRow>
-              {/* <TableRow>
-                  <TableCell>PDF URL</TableCell>
+              {episode.uid === user?.uid ? (
+                <TableRow>
+                  <TableCell>PDF</TableCell>
                   <TableCell>
                     <Link
                       isExternal
@@ -156,7 +158,10 @@ const ProgramsPage = ({ params }: { params: { episodeId: string } }) => {
                       </p>
                     </Link>
                   </TableCell>
-                </TableRow> */}
+                </TableRow>
+              ) : (
+                <></>
+              )}
             </TableBody>
           </Table>
         </>
@@ -253,8 +258,8 @@ const ProgramsPage = ({ params }: { params: { episodeId: string } }) => {
             </TableRow> */}
           </TableBody>
         </Table>
-        {/* <h2 className={sectionTitle()}>{t("Source Papers")}</h2> */}
-        {/* {papersInfo} */}
+        <h2 className={sectionTitle()}>{t("Source Papers")}</h2>
+        {papersInfo}
         {isUserAdmin === true ? debugInfo : null}
       </Skeleton>
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Metadata, Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages, getTranslations } from "next-intl/server";
 import { Link } from "@nextui-org/react";
+import { tv } from "tailwind-variants";
 
 import { Providers } from "./providers";
 
@@ -42,6 +43,18 @@ export const viewport: Viewport = {
   ],
 };
 
+const footerTextStyle = tv({
+  base: "text-xs text-default-500",
+  variants: {
+    inherit: {
+      true: "text-inherit",
+    },
+    center: {
+      true: "text-center",
+    },
+  },
+});
+
 export default async function RootLayout({
   children,
 }: {
@@ -71,7 +84,7 @@ export default async function RootLayout({
               </main>
               <footer className="w-full flex-col items-stretch justify-center py-3">
                 <div className="my-1 flex justify-center">
-                  <p className="mx-2 text-center text-xs text-default-500">
+                  <p className={footerTextStyle({ center: true })}>
                     &copy;{" "}
                     <Link
                       isExternal
@@ -86,18 +99,20 @@ export default async function RootLayout({
                 </div>
                 <div className="my-1 flex justify-center gap-4">
                   <Link href="/acknowledgements">
-                    <p className="text-xs text-default-500 text-inherit">
+                    <p className={footerTextStyle({ inherit: true })}>
                       {t("Acknowledgements.Acknowledgements")}
                     </p>
                   </Link>
+                  <Link isExternal href={t("Footer.FeedbackURL")}>
+                    <p className={footerTextStyle({ inherit: true })}>
+                      {t("Footer.Feedback")}
+                    </p>
+                  </Link>
                   <Link
                     isExternal
-                    showAnchorIcon
-                    href={t("Footer.FeedbackURL")}
+                    href="https://github.com/nae-lab/paperwave-web"
                   >
-                    <p className="text-xs text-default-500 text-inherit">
-                      {t("Footer.Feedback")}
-                    </p>
+                    <p className={footerTextStyle({ inherit: true })}>GitHub</p>
                   </Link>
                 </div>
               </footer>

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -13,7 +13,7 @@ import { useUserSession } from "@/lib/firebase/userSession";
 import { set } from "zod";
 
 export default function Login() {
-  const t = useTranslations();
+  const t = useTranslations("Login");
   const currentUserJSON = getCookie("user")?.toString() || null;
   const { user, userLoaded } = useUserSession(currentUserJSON);
   const router = useRouter();
@@ -35,10 +35,17 @@ export default function Login() {
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
       <div className="inline-block max-w-lg justify-center text-center">
         <h1 className={title({ color: "foreground", size: "lg" })}>
-          {t("Navbar.login")}
+          {t("Login Signup")}
         </h1>
         <p className="mt-4">
-          {t("Login.Click the button below to sign in with Google")}
+          {t(
+            "You can try PaperWave for free as a demonstration of our research output",
+          )}
+        </p>
+        <p className="mt-1">
+          {t(
+            "Please log in with your Google account PaperWave will show you a list of your podcasts",
+          )}
         </p>
       </div>
 
@@ -51,7 +58,7 @@ export default function Login() {
           })}
           onPress={handleSignIn}
         >
-          {t("Login.Login with Google")}
+          {t("Login with Google")}
         </Button>
       </div>
     </section>

diff --git a/components/navbar/usermenu.tsx b/components/navbar/usermenu.tsx
@@ -3,17 +3,18 @@
 import "client-only";
 
 import {
+  Avatar,
   Button,
+  button as buttonStyles,
   Dropdown,
   DropdownTrigger,
-  Avatar,
+  Link,
   Skeleton,
 } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 
 import UserMenuDropdownMenu from "./usermenu-dropdownmenu";
 
-import { signInWithGoogle } from "@/lib/firebase/auth";
 import { useUserSession } from "@/lib/firebase/userSession";
 
 export default function UserMenu({
@@ -26,9 +27,12 @@ export default function UserMenu({
 
   if (!user) {
     return (
-      <Button color="primary" radius="full" onPress={signInWithGoogle}>
+      <Link
+        className={buttonStyles({ color: "primary", radius: "full" })}
+        href="/login"
+      >
         {t("login")}
-      </Button>
+      </Link>
     );
   } else {
     const userAvatar = user?.photoURL ? (

diff --git a/messages/en.json b/messages/en.json
@@ -24,7 +24,8 @@
     "RecordingDescription": "You can record a new episode from research paper PDFs."
   },
   "Episodes": {
-    "Episodes List": "Episodes"
+    "Episodes List": "Episodes",
+    "Failed to load episodes": "Failed to load episodes"
   },
   "Episode Details": {
     "Episode Information": "Episode Information",
@@ -78,7 +79,9 @@
     "Currently, there are no settings available": "Currently, there are no settings available."
   },
   "Login": {
-    "Click the button below to sign in with Google": "Click the button below to sign in with Google.",
+    "Login Signup": "Login / Signup",
+    "You can try PaperWave for free as a demonstration of our research output": "You can try PaperWave for free as a demonstration of our research output.",
+    "Please log in with your Google account PaperWave will show you a list of your podcasts": "Please log in with your Google account. PaperWave will show you a list of your podcasts.",
     "Login with Google": "Login with Google"
   },
   "Acknowledgements": {

diff --git a/messages/ja.json b/messages/ja.json
@@ -24,7 +24,8 @@
     "RecordingDescription": "論文PDFから新しいエピソードを収録します。"
   },
   "Episodes": {
-    "Episodes List": "エピソード一覧"
+    "Episodes List": "エピソード一覧",
+    "Failed to load episodes": "エピソードの読み込みに失敗しました"
   },
   "Episode Details": {
     "Episode Information": "エピソード情報",
@@ -78,7 +79,9 @@
     "Currently, there are no settings available": "現在、利用可能な設定はありません。"
   },
   "Login": {
-    "Click the button below to sign in with Google": "以下のボタンをクリックしてGoogleでサインインしてください。",
+    "Login Signup": "ログイン・登録",
+    "You can try PaperWave for free as a demonstration of our research output": "PaperWaveは研究成果のデモとして，無料でお試しいただけます．",
+    "Please log in with your Google account PaperWave will show you a list of your podcasts": "Googleアカウントでのログインをお願いします．あなたが作成したポッドキャスト一覧を表示するためにログインが必要です．",
     "Login with Google": "Googleでログイン"
   },
   "Acknowledgements": {

diff --git a/messages/ko.json b/messages/ko.json
@@ -24,7 +24,8 @@
     "RecordingDescription": "논문 PDF에서 새로운 에피소드를 녹음할 수 있습니다."
   },
   "Episodes": {
-    "Episodes List": "에피소드 목록"
+    "Episodes List": "에피소드 목록",
+    "Failed to load episodes": "에피소드를 로드하지 못함"
   },
   "Episode Details": {
     "Episode Information": "에피소드 정보",
@@ -78,7 +79,9 @@
     "Currently, there are no settings available": "현재 사용 가능한 설정이 없습니다."
   },
   "Login": {
-    "Click the button below to sign in with Google": "아래 버튼을 클릭하여 Google 계정으로 로그인하세요.",
+    "Login Signup": "로그인 / 가입",
+    "You can try PaperWave for free as a demonstration of our research output": "당사의 연구 결과물을 데모로 무료로 사용해 볼 수 있습니다.",
+    "Please log in with your Google account PaperWave will show you a list of your podcasts": "Google 계정으로 로그인해 주세요. PaperWave는 당신의 팟캐스트 목록을 보여줄 것입니다.",
     "Login with Google": "Google 계정으로 로그인"
   },
   "Acknowledgements": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paperwave-web",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,6 +16,7 @@
     "@react-aria/visually-hidden": "^3.8.12",
     "@react-stately/utils": "^3.10.4",
     "@react-types/shared": "^3.25.0",
+    "accept-language": "^3.0.20",
     "clsx": "2.1.1",
     "cookies-next": "^4.3.0",
     "firebase": "^10.14.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml