Merge to prod

components/Group/Form/Form.styled.jsx

@@ -33,7 +33,7 @@ export const StyledContainer = styled.main`
     font-size: 14px;
   }
 
-  @media (max-width: 760px) {
+  @media (max-width: 767px) {
     padding: 20px;
   }
 `;

components/Group/Form/index.jsx

@@ -69,7 +69,7 @@ export default function GroupForm({
   return (
     <ProtectedComponent>
       <StyledContainer>
-        <StyledPaper className="p-10 mb-4 md:w-[720px]">
+        <StyledPaper className="p-10 mb-4 w-full md:w-[720px]">
           <StyledHeading>
             {isCreateMode ? '發起揪團' : '編輯揪團'}
           </StyledHeading>
@@ -145,7 +145,7 @@ export default function GroupForm({
             placeholder="希望在什麼時間舉行？"
           />
         </StyledPaper>
-        <StyledPaper className="p-10 mb-4 md:w-[720px]">
+        <StyledPaper className="p-10 mb-4 w-full md:w-[720px]">
           <Fields.TextField
             label="想找的夥伴"
             name="partnerStyle"
@@ -215,7 +215,7 @@ export default function GroupForm({
             helperText="標籤填寫完成後，會用 Hashtag 的形式呈現，例如： #一起學日文"
           />
         </StyledPaper>
-        <StyledPaper className="md:w-[720px]">
+        <StyledPaper className="w-full md:w-[720px]">
           <Fields.DateRadio
             label="揪團期限"
             name="deadline"

components/Marathon/SignUp/MarathonForm.jsx

@@ -76,7 +76,6 @@ export default function MarathonForm({
   const reduxDispatch = useDispatch();
   const [hasLoaded, setHasLoaded] = useState(false);
   const [errors, setErrors] = useState({});
-  const [hasErrors, setHasErrors] = useState(false);
   const marathonState = useSelector((state) => { return state.marathon; });
   const localStorgeStored = window.localStorage.getItem('newMarathon');
   const editingMarathon = localStorgeStored ? JSON.parse(localStorgeStored) : null;
@@ -87,20 +86,6 @@ export default function MarathonForm({
   };
   const [newMarathon, setNewMarathon] = useReducer(marathonFormReducer, initialState());
 
-  const onNextStep = () => {
-    if (hasErrors) {
-      toast.error('請修正錯誤');
-    } else {
-      reduxDispatch(updateNewMarathon(newMarathon));
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const onPrevStep = () => {
-    reduxDispatch(updateNewMarathon(newMarathon));
-    setCurrentStep(currentStep - 1);
-  };
-
   const validators = {
     required: (value) => {
       return value.trim().length > 0;
@@ -110,50 +95,74 @@ export default function MarathonForm({
       return names.length === milestonesLength;
     }
   };
-  const validateRules = {
+
+  const marathonDataMap = {
     title: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'title',
       validate: validators.required,
       message: '請填寫表格',
     },
     description: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'description',
       validate: validators.required,
       message: '請填寫計畫敘述',
     },
     motivationDescription: {
+      dispatchType: 'UPDATE_MOTIVATION_FIELD',
+      dispatchKey: 'description',
       validate: validators.required,
       message: '請填寫學習動機',
     },
     outcomesDescription: {
+      dispatchType: 'UPDATE_OUTCOMES_FIELD',
+      dispatchKey: 'description',
       validate: validators.required,
       message: '請填寫學習成果',
     },
     goals: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'goals',
       validate: validators.required,
       message: '請填寫學習目標',
     },
     content: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'content',
       validate: validators.required,
       message: '請填寫學習內容',
     },
     milestonesName: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'milestones',
       validate: (value) => {
         return validators.allMilestonesNameRequired(value, newMarathon.milestones?.length);
       },
       message: '請填寫每週/隔週里程碑目標',
     },
     strategiesDescription: {
+      dispatchType: 'UPDATE_STRATEGIES_FIELD',
+      dispatchKey: 'description',
       validate: validators.required,
       message: '請填寫學習策略',
     },
     resources: {
+      dispatchType: 'UPDATE_FIELD',
+      dispatchKey: 'resources',
       validate: validators.required,
       message: '請填寫學習資源'
     }
   };
 
+  /**
+   * @param {string} name - The name of the field to validate.
+   * @param {*} input - The input value to validate.
+   * @returns {boolean} - Returns true if the input value passes validation, otherwise false.
+   */
   const handleValidate = (name, input) => {
-    const validateResult = validateRules[name]?.validate(input);
-    const errorMessage = validateRules[name]?.message;
+    const validateResult = marathonDataMap[name]?.validate(input);
+    const errorMessage = marathonDataMap[name]?.message;
     if (validateResult) {
       setErrors((prevErrors) =>
         Object.fromEntries(Object.entries(prevErrors).filter(([key]) => key !== name))
@@ -168,22 +177,75 @@ export default function MarathonForm({
     }
     return validateResult;
   };
+  const handleValidateAll = () => {
+    const newErrors = {};
+    let isValid = true;
+    Object.entries(marathonDataMap).forEach(([name, fieldData]) => {
+      const { validate, message } = fieldData;
+      let input;
+      if (validate) {
+        switch (name) {
+          case 'milestonesName':
+            input = newMarathon.milestones;
+            break;
+          case 'motivationDescription':
+            input = newMarathon.motivation?.description;
+            break;
+          case 'strategiesDescription':
+            input = newMarathon.strategies?.description;
+            break;
+          case 'outcomesDescription':
+            input = newMarathon.outcomes?.description;
+            break;
+          default:
+            input = newMarathon[name];
+          break;
+        }
+        const validationPassed = validate(input);
+
+        if (!validationPassed) {
+          newErrors[name] = { message: message || "驗證失敗" };
+          isValid = false;
+        }
+      }
+    });
+    setErrors(newErrors);
+    return isValid;
+  };
   const handleOnChange = (
-    stateDispatchType,
-    stateDispatchKey,
+    name,
     value,
-    validateName,
   ) => {
-    if (stateDispatchType && stateDispatchKey) {
+    const type = marathonDataMap[name]?.dispatchType;
+    const key = marathonDataMap[name]?.dispatchKey;
+
+    if (type && key) {
       setNewMarathon({
-        type: stateDispatchType,
-        payload: { key: stateDispatchKey, value }
+        type,
+        payload: { key, value }
       });
     }
-    if (validateName) {
-      handleValidate(validateName, value);
+
+    if (name) {
+      handleValidate(name, value);
+    }
+  };
+
+  const onNextStep = () => {
+    const isValid = handleValidateAll();
+    if (!isValid) {
+      toast.error('請修正錯誤');
+    } else {
+      reduxDispatch(updateNewMarathon(newMarathon));
+      setCurrentStep(currentStep + 1);
     }
   };
+
+  const onPrevStep = () => {
+    reduxDispatch(updateNewMarathon(newMarathon));
+    setCurrentStep(currentStep - 1);
+  };
+
   useEffect(() => {
     setHasLoaded(true);
     const storagedErrors = getMarathonErrorsStorage().get();
@@ -200,11 +262,6 @@ export default function MarathonForm({
 
   useEffect(() => {
     getMarathonErrorsStorage().set(errors);
-    if (Object.keys(errors).length) {
-      setHasErrors(true);
-    } else {
-      setHasErrors(false);
-    }
   }, [errors]);
 
   return (
@@ -245,7 +302,7 @@ export default function MarathonForm({
             title="學習主題名稱"
             value={newMarathon.title || ''}
             onChange={(e) => {
-              handleOnChange('UPDATE_FIELD', 'title', e.target.value, 'title');
+              handleOnChange('title', e.target.value);
             }}
             sx={{
               mb: '8px',
@@ -278,7 +335,7 @@ export default function MarathonForm({
             <StyledTextareaAutosize
               value={newMarathon.description || ''}
               onChange={(e) => {
-                handleOnChange('UPDATE_FIELD', 'description', e.target.value, 'description');
+                handleOnChange('description', e.target.value);
               }}
               placeholder="範例：因為對剪影片和當 Youtuber 有興趣，我預計會研究搞笑型 Youtuber 的影片腳本與剪輯方式、拍攝我日常生活及練習剪輯，並建立 Youtube 頻道上傳影片。希望能藉此了解如何當一位 Youtuber。"
               className={errors.description ? 'error' : ''}
@@ -323,15 +380,15 @@ export default function MarathonForm({
                 '生活發生變化',
                 '影響社會',
                 '受群體影響',
-                '其他：請在下方補上其他原因，並詳細說明動機'
+                '其他：請於下方撰寫'
               ]}
               type="UPDATE_MOTIVATION_FIELD"
               onChange={setNewMarathon}
               selectedItems={newMarathon?.motivation?.tags || []}
             />
             <StyledTextareaAutosize
               onChange={(e) => {
-                handleOnChange('UPDATE_MOTIVATION_FIELD', 'description', e.target.value, 'motivationDescription');
+                handleOnChange('motivationDescription', e.target.value);
               }}
               className={errors.motivationDescription ? 'error' : ''}
               value={newMarathon?.motivation?.description || ''}
@@ -360,7 +417,7 @@ export default function MarathonForm({
             </Typography>
             <StyledTextareaAutosize
               onChange={(e) => {
-                handleOnChange('UPDATE_FIELD', 'goals', e.target.value, 'goals');
+                handleOnChange('goals', e.target.value);
               }}
               value={newMarathon.goals || ''}
               placeholder="範例：
@@ -391,7 +448,7 @@ export default function MarathonForm({
             </Typography>
             <StyledTextareaAutosize
               onChange={(e) => {
-                handleOnChange('UPDATE_FIELD', 'content', e.target.value, 'content');
+                handleOnChange('content', e.target.value);
               }}
               value={newMarathon.content || ''}
               placeholder="範例：
@@ -442,15 +499,15 @@ export default function MarathonForm({
                 "田野調查",
                 "訪談",
                 "問卷調查",
-                "其他：請在下方補上其他原因，並詳細說明動機"
+                "其他：請於下方撰寫"
               ]}
               type="UPDATE_STRATEGIES_FIELD"
               onChange={setNewMarathon}
               selectedItems={newMarathon?.strategies?.tags || []}
             />
             <StyledTextareaAutosize
               onChange={(e) => {
-                handleOnChange('UPDATE_STRATEGIES_FIELD', 'description', e.target.value, 'strategiesDescription');
+                handleOnChange('strategiesDescription', e.target.value);
               }}
               value={newMarathon?.strategies?.description || ''}
               placeholder="範例：我預計會研究影片腳本、拍攝與剪輯方式，接著了解拍攝、剪輯與Youtube頻道經營，並同時練習拍攝與剪輯，開始經營頻道。我會用notion整理我收集到的資料以及筆記。"
@@ -483,7 +540,7 @@ export default function MarathonForm({
               placeholder="範例：YouTube 創作者的實用資源"
               value={newMarathon.resources || ''}
               onChange={(e) => {
-                handleOnChange('UPDATE_FIELD', 'resources', e.target.value, 'resources');
+                handleOnChange('resources', e.target.value);
               }}
               className={errors.resources ? 'error' : 'warning'}
               endAdornment={errors.resources ? <ClearIcon sx={{ color: '#EF5364' }} /> : null}
@@ -543,15 +600,15 @@ export default function MarathonForm({
             "舉辦活動",
             "開課",
             "參與競賽",
-            "其他：請在下方補上其他原因，並詳細說明動機"
+            "其他：請於下方撰寫"
           ]}
           type="UPDATE_OUTCOMES_FIELD"
           onChange={setNewMarathon}
           selectedItems={newMarathon?.outcomes?.tags || []}
         />
         <StyledTextareaAutosize
           onChange={(e) => {
-            handleOnChange('UPDATE_OUTCOMES_FIELD', 'description', e.target.value, 'outcomesDescription');
+            handleOnChange('outcomesDescription', e.target.value);
           }}
           value={newMarathon?.outcomes?.description || ''}
           placeholder="範例：我預計會架設一個Youtube頻道，並上傳至少5支影片，並整理觀眾回饋與相關數據。"

components/Marathon/SignUp/MilestoneGroup.jsx

@@ -103,7 +103,7 @@ export default function MilestoneGroup({
     // if change frequency, clear all data
     setFrequency(e.target.value);
     const changedMilestones = calculateMilestones(startDate, e.target.value, []);
-    onChangeHandler('UPDATE_FIELD', 'milestones', changedMilestones, 'milestonesName');
+    onChangeHandler('milestonesName', changedMilestones);
   };
 
   const handleEndDate = (/** fakeDate */) => {
@@ -115,7 +115,7 @@ export default function MilestoneGroup({
     const changedMilestones = milestones.map((item) => {
       return (item._tempId === newMilestone._tempId ? newMilestone : item);
     });
-    onChangeHandler('UPDATE_FIELD', 'milestones', changedMilestones, 'milestonesName');
+    onChangeHandler('milestonesName', changedMilestones);
   };
   useEffect(() => {
     const weeklyMilestonesLength = 22;
@@ -132,7 +132,7 @@ export default function MilestoneGroup({
     }
 
     if (!isDisabled) {
-      onChangeHandler('UPDATE_FIELD', 'milestones', initMilestones, 'milestonesName');
+      onChangeHandler('milestonesName', initMilestones);
     }
   }, []);