Feature/Add delete survey button to answers page (#119)

Co-authored-by: Tomasz Symonowicz <tomaszsymonowicz@imac-pro-tomasz.home> Co-authored-by: Tomasz Symonowicz <tomaszsymonowicz@macbook-air-tomasz.home>
Ryczko · Mar 29, 2023 · a37fce9 · a37fce9
1 parent ff6b038
commit a37fce9
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 32 deletions.
diff --git a/src/features/surveys/components/DeleteSurveyModal/DeleteSurveyModal.tsx b/src/features/surveys/components/DeleteSurveyModal/DeleteSurveyModal.tsx
@@ -8,12 +8,14 @@ type DeleteSurveyModalProps = {
   surveyId: string;
   isOpened: boolean;
   closeModal: () => void;
+  onSuccess?: () => void;
 };
 
 export default function DeleteSurveyModal({
   surveyId,
   isOpened,
   closeModal,
+  onSuccess,
 }: DeleteSurveyModalProps) {
   const { deleteSurvey, isRemoving } = useRemoveSurvey();
 
@@ -42,7 +44,7 @@ export default function DeleteSurveyModal({
             </Button>
             <Button
               variant={ButtonVariant.DANGER}
-              onClick={deleteSurvey(surveyId, closeModal)}
+              onClick={deleteSurvey(surveyId, closeModal, onSuccess)}
               icon={<TrashIcon className="h-5 w-5" />}
               className="uppercase"
               isLoading={isRemoving}

diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -1,11 +1,11 @@
-import { useState } from 'react';
 import { LinkIcon, TrashIcon } from '@heroicons/react/outline';
 
 import { useRouter } from 'next/router';
 import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 
 import DeleteSurveyModal from 'features/surveys/components/DeleteSurveyModal/DeleteSurveyModal';
+import useModal from 'features/surveys/hooks/useModal';
 
 interface SurveyRowProps {
   question: string;
@@ -20,15 +20,11 @@ export default function SurveyRow({
 }: SurveyRowProps) {
   const { copy } = useCopyToClipboard();
   const navigate = useRouter();
-  const [isOpen, setIsOpen] = useState(false);
-
-  function closeDeleteModal() {
-    setIsOpen(false);
-  }
-
-  function openDeleteModal() {
-    setIsOpen(true);
-  }
+  const {
+    isModalOpen: isDeleteSurveyModalOpen,
+    closeModal: closeDeleteSurveyModal,
+    openModal: openDeleteSurveyModal,
+  } = useModal();
 
   const handleCopyLink = () => {
     const domain =
@@ -73,14 +69,14 @@ export default function SurveyRow({
           variant={ButtonVariant.DANGER}
           title="Delete survey"
           className="mt-2 ml-2 w-full justify-center px-3 sm:mt-0 md:w-auto"
-          onClick={openDeleteModal}
+          onClick={openDeleteSurveyModal}
           icon={<TrashIcon className="h-5 w-5" />}
         />
       </div>
       <DeleteSurveyModal
         surveyId={id}
-        closeModal={closeDeleteModal}
-        isOpened={isOpen}
+        closeModal={closeDeleteSurveyModal}
+        isOpened={isDeleteSurveyModalOpen}
       />
     </div>
   );

diff --git a/src/features/surveys/hooks/useModal.ts b/src/features/surveys/hooks/useModal.ts
@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+export default function useModal() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const closeModal = useCallback(() => {
+    setIsModalOpen(false);
+  }, [setIsModalOpen]);
+
+  const openModal = useCallback(() => {
+    setIsModalOpen(true);
+  }, [setIsModalOpen]);
+
+  return {
+    isModalOpen,
+    closeModal,
+    openModal,
+  };
+}
diff --git a/src/features/surveys/hooks/useRemoveSurvey.ts b/src/features/surveys/hooks/useRemoveSurvey.ts
@@ -7,26 +7,29 @@ export const useRemoveSurvey = () => {
   const [isRemoving, setIsRemoving] = useState(false);
 
   const deleteSurvey =
-    (id: string, closeDeleteModal: () => void) => async () => {
-      setIsRemoving(true);
-      try {
-        await deleteDoc(doc(db, 'surveys', id));
+    (id: string, closeDeleteModal: () => void, onSuccess?: () => void) =>
+      async () => {
+        setIsRemoving(true);
+        try {
+          await deleteDoc(doc(db, 'surveys', id));
 
-        const answersCollection = await getDocs(
-          query(collection(db, 'surveys', id, 'answers'))
-        );
+          const answersCollection = await getDocs(
+            query(collection(db, 'surveys', id, 'answers'))
+          );
 
-        answersCollection.forEach(async (answer) => {
-          await deleteDoc(answer.ref);
-        });
+          answersCollection.forEach(async (answer) => {
+            await deleteDoc(answer.ref);
+          });
 
-        closeDeleteModal();
-        toast.success('Survey deleted');
-      } catch (error) {
-        toast.error('Error deleting survey');
-      }
-      setIsRemoving(false);
-    };
+          if (onSuccess) onSuccess();
+          toast.success('Survey deleted');
+        } catch (error) {
+          toast.error('Error deleting survey');
+        } finally {
+          closeDeleteModal();
+          setIsRemoving(false);
+        }
+      };
 
   return {
     deleteSurvey,

diff --git a/src/pages/survey/answer/[surveyId]/index.tsx b/src/pages/survey/answer/[surveyId]/index.tsx
@@ -1,4 +1,4 @@
-import { LinkIcon, RefreshIcon } from '@heroicons/react/outline';
+import { LinkIcon, RefreshIcon, TrashIcon } from '@heroicons/react/outline';
 import Head from 'next/head';
 import withAnimation from 'shared/HOC/withAnimation';
 import withProtectedRoute from 'shared/HOC/withProtectedRoute';
@@ -8,8 +8,13 @@ import Loader from 'shared/components/Loader/Loader';
 import AnswerTableRow from 'features/surveys/components/AnswerTableRow/AnswerTableRow';
 import { useSurveyResultsManager } from 'features/surveys/managers/surveyResultsManager';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
+import useModal from 'features/surveys/hooks/useModal';
+import DeleteSurveyModal from 'features/surveys/components/DeleteSurveyModal/DeleteSurveyModal';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
 
 function SurveyResultsPage() {
+  const router = useRouter();
   const {
     isLoading,
     title,
@@ -21,6 +26,16 @@ function SurveyResultsPage() {
     votes,
     createDate,
   } = useSurveyResultsManager();
+  const {
+    isModalOpen: isDeleteSurveyModalOpen,
+    closeModal: closeDeleteSurveyModal,
+    openModal: openDeleteSurveyModal,
+  } = useModal();
+
+  const navigateToSurveys = useCallback(
+    () => router.push('/surveys'),
+    [router]
+  );
 
   return (
     <>
@@ -51,6 +66,13 @@ function SurveyResultsPage() {
             >
               Refresh
             </Button>
+            <Button
+              variant={ButtonVariant.DANGER}
+              title="Delete survey"
+              className="mt-2 justify-center px-3 sm:ml-4 sm:mt-0"
+              onClick={openDeleteSurveyModal}
+              icon={<TrashIcon className="h-5 w-5" />}
+            />
           </div>
 
           <hr className=" md:hidden" />
@@ -75,6 +97,12 @@ function SurveyResultsPage() {
           )}
         </div>
       )}
+      <DeleteSurveyModal
+        surveyId={surveyId}
+        closeModal={closeDeleteSurveyModal}
+        isOpened={isDeleteSurveyModalOpen}
+        onSuccess={navigateToSurveys}
+      />
     </>
   );
 }