Feature use full screen modal for confirmation box when deleting cards

src/components/Atoms/ConfirmModal.tsx

@@ -0,0 +1,46 @@
+import { Accessor, Setter, Show } from "solid-js";
+import { FullScreenModal } from "./FullScreenModal";
+import { BiRegularXCircle } from "solid-icons/bi";
+import { FiTrash } from "solid-icons/fi";
+
+interface ConfirmModalProps {
+  showConfirmModal: Accessor<boolean>;
+  setShowConfirmModal: Setter<boolean>;
+  onConfirm: Accessor<() => void>;
+}
+
+export const ConfirmModal = (props: ConfirmModalProps) => {
+  return (
+    <Show when={props.showConfirmModal()}>
+      <FullScreenModal
+        isOpen={props.showConfirmModal}
+        setIsOpen={props.setShowConfirmModal}
+      >
+        <div class="min-w-[250px] sm:min-w-[300px]">
+          <BiRegularXCircle class="mx-auto h-8 w-8 fill-current !text-red-500" />
+          <div class="mb-4 text-xl font-bold">
+            Are you sure you want to delete this card?
+          </div>
+          <div class="mx-auto flex w-fit space-x-3">
+            <button
+              class="flex items-center space-x-2 rounded-md bg-magenta-500 p-2 text-white"
+              onClick={() => {
+                props.setShowConfirmModal(false);
+                props.onConfirm()();
+              }}
+            >
+              Delete
+              <FiTrash class="h-5 w-5" />
+            </button>
+            <button
+              class="flex space-x-2 rounded-md bg-neutral-500 p-2 text-white"
+              onClick={() => props.setShowConfirmModal(false)}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </FullScreenModal>
+    </Show>
+  );
+};

src/components/BookmarkPopover.tsx

@@ -66,6 +66,7 @@ const BookmarkPopover = (props: BookmarkPopoverProps) => {
         <div>
           <div class="flex items-center">
             <PopoverButton
+              title="Bookmark"
               onClick={() => {
                 if (notLoggedIn()) {
                   props.setLoginModal(true);

src/components/CardMetadataDisplay.tsx

@@ -15,7 +15,9 @@ export interface CardMetadataDisplayProps {
   card: CardMetadataWithVotes;
   cardCollections: CardCollectionDTO[];
   setShowModal: Setter<boolean>;
+  setShowConfirmModal: Setter<boolean>;
   fetchCardCollections: () => void;
+  setOnDelete: Setter<() => void>;
 }
 
 const CardMetadataDisplay = (props: CardMetadataDisplayProps) => {
@@ -25,24 +27,28 @@ const CardMetadataDisplay = (props: CardMetadataDisplayProps) => {
   const [deleting, setDeleting] = createSignal(false);
   const [deleted, setDeleted] = createSignal(false);
 
-  const deleteCard = () => {
+  const onDelete = () => {
     if (props.signedInUserId !== props.viewingUserId) return;
+    const curCardId = props.card.id;
 
-    if (!confirm("Are you sure you want to delete this card?")) return;
-
-    setDeleting(true);
-
-    void fetch(`${api_host}/card/${props.card.id}`, {
-      method: "DELETE",
-      credentials: "include",
-    }).then((response) => {
-      setDeleting(false);
-      if (response.ok) {
-        setDeleted(true);
-        return;
-      }
-      alert("Failed to delete card");
+    props.setOnDelete(() => {
+      return () => {
+        setDeleting(true);
+        void fetch(`${api_host}/card/${curCardId}`, {
+          method: "DELETE",
+          credentials: "include",
+        }).then((response) => {
+          setDeleting(false);
+          if (response.ok) {
+            setDeleted(true);
+            return;
+          }
+          alert("Failed to delete card");
+        });
+      };
     });
+
+    props.setShowConfirmModal(true);
   };
 
   return (
@@ -95,16 +101,17 @@ const CardMetadataDisplay = (props: CardMetadataDisplayProps) => {
             </Show>
             <Show when={props.signedInUserId == props.viewingUserId}>
               <button
+                title="Delete"
                 classList={{
                   "h-fit text-red-700 dark:text-red-400": true,
                   "animate-pulse": deleting(),
                 }}
-                onClick={() => deleteCard()}
+                onClick={() => onDelete()}
               >
                 <FiTrash class="h-5 w-5" />
               </button>
             </Show>
-            <a href={`/card/${props.card.id}`}>
+            <a title="Open" href={`/card/${props.card.id}`}>
               <VsFileSymlinkFile class="cursor-pointe h-5 w-5 fill-current" />
             </a>
             <BookmarkPopover

src/components/CollectionPage.tsx

@@ -10,6 +10,7 @@ import ScoreCard from "./ScoreCard";
 import { FullScreenModal } from "./Atoms/FullScreenModal";
 import { BiRegularLogInCircle, BiRegularXCircle } from "solid-icons/bi";
 import { FiEdit, FiLock } from "solid-icons/fi";
+import { ConfirmModal } from "./Atoms/ConfirmModal";
 
 export interface CollectionPageProps {
   collectionID: string | undefined;
@@ -52,6 +53,12 @@ export const CollectionPage = (props: CollectionPageProps) => {
   const [editing, setEditing] = createSignal(false);
   const [user, setUser] = createSignal<UserDTO | undefined>();
 
+  const [showConfirmDeleteModal, setShowConfirmDeleteModal] =
+    createSignal(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const [onDelete, setOnDelete] = createSignal(() => {});
+
   // Fetch the user info for the auth'ed user
   createEffect(() => {
     void fetch(`${apiHost}/auth`, {
@@ -254,6 +261,8 @@ export const CollectionPage = (props: CollectionPageProps) => {
                     setShowModal={setShowNeedLoginModal}
                     cardCollections={cardCollections()}
                     fetchCardCollections={fetchCardCollections}
+                    setOnDelete={setOnDelete}
+                    setShowConfirmModal={setShowConfirmDeleteModal}
                   />
                 </div>
               )}
@@ -300,6 +309,11 @@ export const CollectionPage = (props: CollectionPageProps) => {
           </div>
         </FullScreenModal>
       </Show>
+      <ConfirmModal
+        showConfirmModal={showConfirmDeleteModal}
+        setShowConfirmModal={setShowConfirmDeleteModal}
+        onConfirm={onDelete}
+      />
     </>
   );
 };

src/components/ResultsPage.tsx

@@ -10,6 +10,7 @@ import ScoreCard from "./ScoreCard";
 import { BiRegularLogIn, BiRegularXCircle } from "solid-icons/bi";
 import { FullScreenModal } from "./Atoms/FullScreenModal";
 import { PaginationController } from "./Atoms/PaginationController";
+import { ConfirmModal } from "./Atoms/ConfirmModal";
 
 export interface Filters {
   dataTypes: string[];
@@ -41,6 +42,12 @@ const ResultsPage = (props: ResultsPageProps) => {
     createSignal<ScoreCardDTO[]>(initialResultCards);
   const [showNeedLoginModal, setShowNeedLoginModal] = createSignal(false);
 
+  const [showConfirmDeleteModal, setShowConfirmDeleteModal] =
+    createSignal(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const [onDelete, setOnDelete] = createSignal(() => {});
+
   // Fetch the card collections for the auth'ed user
   const fetchCardCollections = () => {
     void fetch(`${apiHost}/card_collection`, {
@@ -124,6 +131,8 @@ const ResultsPage = (props: ResultsPageProps) => {
                   card={card}
                   setShowModal={setShowNeedLoginModal}
                   fetchCardCollections={fetchCardCollections}
+                  setOnDelete={setOnDelete}
+                  setShowConfirmModal={setShowConfirmDeleteModal}
                 />
               </div>
             )}
@@ -167,6 +176,11 @@ const ResultsPage = (props: ResultsPageProps) => {
           </div>
         </FullScreenModal>
       </Show>
+      <ConfirmModal
+        showConfirmModal={showConfirmDeleteModal}
+        setShowConfirmModal={setShowConfirmDeleteModal}
+        onConfirm={onDelete}
+      />
     </>
   );
 };

src/components/ScoreCard.tsx

@@ -19,6 +19,8 @@ export interface ScoreCardProps {
   card: ScoreCardDTO;
   setShowModal: Setter<boolean>;
   fetchCardCollections: () => void;
+  setOnDelete: Setter<() => void>;
+  setShowConfirmModal: Setter<boolean>;
 }
 
 const ScoreCard = (props: ScoreCardProps) => {
@@ -92,27 +94,28 @@ const ScoreCard = (props: ScoreCardProps) => {
   };
 
   const deleteCard = () => {
-    console.log(
-      "delete card",
-      props.signedInUserId == props.card.metadata.author?.id,
-    );
     if (props.signedInUserId !== props.card.metadata.author?.id) return;
 
-    if (!confirm("Are you sure you want to delete this card?")) return;
+    const curCardMetadataId = props.card.metadata.id;
 
-    setDeleting(true);
-
-    void fetch(`${api_host}/card/${props.card.metadata.id}`, {
-      method: "DELETE",
-      credentials: "include",
-    }).then((response) => {
-      setDeleting(false);
-      if (response.ok) {
-        setDeleted(true);
-        return;
-      }
-      alert("Failed to delete card");
+    props.setOnDelete(() => {
+      return () => {
+        setDeleting(true);
+        void fetch(`${api_host}/card/${curCardMetadataId}`, {
+          method: "DELETE",
+          credentials: "include",
+        }).then((response) => {
+          setDeleting(false);
+          if (response.ok) {
+            setDeleted(true);
+            return;
+          }
+          alert("Failed to delete card");
+        });
+      };
     });
+
+    props.setShowConfirmModal(true);
   };
 
   return (
@@ -220,12 +223,13 @@ const ScoreCard = (props: ScoreCardProps) => {
                   "h-fit text-red-700 dark:text-red-400": true,
                   "animate-pulse": deleting(),
                 }}
+                title="Delete"
                 onClick={() => deleteCard()}
               >
                 <FiTrash class="h-5 w-5" />
               </button>
             </Show>
-            <a href={`/card/${props.card.metadata.id}`}>
+            <a title="Open" href={`/card/${props.card.metadata.id}`}>
               <VsFileSymlinkFile class="h-5 w-5 fill-current" />
             </a>
             <BookmarkPopover

src/components/SingleCardPage.tsx

@@ -9,6 +9,7 @@ import {
 import ScoreCard from "./ScoreCard";
 import { FullScreenModal } from "./Atoms/FullScreenModal";
 import { BiRegularLogIn, BiRegularXCircle } from "solid-icons/bi";
+import { ConfirmModal } from "./Atoms/ConfirmModal";
 
 export interface SingleCardPageProps {
   cardID: string | undefined;
@@ -32,6 +33,12 @@ export const SingleCardPage = (props: SingleCardPageProps) => {
   >([]);
   const [user, setUser] = createSignal<UserDTO | undefined>();
 
+  const [showConfirmDeleteModal, setShowConfirmDeleteModal] =
+    createSignal(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const [onDelete, setOnDelete] = createSignal(() => {});
+
   if (props.defaultResultCards.status == 401) {
     setError("You are not authorized to view this card.");
   }
@@ -113,6 +120,8 @@ export const SingleCardPage = (props: SingleCardPageProps) => {
               setShowModal={setShowNeedLoginModal}
               cardCollections={cardCollections()}
               fetchCardCollections={fetchCardCollections}
+              setOnDelete={setOnDelete}
+              setShowConfirmModal={setShowConfirmDeleteModal}
             />
           </Show>
           <Show when={error().length > 0 && !fetching()}>
@@ -144,6 +153,11 @@ export const SingleCardPage = (props: SingleCardPageProps) => {
           </div>
         </FullScreenModal>
       </Show>
+      <ConfirmModal
+        showConfirmModal={showConfirmDeleteModal}
+        setShowConfirmModal={setShowConfirmDeleteModal}
+        onConfirm={onDelete}
+      />
     </>
   );
 };

src/components/UserCardDisplay.tsx

@@ -8,16 +8,21 @@ import { PaginationController } from "./Atoms/PaginationController";
 import { CollectionUserPageView } from "./CollectionUserPageView";
 import { FullScreenModal } from "./Atoms/FullScreenModal";
 import { BiRegularLogIn, BiRegularXCircle } from "solid-icons/bi";
+import { ConfirmModal } from "./Atoms/ConfirmModal";
 
 export const UserCardDisplay = (props: { id: string; page: number }) => {
   const apiHost = import.meta.env.PUBLIC_API_HOST as string;
 
   const [user, setUser] = createSignal<UserDTOWithVotesAndCards>();
   const [showNeedLoginModal, setShowNeedLoginModal] = createSignal(false);
+  const [showConfirmModal, setShowConfirmModal] = createSignal(false);
   const [cardCollections, setCardCollections] = createSignal<
     CardCollectionDTO[]
   >([]);
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const [onDelete, setOnDelete] = createSignal<() => void>(() => {});
+
   // Fetch the card collections for the auth'ed user
   const fetchCardCollections = () => {
     void fetch(`${apiHost}/card_collection`, {
@@ -107,12 +112,14 @@ export const UserCardDisplay = (props: { id: string; page: number }) => {
               {(card) => (
                 <div class="w-full">
                   <CardMetadataDisplay
+                    setShowConfirmModal={setShowConfirmModal}
                     signedInUserId={user()?.id}
                     viewingUserId={props.id}
                     card={card}
                     setShowModal={setShowNeedLoginModal}
                     cardCollections={cardCollections()}
                     fetchCardCollections={fetchCardCollections}
+                    setOnDelete={setOnDelete}
                   />
                 </div>
               )}
@@ -150,6 +157,11 @@ export const UserCardDisplay = (props: { id: string; page: number }) => {
           </div>
         </FullScreenModal>
       </Show>
+      <ConfirmModal
+        showConfirmModal={showConfirmModal}
+        setShowConfirmModal={setShowConfirmModal}
+        onConfirm={onDelete}
+      />
     </>
   );
 };