Merge pull request #2 from database-playground/pan93412/dbp-7-add-lint-and-format-check

DBP-7: add lint and format check

Author: pan93412

.github/workflows/lint.yaml

@@ -0,0 +1,37 @@
+name: Lint and Format Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  lint:
+    name: Run Linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Next.js lint check
+        run: pnpm lint
+
+      - name: Run dprint format check
+        run: pnpm format:check

app/(admin)/(question-management)/questions/_components/create.tsx

@@ -9,14 +9,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { QuestionDifficulty } from "@/gql/graphql";
 import { useMutation, useSuspenseQuery } from "@apollo/client";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
 import { QUESTION_CREATE_MUTATION } from "./mutation";
 import { DATABASE_LIST_QUERY, QUESTIONS_TABLE_QUERY } from "./query";
 import { UpdateQuestionForm, type UpdateQuestionFormData } from "./update-form";
-import { QuestionDifficulty } from "@/gql/graphql";
 
 export function CreateQuestionTrigger() {
   const router = useRouter();

app/global-error.tsx

@@ -1,27 +1,13 @@
 "use client";
 
+import { Logo } from "@/components/logo";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { 
-  ERROR_NOT_FOUND, 
-  ERROR_UNAUTHORIZED, 
-  ERROR_USER_VERIFIED, 
-  ERROR_NOT_IMPLEMENTED 
-} from "@/lib/apollo";
+import { ERROR_NOT_FOUND, ERROR_NOT_IMPLEMENTED, ERROR_UNAUTHORIZED, ERROR_USER_VERIFIED } from "@/lib/apollo";
 import { ApolloError } from "@apollo/client";
-import { 
-  AlertCircle, 
-  RefreshCw, 
-  Home, 
-  Lock, 
-  Search,
-  WifiOff,
-  Code,
-  Shield
-} from "lucide-react";
+import { AlertCircle, Code, Home, Lock, RefreshCw, Search, Shield, WifiOff } from "lucide-react";
 import Link from "next/link";
-import { Logo } from "@/components/logo";
 import { useEffect } from "react";
 
 interface GlobalErrorProps {
@@ -33,32 +19,32 @@ function getErrorInfo(error: Error | ApolloError) {
   // Check if it's an ApolloError
   if (error instanceof ApolloError) {
     // Network errors
-    if (error.networkError && 'statusCode' in error.networkError) {
+    if (error.networkError && "statusCode" in error.networkError) {
       switch (error.networkError.statusCode) {
         case 401:
           return {
             title: "未經授權",
             description: "您的登入狀態已過期，請重新登入。",
             icon: Lock,
-            actionHref: "/login"
+            actionHref: "/login",
           };
         case 403:
           return {
-            title: "權限不足", 
+            title: "權限不足",
             description: "您沒有權限執行此操作。",
-            icon: Shield
+            icon: Shield,
           };
         case 404:
           return {
             title: "找不到資源",
-            description: "請求的資源不存在或已被移除。", 
-            icon: Search
+            description: "請求的資源不存在或已被移除。",
+            icon: Search,
           };
         case 500:
           return {
             title: "伺服器錯誤",
             description: "伺服器發生內部錯誤，請稍後再試。",
-            icon: AlertCircle
+            icon: AlertCircle,
           };
       }
     }
@@ -67,7 +53,7 @@ function getErrorInfo(error: Error | ApolloError) {
       return {
         title: "網路連線錯誤",
         description: "無法連接到伺服器，請檢查網路連線。",
-        icon: WifiOff
+        icon: WifiOff,
       };
     }
 
@@ -81,33 +67,33 @@ function getErrorInfo(error: Error | ApolloError) {
           return {
             title: "找不到資料",
             description: "請求的資料不存在或已被刪除。",
-            icon: Search
+            icon: Search,
           };
         case ERROR_UNAUTHORIZED:
           return {
-            title: "未經授權", 
+            title: "未經授權",
             description: "請登入後再試，或您的權限不足。",
             icon: Lock,
-            actionHref: "/login"
+            actionHref: "/login",
           };
         case ERROR_USER_VERIFIED:
           return {
             title: "帳號已驗證",
             description: "此帳號已經完成驗證程序。",
-            icon: Shield
+            icon: Shield,
           };
         case ERROR_NOT_IMPLEMENTED:
           return {
             title: "功能未實作",
             description: "此功能目前尚未實作，請稍後再試。",
-            icon: Code
+            icon: Code,
           };
       }
 
       return {
         title: "GraphQL 查詢錯誤",
         description: firstError.message || "GraphQL 查詢發生錯誤。",
-        icon: AlertCircle
+        icon: AlertCircle,
       };
     }
   }
@@ -116,7 +102,7 @@ function getErrorInfo(error: Error | ApolloError) {
   return {
     title: "應用程式發生錯誤",
     description: error.message || "應用程式遇到預期外的錯誤。",
-    icon: AlertCircle
+    icon: AlertCircle,
   };
 }
 
@@ -152,91 +138,141 @@ export default function GlobalError({ error, reset }: GlobalErrorProps) {
             </div>
             Database Playground
           </Link>
-          
-          <Card className="min-w-md max-w-2xl">
-            <CardHeader className="flex w-full flex-col items-center text-center">
+
+          <Card className="max-w-2xl min-w-md">
+            <CardHeader
+              className={`flex w-full flex-col items-center text-center`}
+            >
               <errorInfo.icon className="mb-2 size-7 text-red-500" />
               <CardTitle className="text-xl">{errorInfo.title}</CardTitle>
               <CardDescription>
                 {errorInfo.description}
               </CardDescription>
             </CardHeader>
-            
+
             <CardContent className="flex flex-col items-center gap-4">
-                <div className="w-full rounded-md bg-red-50 p-4 text-left">
-                  <details className="text-sm">
-                    <summary className="cursor-pointer font-medium text-red-800">
-                      錯誤詳細資訊
-                    </summary>
-                    <div className="text-red-700 space-y-2 mt-2">
-                      <p className="font-medium">{error.name}: {error.message}</p>
-                      
-                      {error.stack && (
-                        <pre className="whitespace-pre-wrap text-xs bg-red-100 p-2 rounded overflow-x-auto">
+              <div className="w-full rounded-md bg-red-50 p-4 text-left">
+                <details className="text-sm">
+                  <summary className="cursor-pointer font-medium text-red-800">
+                    錯誤詳細資訊
+                  </summary>
+                  <div className="mt-2 space-y-2 text-red-700">
+                    <p className="font-medium">{error.name}: {error.message}</p>
+
+                    {error.stack && (
+                      <pre
+                        className={`
+                          overflow-x-auto rounded bg-red-100 p-2 text-xs
+                          whitespace-pre-wrap
+                        `}
+                      >
                           {error.stack}
-                        </pre>
-                      )}
-                      
-                      {error instanceof ApolloError && (
-                        <div className="space-y-2">
-                          {error.networkError && (
-                            <div>
-                              <Badge variant="destructive" className="text-xs mb-1">Network Error</Badge>
-                              <pre className="whitespace-pre-wrap text-xs bg-red-100 p-2 rounded">
+                      </pre>
+                    )}
+
+                    {error instanceof ApolloError && (
+                      <div className="space-y-2">
+                        {error.networkError && (
+                          <div>
+                            <Badge
+                              variant="destructive"
+                              className={`mb-1 text-xs`}
+                            >
+                              Network Error
+                            </Badge>
+                            <pre
+                              className={`
+                                rounded bg-red-100 p-2 text-xs
+                                whitespace-pre-wrap
+                              `}
+                            >
                                 {JSON.stringify(error.networkError, null, 2)}
-                              </pre>
-                            </div>
-                          )}
-                          
-                          {error.graphQLErrors && error.graphQLErrors.length > 0 && (
-                            <div>
-                              <Badge variant="destructive" className="text-xs mb-1">
-                                GraphQL Errors ({error.graphQLErrors.length})
-                              </Badge>
-                              <pre className="whitespace-pre-wrap text-xs bg-red-100 p-2 rounded">
+                            </pre>
+                          </div>
+                        )}
+
+                        {error.graphQLErrors && error.graphQLErrors.length > 0 && (
+                          <div>
+                            <Badge
+                              variant="destructive"
+                              className={`mb-1 text-xs`}
+                            >
+                              GraphQL Errors ({error.graphQLErrors.length})
+                            </Badge>
+                            <pre
+                              className={`
+                                rounded bg-red-100 p-2 text-xs
+                                whitespace-pre-wrap
+                              `}
+                            >
                                 {JSON.stringify(error.graphQLErrors, null, 2)}
-                              </pre>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </details>
-                </div>
-              
-              <div className="flex flex-col sm:flex-row gap-3">
-                <Button onClick={reset} variant="default" className="flex items-center gap-2">
+                            </pre>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </details>
+              </div>
+
+              <div
+                className={`
+                  flex flex-col gap-3
+                  sm:flex-row
+                `}
+              >
+                <Button
+                  onClick={reset}
+                  variant="default"
+                  className={`flex items-center gap-2`}
+                >
                   <RefreshCw className="size-4" />
                   重試
                 </Button>
-                
-                {errorInfo.actionHref ? (
-                  <Button asChild variant="outline" className="flex items-center gap-2">
-                    <Link href={errorInfo.actionHref}>
-                      前往處理
-                    </Link>
-                  </Button>
-                ) : (
-                  <Button asChild variant="outline" className="flex items-center gap-2">
-                    <Link href="/">
-                      <Home className="size-4" />
-                      回到首頁
-                    </Link>
-                  </Button>
-                )}
+
+                {errorInfo.actionHref
+                  ? (
+                    <Button
+                      asChild
+                      variant="outline"
+                      className={`flex items-center gap-2`}
+                    >
+                      <Link href={errorInfo.actionHref}>
+                        前往處理
+                      </Link>
+                    </Button>
+                  )
+                  : (
+                    <Button
+                      asChild
+                      variant="outline"
+                      className={`flex items-center gap-2`}
+                    >
+                      <Link href="/">
+                        <Home className="size-4" />
+                        回到首頁
+                      </Link>
+                    </Button>
+                  )}
               </div>
             </CardContent>
-            
+
             <CardFooter
-              className={`justify-center text-center text-xs text-muted-foreground`}
+              className={`
+                justify-center text-center text-xs text-muted-foreground
+              `}
             >
               <section className="flex flex-col items-center gap-1">
                 <p>如果問題持續發生，請聯絡開發者進行處理。</p>
                 <p className="text-red-600">
-                  錯誤時間：{new Date().toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
+                  錯誤時間：{new Date().toLocaleString("zh-TW", { timeZone: "Asia/Taipei" })}
                 </p>
-                {'digest' in error && error.digest && (
-                  <p className="text-red-600">錯誤 ID：{error.digest}</p>
+                {"digest" in error && error.digest && (
+                  <p
+                    className={`text-red-600`}
+                  >
+                    錯誤 ID：{error.digest}
+                  </p>
                 )}
               </section>
             </CardFooter>