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:
wood chen 2025-02-20 02:30:46 +08:00
parent 1d0fe64fdb
commit b01890e2cf

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useCallback, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { getDiscourseSSOUrl } from "@/actions/discourse-sso-url"; import { getDiscourseSSOUrl } from "@/actions/discourse-sso-url";
@ -13,36 +13,26 @@ interface AuthorizingProps {
export function Authorizing({ searchParams }: AuthorizingProps) { export function Authorizing({ searchParams }: AuthorizingProps) {
const router = useRouter(); const router = useRouter();
const [error, setError] = useState<unknown | null>(null); 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(() => { useEffect(() => {
// 启动进度条动画
const progressTimer = setInterval(() => {
setProgress((prev) => Math.min(prev + 10, 90));
}, 500);
// 立即开始授权 // 立即开始授权
signInCallback(); const doAuth = async () => {
try {
return () => { const url = await getDiscourseSSOUrl(
clearInterval(progressTimer); new URLSearchParams(searchParams).toString(),
);
router.push(url);
} catch (error) {
setError(error);
}
}; };
}, [signInCallback]);
return ( doAuth();
<div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl"> }, [searchParams, router]);
{error ? (
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="space-y-4 text-center">
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100"> <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
<svg <svg
@ -68,22 +58,19 @@ export function Authorizing({ searchParams }: AuthorizingProps) {
</button> </button>
</div> </div>
) : ( </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> return (
<h3 className="text-xl font-semibold text-gray-900"></h3> <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
<p className="text-gray-500">...</p> <div className="space-y-4 text-center">
<div className="h-2.5 w-full rounded-full bg-gray-200"> <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
<div <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></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> </div>
)} <h3 className="text-xl font-semibold text-gray-900"></h3>
<p className="text-gray-500">...</p>
</div>
</div> </div>
); );
} }