Skip to content

Commit

Permalink
perf: speed up settings autofilling by only calling db calls once
Browse files Browse the repository at this point in the history
  • Loading branch information
aamirazad committed Jun 24, 2024
1 parent d6108d0 commit 8a32d43
Showing 1 changed file with 30 additions and 20 deletions.
50 changes: 30 additions & 20 deletions src/app/settings/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,21 @@ import {
QueryClient,
} from "@tanstack/react-query";
import { EyeIcon, EyeOffIcon } from "lucide-react";

const queryClient = new QueryClient();
import type { UsersTableType } from "@/server/db/schema";

function PaperlessURL({
setActiveTab,
userData,
}: {
setActiveTab: Dispatch<SetStateAction<number>>;
userData: UsersTableType;
}) {
const { user, isLoaded } = useUser();
const pathname = usePathname();
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<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
Expand All @@ -57,7 +51,7 @@ function PaperlessURL({
},
});

if (!isLoaded || isLoading || !userData) {
if (!isLoaded) {
return <LoadingSpinner>Loading...</LoadingSpinner>;
} else if (userData.paperlessURL && !isAutofilled) {
form.setValue("URL", userData.paperlessURL);
Expand Down Expand Up @@ -116,8 +110,10 @@ function PaperlessURL({

function PaperlessToken({
setActiveTab,
userData,
}: {
setActiveTab: Dispatch<SetStateAction<number>>;
userData: UsersTableType;
}) {
const { user, isLoaded } = useUser();
const pathname = usePathname();
Expand All @@ -126,21 +122,14 @@ function PaperlessToken({
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<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
token: "",
},
});

if (!isLoaded || isLoading || !userData) {
if (!isLoaded) {
return <LoadingSpinner>Loading...</LoadingSpinner>;
} else if (userData.paperlessToken && !isAutofilled) {
form.setValue("token", userData.paperlessToken);
Expand Down Expand Up @@ -229,12 +218,33 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
);
};

const queryClient = new QueryClient();

export default function SettingsPage() {
const [activeTab, setActiveTab] = useState(0);
const { data: userData, isLoading } = useQuery({
queryKey: ["userData"],
queryFn: async () => {
const data = await getUserData();
return data;
},
});

if (!userData || isLoading) {
return <LoadingSpinner>Loading...</LoadingSpinner>;
}

const formElements = [
<PaperlessURL key="paperlessURL" setActiveTab={setActiveTab} />,
<PaperlessToken key="paperlessToken" setActiveTab={setActiveTab} />,
<PaperlessURL
key="paperlessURL"
setActiveTab={setActiveTab}
userData={userData}
/>,
<PaperlessToken
key="paperlessToken"
setActiveTab={setActiveTab}
userData={userData}
/>,
];
return (
<>
Expand Down

0 comments on commit 8a32d43

Please sign in to comment.