Fix: Validation for profile's gender and role, and remove unnecessary…

… fields.

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 && (
+      <Box
+        sx={{
+          mt: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          color: '#EF5364',
+          bgcolor: '#FFEFF1',
+          borderRadius: '4px',
+          padding: '4px 8px',
+          fontSize: '14px',
+        }}
+      >
+        <IoMdCloseCircleOutline size={20} />
+        <Typography as="p">{errText}</Typography>
+      </Box>
+    )
+  );
+};
+
+export default ErrorMessage;

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() {
                     </StyledSelectBox>
                   ))}
                 </StyledSelectWrapper>
+                <ErrorMessage errText={errors.gender} />
               </StyledGroup>
               <StyledGroup>
                 <Typography fontWeight="500">身份 *</Typography>
@@ -194,6 +196,7 @@ function EditPage() {
                     </StyledSelectBox>
                   ))}
                 </StyledSelectWrapper>
+                <ErrorMessage errText={errors.roleList} />
               </StyledGroup>
             </Box>
           </StyledTitleWrap>

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