From b5fd5bd731ff272424d64dbe440bbbe85c41f52b Mon Sep 17 00:00:00 2001 From: teegoood Date: Fri, 12 Jul 2024 16:29:36 +0700 Subject: [PATCH 01/32] refactor: pdpa size --- src/app/test/page.tsx | 12 ++++++++++++ src/components/pdpa/index.tsx | 8 ++++---- 2 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 src/app/test/page.tsx diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx new file mode 100644 index 00000000..2482c7ce --- /dev/null +++ b/src/app/test/page.tsx @@ -0,0 +1,12 @@ +import Pdpa from '@/components/pdpa'; +import React from 'react'; + +const page = () => { + return ( +
+ +
+ ); +}; + +export default page; diff --git a/src/components/pdpa/index.tsx b/src/components/pdpa/index.tsx index 860af918..575d7e74 100644 --- a/src/components/pdpa/index.tsx +++ b/src/components/pdpa/index.tsx @@ -52,7 +52,7 @@ export default function Pdpa(props: PdpaProps) { return (
-
+
-

PDPA

-
+

PDPA

+

{titles.map((title, index) => (

{title}

@@ -117,7 +117,7 @@ export default function Pdpa(props: PdpaProps) {

-

PDPA

+

PDPA

{titles.map((title, index) => ( From 1b658204f8ca0e120085604bfff03668f60cb3df Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 22:32:48 +0700 Subject: [PATCH 14/32] fix: profile image --- src/components/profile/userInfo.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/profile/userInfo.tsx b/src/components/profile/userInfo.tsx index a7fec220..081a4454 100644 --- a/src/components/profile/userInfo.tsx +++ b/src/components/profile/userInfo.tsx @@ -32,8 +32,9 @@ export default function UserInfo({ user }: UserInfoProps) { profile

From 1eab8529899a69395c73d81cb18487d132b575e6 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 22:34:21 +0700 Subject: [PATCH 15/32] fix: staff image --- src/app/staff/info/page.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/staff/info/page.tsx b/src/app/staff/info/page.tsx index a342cfa3..e8daefd3 100644 --- a/src/app/staff/info/page.tsx +++ b/src/app/staff/info/page.tsx @@ -10,7 +10,7 @@ import MenuList from '@/components/MenuList'; export default function AdminInfo() { const { user, logout } = useAuth(); return ( -
+
-
+
profile
From e12ec70cede57d3b88650001c30f8c05132df6c0 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 22:40:15 +0700 Subject: [PATCH 16/32] fix: home image --- src/app/home/page.tsx | 10 ++++------ src/app/register/page.tsx | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 43d75f7f..2c0724c7 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -48,16 +48,14 @@ export default function Home() {
profile picture

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index 97bc51ef..127303eb 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -135,8 +135,8 @@ export default function Register() { const isStaff = user.role == 'staff'; const newPath = isStaff ? '/staff/home' : '/registered'; - router.push(newPath); resetContext(); + router.push(newPath); }); console.log('Form submitted', formData); }; From adbdad658fed9db1415c0bf22ead2c4cb6a27344 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 22:45:18 +0700 Subject: [PATCH 17/32] add spinner when upload register data --- src/app/register/page.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index 127303eb..b8eaaa80 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -18,6 +18,7 @@ import { } from '@/components/register/StyledComponents'; import Button from '@/components/register/Button'; import { major } from '@/utils/register'; +import Spinner from '@/components/Spinner'; type RegisterUser = Pick< User, @@ -56,6 +57,7 @@ export default function Register() { const router = useRouter(); const { user, resetContext } = useAuth(); const userId = user?.id; + const [upload, setUpload] = useState(false); const handleInputChange = ( e: ChangeEvent @@ -129,7 +131,9 @@ export default function Register() { }; const handlePdpaSuccess = async () => { + setUpload(true) updateUserProfile(formData).then(() => { + setUpload(false) if (!user) return; const isStaff = user.role == 'staff'; @@ -369,6 +373,11 @@ export default function Register() { return ( + {upload && ( +
+ +
+ )}
Date: Sat, 13 Jul 2024 23:04:55 +0700 Subject: [PATCH 18/32] fix: include lastname --- src/app/home/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 2c0724c7..ae1062ba 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -59,7 +59,7 @@ export default function Home() { />

- {user?.firstname} {user?.firstname} #{user?.year} + {user?.firstname} {user?.lastname} #{user?.year}
{user?.faculty}

From 202912ad4306c6c3cfb09fb6bb5a5fdb03edae7d Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 23:34:08 +0700 Subject: [PATCH 19/32] refactor: add label, toast and major options for edit page --- src/app/edit/page.tsx | 185 ++++++++++++++++++++++++++---------------- 1 file changed, 113 insertions(+), 72 deletions(-) diff --git a/src/app/edit/page.tsx b/src/app/edit/page.tsx index 91a48b6e..22c64a06 100644 --- a/src/app/edit/page.tsx +++ b/src/app/edit/page.tsx @@ -15,6 +15,8 @@ import { import EditIcon from '@public/edit/edit-icon.svg'; import CurvedLineIcon from '@public/curved-line.svg'; import Button from '@/components/register/Button'; +import { major } from '@/utils/register'; +import toast from 'react-hot-toast'; type RegisterUser = Pick< User, @@ -94,8 +96,9 @@ export default function Register() { const handleSubmit = () => { if (validateForm()) { - updateUserProfile(formData).then(() => { - resetContext(); + updateUserProfile(formData).then(async () => { + await resetContext(); + toast.success('เเก้ไขข้อมูลสำเร็จ'); router.push('/home'); }); } @@ -123,88 +126,126 @@ export default function Register() {

ข้อมูลส่วนตัว

- - - - - - - - - - - -
+
From 7157b04f68c1907db6e5b5cc35fb00fb79c65de0 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sat, 13 Jul 2024 23:35:45 +0700 Subject: [PATCH 20/32] add: toast to register page --- public/register-placeholder.svg | 16 ++++++++ src/app/register/page.tsx | 10 +++-- .../register/UploadProfilePicture.tsx | 39 ++++++++----------- 3 files changed, 39 insertions(+), 26 deletions(-) create mode 100644 public/register-placeholder.svg diff --git a/public/register-placeholder.svg b/public/register-placeholder.svg new file mode 100644 index 00000000..748c50fb --- /dev/null +++ b/public/register-placeholder.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index b8eaaa80..a1dc7e89 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -19,6 +19,7 @@ import { import Button from '@/components/register/Button'; import { major } from '@/utils/register'; import Spinner from '@/components/Spinner'; +import toast from 'react-hot-toast'; type RegisterUser = Pick< User, @@ -131,15 +132,16 @@ export default function Register() { }; const handlePdpaSuccess = async () => { - setUpload(true) - updateUserProfile(formData).then(() => { - setUpload(false) + setUpload(true); + updateUserProfile(formData).then(async () => { + setUpload(false); if (!user) return; + toast.success('ลงทะเบียนสำเร็จ'); const isStaff = user.role == 'staff'; const newPath = isStaff ? '/staff/home' : '/registered'; - resetContext(); + await resetContext(); router.push(newPath); }); console.log('Form submitted', formData); diff --git a/src/components/register/UploadProfilePicture.tsx b/src/components/register/UploadProfilePicture.tsx index a94457e2..4756ffba 100644 --- a/src/components/register/UploadProfilePicture.tsx +++ b/src/components/register/UploadProfilePicture.tsx @@ -4,6 +4,9 @@ import { getAccessToken } from '@/utils/auth'; import { apiClient } from '@/utils/axios'; import Spinner from '../Spinner'; import Button from './Button'; +import imgPlaceholder from '@public/register-placeholder.svg'; +import Image from 'next/image'; +import { Icon } from '@iconify/react/dist/iconify.js'; interface UploadProfilePictureProps { onNext?: () => void; @@ -95,29 +98,25 @@ const UploadProfilePicture: React.FC = ({
)}
-
+
{photo ? ( Profile ) : currentPhotoUrl ? ( Profile ) : ( -
- - - +
+ image-placeholder
)}
@@ -127,16 +126,12 @@ const UploadProfilePicture: React.FC = ({ onChange={handlePhotoChange} className="absolute inset-0 opacity-0 cursor-pointer" /> -
-
- - - +
+
+
From 035bb0456f73a34d50567ee42847f0a2a0bd2782 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sun, 14 Jul 2024 00:06:27 +0700 Subject: [PATCH 21/32] refactor: edit page --- src/app/edit/page.tsx | 106 +++++++++++++++++++++++------------- src/context/AuthContext.tsx | 2 +- src/utils/register.ts | 3 + 3 files changed, 71 insertions(+), 40 deletions(-) diff --git a/src/app/edit/page.tsx b/src/app/edit/page.tsx index 22c64a06..8a9f083f 100644 --- a/src/app/edit/page.tsx +++ b/src/app/edit/page.tsx @@ -17,9 +17,11 @@ import CurvedLineIcon from '@public/curved-line.svg'; import Button from '@/components/register/Button'; import { major } from '@/utils/register'; import toast from 'react-hot-toast'; +import Spinner from '@/components/Spinner'; +import { UserDTO } from '@/dtos/userDTO'; type RegisterUser = Pick< - User, + UserDTO, | 'title' | 'firstname' | 'lastname' @@ -27,16 +29,16 @@ type RegisterUser = Pick< | 'faculty' | 'year' | 'tel' - | 'parentTel' + | 'parent_tel' | 'parent' - | 'foodAllergy' - | 'drugAllergy' + | 'food_allergy' + | 'drug_allergy' | 'illness' >; export default function Register() { const router = useRouter(); - + const [upload, setUpload] = useState(false); const { user, resetContext } = useAuth(); const userId = user?.id; const [formData, setFormData] = useState({ @@ -47,10 +49,10 @@ export default function Register() { faculty: user?.faculty || '', year: user?.year || 0, tel: user?.tel || '', - parentTel: user?.parentTel || '', + parent_tel: user?.parentTel || '', parent: user?.parent || '', - foodAllergy: user?.foodAllergy || '', - drugAllergy: user?.drugAllergy || '', + food_allergy: user?.foodAllergy || '', + drug_allergy: user?.drugAllergy || '', illness: user?.illness || '', }); const [errors, setErrors] = useState([]); @@ -74,10 +76,16 @@ export default function Register() { if (!formData.faculty) formErrors.push('faculty'); if (!formData.year) formErrors.push('year'); if (!formData.tel) formErrors.push('tel'); - if (!formData.parentTel) formErrors.push('parentTel'); + if (!formData.parent_tel) formErrors.push('parent_tel'); if (!formData.parent) formErrors.push('parent'); setErrors(formErrors); - return formErrors.length === 0; + + const isError = formErrors.length !== 0; + if (isError) { + toast.error('โปรดกรอกข้อมูลให้ครบ'); + } + + return !isError; }; async function updateUserProfile(userData: RegisterUser) { @@ -96,7 +104,9 @@ export default function Register() { const handleSubmit = () => { if (validateForm()) { + setUpload(true); updateUserProfile(formData).then(async () => { + setUpload(true); await resetContext(); toast.success('เเก้ไขข้อมูลสำเร็จ'); router.push('/home'); @@ -106,6 +116,12 @@ export default function Register() { return (
+ {upload && ( +
+ +
+ )} +
-

+

ข้อมูลผู้ปกครอง

- - - - - - + + + + + +
@@ -283,19 +311,19 @@ export default function Register() {

void; + resetContext: () => Promise; logout: () => void; } diff --git a/src/utils/register.ts b/src/utils/register.ts index 95950871..c218e375 100644 --- a/src/utils/register.ts +++ b/src/utils/register.ts @@ -1,3 +1,5 @@ +import { getAccessToken } from "./auth"; + export const major: { id: string; name: string }[] = [ { id: '21', name: 'วิศวกรรมศาสตร์' }, { id: '22', name: 'อักษรศาสตร์' }, @@ -19,3 +21,4 @@ export const major: { id: string; name: string }[] = [ { id: '38', name: 'จิตวิทยา' }, { id: '39', name: 'วิทยาศาสตร์การกีฬา' }, ]; + From 08108efbc4f6567fd51d292e94ace325a51d88b8 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sun, 14 Jul 2024 00:31:50 +0700 Subject: [PATCH 22/32] refactor: register ui --- src/app/edit/page.tsx | 12 +- src/app/register/page.tsx | 186 ++++++++++-------- src/components/register/Button.tsx | 3 +- .../register/UploadProfilePicture.tsx | 1 + 4 files changed, 115 insertions(+), 87 deletions(-) diff --git a/src/app/edit/page.tsx b/src/app/edit/page.tsx index 8a9f083f..2bf8b17f 100644 --- a/src/app/edit/page.tsx +++ b/src/app/edit/page.tsx @@ -248,10 +248,7 @@ export default function Register() {
-
{errorMessage && (
{errorMessage}
From 2162e9a1294a2de0725a7b83dce7feac97139258 Mon Sep 17 00:00:00 2001 From: teegoood Date: Sun, 14 Jul 2024 00:54:52 +0700 Subject: [PATCH 24/32] refactor: register usage --- src/app/edit/page.tsx | 2 +- src/app/register/page.tsx | 63 ++++++++++--------- .../register/UploadProfilePicture.tsx | 2 +- 3 files changed, 36 insertions(+), 31 deletions(-) diff --git a/src/app/edit/page.tsx b/src/app/edit/page.tsx index 2bf8b17f..28f23a72 100644 --- a/src/app/edit/page.tsx +++ b/src/app/edit/page.tsx @@ -107,7 +107,7 @@ export default function Register() { setUpload(true); updateUserProfile(formData).then(async () => { setUpload(true); - await resetContext(); + resetContext(); toast.success('เเก้ไขข้อมูลสำเร็จ'); router.push('/home'); }); diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index 288ab4b5..7bfc5414 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -10,7 +10,6 @@ import { useAuth } from '@/context/AuthContext'; import { getAccessToken } from '@/utils/auth'; import { apiClient } from '@/utils/axios'; import Pdpa from '@/components/pdpa'; -import { User } from '@/types/user'; import UploadProfilePicture from '@/components/register/UploadProfilePicture'; import { StyledInput, @@ -20,9 +19,10 @@ import Button from '@/components/register/Button'; import { major } from '@/utils/register'; import Spinner from '@/components/Spinner'; import toast from 'react-hot-toast'; +import { UserDTO } from '@/dtos/userDTO'; type RegisterUser = Pick< - User, + UserDTO, | 'title' | 'firstname' | 'lastname' @@ -30,10 +30,10 @@ type RegisterUser = Pick< | 'faculty' | 'year' | 'tel' - | 'parentTel' + | 'parent_tel' | 'parent' - | 'foodAllergy' - | 'drugAllergy' + | 'food_allergy' + | 'drug_allergy' | 'illness' >; @@ -47,10 +47,10 @@ export default function Register() { faculty: '', year: 0, tel: '', - parentTel: '', + parent_tel: '', parent: '', - foodAllergy: '', - drugAllergy: '', + food_allergy: '', + drug_allergy: '', illness: '', }); const [isPdpaOpen, setIsPdpaOpen] = useState(false); @@ -86,15 +86,21 @@ export default function Register() { break; case 2: if (!formData.tel) stepErrors.push('tel'); - if (!formData.parentTel) stepErrors.push('parentTel'); + if (!formData.parent_tel) stepErrors.push('parent_tel'); if (!formData.parent) stepErrors.push('parent'); break; case 3: // Note: not validate food, drug, and illness break; } + setErrors(stepErrors); - return stepErrors.length === 0; + const isError = stepErrors.length !== 0; + if (isError) { + toast.error('โปรดกรอกข้อมูลให้ครบ'); + } + + return !isError; }; const handleNextStep = () => { @@ -133,17 +139,18 @@ export default function Register() { const handlePdpaSuccess = async () => { setUpload(true); - updateUserProfile(formData).then(async () => { - setUpload(false); - if (!user) return; - toast.success('ลงทะเบียนสำเร็จ'); + updateUserProfile(formData) + .then(async () => { + if (!user) return; + toast.success('ลงทะเบียนสำเร็จ'); - const isStaff = user.role == 'staff'; - const newPath = isStaff ? '/staff/home' : '/registered'; + const isStaff = user.role == 'staff'; + const newPath = isStaff ? '/staff/home' : '/registered'; - await resetContext(); - router.push(newPath); - }); + resetContext(); + router.push(newPath); + }) + .catch(() => setUpload(false)); console.log('Form submitted', formData); }; @@ -302,11 +309,11 @@ export default function Register() { เบอร์โทรศัพท์ของผู้ปกครอง