From 8e9ec72add784e6f08cdd00a1e383835233c0f50 Mon Sep 17 00:00:00 2001
From: hsuifang <whalekiller03@gmail.com>
Date: Sat, 12 Oct 2024 00:03:00 +0800
Subject: [PATCH] chore: profile registration limitation of birthday

---
 components/Profile/Edit/index.jsx          | 14 +++++-
 components/Profile/Edit/useEditProfile.jsx | 51 ++++++++++++++--------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx
index 324e5d7d..7b6faa69 100644
--- a/components/Profile/Edit/index.jsx
+++ b/components/Profile/Edit/index.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import dayjs from 'dayjs';
 import toast from 'react-hot-toast';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useRouter } from 'next/router';
@@ -69,6 +70,9 @@ function EditPage() {
           onChangeHandler({ key: 'facebook', value: facebook || '' });
           onChangeHandler({ key: 'discord', value: discord || '' });
           onChangeHandler({ key: 'line', value: line || '' });
+        } else if (key === 'birthDay') {
+          const parsedDate = dayjs(value);
+          onChangeHandler({ key: 'birthDay', value: parsedDate });
         } else if (key === 'location') {
           onChangeHandler({ key, value });
           const [country, city, district] = value.split('@');
@@ -132,8 +136,16 @@ function EditPage() {
                     onChangeHandler({ key: 'birthDay', value: date })
                   }
                   renderInput={(params) => (
-                    <TextField {...params} sx={{ width: '100%' }} label="" />
+                    <TextField
+                      {...params}
+                      sx={{ width: '100%' }}
+                      label=""
+                      error={!!errors.birthDay}
+                      helperText={errors.birthDay ? errors.birthDay : ''}
+                    />
                   )}
+                  maxDate={dayjs().subtract(16, 'year')}
+                  defaultCalendarMonth={dayjs().subtract(18, 'year')}
                 />
               </StyledGroup>
               <StyledGroup>
diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx
index 897c8945..70f88872 100644
--- a/components/Profile/Edit/useEditProfile.jsx
+++ b/components/Profile/Edit/useEditProfile.jsx
@@ -47,6 +47,15 @@ const schema = z.object({
     .min(1, { message: '請輸入名字' })
     .max(50, { message: '名字過長' })
     .optional(),
+  birthDay: z
+    .any()
+    .refine((date) => dayjs(date).isValid(), {
+      message: '請選擇您的出生日期',
+    })
+    .refine((date) => dayjs().diff(date, 'year') >= 16, {
+      message: '您的年齡未滿16歲，目前無法於平台註冊，請詳閱島島社群條款',
+    })
+    .optional(),
   isOpenLocation: z.boolean().optional(),
   isOpenProfile: z.boolean().optional(),
   instagram: buildValidator(
@@ -73,6 +82,10 @@ const schema = z.object({
     '長度最多20個字元',
     '長度最少6個字元，支援英文、數字、底線、句號',
   ),
+  isLoadingSubmit: z.boolean().optional(),
+  tagList: z.array(z.string()).optional(),
+  wantToDoList: z.array(z.string()).optional(),
+  roleList: z.array(z.string()).optional(),
 });
 
 const userReducer = (state, payload) => {
@@ -99,26 +112,26 @@ const useEditProfile = () => {
   const [errors, setErrors] = useState({});
 
   const validate = (state = {}, isPartial = false) => {
-    const [key, value] = Object.entries(state)[0];
-    if (key !== 'birthDay') {
-      const result = isPartial
-        ? schema.partial({ [key]: true }).safeParse({ [key]: value })
-        : schema.safeParse({ [key]: value });
-
-      if (!result.success) {
-        result.error.errors.forEach((err) => {
-          setErrors({ [err.path[0]]: err.message });
+    const [key, val] = Object.entries(state)[0];
+    const result = isPartial
+      ? schema
+          .partial({ [key]: true })
+          .safeParse({ [key]: key === 'birthDay' ? val?.$d : val })
+      : schema.safeParse({
+          ...state,
+          birthDay: state.birthDay.$d,
         });
-      }
-      if (isPartial && result.success) {
-        const obj = { ...errors };
-        delete obj[key];
-        setErrors(obj);
-      }
-
-      return result.success;
+    if (!result.success) {
+      result.error.errors.forEach((err) => {
+        setErrors({ [err.path[0]]: err.message });
+      });
+    }
+    if (isPartial && result.success) {
+      const obj = { ...errors };
+      delete obj[key];
+      setErrors(obj);
     }
-    return true;
+    return result.success;
   };
 
   const onChangeHandler = ({ key, value, isMultiple }) => {
@@ -153,7 +166,7 @@ const useEditProfile = () => {
       id,
       email,
       name,
-      birthDay,
+      birthDay: dayjs(birthDay).format('YYYY/MM/DD'),
       gender,
       roleList,
       contactList: {