From 3cbb76db3690436def8691ad75a7d19fccb38935 Mon Sep 17 00:00:00 2001
From: William Tso <vitalitymailg@gmail.com>
Date: Fri, 18 Apr 2025 22:04:29 +0800
Subject: [PATCH] Refactor login page to isolate message handling into a
 separate component and utilize Suspense for loading. This improves code
 organization and maintains functionality for displaying messages from URL
 parameters.

---
 app/login/page.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index ea5cb53..6403930 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,13 +1,26 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useAuth } from '@/lib/auth';
 
+// Separate component for message handling to isolate useSearchParams
+function MessageHandler({ setMessage }: { setMessage: (message: { type: string, content: string }) => void }) {
+  const searchParams = useSearchParams();
+  
+  useEffect(() => {
+    const messageParam = searchParams.get('message');
+    if (messageParam) {
+      setMessage({ type: 'info', content: messageParam });
+    }
+  }, [searchParams, setMessage]);
+  
+  return null;
+}
+
 export default function LoginPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const { signIn, user } = useAuth();
   
   const [email, setEmail] = useState('');
@@ -15,14 +28,6 @@ export default function LoginPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [message, setMessage] = useState({ type: '', content: '' });
   
-  // 读取URL中的消息参数
-  useEffect(() => {
-    const messageParam = searchParams.get('message');
-    if (messageParam) {
-      setMessage({ type: 'info', content: messageParam });
-    }
-  }, [searchParams]);
-  
   // 如果用户已登录，重定向到首页
   useEffect(() => {
     if (user) {
@@ -64,6 +69,11 @@ export default function LoginPage() {
   
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      {/* Wrap the component using useSearchParams in Suspense */}
+      <Suspense fallback={null}>
+        <MessageHandler setMessage={setMessage} />
+      </Suspense>
+      
       <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-md">
         <div className="text-center">
           <h1 className="text-2xl font-bold text-gray-900">Login</h1>