✨ integrate activity API

daodaoedu · Mar 1, 2024 · 59ced99 · 59ced99
1 parent 6b6f208
commit 59ced99
Show file tree

Hide file tree

Showing 18 changed files with 310 additions and 156 deletions.
diff --git a/components/Group/Form/Fields/AreaCheckbox.jsx b/components/Group/Form/Fields/AreaCheckbox.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
@@ -47,6 +47,10 @@ export default function AreaCheckbox({
     onBlur: handlePhysicalAreaChange,
   };
 
+  useEffect(() => {
+    if (value.find((v) => getPhysicalArea([v]))) setIsPhysicalArea(true);
+  }, [value]);
+
   return (
     <>
       <Box sx={{ display: 'flex', label: { whiteSpace: 'nowrap' } }}>
@@ -55,17 +59,15 @@ export default function AreaCheckbox({
           label="實體活動"
           checked={isPhysicalArea}
         />
-        <Box width="100%" onClick={() => setIsPhysicalArea(true)}>
-          <Select
-            name={name}
-            options={options}
-            placeholder="地點"
-            value={physicalAreaValue}
-            itemLabel={itemLabel}
-            itemValue={itemValue}
-            control={physicalAreaControl}
-          />
-        </Box>
+        <Select
+          name={name}
+          options={options}
+          placeholder="地點"
+          value={physicalAreaValue}
+          itemLabel={itemLabel}
+          itemValue={itemValue}
+          control={physicalAreaControl}
+        />
       </Box>
       <div>
         <FormControlLabel

diff --git a/components/Group/Form/Fields/TagsField.jsx b/components/Group/Form/Fields/TagsField.jsx
@@ -1,49 +1,48 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import FormHelperText from '@mui/material/FormHelperText';
 import ClearIcon from '@mui/icons-material/Clear';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { StyledChip, StyledTagsField } from '../Form.styled';
 
-function TagsField({ name, helperText, control }) {
-  const [tags, setTags] = useState([]);
+function TagsField({ name, helperText, control, value = [] }) {
   const [input, setInput] = useState('');
   const [error, setError] = useState('');
 
   const handleInput = (e) => {
-    const { value } = e.target;
-    if (value.length > 8) setError('標籤最多 8 個字');
+    const _value = e.target.value;
+    if (_value.length > 8) setError('標籤最多 8 個字');
     else setError('');
-    setInput(value);
+    setInput(_value);
   };
 
   const handleKeyDown = (e) => {
     if (error) return;
     const tag = input.trim();
     if (e.key !== 'Enter' || !tag) return;
-    if (tags.indexOf(tag) > -1) return;
-    setTags((pre) => [...pre, tag]);
+    if (value.indexOf(tag) > -1) return;
     setInput('');
+    control.onChange({
+      target: {
+        name,
+        value: [...value, tag],
+      },
+    });
   };
 
   const handleDelete = (tag) => () => {
-    setTags((pre) => pre.filter((t) => t !== tag));
-  };
-
-  useEffect(() => {
-    const event = {
+    control.onChange({
       target: {
         name,
-        value: tags,
+        value: value.filter((t) => t !== tag),
       },
-    };
-    control.onChange(event);
-  }, [tags]);
+    });
+  };
 
   return (
     <>
       <StyledTagsField>
-        {tags.map((tag) => (
+        {value.map((tag) => (
           <StyledChip
             key={tag}
             label={tag}
@@ -52,7 +51,7 @@ function TagsField({ name, helperText, control }) {
             onDelete={handleDelete(tag)}
           />
         ))}
-        {tags.length < 8 && (
+        {value.length < 8 && (
           <input
             value={input}
             onChange={handleInput}

diff --git a/components/Group/Form/Form.styled.jsx b/components/Group/Form/Form.styled.jsx
@@ -67,6 +67,18 @@ export const StyledChip = styled(Chip)`
   }
 `;
 
+export const StyledSwitchWrapper = styled.div`
+  padding: 4px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: #293a3d;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+`;
+
 export const StyledTagsField = styled.div(
   ({ theme }) => `
   position: relative;

diff --git a/components/Group/Form/index.jsx b/components/Group/Form/index.jsx
@@ -1,4 +1,6 @@
+import { useEffect } from 'react';
 import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
 import CircularProgress from '@mui/material/CircularProgress';
 import Button from '@/shared/components/Button';
 import StyledPaper from '../Paper.styled';
@@ -7,6 +9,7 @@ import {
   StyledDescription,
   StyledContainer,
   StyledFooter,
+  StyledSwitchWrapper,
 } from './Form.styled';
 import Fields from './Fields';
 import useGroupForm, {
@@ -15,10 +18,20 @@ import useGroupForm, {
   eduOptions,
 } from './useGroupForm';
 
-export default function GroupForm({ mode, isLoading, onSubmit }) {
-  const { control, values, errors, handleSubmit } = useGroupForm();
+export default function GroupForm({
+  mode,
+  defaultValues,
+  isLoading,
+  onSubmit,
+}) {
+  const { control, values, errors, isDirty, setValues, handleSubmit } =
+    useGroupForm();
   const isCreateMode = mode === 'create';
 
+  useEffect(() => {
+    if (defaultValues) setValues(defaultValues);
+  }, [defaultValues]);
+
   return (
     <Box sx={{ background: '#f3fcfc', py: '60px' }}>
       <StyledContainer>
@@ -114,13 +127,29 @@ export default function GroupForm({ mode, isLoading, onSubmit }) {
             helperText="標籤填寫完成後，會用 Hashtag 的形式呈現，例如： #一起學日文"
           />
         </StyledPaper>
+        {!isCreateMode && (
+          <StyledPaper sx={{ p: '40px', mt: '16px' }}>
+            <StyledSwitchWrapper>
+              {values.isGrouping ? '開放揪團中' : '已關閉揪團'}
+              <Switch
+                name="isGrouping"
+                checked={values.isGrouping}
+                onClick={() =>
+                  control.onChange({
+                    target: { name: 'isGrouping', value: !values.isGrouping },
+                  })
+                }
+              />
+            </StyledSwitchWrapper>
+          </StyledPaper>
+        )}
         <StyledFooter>
           <Button
             sx={{ width: '100%', maxWidth: '287px' }}
-            disabled={isLoading}
+            disabled={isLoading || !isDirty}
             onClick={handleSubmit(onSubmit)}
           >
-            送出
+            {isCreateMode ? '送出' : '發布修改'}
             {isLoading && (
               <CircularProgress
                 size={24}

diff --git a/components/Group/Form/useGroupForm.jsx b/components/Group/Form/useGroupForm.jsx
@@ -58,10 +58,11 @@ const rules = {
 
 export default function useGroupForm() {
   const router = useRouter();
+  const [isDirty, setIsDirty] = useState(false);
   const me = useSelector((state) => state.user);
   const [values, setValues] = useState({
     ...DEFAULT_VALUES,
-    userId: me._id,
+    userId: me?._id,
   });
   const [errors, setErrors] = useState({});
   const schema = z.object(rules);
@@ -78,6 +79,7 @@ export default function useGroupForm() {
         [name]: result.error?.issues?.[0]?.message,
       }));
     }
+    setIsDirty(true);
     setValues((pre) => ({ ...pre, [name]: value }));
   };
 
@@ -110,6 +112,7 @@ export default function useGroupForm() {
     control,
     errors,
     values,
+    isDirty,
     setValues,
     handleSubmit,
   };

diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
@@ -73,7 +73,6 @@ function ContactButton({
     setContact('');
   };
 
-  console.log(user);
   const handleSubmit = () => {
     fetch(`${BASE_URL}/email`, {
       method: 'POST',

diff --git a/components/Group/detail/Empty.jsx b/components/Group/detail/Empty.jsx
@@ -5,7 +5,7 @@ import Button from '@/shared/components/Button';
 import StyledPaper from '../Paper.styled';
 import { StyledContainer } from './Detail.styled';
 
-function GroupDetail() {
+function EmptyGroup() {
   return (
     <Box sx={{ background: '#f3fcfc', pb: '48px' }}>
       <StyledContainer>
@@ -40,4 +40,4 @@ function GroupDetail() {
   );
 }
 
-export default GroupDetail;
+export default EmptyGroup;
diff --git a/components/Group/detail/More.jsx b/components/Group/detail/More.jsx
@@ -1,21 +1,35 @@
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useRouter } from 'next/router';
+import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import MoreVertOutlinedIcon from '@mui/icons-material/MoreVertOutlined';
 
-export default function More() {
+export default function More({ groupId, userId }) {
+  const router = useRouter();
   const [anchorEl, setAnchorEl] = useState(null);
+  const me = useSelector((state) => state.user);
+  const isMyGroup = userId === me?._id;
 
   const handleMenu = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = (event) => {
+  const handleClose = () => {
     setAnchorEl(null);
   };
 
-  return (
+  return isMyGroup ? (
+    <Button
+      variant="outlined"
+      sx={{ position: 'absolute', top: 0, right: 0, borderRadius: '20px' }}
+      onClick={() => router.push(`/group/edit?id=${groupId}`)}
+    >
+      編輯
+    </Button>
+  ) : (
     <>
       <IconButton
         size="small"

diff --git a/components/Group/detail/index.jsx b/components/Group/detail/index.jsx
@@ -10,7 +10,7 @@ import More from './More';
 import { StyledContainer, StyledHeading, StyledLink } from './Detail.styled';
 import ContactButton from './Contact';
 
-function GroupDetail({ source, isLoading }) {
+function GroupDetail({ id, source, isLoading }) {
   return (
     <Box sx={{ background: '#f3fcfc', pb: '48px' }}>
       <StyledContainer>
@@ -36,7 +36,7 @@ function GroupDetail({ source, isLoading }) {
           ) : (
             <StyledStatus className="finished">已結束</StyledStatus>
           )}
-          <More />
+          <More groupId={id} userId={source?.userId} />
           <StyledHeading>
             {isLoading ? <Skeleton animation="wave" /> : source?.title}
           </StyledHeading>

diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx
@@ -63,7 +63,7 @@ function EditPage() {
   const user = useSelector((state) => state.user);
 
   useEffect(() => {
-    if (user._id || '65a7e0300604d7c3f4641bf9') {
+    if (user._id) {
       Object.entries(user).forEach(([key, value]) => {
         if (key === 'contactList') {
           const { instagram, facebook, discord, line } = value;