Add confirm delete popup before delete

leung018 · Jun 12, 2024 · 186415a · 186415a
1 parent aa5982c
commit 186415a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/app/components/editor.test.tsx b/src/app/components/editor.test.tsx
@@ -165,8 +165,13 @@ class UIServiceInteractor {
     return this
   }
 
-  performDeleteFlow() {
+  async performDeleteFlow() {
     fireEvent.click(screen.getByText('Delete'))
+
+    const confirmDeleteButton = await screen.findByRole('button', {
+      name: 'Confirm',
+    })
+    fireEvent.click(confirmDeleteButton)
     return this
   }
 
@@ -796,7 +801,7 @@ describe('QuestionSetEditor', () => {
     expect(interactor.getQuestionSetByInputtedName()).toEqual(questionSet)
   })
 
-  it('should able to delete the existing question set', () => {
+  it('should able to delete the existing question set', async () => {
     const questionSetRepo = LocalStorageQuestionSetRepo.createNull()
     const questionSet = new QuestionSetBuilderForTest().appendQuestion().build()
     questionSetRepo.upsertQuestionSet(questionSet)
@@ -806,7 +811,7 @@ describe('QuestionSetEditor', () => {
     })
     interactor.renderModifyingPage(questionSet.id)
 
-    interactor.performDeleteFlow()
+    await interactor.performDeleteFlow()
 
     expect(questionSetRepo.getQuestionSets()).toEqual([])
   })

diff --git a/src/app/components/editor.tsx b/src/app/components/editor.tsx
@@ -231,6 +231,7 @@ function QuestionSetEditor({
     questions: [],
   })
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [isConfirmDelete, setIsConfirmDelete] = useState<boolean>(false)
 
   useEffect(() => {
     try {
@@ -382,6 +383,12 @@ function QuestionSetEditor({
 
   return (
     <div className="container mx-auto p-4">
+      {isConfirmDelete &&
+        ConfirmDeleteDiaLog({
+          onConfirm: () => {
+            deleteQuestionSet!(questionSetIdRef.current)
+          },
+        })}
       <form>
         <div className="form-group mb-8">
           <label>
@@ -478,7 +485,7 @@ function QuestionSetEditor({
               type="button"
               className="bg-red-500 text-white px-4 py-2 rounded ml-2"
               onClick={() => {
-                deleteQuestionSet(questionSetIdRef.current)
+                setIsConfirmDelete(true)
               }}
             >
               Delete
@@ -499,6 +506,29 @@ function QuestionSetEditor({
   )
 }
 
+function ConfirmDeleteDiaLog({ onConfirm }: { onConfirm: () => void }) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white p-6 rounded-lg shadow-lg z-50">
+        <h2 className="text-lg font-bold mb-4">
+          Are you sure you want to delete this question set?
+        </h2>
+        <div className="flex justify-end space-x-2">
+          <button
+            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+            onClick={() => onConfirm()}
+          >
+            Confirm
+          </button>
+          <button className="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function ChoicesEditor(props: {
   questionNumber: number
   choices: ChoiceInput[]