Skip to content

Commit

Permalink
[frontend] Update user from profile (#265)
Browse files Browse the repository at this point in the history
* Fix updateUser function
* Fix to update user when button is pressed in profile
  • Loading branch information
lim396 authored Feb 16, 2024
1 parent a2c9378 commit dc1e9d8
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 8 deletions.
19 changes: 14 additions & 5 deletions frontend/app/lib/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,21 +106,30 @@ export async function updateUser(
prevState: string | undefined,
formData: FormData,
) {
const { user_id, ...updateData } = Object.fromEntries(formData.entries());
const res = await fetch(`${process.env.API_URL}/user/${user_id}`, {
const userId = await getCurrentUserId();
const newNickname = formData.get("name");
const newEmail = formData.get("email");
const res = await fetch(`${process.env.API_URL}/user/${userId}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + getAccessToken(),
},
body: JSON.stringify(updateData),
body: JSON.stringify({ name: newNickname, email: newEmail }),
});
const data = await res.json();
if (res.status === 401) {
redirect("/login");
} else if (res.status === 409) {
console.error("updateUser error: ", data);
return "The name or email is already in use";
}
if (!res.ok) {
return "Error";
console.error("updateUser error: ", data);
return data.message;
} else {
revalidatePath("/user");
revalidatePath(`/user/${user_id}`);
revalidatePath(`/user/${userId}`);
return "Success";
}
}
Expand Down
28 changes: 25 additions & 3 deletions frontend/app/ui/settings/profile-form.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,45 @@
"use client";
import { updateUser } from "@/app/lib/actions";
import { useAuthContext } from "@/app/lib/client-auth";
import { Stack } from "@/components/layout/stack";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";
import AvatarForm from "./avatar-form";
import { ProfileItem } from "./profile-item-form";
import { useFormState, useFormStatus } from "react-dom";

function ErrorText({ text }: { text: string }) {
return (
<p aria-live="polite" className="text-sm text-red-500">
{text}
</p>
);
}

export default function ProfileForm() {
const { currentUser } = useAuthContext();
const [code, action] = useFormState(updateUser, undefined);
const { pending } = useFormStatus();
if (code === "Success") {
toast({ title: "Success", description: "Profile updated sccessfully." });
}

// Menu: min 100px
// Profile : the rest
return (
<>
<AvatarForm avatarURL={currentUser?.avatarURL} />
<form>
<form action={action}>
<Stack space="space-y-4">
<ProfileItem type="text" title="name" value={currentUser?.name} />
<ProfileItem type="email" title="email" value={currentUser?.email} />
<div></div>
<Button variant="outline" className="w-40">
{code && code !== "Success" && <ErrorText text={code} />}
<Button
type="submit"
aria-disabled={pending}
variant="outline"
className="w-40"
>
Save
</Button>
</Stack>
Expand Down

0 comments on commit dc1e9d8

Please sign in to comment.