diff --git a/src/components/feedback-dialog/feedback-dialog.tsx b/src/components/feedback-dialog/feedback-dialog.tsx index b3cb9df..ea45b39 100644 --- a/src/components/feedback-dialog/feedback-dialog.tsx +++ b/src/components/feedback-dialog/feedback-dialog.tsx @@ -1,4 +1,6 @@ import { + Alert, + AlertTitle, Button, Dialog, DialogActions, @@ -9,7 +11,7 @@ import { Tooltip, Typography, } from '@mui/material' -import { useState } from 'react' +import { FormEvent, useState } from 'react' import { HowToVote as HowToVoteIcon, Send as SendIcon, @@ -18,8 +20,15 @@ import { captureFeedback, captureMessage } from '@sentry/react' export function FeedbackDialog() { const [open, setOpen] = useState(false) + const [isSubmitted, setIsSubmitted] = useState(false) const [errorMessage, setErrorMessage] = useState('') + function handleClose() { + setOpen(false) + setIsSubmitted(false) + setErrorMessage('') + } + return ( <> @@ -28,102 +37,140 @@ export function FeedbackDialog() { - setOpen(false)} maxWidth="xs"> - Saran Perbaikan - - - - Berikan saran atau kritik untuk perbaikan aplikasi ini. - - - - Saran atau kritik yang Anda berikan akan membantu kami - dalam pengembangan aplikasi ini. - - -
{ - ev.preventDefault() - - const formData = new FormData(ev.currentTarget) - - const formValues = { - name: formData.get('name') as string, - email: formData.get('email') as string, - message: formData.get('message') as string, - } - - if (!formValues.message) { - setErrorMessage('Pesan tidak boleh kosong') - return - } - - if (formValues.message.length < 10) { - setErrorMessage('Pesan minimal 10 karakter') - return - } - - captureFeedback({ - name: formValues.name, - email: formValues.email, - message: formValues.message, - associatedEventId: captureMessage('Feedback'), - }) - - setOpen(false) - }}> - - - - - - -
- - - - - - + + {isSubmitted ? ( + + ) : ( + + submitFeedback( + ev, + () => setIsSubmitted(true), + setErrorMessage, + ) + } + /> + )} ) } + +function submitFeedback( + ev: FormEvent, + onSubmit: () => void, + onError: (message: string) => void, +) { + ev.preventDefault() + + const formData = new FormData(ev.currentTarget) + + const formValues = { + name: formData.get('name') as string, + email: formData.get('email') as string, + message: formData.get('message') as string, + } + + if (!formValues.message) { + return onError('Pesan tidak boleh kosong') + } + + if (formValues.message.length < 10) { + return onError('Pesan minimal 10 karakter') + } + + captureFeedback({ + name: formValues.name, + email: formValues.email, + message: formValues.message, + associatedEventId: captureMessage('Feedback'), + }) + + onSubmit() +} + +function SuccessAlert({ onClose }: { onClose: () => void }) { + return ( + + Masukkan Anda telah terkirim + Terima kasih atas masukkan yang telah Anda berikan. + + ) +} + +function FormDialogChildren({ + onSubmit, + errorMessage, + onClose, +}: { + onSubmit: (ev: FormEvent) => void + errorMessage: string + onClose: () => void +}) { + return ( + <> + Saran Perbaikan + + + + Berikan saran atau kritik untuk perbaikan aplikasi ini. + + + + Saran atau kritik yang Anda berikan akan membantu kami dalam + pengembangan aplikasi ini. + + +
+ + + + + + +
+ + + + + + + + ) +}