wip

2023-06-24 18:31:40 +07:00
parent 21d22320b3
commit 85b30f770c
102 changed files with 1844 additions and 2014 deletions
--- a/src/app/auth/import/step-2.tsx
+++ b/src/app/auth/import/step-2.tsx
@@ -0,0 +1,81 @@
+import { User } from "@app/auth/components/user";
+import { updateAccount } from "@libs/storage";
+import { Button } from "@shared/button";
+import { LoaderIcon } from "@shared/icons";
+import { RelayContext } from "@shared/relayProvider";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAccount } from "@utils/hooks/useAccount";
+import { setToArray } from "@utils/transform";
+import { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+export function ImportStep2Screen() {
+	const ndk = useContext(RelayContext);
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+	const { status, account } = useAccount();
+
+	const update = useMutation({
+		mutationFn: (follows: any) =>
+			updateAccount("follows", follows, account.pubkey),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["currentAccount"] });
+			// redirect to next step
+			navigate("/auth/onboarding", { replace: true });
+		},
+	});
+
+	const submit = async () => {
+		try {
+			// show loading indicator
+			setLoading(true);
+
+			const user = ndk.getUser({ hexpubkey: account.pubkey });
+			const follows = await user.follows();
+
+			// follows as list
+			const followsList = setToArray(follows);
+
+			// update
+			update.mutate(followsList);
+		} catch {
+			console.log("error");
+		}
+	};
+
+	return (
+		<div className="mx-auto w-full max-w-md">
+			<div className="mb-8 text-center">
+				<h1 className="text-xl font-semibold">
+					{loading ? "Creating..." : "Continue with"}
+				</h1>
+			</div>
+			<div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900 p-4">
+				{status === "loading" ? (
+					<div className="w-full">
+						<div className="flex items-center gap-2">
+							<div className="h-11 w-11 animate-pulse rounded-lg bg-zinc-800" />
+							<div>
+								<h3 className="mb-1 h-4 w-16 animate-pulse rounded bg-zinc-800" />
+								<p className="h-3 w-36 animate-pulse rounded bg-zinc-800" />
+							</div>
+						</div>
+					</div>
+				) : (
+					<div className="flex flex-col gap-3">
+						<User pubkey={account.pubkey} />
+						<Button preset="large" onClick={() => submit()}>
+							{loading ? (
+								<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+							) : (
+								"Continue →"
+							)}
+						</Button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}