diff --git a/components/Profile/Edit/ErrorMessage.jsx b/components/Profile/Edit/ErrorMessage.jsx new file mode 100644 index 0000000..5d97999 --- /dev/null +++ b/components/Profile/Edit/ErrorMessage.jsx @@ -0,0 +1,27 @@ +import { IoMdCloseCircleOutline } from 'react-icons/io'; +import { Box, Typography } from '@mui/material'; + +const ErrorMessage = ({ errText }) => { + return ( + errText && ( + + + {errText} + + ) + ); +}; + +export default ErrorMessage; diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx index 9d4dd03..030c5a1 100644 --- a/components/Profile/Edit/index.jsx +++ b/components/Profile/Edit/index.jsx @@ -28,6 +28,7 @@ import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import InputTags from '../InputTags'; +import ErrorMessage from './ErrorMessage'; import TheAvator from './TheAvator'; import FormInput from './EditFormInput'; @@ -167,6 +168,7 @@ function EditPage() { ))} + 身份 * @@ -194,6 +196,7 @@ function EditPage() { ))} + diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx index 70f8887..23485b5 100644 --- a/components/Profile/Edit/useEditProfile.jsx +++ b/components/Profile/Edit/useEditProfile.jsx @@ -31,22 +31,18 @@ const initialState = { const buildValidator = (maxLength, regex, maxMsg, regMsg) => z.string().max(maxLength, maxMsg).regex(regex, regMsg).optional(); -const tempSchema = Object.keys(initialState).reduce((acc, key) => { - return key !== 'birthDay' - ? { - ...acc, - [key]: z.string().optional(), - } - : acc; -}, {}); - const schema = z.object({ - ...tempSchema, name: z .string() .min(1, { message: '請輸入名字' }) .max(50, { message: '名字過長' }) .optional(), + gender: z + .string() + .refine((val) => val !== undefined && val !== '', { + message: '請選擇您的性別', + }) + .optional(), birthDay: z .any() .refine((date) => dayjs(date).isValid(), { @@ -56,8 +52,6 @@ const schema = z.object({ message: '您的年齡未滿16歲,目前無法於平台註冊,請詳閱島島社群條款', }) .optional(), - isOpenLocation: z.boolean().optional(), - isOpenProfile: z.boolean().optional(), instagram: buildValidator( 30, /^($|[a-zA-Z0-9_.]{2,20})$/, @@ -82,10 +76,7 @@ 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(), + roleList: z.array(z.string()).min(1, '請選擇您的身份').optional(), }); const userReducer = (state, payload) => { @@ -136,7 +127,9 @@ const useEditProfile = () => { const onChangeHandler = ({ key, value, isMultiple }) => { stateDispatch({ key, value, isMultiple }); - validate({ [key]: value }, true); + // if isMultiple is true, value must be in array , if not, create a new array then check + const checkVal = isMultiple && !Array.isArray(isMultiple) ? [value] : value; + validate({ [key]: checkVal }, true); }; const onSubmit = async ({ id, email }) => {