refactor: follow best practices

Author: pan93412

README.md

@@ -3,8 +3,7 @@
 ## Variables
 
 ```env
-BACKEND_BASE_URL=
-APP_REDIRECT_URL=
+NEXT_PUBLIC_BACKEND_BASE_URL=
 ```
 
 ## Development

app/(admin)/(user-management)/groups/[id]/_components/audit-info-card.tsx

@@ -26,13 +26,13 @@ function CardMain({ id }: { id: string }) {
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            建立時間：{new Date(data.group.createdAt).toLocaleString()}
+            建立時間：{new Date(data.group.createdAt).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
           </span>
         </li>
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            更新時間：{new Date(data.group.updatedAt).toLocaleString()}
+            更新時間：{new Date(data.group.updatedAt).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
           </span>
         </li>
       </ul>

app/(admin)/(user-management)/users/[id]/_components/audit-info.tsx

@@ -26,13 +26,13 @@ function CardMain({ id }: { id: string }) {
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            建立時間：{new Date(data.user.createdAt).toLocaleString()}
+            建立時間：{new Date(data.user.createdAt).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
           </span>
         </li>
         <li className="flex items-center gap-2">
           <Clock className="h-4 w-4 text-muted-foreground" />
           <span>
-            更新時間：{new Date(data.user.updatedAt).toLocaleString()}
+            更新時間：{new Date(data.user.updatedAt).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
           </span>
         </li>
       </ul>

app/(admin)/layout.tsx

@@ -1,25 +1,22 @@
 import { AppSidebar } from "@/components/app-sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { UserProvider } from "@/providers/use-user";
 
 export default function AdminLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <UserProvider>
-      <SidebarProvider
-        style={{
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-          "--header-height": "calc(var(--spacing) * 12)",
-        } as React.CSSProperties}
-      >
-        <AppSidebar variant="inset" />
-        <SidebarInset>
-          {children}
-        </SidebarInset>
-      </SidebarProvider>
-    </UserProvider>
+    <SidebarProvider
+      style={{
+        "--sidebar-width": "calc(var(--spacing) * 72)",
+        "--header-height": "calc(var(--spacing) * 12)",
+      } as React.CSSProperties}
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
   );
 }

app/api/graphql/route.ts

@@ -4,12 +4,11 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { redirectIfAuthenticated } from "@/lib/auth.rsc";
 import { AlertTriangle } from "lucide-react";
 import Link from "next/link";
+import { UserInfo } from "./user-info";
 
-export default async function ForbiddenPage({ searchParams }: { searchParams: Promise<{ name?: string; email?: string }> }) {
+export default async function ForbiddenPage() {
   await redirectIfAuthenticated();
 
-  const { name, email } = await searchParams;
-
   return (
     <div
       className={`
@@ -48,10 +47,7 @@ export default async function ForbiddenPage({ searchParams }: { searchParams: Pr
         <CardFooter
           className={`justify-center text-center text-xs text-muted-foreground`}
         >
-          <section className="flex flex-col items-center gap-1">
-            <p>您目前登入的帳號是：{name} ({email})</p>
-            <p>如果這不是您想登入的帳號，請切換 Google 帳號後重新登入</p>
-          </section>
+          <UserInfo />
         </CardFooter>
       </Card>
     </div>

app/forbidden/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useUser } from "@/providers/use-user";
+
+export function UserInfo() {
+  const { user } = useUser();
+
+  return (
+    <section className="flex flex-col items-center gap-1">
+      <p>
+        您目前登入的帳號是：{user?.name} ({user?.email})
+      </p>
+      <p>如果這不是您想登入的帳號，請切換 Google 帳號後重新登入</p>
+    </section>
+  );
+}

app/forbidden/user-info.tsx

@@ -3,8 +3,8 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { ApolloWrapper } from "@/providers/use-apollo";
-import { UserProvider } from "@/providers/use-user";
 import { PreloadResources } from "./preload-resources";
+import { getAuthToken } from "@/lib/auth";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -21,11 +21,13 @@ export const metadata: Metadata = {
   description: "Managing your Database Playground instance.",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const token = await getAuthToken();
+
   return (
     <html lang="zh-hant-tw">
       <head>
@@ -43,7 +45,7 @@ export default function RootLayout({
           font-sans antialiased
         `}
       >
-        <ApolloWrapper>
+        <ApolloWrapper token={token}>
           {children}
         </ApolloWrapper>
         <Toaster />

app/layout.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import ReactDOM from "react-dom";
 
 export function PreloadResources() {

app/preload-resources.tsx

@@ -19,6 +19,7 @@ import {
 import { useUser } from "@/providers/use-user";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Suspense } from "react";
 
 export interface NavItem {
   title: string;
@@ -148,18 +149,16 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <NavSecondary items={data.navSecondary} className="mt-auto" />
       </SidebarContent>
       <SidebarFooter>
-        <NavUserMe />
+        <Suspense fallback={<NavUserLoading />}>
+          <NavUserMe />
+        </Suspense>
       </SidebarFooter>
     </Sidebar>
   );
 }
 
 function NavUserMe() {
-  const { user, isInitialized } = useUser();
-
-  if (!isInitialized || !user) {
-    return <NavUserLoading />;
-  }
+  const { user } = useUser();
 
   return <NavUser user={user} />;
 }