Merge pull request #19 from clementvtrd/feat/json-error

feat: json error handling
clementvtrd · Jun 6, 2024 · f5aa45a · f5aa45a
2 parents ff26493 + fa1b96b
commit f5aa45a
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 46 deletions.
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import Luciole from '@/fonts/luciole';
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -16,7 +14,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={Luciole.className}>
         {children}
       </body>
     </html>

diff --git a/app/src/app/messages/error.tsx b/app/src/app/messages/error.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+export default function MessagesErrorHandler({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+  }) {
+  return (
+    <section>
+      <h1>Messages</h1>
+      <p>
+        {error.message}
+      </p>
+      <p>
+        Please try again later.
+      </p>
+      <button onClick={reset}>Retry</button>
+    </section>
+  );
+}
diff --git a/app/src/app/messages/page.tsx b/app/src/app/messages/page.tsx
@@ -1,7 +1,7 @@
 "use server";
 
-import { MessageIndexResponse } from '@/app/api/messages/route';
 import { createMessage } from '@/mutations/message';
+import getAllMessages from '@/resolvers/message/getAllMessages';
 import Link from 'next/link';
 
 export default async function MessagesPage() {
@@ -25,14 +25,3 @@ export default async function MessagesPage() {
     </section>
   );
 }
-
-async function getAllMessages() {
-  return await fetch(
-    `${process.env.BASE_URL}/api/messages`,
-    {
-      next: {
-        tags: ['messages'],
-      }
-    }
-  ).then(res => res.json()) as MessageIndexResponse;
-}
diff --git a/app/src/fonts/luciole/Luciole-Bold-Italic.ttf b/app/src/fonts/luciole/Luciole-Bold-Italic.ttf
diff --git a/app/src/fonts/luciole/Luciole-Bold.ttf b/app/src/fonts/luciole/Luciole-Bold.ttf
diff --git a/app/src/fonts/luciole/Luciole-Regular-Italic.ttf b/app/src/fonts/luciole/Luciole-Regular-Italic.ttf
diff --git a/app/src/fonts/luciole/Luciole-Regular.ttf b/app/src/fonts/luciole/Luciole-Regular.ttf
diff --git a/app/src/fonts/luciole/index.ts b/app/src/fonts/luciole/index.ts
@@ -0,0 +1,12 @@
+import localFont from 'next/font/local';
+
+const Luciole = localFont({
+  src: [
+    { path: './Luciole-Regular.ttf', weight: '400', style: 'normal'},
+    { path: './Luciole-Bold.ttf', weight: '700', style: 'normal'},
+    { path: './Luciole-Regular-Italic.ttf', weight: '400', style: 'italic'},
+    { path: './Luciole-Bold-Italic.ttf', weight: '700', style: 'italic'},
+  ]
+});
+
+export default Luciole;
diff --git a/app/src/resolvers/message/getAllMessages.ts b/app/src/resolvers/message/getAllMessages.ts
@@ -0,0 +1,17 @@
+"use server";
+
+import { MessageIndexResponse } from '@/app/api/messages/route';
+import { handleJsonResponse } from '@/utils/request';
+
+export default async function getAllMessages() {
+  const response = await fetch(
+    `${process.env.BASE_URL}/api/messages`,
+    {
+      next: {
+        tags: ['messages'],
+      }
+    }
+  );
+
+  return handleJsonResponse<MessageIndexResponse>(response, 'An error occurred while fetching messages. Please try again later.');
+}
diff --git a/app/src/utils/request.ts b/app/src/utils/request.ts
@@ -0,0 +1,19 @@
+export async function handleJsonResponse<T>(
+  response: Response,
+  unknownErrorMessageNotHandleByTheApi: string = 'An unknown error occurred.'
+): Promise<T> {
+  // The original variable name is too long, so I changed it to a shorter one.
+  const uEMNHBTA = unknownErrorMessageNotHandleByTheApi;
+
+  if (!response.ok) {
+    const data = await response.json();
+
+    if ('error' in data) {
+      throw new Error(data.error);
+    }
+
+    throw new Error(uEMNHBTA);
+  }
+
+  return response.json() as Promise<T>;
+}