Merge pull request #133 from daodaoedu/v2

feat(group): optimize area checkbox selection logic
daodaoedu · Nov 17, 2024 · 83474da · 83474da
2 parents d371de0 + e6527e0
commit 83474da
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 27 deletions.
diff --git a/components/Group/Form/Fields/AreaCheckbox.jsx b/components/Group/Form/Fields/AreaCheckbox.jsx
@@ -17,29 +17,46 @@ export default function AreaCheckbox({
   const getPhysicalArea = (data) =>
     options.find((option) => data.includes(option.name));
 
-  const handleChange = (val) =>
-    control.onChange({ target: { name, value: val } });
+  const handleChange = (val, action, _value) => {
+    if (action === 'add' && _value === '待討論') {
+      control.onChange({ target: { name, value: ['待討論'] } });
+      setIsPhysicalArea(false);
+      return;
+    }
+    if (action === 'remove' && !val.length) {
+      control.onChange({ target: { name, value: ['待討論'] } });
+      setIsPhysicalArea(false);
+      return;
+    }
+    control.onChange({ target: { name, value: val.filter((v) => v !== '待討論') } });
+  };
 
   const physicalAreaValue = getPhysicalArea(value)?.name || '';
 
   const toggleIsPhysicalArea = () => {
     const updatedValue = value.filter((v) => !getPhysicalArea([v]));
-    handleChange(updatedValue);
-    setIsPhysicalArea((pre) => !pre);
+    if (isPhysicalArea && updatedValue.includes('待討論')) {
+      handleChange(updatedValue, 'add', '待討論');
+    } else {
+      handleChange(updatedValue);
+      setIsPhysicalArea((pre) => !pre);
+    }
   };
 
   const handleCheckboxChange = (_value) => {
-    const updatedValue = value.includes(_value)
+    const hasValue = value.includes(_value);
+    const action = hasValue ? 'remove' : 'add';
+    const updatedValue = hasValue
       ? value.filter((v) => v !== _value)
       : [...value, _value];
-    handleChange(updatedValue);
+    handleChange(updatedValue, action, _value);
   };
 
   const handlePhysicalAreaChange = ({ target }) => {
     const updatedValue = value
       .filter((v) => !getPhysicalArea([v]))
       .concat(target.value);
-    handleChange(updatedValue);
+    handleChange(updatedValue, 'add', target.value);
   };
 
   const physicalAreaControl = {
@@ -57,14 +74,12 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={toggleIsPhysicalArea} />}
           label="實體活動"
-          disabled={value.includes('待討論')}
           checked={isPhysicalArea}
         />
         <Select
           name={name}
           options={options}
           placeholder="地點"
-          disabled={value.includes('待討論')}
           value={physicalAreaValue}
           itemLabel={itemLabel}
           itemValue={itemValue}
@@ -76,7 +91,6 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={() => handleCheckboxChange('線上')} />}
           label="線上"
-          disabled={value.includes('待討論')}
           checked={value.includes('線上')}
         />
       </div>
@@ -85,7 +99,6 @@ export default function AreaCheckbox({
           control={<Checkbox onClick={() => handleCheckboxChange('待討論')} />}
           label="待討論"
           checked={value.includes('待討論')}
-          disabled={value.some((item) => item !== '待討論')}
         />
       </div>
     </>

diff --git a/components/Group/Form/Fields/CheckboxGroup.jsx b/components/Group/Form/Fields/CheckboxGroup.jsx
@@ -7,14 +7,14 @@ export default function CheckboxGroup({
   name,
   value = [],
   control,
-  handleValues,
+  transformCheckboxValues,
 }) {
   const handleCheckboxChange = (_value) => {
     const hasValue = value.includes(_value);
     const updatedValue = hasValue
       ? value.filter((v) => v !== _value)
       : [...value, _value];
-    const newValue = handleValues(
+    const newValue = transformCheckboxValues(
       hasValue ? 'remove' : 'add',
       _value,
       updatedValue,

diff --git a/components/Group/Form/Fields/Select.jsx b/components/Group/Form/Fields/Select.jsx
@@ -41,7 +41,8 @@ export default function Select({
         }}
         value={value}
         disabled={disabled}
-        {...control}
+        onChange={control.onChange}
+        onBlur={control.onBlur}
       >
         {placeholder && (
           <MenuItem disabled value="" sx={{ fontSize: 14 }}>

diff --git a/components/Group/Form/Fields/TextField.jsx b/components/Group/Form/Fields/TextField.jsx
@@ -33,7 +33,8 @@ export default function TextField({
           placeholder={placeholder}
           value={value}
           helperText={helperText}
-          {...control}
+          onChange={control.onChange}
+          onBlur={control.onBlur}
         />
       )}
       <span className="error-message">{error}</span>

diff --git a/components/Group/Form/index.jsx b/components/Group/Form/index.jsx
@@ -98,7 +98,7 @@ export default function GroupForm({
           <Fields.CheckboxGroup
             label="揪團類型"
             name="activityCategory"
-            handleValues={(action, value, activityCategory) => {
+            transformCheckboxValues={(action, value, activityCategory) => {
               if (action === 'add' && value === '其他') {
                 return ['其他'];
               }

diff --git a/components/Group/Form/useGroupForm.jsx b/components/Group/Form/useGroupForm.jsx
@@ -26,10 +26,10 @@ const INITIAL_VALUES = {
   originPhotoURL: '',
   photoURL: '',
   photoAlt: '',
-  activityCategory: ['Other'],
+  activityCategory: ['其他'],
   category: [],
   participator: '',
-  area: [],
+  area: ['待討論'],
   time: '',
   partnerStyle: '',
   partnerEducationStep: [],
@@ -57,7 +57,7 @@ const rules = {
     .min(1, '請選擇學習領域'),
   participator: z
     .string()
-    .regex(/^(100|[1-9]?\d)$/, '請輸入整數，需大於 0，不可超過 100'),
+    .regex(/^(100|[1-9]\d|[1-9])$/, '請輸入整數，需大於 0，不可超過 100'),
   area: z
     .array(z.enum(AREAS.concat({ label: '待討論' }).map(({ label }) => label)))
     .min(1, '請選擇地點'),
@@ -92,7 +92,7 @@ export default function useGroupForm(defaultValue) {
     ...Object.fromEntries(
       Object.entries(rules).map(([key, rule]) => [
         key,
-        rule.safeParse(defaultValue[key])?.data || INITIAL_VALUES[key],
+        rule.safeParse(defaultValue[key])?.data ?? INITIAL_VALUES[key],
       ])
     ),
     userId: me?._id,
@@ -189,7 +189,7 @@ export default function useGroupForm(defaultValue) {
       setErrors(updatedErrors);
       if (!isFocus) {
         pushSnackbar({
-          message: Object.values(updatedErrors)[0],
+          message: Object.values(updatedErrors).filter(Boolean)[0],
           vertical: 'top',
           horizontal: 'center',
           type: 'error',

diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx
@@ -48,8 +48,13 @@ function GroupCard({
             <span>{formatToString(partnerEducationStep, '皆可')}</span>
           </StyledText>
         </StyledInfo>
-        <StyledText lineClamp="2" fontSize="14px" style={{ height: '48px' }}>
-          <MarkdownEditor value={content?.split('\n')[0]} suppressLinkDefaultPrevent readOnly />
+        <StyledText lineClamp="2" fontSize="14px" style={{ height: '42px' }}>
+          <MarkdownEditor
+            value={content?.split('\n')[0]}
+            disabledProse
+            suppressLinkDefaultPrevent
+            readOnly
+          />
         </StyledText>
         <StyledAreas>
           <LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />

diff --git a/components/Profile/MyGroup/GroupCard.jsx b/components/Profile/MyGroup/GroupCard.jsx
@@ -88,7 +88,12 @@ function GroupCard({
         <StyledContainer>
           <StyledTitle>{title}</StyledTitle>
           <StyledText lineClamp="2" style={{ height: '42px' }}>
-            <MarkdownEditor readOnly value={content?.split('\n')[0]} suppressLinkDefaultPrevent />
+            <MarkdownEditor
+              readOnly
+              value={content?.split('\n')[0]}
+              disabledProse
+              suppressLinkDefaultPrevent
+            />
           </StyledText>
           <StyledAreas>
             <LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />

diff --git a/shared/components/MarkdownEditor/MarkdownEditor.jsx b/shared/components/MarkdownEditor/MarkdownEditor.jsx
@@ -64,12 +64,14 @@ function InternalMarkdownEditor(
     editorClassName,
     onChange,
     suppressLinkDefaultPrevent = false,
+    disabledProse = false,
   },
   ref
 ) {
   const id = useId();
   const checkLinkRef = useRef(null);
   const markdown = useRef(value);
+  const editorSelectors = 'markdown-editor';
   const pluginsSettings = useMemo(
     () =>
       Object.entries(generatePluginsSettings({ diffMarkdown: markdown.current }))
@@ -87,13 +89,18 @@ function InternalMarkdownEditor(
   );
 
   useEffect(() => {
-    const editor = document.getElementById(id).querySelector('.prose');
+    const editor = document.getElementById(id).querySelector(`.${editorSelectors}`);
 
     const handleClick = (e) => {
       if (suppressLinkDefaultPrevent) {
         return;
       }
 
+      if (!readOnly) {
+        e.preventDefault();
+        return;
+      }
+
       let { target } = e;
       while (target.tagName !== 'A') {
         if (editor === target) break;
@@ -121,7 +128,8 @@ function InternalMarkdownEditor(
         suppressHtmlProcessing
         className={className}
         contentEditableClassName={cn(
-          'prose',
+          editorSelectors,
+          disabledProse ? 'disabled-prose' : 'prose',
           readOnly && '!p-0',
           editorClassName
         )}

diff --git a/shared/styles/global.css b/shared/styles/global.css
@@ -6,4 +6,10 @@
   .prose li[role=checkbox] {
     @apply indent-1 relative before:translate-y-1 after:absolute after:top-1/2 after:-translate-y-2/3 after:rotate-45;
   }
-}
+  .disabled-prose li {
+    @apply my-0;
+  }
+  .disabled-prose a {
+    @apply text-basic-black;
+  }
+}