Skip to content

Commit bb17f5e

Browse files
joaov1ct0rjoaov1ct0r
committed
feat: added react component composition to update user modal in about page
1 parent 2cc05ce commit bb17f5e

File tree

6 files changed

+204
-122
lines changed

6 files changed

+204
-122
lines changed

‎src/app/about/components/index.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { AboutRoot } from "@/app/about/components/root/root"
77
import { AboutContent } from "@/app/about/components/content/content"
88
import { AboutForm } from "@/app/about/components/form/form"
99
import { DeleteAccountModal } from "@/app/about/components/delete-modal/delete-account-modal"
10+
import { UpdateUserModal } from "@/app/about/components/update-user-modal";
11+
import { AboutUpdateForm } from "@/app/about/components/update-form/update-form";
1012

1113
export const About = {
1214
Root: AboutRoot,
@@ -17,5 +19,7 @@ export const About = {
1719
Input: InputForm,
1820
ButtonWrapper,
1921
Button: ButtonForm,
20-
DeleteModal: DeleteAccountModal
22+
DeleteModal: DeleteAccountModal,
23+
UpdateModal: UpdateUserModal,
24+
UpdateForm: AboutUpdateForm
2125
}

‎src/app/about/components/update-form/update-form.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
"use client";
2+
3+
import { ReactNode, FormEventHandler } from "react";
4+
5+
export interface AboutFormUpdateProps {
6+
children: ReactNode;
7+
onSubmit: FormEventHandler;
8+
}
9+
10+
export function AboutUpdateForm({ children, onSubmit }: AboutFormUpdateProps) {
11+
return (
12+
<form
13+
onSubmit={onSubmit}
14+
className="w-[35%] h-[20%] px-4 pt-3 pb-4 m-2 bg-white shadow-md rounded sm:w-1/3 sm:h-1/4 sm:px-8 sm:pt-6 sm:pb-8"
15+
>
16+
{children}
17+
</form>
18+
);
19+
}

‎src/app/about/components/update-user-modal.tsx

+122-116
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,37 @@
11
"use client";
22

3-
import React, { MouseEvent, useEffect, useState } from "react";
4-
import { useAboutDispatch } from "@/app/about/hooks/use-about-dispatch";
5-
import { useAboutCtx } from "@/app/about/hooks/use-about";
6-
import ButtonForm from "@/app/components/button-form";
7-
import InputForm from "@/app/components/input-form";
3+
import React, { useEffect } from "react";
84
import Image from "next/image";
9-
import { useForm } from 'react-hook-form'
10-
import { UpdateUserFormSchema } from "@/app/about/interfaces/update-user-form-schema";
11-
import { zodResolver } from "@hookform/resolvers/zod";
12-
import { UpdateUserSchema } from "@/app/about/schemas/update-user-schema";
135
import { getObjectErrors } from "@/app/utils/get-object-errors";
6+
import { About } from "@/app/about/components/index";
147
import {
158
DialogTitle,
169
Dialog,
1710
DialogBackdrop,
1811
DialogPanel,
1912
} from "@headlessui/react";
20-
21-
export default function UpdateUserModal() {
22-
const { shouldOpenUpdateUserModal, user, showLoading } = useAboutCtx();
23-
24-
const { register, handleSubmit, watch, formState: { errors } } = useForm<UpdateUserFormSchema>({
25-
resolver: zodResolver(UpdateUserSchema)
26-
});
27-
28-
const file = watch("file")
29-
30-
const { updateUser, setOpenUpdateUserModal } = useAboutDispatch();
31-
32-
const [shouldHideUpdatePassword, setShouldHideUpdatePassword] =
33-
useState<boolean>(true);
34-
35-
const handleSetShouldUpdatePassword = () =>
36-
setShouldHideUpdatePassword(!shouldHideUpdatePassword);
37-
38-
39-
const handleOnCancelUpdateUserModal = (e: MouseEvent<HTMLButtonElement>) => {
40-
e.preventDefault();
41-
setOpenUpdateUserModal();
42-
};
43-
44-
const handleFormSubmit = (data: UpdateUserFormSchema) => {
45-
const { success } = UpdateUserSchema.safeParse(data);
46-
if (success) updateUser(data);
47-
};
13+
import { useUpdateUserModal } from "@/app/about/hooks/use-update-user-modal";
14+
15+
export function UpdateUserModal() {
16+
const {
17+
errors,
18+
shouldOpenUpdateUserModal,
19+
handleSubmit,
20+
handleFormSubmit,
21+
user,
22+
file,
23+
register,
24+
showLoading,
25+
handleSetShouldUpdatePassword,
26+
shouldHideUpdatePassword,
27+
handleOnCancelUpdateUserModal,
28+
} = useUpdateUserModal();
4829

4930
useEffect(() => {
5031
if (errors) {
51-
getObjectErrors(errors)
32+
getObjectErrors(errors);
5233
}
53-
}, [errors])
34+
}, [errors]);
5435

5536
return (
5637
<Dialog
@@ -78,7 +59,7 @@ export default function UpdateUserModal() {
7859
>
7960
Update user
8061
</DialogTitle>
81-
<form onSubmit={handleSubmit(handleFormSubmit)} className="w-full h-1/4 bg-white shadow-md rounded px-8 pt-6 pb-8">
62+
<About.UpdateForm onSubmit={handleSubmit(handleFormSubmit)}>
8263
<Image
8364
alt="User profile image"
8465
src={(() => {
@@ -98,86 +79,111 @@ export default function UpdateUserModal() {
9879
height={200}
9980
crossOrigin="use-credentials"
10081
/>
101-
<InputForm
102-
label="User profile image"
103-
placeholder="User profile image"
104-
id="file"
105-
type="file"
106-
name="file"
107-
register={register("file", { required: false })}
108-
/>
10982

110-
<InputForm
111-
label="User id"
112-
placeholder={user?.id}
113-
id="id"
114-
type="text"
115-
name="id"
116-
disabled
117-
register={register("id", { required: true, value: user?.id })}
118-
/>
119-
<InputForm
120-
label="User name"
121-
placeholder={user?.name}
122-
id="name"
123-
type="text"
124-
name="name"
125-
register={register("name", { required: true, value: user?.name })}
126-
/>
127-
<InputForm
128-
label="User email"
129-
placeholder={user?.email}
130-
id="email"
131-
type="email"
132-
name="email"
133-
register={register("email", { required: true, value: user?.email })}
134-
/>
135-
<InputForm
136-
label="User username"
137-
placeholder={user?.username}
138-
id="username"
139-
type="text"
140-
name="username"
141-
register={register("username", { required: true, value: user?.username })}
142-
/>
143-
<ButtonForm
144-
disabled={showLoading}
145-
type="button"
146-
model={showLoading ? "disabled" : "warning"}
147-
placeholder="Update password"
148-
handleOnClick={handleSetShouldUpdatePassword}
149-
/>
150-
<InputForm
151-
hidden={shouldHideUpdatePassword}
152-
label={shouldHideUpdatePassword ? "" : "User password"}
153-
placeholder="**********"
154-
id="password"
155-
type="password"
156-
name="password"
157-
register={register("password", { required: false, value: user?.password })}
158-
/>
159-
</form>
83+
<About.InputWrapper>
84+
<About.Label id="file">Profile image</About.Label>
85+
<About.Input
86+
id="file"
87+
type="file"
88+
register={register("file", { required: false })}
89+
/>
90+
</About.InputWrapper>
91+
92+
<About.InputWrapper>
93+
<About.Label id="id">ID</About.Label>
94+
<About.Input
95+
id="id"
96+
disabled
97+
register={register("id", {
98+
required: true,
99+
value: user?.id,
100+
})}
101+
/>
102+
</About.InputWrapper>
103+
104+
<About.InputWrapper>
105+
<About.Label id="name">Name</About.Label>
106+
<About.Input
107+
id="name"
108+
register={register("name", {
109+
required: true,
110+
value: user?.name,
111+
})}
112+
/>
113+
</About.InputWrapper>
114+
115+
<About.InputWrapper>
116+
<About.Label id="email">Email</About.Label>
117+
<About.Input
118+
id="email"
119+
type="email"
120+
register={register("email", {
121+
required: true,
122+
value: user?.email,
123+
})}
124+
/>
125+
</About.InputWrapper>
126+
127+
<About.InputWrapper>
128+
<About.Label id="username">Username</About.Label>
129+
<About.Input
130+
id="username"
131+
register={register("username", {
132+
required: true,
133+
value: user?.username,
134+
})}
135+
/>
136+
</About.InputWrapper>
137+
138+
<About.ButtonWrapper>
139+
<About.Button
140+
disabled={showLoading}
141+
model={showLoading ? "disabled" : "warning"}
142+
onClick={handleSetShouldUpdatePassword}
143+
>
144+
Update password
145+
</About.Button>
146+
</About.ButtonWrapper>
147+
148+
<About.InputWrapper>
149+
<About.Label
150+
id="password"
151+
hidden={shouldHideUpdatePassword}
152+
>
153+
{shouldHideUpdatePassword ? "" : "Password"}
154+
</About.Label>
155+
<About.Input
156+
hidden={shouldHideUpdatePassword}
157+
id="password"
158+
type="password"
159+
register={register("password", {
160+
required: false,
161+
value: user?.password,
162+
})}
163+
/>
164+
</About.InputWrapper>
165+
166+
<About.ButtonWrapper>
167+
<About.Button
168+
disabled={showLoading}
169+
type="submit"
170+
model={showLoading ? "disabled" : "success"}
171+
>
172+
Update
173+
</About.Button>
174+
175+
<About.Button
176+
disabled={showLoading}
177+
model={showLoading ? "disabled" : "warning"}
178+
onClick={handleOnCancelUpdateUserModal}
179+
>
180+
Cancel
181+
</About.Button>
182+
</About.ButtonWrapper>
183+
</About.UpdateForm>
160184
</div>
161185
</div>
162186
</div>
163-
<div className="flex flex-row justify-around items-center bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
164-
<>
165-
<ButtonForm
166-
disabled={showLoading}
167-
type="submit"
168-
model={showLoading ? "disabled" : "success"}
169-
placeholder="Update"
170-
handleOnClick={() => null}
171-
/>
172-
<ButtonForm
173-
disabled={showLoading}
174-
type="submit"
175-
model={showLoading ? "disabled" : "warning"}
176-
placeholder="Cancel"
177-
handleOnClick={handleOnCancelUpdateUserModal}
178-
/>
179-
</>
180-
</div>
181187
</DialogPanel>
182188
</div>
183189
</div>

‎src/app/about/hooks/use-update-user-modal.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { MouseEvent, useState } from "react";
2+
import { useAboutDispatch } from "@/app/about/hooks/use-about-dispatch";
3+
import { useAboutCtx } from "@/app/about/hooks/use-about";
4+
import { useForm } from "react-hook-form";
5+
import { UpdateUserFormSchema } from "@/app/about/interfaces/update-user-form-schema";
6+
import { zodResolver } from "@hookform/resolvers/zod";
7+
import { UpdateUserSchema } from "@/app/about/schemas/update-user-schema";
8+
9+
export function useUpdateUserModal() {
10+
const { shouldOpenUpdateUserModal, user, showLoading } = useAboutCtx();
11+
12+
const {
13+
register,
14+
handleSubmit,
15+
watch,
16+
formState: { errors },
17+
} = useForm<UpdateUserFormSchema>({
18+
resolver: zodResolver(UpdateUserSchema),
19+
});
20+
21+
const file = watch("file");
22+
23+
const { updateUser, setOpenUpdateUserModal } = useAboutDispatch();
24+
25+
const [shouldHideUpdatePassword, setShouldHideUpdatePassword] =
26+
useState<boolean>(true);
27+
28+
const handleSetShouldUpdatePassword = () =>
29+
setShouldHideUpdatePassword(!shouldHideUpdatePassword);
30+
31+
const handleOnCancelUpdateUserModal = (e: MouseEvent<HTMLButtonElement>) => {
32+
e.preventDefault();
33+
setOpenUpdateUserModal();
34+
};
35+
36+
const handleFormSubmit = (data: UpdateUserFormSchema) => {
37+
const { success } = UpdateUserSchema.safeParse(data);
38+
if (success) updateUser(data);
39+
};
40+
41+
return {
42+
errors,
43+
shouldOpenUpdateUserModal,
44+
handleSubmit,
45+
handleFormSubmit,
46+
user,
47+
file,
48+
register,
49+
showLoading,
50+
handleSetShouldUpdatePassword,
51+
shouldHideUpdatePassword,
52+
handleOnCancelUpdateUserModal
53+
}
54+
}

‎src/app/about/page.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
"use client";
22

33
import React, { useEffect } from "react";
4-
import UpdateUserModal from "@/app/about/components/update-user-modal";
54
import Loading from "@/app/components/loading";
65
import Image from "next/image";
76
import { About } from "@/app/about/components";
87
import { useAboutForm } from "@/app/about/hooks/use-about-form";
98

10-
export default function AboutForm() {
9+
export default function AboutPage() {
1110
const {
1211
error,
1312
success,
@@ -37,7 +36,7 @@ export default function AboutForm() {
3736
return (
3837
<About.Root>
3938
<About.Content>
40-
{shouldOpenUpdateUserModal && <UpdateUserModal />}
39+
{shouldOpenUpdateUserModal && <About.UpdateModal />}
4140
{shouldOpenDeleteAccountModal && <About.DeleteModal />}
4241
{showLoading ? (
4342
<Loading />

0 commit comments

Comments
 (0)