diff --git a/bun.lockb b/bun.lockb index 1a4a325..6ebb93f 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 95f2f46..c782b3b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@clerk/nextjs": "^5.1.5", "@clerk/themes": "^2.1.9", + "@clerk/types": "^4.6.1", "@hookform/resolvers": "^3.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 3dba67c..ace6ec4 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -28,27 +28,20 @@ import { QueryClient, } from "@tanstack/react-query"; import { EyeIcon, EyeOffIcon } from "lucide-react"; +import type { UsersTableType } from "@/server/db/schema"; const queryClient = new QueryClient(); -function PaperlessURL({ - setActiveTab, -}: { +interface FormProps { setActiveTab: Dispatch>; -}) { - const { user, isLoaded } = useUser(); - const pathname = usePathname(); + userData: UsersTableType; +} + +function PaperlessURL({ setActiveTab, userData }: FormProps) { const [isAutofilled, setIsAutofilled] = useState(false); const formSchema = z.object({ URL: z.string(), }); - const { data: userData, isLoading } = useQuery({ - queryKey: ["userData"], - queryFn: async () => { - const data = await getUserData(); - return data; - }, - }); const form = useForm>({ resolver: zodResolver(formSchema), @@ -57,17 +50,11 @@ function PaperlessURL({ }, }); - if (!isLoaded || isLoading || !userData) { - return Loading...; - } else if (userData.paperlessURL && !isAutofilled) { + if (userData.paperlessURL && !isAutofilled) { form.setValue("URL", userData.paperlessURL); setIsAutofilled(true); } - if (!user) { - return redirect("/sign-in?redirect=" + pathname); - } - async function onSubmit(values: z.infer) { if (values.URL == "") { setActiveTab((prevTab) => prevTab + 2); // Skip api key form @@ -114,25 +101,12 @@ function PaperlessURL({ ); } -function PaperlessToken({ - setActiveTab, -}: { - setActiveTab: Dispatch>; -}) { - const { user, isLoaded } = useUser(); - const pathname = usePathname(); +function PaperlessToken({ setActiveTab, userData }: FormProps) { const [isAutofilled, setIsAutofilled] = useState(false); const [isHidden, setIsHidden] = useState(false); const formSchema = z.object({ token: z.string(), }); - const { data: userData, isLoading } = useQuery({ - queryKey: ["userData"], - queryFn: async () => { - const data = await getUserData(); - return data; - }, - }); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { @@ -140,17 +114,11 @@ function PaperlessToken({ }, }); - if (!isLoaded || isLoading || !userData) { - return Loading...; - } else if (userData.paperlessToken && !isAutofilled) { + if (userData.paperlessToken && !isAutofilled) { form.setValue("token", userData.paperlessToken); setIsAutofilled(true); } - if (!user) { - return redirect("/sign-in?redirect=" + pathname); - } - async function onSubmit(values: z.infer) { setActiveTab((prevTab) => prevTab + 1); // Increment activeTab @@ -229,23 +197,55 @@ const ProgressIndicator: React.FC = ({ ); }; -export default function SettingsPage() { +export function Forms() { const [activeTab, setActiveTab] = useState(0); + const { user: clerkUser, isLoaded } = useUser(); + const pathname = usePathname(); + + const { data: userData, isLoading } = useQuery({ + queryKey: ["userData"], + queryFn: async () => { + const data = await getUserData(); + return data; + }, + }); + + if (!userData || isLoading || !isLoaded) { + return Loading...; + } else if (!clerkUser) { + return redirect("/sign-in?redirect=" + pathname); + } const formElements = [ - , - , + , + , ]; return ( <> - - {formElements[activeTab]} - + {formElements[activeTab]} + + ); +} + +export default function SettingsPage() { + return ( + <> + + + );