[Frontend] The loading state only last for 5 seconds when reporting

packages/frontend/src/features/post/components/Comment/CommentReportDialog.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from '@/features/shared'
-import { FieldValues, useForm, UseFormGetValues } from 'react-hook-form'
+import { FieldValues, useForm } from 'react-hook-form'
 import { useReportComment } from '../../hooks/useReportComment/useReportComment'
 import {
     REGISTER_ID_DESC,
@@ -11,10 +11,9 @@ import {
     ReportFormStepGroup,
     ReportFormStepLabel,
     ReportFormSubmitBtn,
-    ReportFormSubmitFailure,
-    ReportFormSubmitSuccess,
     ReportFormSubmitting,
 } from '../ReportForm'
+import { useEffect, useState } from 'react'
 
 interface CommentReportDialogProps {
     postId: string
@@ -34,6 +33,8 @@ export function CommentReportDialog({
     isOpen,
     onClose,
 }: CommentReportDialogProps) {
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
     const {
         register,
         handleSubmit,
@@ -47,8 +48,6 @@ export function CommentReportDialog({
     const {
         isIdle,
         isPending,
-        isError,
-        isSuccess,
         reportComment,
         reset: resetState,
     } = useReportComment()
@@ -64,22 +63,30 @@ export function CommentReportDialog({
         } catch (_error) {}
     })
 
-    const onFailureResubmit = useFailureResubmitDialogFlow({
-        resetForm,
-        resetState,
-        getValues,
-    })
-
     const onCloseDialog = useCloseDialogFlow({
         resetForm,
         resetState,
         onClose,
     })
 
+    useEffect(() => {
+        if (isPending) {
+            setIsSubmitting(true)
+
+            const timer = setTimeout(() => {
+                onCloseDialog()
+            }, 5000)
+
+            return () => {
+                clearTimeout(timer)
+            }
+        }
+    }, [isPending, onCloseDialog])
+
     return (
         <>
             {isIdle && (
-                <Dialog isOpen={isOpen} onClose={onClose}>
+                <Dialog isOpen={isOpen} onClose={onCloseDialog}>
                     <ReportFormCtn onSubmit={onSubmit}>
                         <ReportFormIntro />
                         <ReportFormStepGroup>
@@ -109,14 +116,10 @@ export function CommentReportDialog({
                     </ReportFormCtn>
                 </Dialog>
             )}
-            {isPending && <ReportFormSubmitting />}
-            {isError && (
-                <ReportFormSubmitFailure
-                    onClose={onCloseDialog}
-                    onResubmit={onFailureResubmit}
-                />
-            )}
-            {isSuccess && <ReportFormSubmitSuccess onClose={onCloseDialog} />}
+            <ReportFormSubmitting
+                isOpen={isSubmitting}
+                onClose={onCloseDialog}
+            />
         </>
     )
 }
@@ -136,18 +139,3 @@ function useCloseDialogFlow({
         onClose()
     }
 }
-
-function useFailureResubmitDialogFlow({
-    resetForm,
-    resetState,
-    getValues,
-}: {
-    resetForm: (values: FieldValues) => void
-    resetState: () => void
-    getValues: UseFormGetValues<FieldValues>
-}) {
-    return () => {
-        resetForm(getValues())
-        resetState()
-    }
-}

packages/frontend/src/features/post/components/CreatePost/CreatePost.tsx

@@ -7,7 +7,6 @@ import {
 } from '@/features/post'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
 
 export default function CreatePost({
     disabled = false,
@@ -25,7 +24,6 @@ export default function CreatePost({
 
         try {
             await createPost(values)
-            toast('貼文成功送出')
         } catch {
             setIsSubmitting(false)
             queryClient.setQueryData(['posts'], previousPostsData)

packages/frontend/src/features/post/components/Post/PostReportDialog.tsx

@@ -1,5 +1,6 @@
 import { Dialog } from '@/features/shared'
-import { FieldValues, useForm, UseFormGetValues } from 'react-hook-form'
+import { useEffect, useState } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
 import { useReportPost } from '../../hooks/useReportPost/useReportPost'
 import {
     REGISTER_ID_DESC,
@@ -11,8 +12,6 @@ import {
     ReportFormStepGroup,
     ReportFormStepLabel,
     ReportFormSubmitBtn,
-    ReportFormSubmitFailure,
-    ReportFormSubmitSuccess,
     ReportFormSubmitting,
 } from '../ReportForm'
 
@@ -32,6 +31,8 @@ export function PostReportDialog({
     isOpen,
     onClose,
 }: PostReportDialogProps) {
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
     const {
         register,
         handleSubmit,
@@ -43,7 +44,6 @@ export function PostReportDialog({
     } = useForm<FieldValues>({ defaultValues })
 
     const {
-        isIdle,
         isPending,
         isError,
         isSuccess,
@@ -61,59 +61,63 @@ export function PostReportDialog({
         } catch (error) {}
     })
 
-    const onFailureResubmit = useFailureResubmitDialogFlow({
-        resetForm,
-        resetState,
-        getValues,
-    })
+    const onCloseTransition = () => {
+        setIsSubmitting(false)
+    }
 
     const onCloseDialog = useCloseDialogFlow({
         resetForm,
         resetState,
         onClose,
+        onCloseTransition,
     })
 
+    useEffect(() => {
+        if (isPending) {
+            onClose()
+            setIsSubmitting(true)
+            const timer = setTimeout(() => {
+                onCloseDialog()
+            }, 5000)
+
+            return () => {
+                clearTimeout(timer)
+            }
+        }
+    }, [isPending, onClose, onCloseDialog])
+
+    useEffect(() => {
+        if (isSuccess || isError) {
+            onCloseDialog()
+        }
+    }, [isSuccess, isError, onCloseDialog])
+
     return (
         <>
-            {isIdle && (
-                <Dialog isOpen={isOpen} onClose={onClose}>
-                    <ReportFormCtn onSubmit={onSubmit}>
-                        <ReportFormIntro />
-                        <ReportFormStepGroup>
-                            <ReportFormStepLabel
-                                title="1. 檢舉原因"
-                                isRequired
-                            />
-                            <ReportFormCategories
-                                register={register}
-                                errors={errors}
-                                setValue={setValue}
-                                getValues={getValues}
-                                trigger={trigger}
-                            />
-                        </ReportFormStepGroup>
-                        <ReportFormStepGroup>
-                            <ReportFormStepLabel
-                                title="2. 檢舉描述"
-                                isRequired
-                            />
-                            <ReportFormReason
-                                register={register}
-                                errors={errors}
-                            />
-                        </ReportFormStepGroup>
-                        <ReportFormSubmitBtn />
-                    </ReportFormCtn>
-                </Dialog>
-            )}
-            {isPending && <ReportFormSubmitting />}
-            {isError && (
-                <ReportFormSubmitFailure
-                    onClose={onCloseDialog}
-                    onResubmit={onFailureResubmit}
-                />
-            )}
-            {isSuccess && <ReportFormSubmitSuccess onClose={onCloseDialog} />}
+            <Dialog isOpen={isOpen} onClose={onCloseDialog}>
+                <ReportFormCtn onSubmit={onSubmit}>
+                    <ReportFormIntro />
+                    <ReportFormStepGroup>
+                        <ReportFormStepLabel title="1. 檢舉原因" isRequired />
+                        <ReportFormCategories
+                            register={register}
+                            errors={errors}
+                            setValue={setValue}
+                            getValues={getValues}
+                            trigger={trigger}
+                        />
+                    </ReportFormStepGroup>
+                    <ReportFormStepGroup>
+                        <ReportFormStepLabel title="2. 檢舉描述" isRequired />
+                        <ReportFormReason register={register} errors={errors} />
+                    </ReportFormStepGroup>
+                    <ReportFormSubmitBtn />
+                </ReportFormCtn>
+            </Dialog>
+            <ReportFormSubmitting
+                isOpen={isSubmitting}
+                onClose={onCloseDialog}
+            />
         </>
     )
 }
@@ -122,29 +126,17 @@ function useCloseDialogFlow({
     resetForm,
     resetState,
     onClose,
+    onCloseTransition,
 }: {
     resetForm: () => void
     resetState: () => void
     onClose: () => void
+    onCloseTransition: () => void
 }) {
     return () => {
         resetForm()
         resetState()
         onClose()
-    }
-}
-
-function useFailureResubmitDialogFlow({
-    resetForm,
-    resetState,
-    getValues,
-}: {
-    resetForm: (values: FieldValues) => void
-    resetState: () => void
-    getValues: UseFormGetValues<FieldValues>
-}) {
-    return () => {
-        resetForm(getValues())
-        resetState()
+        onCloseTransition()
     }
 }

packages/frontend/src/features/post/components/Post/tests/PostReportDialog.test.tsx

@@ -11,19 +11,19 @@ jest.mock('../../ReportForm/ReportFormCategories', () => ({
 
 const mockValues = {
     isPending: false,
-    isIdle: false,
     isSuccess: false,
     isError: false,
     reset: jest.fn(),
     reportPost: jest.fn(),
 }
 
 describe('PostReportDialog', () => {
-    it('should render isIdle content', () => {
+    it('should render the initial form content', () => {
         const mockUseReportPost = useReportPost as jest.MockedFunction<
             typeof useReportPost
         >
-        mockUseReportPost.mockReturnValue({ ...mockValues, isIdle: true })
+
+        mockUseReportPost.mockReturnValue({ ...mockValues })
         render(
             <PostReportDialog postId={''} isOpen={true} onClose={() => {}} />,
             { wrapper },
@@ -46,28 +46,4 @@ describe('PostReportDialog', () => {
         )
         expect(screen.getByText('您的檢舉報告正在送出中')).toBeInTheDocument()
     })
-
-    it('should render isSuccess content', () => {
-        const mockUseReportPost = useReportPost as jest.MockedFunction<
-            typeof useReportPost
-        >
-        mockUseReportPost.mockReturnValue({ ...mockValues, isSuccess: true })
-        render(
-            <PostReportDialog postId={''} isOpen={true} onClose={() => {}} />,
-            { wrapper },
-        )
-        expect(screen.getByText('您的檢舉報告傳送成功！')).toBeInTheDocument()
-    })
-
-    it('should render isError content', () => {
-        const mockUseReportPost = useReportPost as jest.MockedFunction<
-            typeof useReportPost
-        >
-        mockUseReportPost.mockReturnValue({ ...mockValues, isError: true })
-        render(
-            <PostReportDialog postId={''} isOpen={true} onClose={() => {}} />,
-            { wrapper },
-        )
-        expect(screen.getByText('導致傳送失敗。')).toBeInTheDocument()
-    })
 })