Fixing throw cards modal

daithihearn · Jan 14, 2023 · 52caabc · 52caabc
1 parent bf9f93f
commit 52caabc
Showing 3 changed files with 121 additions and 131 deletions.
diff --git a/src/components/Game/Buying.tsx b/src/components/Game/Buying.tsx
@@ -1,15 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalHeader,
-  Button,
-  ButtonGroup,
-  Form,
-  CardImg,
-  CardBody,
-  CardGroup,
-  Card,
-} from "reactstrap"
+import { Button, ButtonGroup, Form, CardBody } from "reactstrap"
 
 import { useCallback, useMemo, useState } from "react"
 
@@ -27,6 +16,7 @@ import {
   removeAllFromHand,
   riskOfMistakeBuyingCards,
 } from "../../utils/GameUtils"
+import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 
 const Buying = () => {
   const dispatch = useAppDispatch()
@@ -45,8 +35,8 @@ const Buying = () => {
   )
 
   const buyCards = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault()
+    (e?: React.FormEvent) => {
+      if (e) e.preventDefault()
       if (riskOfMistakeBuyingCards(suit!, selectedCards, myCards)) {
         showCancelDeleteCardsDialog()
       } else {
@@ -80,55 +70,13 @@ const Buying = () => {
             </ButtonGroup>
           </Form>
 
-          <Modal
-            fade={true}
-            size="lg"
-            toggle={hideCancelDeleteCardsDialog}
-            isOpen={deleteCardsDialog}
-          >
-            <ModalHeader>
-              <CardImg
-                alt="Suit"
-                src={`/cards/originals/${suit}_ICON.svg`}
-                className="thumbnail_size_extra_small left-padding"
-              />{" "}
-              Are you sure you want to throw these cards away?
-            </ModalHeader>
-            <ModalBody className="called-modal">
-              <CardGroup className="gameModalCardGroup">
-                <Card
-                  className="p-6 tableCloth"
-                  style={{ backgroundColor: "#333", borderColor: "#333" }}
-                >
-                  <CardBody className="cardArea">
-                    {removeAllFromHand(selectedCards, myCards).map((card) => (
-                      <img
-                        key={"deleteCardModal_" + card}
-                        alt={card.name}
-                        src={"/cards/thumbnails/" + card + ".png"}
-                        className="thumbnail_size"
-                      />
-                    ))}
-                  </CardBody>
-
-                  <CardBody className="buttonArea">
-                    <ButtonGroup size="lg">
-                      <Button
-                        type="button"
-                        color="primary"
-                        onClick={hideCancelDeleteCardsDialog}
-                      >
-                        Cancel
-                      </Button>
-                      <Button type="button" color="warning" onClick={buyCards}>
-                        Throw Cards
-                      </Button>
-                    </ButtonGroup>
-                  </CardBody>
-                </Card>
-              </CardGroup>
-            </ModalBody>
-          </Modal>
+          <ThrowCardsWarningModal
+            modalVisible={deleteCardsDialog}
+            cancelCallback={hideCancelDeleteCardsDialog}
+            continueCallback={buyCards}
+            suit={suit!}
+            cards={removeAllFromHand(selectedCards, myCards)}
+          />
         </CardBody>
       ) : null}
     </div>

diff --git a/src/components/Game/SelectSuit.tsx b/src/components/Game/SelectSuit.tsx
@@ -1,14 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalHeader,
-  Button,
-  ButtonGroup,
-  Card,
-  CardImg,
-  CardBody,
-  CardGroup,
-} from "reactstrap"
+import { Button, ButtonGroup, CardBody } from "reactstrap"
 
 import { useCallback, useEffect, useState } from "react"
 
@@ -20,6 +10,7 @@ import { Suit } from "../../model/Suit"
 import { useSnackbar } from "notistack"
 import { getMyCardsWithoutBlanks } from "../../caches/MyCardsSlice"
 import { removeAllFromHand } from "../../utils/GameUtils"
+import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 
 const SelectSuit = () => {
   const dispatch = useAppDispatch()
@@ -63,6 +54,14 @@ const SelectSuit = () => {
     [gameId, selectedCards]
   )
 
+  const selectFromDummyCallback = useCallback(() => {
+    if (selectedSuit) {
+      dispatch(
+        GameService.chooseFromDummy(gameId!, selectedCards, selectedSuit)
+      ).catch((e: Error) => enqueueSnackbar(e.message, { variant: "error" }))
+    }
+  }, [gameId, selectedCards, selectedSuit])
+
   const hideCancelSelectFromDummyDialog = useCallback(() => {
     setSelectedSuit(undefined)
     setPossibleIssues(false)
@@ -140,63 +139,15 @@ const SelectSuit = () => {
                 </Button>
               </ButtonGroup>
 
-              {possibleIssue && selectedSuit ? (
-                <Modal
-                  fade={true}
-                  size="lg"
-                  toggle={hideCancelSelectFromDummyDialog}
-                  isOpen={possibleIssue}
-                >
-                  <ModalHeader>
-                    <CardImg
-                      alt="Suit"
-                      src={`/cards/originals/${selectedSuit}_ICON.svg`}
-                      className="thumbnail_size_extra_small left-padding"
-                    />{" "}
-                    Are you sure you want to throw these cards away?
-                  </ModalHeader>
-                  <ModalBody className="called-modal">
-                    <CardGroup className="gameModalCardGroup">
-                      <Card
-                        className="p-6 tableCloth"
-                        style={{ backgroundColor: "#333", borderColor: "#333" }}
-                      >
-                        <CardBody className="cardArea">
-                          {removeAllFromHand(selectedCards, myCards).map(
-                            (card) => (
-                              <img
-                                key={`cancelSelectFromDummyModal_${card.name}`}
-                                alt={card.name}
-                                src={`/cards/thumbnails/${card.name}.png`}
-                                className="thumbnail_size"
-                              />
-                            )
-                          )}
-                        </CardBody>
-
-                        <CardBody className="buttonArea">
-                          <ButtonGroup size="lg">
-                            <Button
-                              type="button"
-                              color="primary"
-                              onClick={hideCancelSelectFromDummyDialog}
-                            >
-                              Cancel
-                            </Button>
-                            <Button
-                              type="button"
-                              color="warning"
-                              onClick={() => selectFromDummy(selectedSuit)}
-                            >
-                              Throw Cards
-                            </Button>
-                          </ButtonGroup>
-                        </CardBody>
-                      </Card>
-                    </CardGroup>
-                  </ModalBody>
-                </Modal>
-              ) : null}
+              {selectedSuit && (
+                <ThrowCardsWarningModal
+                  modalVisible={possibleIssue}
+                  cancelCallback={hideCancelSelectFromDummyDialog}
+                  continueCallback={selectFromDummyCallback}
+                  suit={selectedSuit}
+                  cards={removeAllFromHand(selectedCards, myCards)}
+                />
+              )}
             </div>
           ) : (
             <ButtonGroup size="lg">

diff --git a/src/components/Game/ThrowCardsWarningModal.tsx b/src/components/Game/ThrowCardsWarningModal.tsx
@@ -0,0 +1,91 @@
+import React, { useCallback } from "react"
+import {
+  Modal,
+  ModalBody,
+  ModalHeader,
+  Button,
+  ButtonGroup,
+  CardImg,
+  CardBody,
+  CardGroup,
+  Card as CardComponent,
+} from "reactstrap"
+import { Card } from "../../model/Cards"
+import { Suit } from "../../model/Suit"
+
+interface ModalOpts {
+  modalVisible: boolean
+  cancelCallback: () => void
+  continueCallback: () => void
+  suit: Suit
+  cards: Card[]
+}
+
+const ThrowCardsWarningModal: React.FC<ModalOpts> = ({
+  modalVisible,
+  cancelCallback,
+  continueCallback,
+  suit,
+  cards,
+}) => {
+  const callContinue = useCallback(
+    (event: React.SyntheticEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      continueCallback()
+    },
+    []
+  )
+  return (
+    <Modal
+      fade={true}
+      size="lg"
+      toggle={() => cancelCallback()}
+      isOpen={modalVisible}
+    >
+      <ModalHeader>
+        <CardImg
+          alt="Suit"
+          src={`/cards/originals/${suit}_ICON.svg`}
+          className="thumbnail_size_extra_small left-padding"
+        />{" "}
+        Are you sure you want to throw these cards away?
+      </ModalHeader>
+      <ModalBody className="called-modal">
+        <CardGroup className="gameModalCardGroup">
+          <CardComponent
+            className="p-6 tableCloth"
+            style={{ backgroundColor: "#333", borderColor: "#333" }}
+          >
+            <CardBody className="cardArea">
+              {cards.map((card) => (
+                <img
+                  key={`deleteCardModal_${card.name}`}
+                  alt={card.name}
+                  src={`/cards/thumbnails/${card.name}.png`}
+                  className="thumbnail_size"
+                />
+              ))}
+            </CardBody>
+
+            <CardBody className="buttonArea">
+              <ButtonGroup size="lg">
+                <Button
+                  type="button"
+                  color="primary"
+                  onClick={() => cancelCallback()}
+                >
+                  Cancel
+                </Button>
+                <Button type="button" color="primary" onClick={callContinue}>
+                  Throw Cards
+                </Button>
+              </ButtonGroup>
+            </CardBody>
+          </CardComponent>
+        </CardGroup>
+      </ModalBody>
+    </Modal>
+  )
+}
+
+export default ThrowCardsWarningModal