From fdc6ab19276d5a979d5b98fb7d6291c3c35410dd Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Sat, 10 Feb 2024 14:06:00 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20contact=20dialo?= =?UTF-8?q?g=20feedback?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Group/GroupList/index.jsx | 2 +- .../SearchField/SelectedEducationStep.jsx | 2 +- .../detail/Contact/ContactDone/index.jsx | 81 ------------- .../detail/Contact/ContactError/index.jsx | 66 ----------- components/Group/detail/Contact/Feedback.jsx | 110 ++++++++++++++++++ components/Group/detail/Contact/index.jsx | 12 +- 6 files changed, 118 insertions(+), 155 deletions(-) delete mode 100644 components/Group/detail/Contact/ContactDone/index.jsx delete mode 100644 components/Group/detail/Contact/ContactError/index.jsx create mode 100644 components/Group/detail/Contact/Feedback.jsx diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx index 3b05017c..0b077247 100644 --- a/components/Group/GroupList/index.jsx +++ b/components/Group/GroupList/index.jsx @@ -48,7 +48,7 @@ function GroupList() { const filterOptions = { area: AREAS, category: CATEGORIES, - edu: EDUCATION_STEP, + partnerEducationStep: EDUCATION_STEP, grouping: true, q: true, }; diff --git a/components/Group/SearchField/SelectedEducationStep.jsx b/components/Group/SearchField/SelectedEducationStep.jsx index 1bc9021b..8fc66b42 100644 --- a/components/Group/SearchField/SelectedEducationStep.jsx +++ b/components/Group/SearchField/SelectedEducationStep.jsx @@ -3,7 +3,7 @@ import { EDUCATION_STEP } from '@/constants/member'; import useSearchParamsManager from '@/hooks/useSearchParamsManager'; export default function SelectedEducationStep() { - const QUERY_KEY = 'edu'; + const QUERY_KEY = 'partnerEducationStep'; const [getSearchParams, pushState] = useSearchParamsManager(); const handleChange = ({ target: { value } }) => { diff --git a/components/Group/detail/Contact/ContactDone/index.jsx b/components/Group/detail/Contact/ContactDone/index.jsx deleted file mode 100644 index 921df664..00000000 --- a/components/Group/detail/Contact/ContactDone/index.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Modal, Box, Typography, Button } from '@mui/material'; - -function ContactDoneModal() { - return ( - - - - nobody-land - - - 已送出邀請 - - - 請耐心等候夥伴的回應 - - - - - ); -} - -export default ContactDoneModal; diff --git a/components/Group/detail/Contact/ContactError/index.jsx b/components/Group/detail/Contact/ContactError/index.jsx deleted file mode 100644 index 2f344132..00000000 --- a/components/Group/detail/Contact/ContactError/index.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Modal, Box, Typography, Button } from '@mui/material'; - -function ContactErrorModal() { - return ( - - - - nobody-land - - - 哎呀！有不明錯誤 - - - - - ); -} - -export default ContactErrorModal; diff --git a/components/Group/detail/Contact/Feedback.jsx b/components/Group/detail/Contact/Feedback.jsx new file mode 100644 index 00000000..b4f8da99 --- /dev/null +++ b/components/Group/detail/Contact/Feedback.jsx @@ -0,0 +1,110 @@ +import { useId, forwardRef } from 'react'; +import { + Box, + Button, + Dialog, + DialogTitle, + Slide, + Typography, + useMediaQuery, +} from '@mui/material'; +import contractDoneImg from '@/public/assets/contactdone.png'; +import contractErrorImg from '@/public/assets/contacterror.png'; + +const Transition = forwardRef((props, ref) => { + return ; +}); + +function Feedback({ type, onClose }) { + const id = useId(); + const isMobileScreen = useMediaQuery('(max-width: 560px)'); + const titleId = `modal-title-${id}`; + const descriptionId = `modal-description-${id}`; + const contentMap = { + success: { + imgSrc: contractDoneImg.src, + imgAlt: 'success cover', + title: '已送出邀請', + description: '請耐心等候夥伴的回應', + buttonText: '關閉', + }, + error: { + imgSrc: contractErrorImg.src, + imgAlt: 'error cover', + title: '哎呀！有不明錯誤', + buttonText: '再試一次', + }, + }; + const content = contentMap[type] || {}; + + return ( + + + {content.imgAlt} + + + {content.title} + + + {content.description} + + + + + + ); +} + +export default Feedback; diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx index 7c8af6c5..545f9138 100644 --- a/components/Group/detail/Contact/index.jsx +++ b/components/Group/detail/Contact/index.jsx @@ -16,8 +16,7 @@ import { import CloseIcon from '@mui/icons-material/Close'; import { ROLE } from '@/constants/member'; import chatSvg from '@/public/assets/icons/chat.svg'; -import ContactDoneModal from './ContactDone'; -import ContactErrorModal from './ContactError'; +import Feedback from './Feedback'; const StyledTitle = styled.label` display: block; @@ -38,7 +37,7 @@ const StyledTextArea = styled(TextareaAutosize)` min-height: 128px; `; -const Transition = forwardRef(function InternalTransition(props, ref) { +const Transition = forwardRef((props, ref) => { return ; }); @@ -57,6 +56,7 @@ function ContactButton({ const [open, setOpen] = useState(false); const [message, setMessage] = useState(''); const [contact, setContact] = useState(''); + const [feedback, setFeedback] = useState(''); const isMobileScreen = useMediaQuery('(max-width: 560px)'); const titleId = `modal-title-${id}`; const descriptionId = `modal-description-${id}`; @@ -75,6 +75,7 @@ function ContactButton({ const handleSubmit = () => { if (onSubmit) onSubmit({ message, contact }); handleClose(); + setFeedback('success'); }; return ( @@ -243,7 +244,7 @@ function ContactButton({ boxShadow: '0 4px 10px #C4C2C166', }} variant="contained" - disabled={isLoading} + disabled={isLoading || !message || !contact} onClick={handleSubmit} > 送出 @@ -251,8 +252,7 @@ function ContactButton({ - {/* */} - {/* */} + setFeedback('')} /> ); }