mirror of
https://github.com/woodchen-ink/Q58Connect.git
synced 2025-07-18 05:51:55 +08:00
refactor: Simplify Authorizing component and remove progress tracking
- Remove unnecessary progress bar and related state management - Simplify authorization flow with direct async function in useEffect - Remove unused useCallback and progress tracking logic - Streamline loading state rendering - Update loading message to be more concise
This commit is contained in:
parent
1d0fe64fdb
commit
b01890e2cf
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getDiscourseSSOUrl } from "@/actions/discourse-sso-url";
|
||||
|
||||
@ -13,36 +13,26 @@ interface AuthorizingProps {
|
||||
export function Authorizing({ searchParams }: AuthorizingProps) {
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<unknown | null>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
const signInCallback = useCallback(async () => {
|
||||
try {
|
||||
const url = await getDiscourseSSOUrl(
|
||||
new URLSearchParams(searchParams).toString(),
|
||||
);
|
||||
router.push(url);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
}
|
||||
}, [searchParams, router]);
|
||||
|
||||
useEffect(() => {
|
||||
// 启动进度条动画
|
||||
const progressTimer = setInterval(() => {
|
||||
setProgress((prev) => Math.min(prev + 10, 90));
|
||||
}, 500);
|
||||
|
||||
// 立即开始授权
|
||||
signInCallback();
|
||||
|
||||
return () => {
|
||||
clearInterval(progressTimer);
|
||||
const doAuth = async () => {
|
||||
try {
|
||||
const url = await getDiscourseSSOUrl(
|
||||
new URLSearchParams(searchParams).toString(),
|
||||
);
|
||||
router.push(url);
|
||||
} catch (error) {
|
||||
setError(error);
|
||||
}
|
||||
};
|
||||
}, [signInCallback]);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
||||
{error ? (
|
||||
doAuth();
|
||||
}, [searchParams, router]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
|
||||
<svg
|
||||
@ -68,22 +58,19 @@ export function Authorizing({ searchParams }: AuthorizingProps) {
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900">正在授权</h3>
|
||||
<p className="text-gray-500">获取授权信息中,请稍等...</p>
|
||||
<div className="h-2.5 w-full rounded-full bg-gray-200">
|
||||
<div
|
||||
className="h-2.5 rounded-full bg-blue-600 transition-all duration-300 ease-out"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">系统正在处理您的请求</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
|
||||
<div className="space-y-4 text-center">
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold text-gray-900">正在授权</h3>
|
||||
<p className="text-gray-500">请稍候...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user