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 }) => {