Refactor feedback dialog component to include success alert and separ…

…ate form dialog children (#28) - Extracted the success alert component from the feedback dialog component to improve code organization and reusability. - Created a separate component for the form dialog children to improve readability and maintainability. - Added a success alert to display a confirmation message when feedback is successfully submitted. - Updated the form submission logic to handle form validation and submission.
sensasi-delight · Oct 12, 2024 · cba6e08 · cba6e08
1 parent 2f5d8a3
commit cba6e08
Showing 1 changed file with 143 additions and 96 deletions.
diff --git 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 (
         <>
             <Tooltip title="Saran Perbaikan" placement="top" arrow>
@@ -28,102 +37,140 @@ export function FeedbackDialog() {
                 </IconButton>
             </Tooltip>
 
-            <Dialog open={open} onClose={() => setOpen(false)} maxWidth="xs">
-                <DialogTitle>Saran Perbaikan</DialogTitle>
-
-                <DialogContent>
-                    <Typography>
-                        Berikan saran atau kritik untuk perbaikan aplikasi ini.
-                    </Typography>
-
-                    <Typography>
-                        Saran atau kritik yang Anda berikan akan membantu kami
-                        dalam pengembangan aplikasi ini.
-                    </Typography>
-
-                    <form
-                        id="feedback-form"
-                        onSubmit={ev => {
-                            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)
-                        }}>
-                        <TextField
-                            label="Nama (opsional)"
-                            fullWidth
-                            variant="filled"
-                            margin="dense"
-                            size="small"
-                        />
-
-                        <TextField
-                            label="Email (opsional)"
-                            fullWidth
-                            type="email"
-                            variant="filled"
-                            margin="dense"
-                            size="small"
-                        />
-
-                        <TextField
-                            label="Saran Perbaikan"
-                            multiline
-                            rows={4}
-                            fullWidth
-                            name="message"
-                            variant="outlined"
-                            margin="dense"
-                            error={errorMessage !== ''}
-                            helperText={errorMessage}
-                        />
-                    </form>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button
-                        type="reset"
-                        form="feedback-form"
-                        onClick={() => {
-                            setErrorMessage('')
-                            setOpen(false)
-                        }}>
-                        Batal
-                    </Button>
-
-                    <Button
-                        variant="contained"
-                        endIcon={<SendIcon />}
-                        type="submit"
-                        form="feedback-form">
-                        Kirim
-                    </Button>
-                </DialogActions>
+            <Dialog open={open} onClose={handleClose} maxWidth="xs">
+                {isSubmitted ? (
+                    <SuccessAlert onClose={handleClose} />
+                ) : (
+                    <FormDialogChildren
+                        errorMessage={errorMessage}
+                        onClose={handleClose}
+                        onSubmit={ev =>
+                            submitFeedback(
+                                ev,
+                                () => setIsSubmitted(true),
+                                setErrorMessage,
+                            )
+                        }
+                    />
+                )}
             </Dialog>
         </>
     )
 }
+
+function submitFeedback(
+    ev: FormEvent<HTMLFormElement>,
+    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 (
+        <Alert severity="success" onClose={onClose}>
+            <AlertTitle>Masukkan Anda telah terkirim</AlertTitle>
+            Terima kasih atas masukkan yang telah Anda berikan.
+        </Alert>
+    )
+}
+
+function FormDialogChildren({
+    onSubmit,
+    errorMessage,
+    onClose,
+}: {
+    onSubmit: (ev: FormEvent<HTMLFormElement>) => void
+    errorMessage: string
+    onClose: () => void
+}) {
+    return (
+        <>
+            <DialogTitle>Saran Perbaikan</DialogTitle>
+
+            <DialogContent>
+                <Typography>
+                    Berikan saran atau kritik untuk perbaikan aplikasi ini.
+                </Typography>
+
+                <Typography>
+                    Saran atau kritik yang Anda berikan akan membantu kami dalam
+                    pengembangan aplikasi ini.
+                </Typography>
+
+                <form id="feedback-form" onSubmit={onSubmit}>
+                    <TextField
+                        label="Nama (opsional)"
+                        fullWidth
+                        variant="filled"
+                        margin="dense"
+                        name="name"
+                        size="small"
+                    />
+
+                    <TextField
+                        label="Email (opsional)"
+                        name="email"
+                        fullWidth
+                        type="email"
+                        variant="filled"
+                        margin="dense"
+                        size="small"
+                    />
+
+                    <TextField
+                        autoComplete="off"
+                        label="Saran Perbaikan"
+                        multiline
+                        rows={4}
+                        fullWidth
+                        name="message"
+                        variant="outlined"
+                        margin="dense"
+                        error={errorMessage !== ''}
+                        helperText={errorMessage}
+                    />
+                </form>
+            </DialogContent>
+
+            <DialogActions>
+                <Button type="reset" form="feedback-form" onClick={onClose}>
+                    Batal
+                </Button>
+
+                <Button
+                    variant="contained"
+                    endIcon={<SendIcon />}
+                    type="submit"
+                    form="feedback-form">
+                    Kirim
+                </Button>
+            </DialogActions>
+        </>
+    )
+}