Disable the connect/disconnect button while an action is in progress

giselles-ai · Oct 31, 2024 · f65cdb3 · f65cdb3
1 parent fd8d55b
commit f65cdb3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 57 deletions.
diff --git a/app/(main)/settings/account/actions.ts b/app/(main)/settings/account/actions.ts
@@ -5,7 +5,7 @@ import { createClient, getUser } from "@/lib/supabase";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
-export async function authorizeGitHub() {
+export async function connectGitHubIdentity() {
 	const supabase = await createClient();
 	const { data, error } = await supabase.auth.linkIdentity({
 		provider: "github",
@@ -23,7 +23,7 @@ export async function authorizeGitHub() {
 	}
 }
 
-export async function unlinkIdentity() {
+export async function disconnectGitHubIdentity() {
 	const supabaseUser = await getUser();
 	const supabase = await createClient();
 	if (!supabaseUser.identities) {

diff --git a/app/(main)/settings/components/github-connection-button.tsx b/app/(main)/settings/components/github-connection-button.tsx
@@ -1,43 +1,46 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useActionState } from "react";
+
+type ButtonWithActionProps = {
+	action: () => Promise<void>;
+};
 
-export type GitHubConnectButtonMode = "connect" | "disconnect" | "hidden";
+const buttonClassNames = "w-fit font-avenir text-sm font-medium";
 
-export function GitHubConnectButton({
-	mode,
-	connectAction,
-	disconnectAction,
-}: {
-	mode: GitHubConnectButtonMode;
-	connectAction: () => Promise<void>;
-	disconnectAction: () => Promise<void>;
-}) {
-	const className = "w-fit font-avenir text-sm font-medium";
-	switch (mode) {
-		case "connect":
-			return (
-				<form>
-					<Button
-						className={className}
-						type="submit"
-						formAction={connectAction}
-					>
-						Connect
-					</Button>
-				</form>
-			);
-		case "disconnect":
-			return (
-				<form>
-					<Button
-						className={className}
-						type="submit"
-						formAction={disconnectAction}
-					>
-						Disconnect
-					</Button>
-				</form>
-			);
-		case "hidden":
-			return null;
-	}
+export function GitHubConnectButton({ action }: ButtonWithActionProps) {
+	const [_, formAction, isPending] = useActionState(async () => {
+		await action();
+	}, null);
+	return (
+		<form>
+			<Button
+				className={buttonClassNames}
+				type="submit"
+				formAction={formAction}
+				disabled={isPending}
+			>
+				Connect
+			</Button>
+		</form>
+	);
+}
+export function GitHubDisconnectButton({ action }: ButtonWithActionProps) {
+	const [_, formAction, isPending] = useActionState(async () => {
+		await action();
+	}, null);
+	return (
+		<form>
+			<Button
+				className={cn(buttonClassNames, "text-red-500")}
+				type="submit"
+				formAction={formAction}
+				disabled={isPending}
+			>
+				Disconnect
+			</Button>
+		</form>
+	);
 }
diff --git a/app/(main)/settings/components/github-connection.tsx b/app/(main)/settings/components/github-connection.tsx
@@ -3,10 +3,13 @@ import { getUser } from "@/lib/supabase";
 import type { GitHubUserClient } from "@/services/external/github/user-client";
 import { SiGithub } from "@icons-pack/react-simple-icons";
 import Link from "next/link";
-import { authorizeGitHub, unlinkIdentity } from "../account/actions";
+import {
+	connectGitHubIdentity,
+	disconnectGitHubIdentity,
+} from "../account/actions";
 import {
 	GitHubConnectButton,
-	type GitHubConnectButtonMode,
+	GitHubDisconnectButton,
 } from "./github-connection-button";
 
 type GitHubUser = Awaited<ReturnType<GitHubUserClient["getUser"]>>;
@@ -16,16 +19,20 @@ export async function GitHubConnection({
 }: {
 	gitHubUser?: GitHubUser;
 }) {
-	const supabaseUser = await getUser();
-	const unlinkable =
-		supabaseUser.identities && supabaseUser.identities.length > 1;
+	const ConnectButton = async () => {
+		if (!gitHubUser) {
+			return <GitHubConnectButton action={connectGitHubIdentity} />;
+		}
+
+		const supabaseUser = await getUser();
+		const unlinkable =
+			supabaseUser.identities && supabaseUser.identities.length > 1;
+		if (unlinkable) {
+			return <GitHubDisconnectButton action={disconnectGitHubIdentity} />;
+		}
 
-	let connectMode: GitHubConnectButtonMode = "hidden";
-	if (!gitHubUser) {
-		connectMode = "connect";
-	} else if (unlinkable) {
-		connectMode = "disconnect";
-	}
+		return null;
+	};
 
 	return (
 		<div className="bg-transparent rounded-md border border-black-70 py-4 px-4 w-full font-avenir text-black-30">
@@ -45,11 +52,7 @@ export async function GitHubConnection({
 						)}
 					</div>
 				</div>
-				<GitHubConnectButton
-					mode={connectMode}
-					connectAction={authorizeGitHub}
-					disconnectAction={unlinkIdentity}
-				/>
+				{ConnectButton()}
 			</div>
 		</div>
 	);