Merge to prod

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['react', 'import', 'react-hooks'],
-  extends: ['plugin:prettier/recommended', 'airbnb'],
+  extends: ['airbnb'],
   env: {
     browser: true,
     es2021: true,
@@ -23,6 +23,7 @@ module.exports = {
     },
   },
   rules: {
+    "import/no-extraneous-dependencies": ["error", { devDependencies: ["./*.js"] }],
     'react/no-unescaped-entities': 'off',
     '@next/next/no-page-custom-font': 'off',
     'react/prop-types': [0],

.node-version

@@ -1 +1 @@
-16.14.0
+18.18.0

components/ContributeResource/LearningResource/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Box, Typography, Button } from '@mui/material';
-import window from 'global/window';
 
 const LearningResource = () => {
   return (

components/Group/Form/Fields/Upload.jsx

@@ -77,12 +77,14 @@ export default function Upload({ name, value, control }) {
   useEffect(() => {
     if (typeof value === 'string' && value) {
       setPreview(value);
+      isLoading.current = false;
     } else if (!isLoading.current && !value) {
       isLoading.current = true;
       fetch('https://picsum.photos/436/244')
         .then((res) => res.blob())
-        .then(handleFile)
-        .then(() => {
+        .then((blob) => {
+          if (!isLoading.current) return;
+          handleFile(blob);
           isLoading.current = false;
         });
     }

components/Group/Form/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Link from 'next/link';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
@@ -45,20 +45,14 @@ export default function GroupForm({
     values,
     errors,
     isDirty,
-    setValues,
     handleSubmit,
-  } = useGroupForm();
+  } = useGroupForm({
+    ...defaultValues,
+    originPhotoURL: defaultValues?.photoURL,
+  });
   const [isChecked, setIsChecked] = useState(false);
   const isCreateMode = mode === 'create';
 
-  useEffect(() => {
-    if (!defaultValues) return;
-    setValues({
-      ...defaultValues,
-      originPhotoURL: defaultValues.photoURL,
-    });
-  }, [defaultValues]);
-
   const desc = (
     <StyledDesc>
       請確認揪團未涉及不雅內容並符合本網站{' '}

components/Group/Form/useGroupForm.jsx

@@ -18,7 +18,7 @@ export const categoriesOptions = CATEGORIES;
 export const areasOptions = AREAS.filter((area) => area.label !== '線上');
 export const eduOptions = _eduOptions;
 
-const DEFAULT_VALUES = {
+const INITIAL_VALUES = {
   userId: '',
   title: '',
   file: null,
@@ -79,12 +79,13 @@ const rules = {
   isGrouping: z.boolean(),
 };
 
-export default function useGroupForm() {
+export default function useGroupForm(defaultValue) {
   const [isDirty, setIsDirty] = useState(false);
   const me = useSelector((state) => state.user);
   const notLogin = !me?._id;
   const [values, setValues] = useState({
-    ...DEFAULT_VALUES,
+    ...INITIAL_VALUES,
+    ...defaultValue,
     userId: me?._id,
   });
   const [errors, setErrors] = useState({});
@@ -194,7 +195,6 @@ export default function useGroupForm() {
     errors,
     values,
     isDirty,
-    setValues,
     handleSubmit,
   };
 }