diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx index 1f3d54c65..00350c749 100644 --- a/apps/web/components/navigation.tsx +++ b/apps/web/components/navigation.tsx @@ -78,14 +78,21 @@ type UserType = { }; export default function TopNavigation() { - const [user, setUser] = useState(); + const router = useRouter(); const session = useSession(); + const [user, setUser] = useState({ + email: "", + name: "", + }); useEffect(() => { - setUser(session.data?.user); - }, [session]); + fetch("/api/users/me").then((res) => { + res.json().then((j) => { + setUser(j); + }); + }); + }, [session, user]); - const router = useRouter(); navigation.forEach((element) => { element.current = router.route.endsWith("/" + element.href.split("/")[1]); }); diff --git a/apps/web/components/settings.tsx b/apps/web/components/settings.tsx index 3d086daba..95dea4948 100644 --- a/apps/web/components/settings.tsx +++ b/apps/web/components/settings.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from "react"; +import { ChangeEvent, Fragment, useEffect, useState } from "react"; import { Disclosure, Menu, Switch, Transition } from "@headlessui/react"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { @@ -19,6 +19,7 @@ import avatarFromInitials from "avatar-from-initials"; import { useSession } from "next-auth/react"; import { User } from "next-auth"; import { Value } from "sass"; +import { updateUser } from "@documenso/features"; const subNavigation = [ { @@ -41,13 +42,44 @@ function classNames(...classes: any) { export default function Setttings() { const session = useSession(); - let user = session.data?.user; + const [user, setUser] = useState({ + email: "", + name: "", + }); + + useEffect(() => { + fetch("/api/users/me").then((res) => { + res.json().then((j) => { + setUser(j); + }); + }); + }, [session]); const router = useRouter(); subNavigation.forEach((element) => { element.current = element.href == router.route; }); + const [savingTimeout, setSavingTimeout] = useState(); + function handleNameChange(e: ChangeEvent): void { + let u = { ...user }; + u.name = e.target.value; + setUser(u); + clearTimeout(savingTimeout); + const t = setTimeout(() => { + updateUser(u); + }, 1000); + + setSavingTimeout(t); + } + + const handleKeyPress = (event: any) => { + if (event.key === "Enter") { + clearTimeout(savingTimeout); + updateUser(user); + } + }; + return (
@@ -60,7 +92,10 @@ export default function Setttings() {
-
+ diff --git a/apps/web/pages/api/users/me.ts b/apps/web/pages/api/users/me.ts new file mode 100644 index 000000000..e55c06ff7 --- /dev/null +++ b/apps/web/pages/api/users/me.ts @@ -0,0 +1,28 @@ +import { + defaultHandler, + defaultResponder, + getUserFromToken, +} from "@documenso/lib/server"; +import prisma from "@documenso/prisma"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +async function getHandler(req: NextApiRequest, res: NextApiResponse) { + const user = await getUserFromToken(req, res); + + if (!user) return; + + return prisma.user.findFirstOrThrow({ + where: { + id: user.id, + }, + select: { + email: true, + name: true, + }, + }); +} + +export default defaultHandler({ + GET: Promise.resolve({ default: defaultResponder(getHandler) }), +}); diff --git a/packages/features/updateUser.ts b/packages/features/updateUser.ts index a09793363..9075c4e94 100644 --- a/packages/features/updateUser.ts +++ b/packages/features/updateUser.ts @@ -2,18 +2,22 @@ import toast from "react-hot-toast"; export const updateUser = async (user: any) => { if (!user) return; - toast.promise( - fetch("/api/users", { - method: "PATCH", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(user), - }), - { - loading: "Saving Changes...", - success: `Saved!`, - error: "Changes could not save user :/", - } - ); + toast + .promise( + fetch("/api/users", { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(user), + }), + { + loading: "Saving Changes...", + success: `Saved!`, + error: "Changes could not save user :/", + } + ) + .then(() => { + // location.reload(); + }); };