Merge pull request #114 from daodaoedu/feat/group

feat: check profile is complete
daodaoedu · Nov 3, 2024 · 602a02e · 602a02e
2 parents 82471f2 + d59d79f
commit 602a02e
Show file tree

Hide file tree

Showing 16 changed files with 397 additions and 63 deletions.
diff --git a/components/Group/Banner.jsx b/components/Group/Banner.jsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Button from '@/shared/components/Button';
 import groupBannerImg from '@/public/assets/group-banner.png';
 import Image from '@/shared/components/Image';
+import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
 
 const StyledBanner = styled.div`
   position: relative;
@@ -60,7 +61,9 @@ const Banner = () => {
         <h1>揪團</h1>
         <p>想一起組織有趣的活動或學習小組嗎？</p>
         <p>註冊並加入我們，然後創建你的活動，讓更多人一起參加！</p>
-        <Button onClick={() => router.push('/group/create')}>我想揪團</Button>
+        <InfoCompletionGuard>
+          <Button onClick={() => router.push('/group/create')}>我想揪團</Button>
+        </InfoCompletionGuard>
       </div>
     </StyledBanner>
   );

diff --git a/components/Group/Form/Fields/AreaCheckbox.jsx b/components/Group/Form/Fields/AreaCheckbox.jsx
@@ -9,7 +9,7 @@ export default function AreaCheckbox({
   itemLabel,
   itemValue,
   name,
-  value,
+  value = [],
   control,
 }) {
   const [isPhysicalArea, setIsPhysicalArea] = useState(false);

diff --git a/components/Group/Form/Fields/CheckboxGroup.jsx b/components/Group/Form/Fields/CheckboxGroup.jsx
@@ -5,7 +5,7 @@ import Checkbox from '@mui/material/Checkbox';
 export default function CheckboxGroup({
   options,
   name,
-  value,
+  value = [],
   control,
   handleValues,
 }) {

diff --git a/components/Group/Form/Fields/Select.jsx b/components/Group/Form/Fields/Select.jsx
@@ -13,7 +13,7 @@ export default function Select({
   sx,
   disabled,
   control,
-  value,
+  value = [],
   error,
 }) {
   const getValue = (any, key) => (typeof any === 'object' ? any[key] : any);

diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx
@@ -6,6 +6,7 @@ import { ROLE } from '@/constants/member';
 import chatSvg from '@/public/assets/icons/chat.svg';
 import useMutation from '@/hooks/useMutation';
 import { mapToTable } from '@/utils/helper';
+import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
 import ContactPopup from './ContactPopup';
 import FeedbackPopup from './FeedbackPopup';
 import LoginPopup from './LoginPopup';
@@ -76,14 +77,16 @@ function ContactButton({
 
   return (
     <div>
-      <StyledButton variant="contained" onClick={() => setOpen(true)}>
-        <img
-          src={chatSvg.src}
-          alt="contact icon"
-          style={{ marginRight: '8px' }}
-        />
-        {label}
-      </StyledButton>
+      <InfoCompletionGuard>
+        <StyledButton variant="contained" onClick={() => setOpen(true)}>
+          <img
+            src={chatSvg.src}
+            alt="contact icon"
+            style={{ marginRight: '8px' }}
+          />
+          {label}
+        </StyledButton>
+      </InfoCompletionGuard>
       {isLogin ? (
         <ContactPopup
           open={open}

diff --git a/components/Profile/Edit/EditFormInput.jsx b/components/Profile/Edit/EditFormInput.jsx
@@ -1,21 +1,26 @@
+import { forwardRef } from 'react';
 import { Typography, TextField } from '@mui/material';
 import { StyledGroup } from './Edit.styled';
 
-function EditFormInput({
-  title = '',
-  parmKey = '',
-  value = '',
-  onChange = () => ({}),
-  errorMsg = '',
-  isRequire = false,
-  placeholder = '',
-}) {
+function EditFormInput(
+  {
+    title = '',
+    parmKey = '',
+    value = '',
+    onChange = () => ({}),
+    errorMsg = '',
+    isRequire = false,
+    placeholder = '',
+  },
+  ref,
+) {
   return (
     <StyledGroup>
       <Typography fontWeight="500">
         {title} {isRequire && '*'}
       </Typography>
       <TextField
+        inputRef={ref}
         name={parmKey}
         value={value}
         fullWidth
@@ -28,4 +33,4 @@ function EditFormInput({
   );
 }
 
-export default EditFormInput;
+export default forwardRef(EditFormInput);
diff --git a/components/Profile/Edit/ErrorMessage.jsx b/components/Profile/Edit/ErrorMessage.jsx
@@ -7,6 +7,7 @@ const ErrorMessage = ({ errText }) => {
       <Box
         sx={{
           mt: '8px',
+          width: 'max-content',
           display: 'flex',
           alignItems: 'center',
           gap: '8px',

diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx
@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
@@ -51,13 +52,17 @@ import {
 
 function EditPage() {
   const mobileScreen = useMediaQuery('(max-width: 767px)');
+  const [isSetting, setIsSetting] = useState(false);
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const check = searchParams.get('check');
 
   const {
     userState,
     errors,
     onChangeHandler,
-    onSubmit: onEditSumit,
+    onSubmit: onEditSubmit,
+    setRef,
   } = useEditProfile();
 
   const user = useSelector((state) => state.user);
@@ -84,25 +89,50 @@ function EditPage() {
           onChangeHandler({ key, value });
         }
       });
+      setIsSetting(true);
     } else {
       router.push('/');
     }
   }, [user]);
 
   const onUpdateUser = async () => {
+    const resultStatus = await onEditSubmit({
+      id: user._id,
+      email: user.email,
+    });
     if (Object.values(errors).length) {
       toast.error('請修正錯誤');
       return;
     }
-    const resultStatus = await onEditSumit({ id: user._id, email: user.email });
-    if (resultStatus) {
-      toast.success('更新成功');
-      router.push('/profile');
-    } else {
+    if (!resultStatus && !check) {
       toast.error('更新失敗');
     }
   };
 
+  useEffect(() => {
+    switch (user.apiState) {
+      case 'Resolve': {
+        toast.success('更新成功');
+        router.push('/profile');
+        break;
+      }
+      case 'Reject': {
+        toast.error('更新失敗');
+        break;
+      }
+      default:
+    }
+  }, [user.apiState]);
+
+  useEffect(() => {
+    if (check === '1' && user._id && isSetting) {
+      onUpdateUser();
+      router.replace({ query: { id: 'person-setting' } }, undefined, {
+        scroll: false,
+      });
+    }
+  }, [searchParams, user._id && isSetting]);
+
   return (
     <FormWrapper>
       <LocalizationProvider
@@ -112,7 +142,17 @@ function EditPage() {
         }}
       >
         <ContentWrapper sx={{ minHeight: '100vh' }}>
-          <StyledTitleWrap>
+          <StyledTitleWrap
+            sx={{
+              border:
+                errors.name ||
+                errors.birthDay ||
+                errors.gender ||
+                errors.roleList
+                  ? '1px solid red'
+                  : '',
+            }}
+          >
             <h2>編輯個人頁面</h2>
             <p className="title-memo">
               填寫完整資訊可以幫助其他夥伴更了解你哦！
@@ -122,6 +162,7 @@ function EditPage() {
             <Box sx={{ marginTop: '24px', width: '100%' }}>
               <FormInput
                 isRequire
+                ref={(element) => setRef('name', element)}
                 title="名稱"
                 parmKey="name"
                 value={userState.name || ''}
@@ -139,6 +180,7 @@ function EditPage() {
                   renderInput={(params) => (
                     <TextField
                       {...params}
+                      ref={(element) => setRef('birthDay', element)}
                       sx={{ width: '100%' }}
                       label=""
                       error={!!errors.birthDay}
@@ -151,7 +193,9 @@ function EditPage() {
               </StyledGroup>
               <StyledGroup>
                 <Typography fontWeight="500">性別 *</Typography>
-                <StyledSelectWrapper>
+                <StyledSelectWrapper
+                  ref={(element) => setRef('gender', element)}
+                >
                   {GENDER.map(({ label, value }) => (
                     <StyledSelectBox
                       isselected={`${userState.gender === value}`}
@@ -172,7 +216,9 @@ function EditPage() {
               </StyledGroup>
               <StyledGroup>
                 <Typography fontWeight="500">身份 *</Typography>
-                <StyledSelectWrapper>
+                <StyledSelectWrapper
+                  ref={(element) => setRef('roleList', element)}
+                >
                   {ROLE.map(({ label, value }) => (
                     <StyledSelectBox
                       col={mobileScreen ? '2' : '3'}
@@ -304,7 +350,10 @@ function EditPage() {
             </StyledGroup>
           </StyledSection>
 
-          <StyledSection>
+          <StyledSection
+            ref={(element) => setRef('socialCode', element)}
+            sx={{ border: errors.socialCode ? '1px solid red' : '' }}
+          >
             <StyledGroup mt="0">
               <Typography sx={{ fontWeight: 700, fontSize: '18px' }}>
                 聯絡方式
@@ -324,21 +373,41 @@ function EditPage() {
               }).map(([key, title]) => (
                 <Grid item xs="12" sm="6">
                   <FormInput
+                    ref={(element) => setRef(key, element)}
                     title={title}
                     parmKey={key}
                     value={userState[key] || ''}
                     onChange={onChangeHandler}
                     placeholder="請填寫ID"
-                    errorMsg={errors[key] ? errors[key] : ''}
+                    errorMsg={
+                      errors[key]
+                        ? errors[key]
+                        : errors.socialCode
+                        ? '請填寫您的 ID'
+                        : ''
+                    }
                   />
                 </Grid>
               ))}
             </Grid>
+            <ErrorMessage errText={errors.socialCode} />
           </StyledSection>
 
-          <StyledSection>
+          <StyledSection
+            sx={{
+              border:
+                errors.wantToDoList || errors.tagList || errors.selfIntroduction
+                  ? '1px solid red'
+                  : '',
+            }}
+          >
             <StyledGroup mt="0">
-              <Typography sx={{ fontWeight: 500 }}>想和夥伴一起</Typography>
+              <Typography
+                sx={{ fontWeight: 500 }}
+                ref={(element) => setRef('wantToDoList', element)}
+              >
+                想和夥伴一起
+              </Typography>
               <StyledSelectWrapper>
                 {WANT_TO_DO_WITH_PARTNER.map(({ label, value }) => (
                   <StyledSelectBox
@@ -365,6 +434,7 @@ function EditPage() {
                   </StyledSelectBox>
                 ))}
               </StyledSelectWrapper>
+              <ErrorMessage errText={errors.wantToDoList} />
             </StyledGroup>
             <StyledGroup>
               <Typography sx={{ fontWeight: 500 }}>
@@ -382,6 +452,7 @@ function EditPage() {
             <StyledGroup>
               <Typography sx={{ fontWeight: 500 }}>標籤</Typography>
               <InputTags
+                ref={(element) => setRef('tagList', element)}
                 value={userState.tagList}
                 change={(value) => {
                   onChangeHandler({ key: 'tagList', value, isMultiple: true });
@@ -397,13 +468,15 @@ function EditPage() {
               >
                 可以是學習領域、興趣等等的標籤，例如：音樂創作、程式語言、電繪、社會議題。
               </Typography>
+              <ErrorMessage errText={errors.tagList} />
             </StyledGroup>
 
             <StyledGroup>
               <Typography sx={{ fontWeight: 500, mb: '6px' }}>
                 個人簡介
               </Typography>
               <TextareaAutosize
+                ref={(element) => setRef('selfIntroduction', element)}
                 style={{
                   width: '100%',
                   minHeight: '100px',
@@ -420,6 +493,7 @@ function EditPage() {
                   });
                 }}
               />
+              <ErrorMessage errText={errors.selfIntroduction} />
             </StyledGroup>
           </StyledSection>