Merge info and bid modals

hmellor · Mar 9, 2024 · 589e81d · 589e81d
1 parent 247f0e9
commit 589e81d
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 141 deletions.
diff --git a/src/App.css b/src/App.css
@@ -3,20 +3,7 @@ html * {
 }
 
 /* Bootstrap tweaks */
-.card-img-top {
-  width: 100%;
-  height: 16em;
-  object-fit: cover;
-}
-
-.list-group-horizontal > .list-group-item {
-  border: none;
-}
-
-.modal-body > img {
-  width: 100%;
-}
-
-.card > .table {
-  margin-bottom: 0;
+.card:hover {
+  cursor: pointer;
+  box-shadow: 0 0 0.2rem gray;
 }
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -43,9 +43,15 @@ Modal.propTypes = {
   children: PropTypes.arrayOf(PropTypes.element)
 }
 
-const InfoModal = () => {
-  const { openModal, closeModal, activeItem } = useContext(ModalsContext);
+const ItemModal = () => {
+  const { activeItem, openModal, closeModal } = useContext(ModalsContext);
   const [secondaryImageSrc, setSecondaryImageSrc] = useState("");
+  const minIncrease = 1;
+  const [bid, setBid] = useState();
+  const [valid, setValid] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState("");
+  const [feedback, setFeedback] = useState("");
+  const [minBid, setMinBid] = useState("-.--");
 
   useEffect(() => {
     if (activeItem.secondaryImage === undefined) return;
@@ -54,104 +60,6 @@ const InfoModal = () => {
     })
   }, [activeItem.secondaryImage])
 
-  return (
-    <Modal type={ModalTypes.INFO} title={activeItem.title}>
-      <div className="modal-body">
-        <p>{activeItem.detail}</p>
-        <img src={secondaryImageSrc} alt={activeItem.title} />
-      </div>
-      <div className="modal-footer">
-        <button
-          type="button"
-          className="btn btn-secondary"
-          onClick={closeModal}
-        >
-          Close
-        </button>
-        <button
-          type="button"
-          className="btn btn-primary"
-          onClick={() => openModal(ModalTypes.BID, activeItem)}
-          disabled={activeItem.endTime - new Date().getTime() < 0}
-        >
-          Submit bid
-        </button>
-      </div>
-    </Modal>
-  );
-};
-
-const SignUpModal = () => {
-  const { closeModal } = useContext(ModalsContext);
-  const [username, setUsername] = useState("");
-  const [valid, setValid] = useState("");
-
-  const handleSignUp = () => {
-    const user = auth.currentUser;
-    updateProfile(user, { displayName: username });
-    setDoc(doc(db, "users", user.uid), { name: username, admin: "" });
-    console.debug(`signUp() write to users/${user.uid}`);
-    setValid("is-valid");
-    setTimeout(() => {
-      closeModal();
-      setValid("");
-    }, 1000);
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      handleSignUp();
-    }
-  };
-
-  return (
-    <Modal type={ModalTypes.SIGN_UP} title="Sign up for Markatplace Auction">
-      <div className="modal-body">
-        <p>
-          We use anonymous authentication provided by Google. Your account is
-          attached to your device signature.
-        </p>
-        <p>The username just lets us know who&apos;s bidding!</p>
-        <form onSubmit={(e) => e.preventDefault()}>
-          <div className="form-floating mb-3">
-            <input
-              autoFocus
-              id="username-input"
-              type="username"
-              className={`form-control ${valid}`}
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              onKeyDown={handleKeyDown}
-            />
-            <label>Username</label>
-          </div>
-        </form>
-      </div>
-      <div className="modal-footer">
-        <button type="button" className="btn btn-secondary">
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-primary"
-          onClick={handleSignUp}
-        >
-          Sign up
-        </button>
-      </div>
-    </Modal>
-  );
-};
-
-const BidModal = () => {
-  const { closeModal, activeItem } = useContext(ModalsContext);
-  const minIncrease = 1;
-  const [bid, setBid] = useState();
-  const [valid, setValid] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState("");
-  const [feedback, setFeedback] = useState("");
-  const [minBid, setMinBid] = useState("-.--");
-
   useEffect(() => {
     const status = itemStatus(activeItem);
     setMinBid(formatMoney(activeItem.currency, status.amount + minIncrease));
@@ -175,6 +83,18 @@ const BidModal = () => {
       setFeedback("Sorry, this item has ended!");
       setValid("is-invalid");
       delayedClose();
+      setIsSubmitting(false);
+      return;
+    }
+    // Ensure user has provided a username
+    if (auth.currentUser.displayName == null) {
+      setFeedback("You must provide a username before bidding!");
+      setValid("is-invalid");
+      setTimeout(() => {
+        openModal(ModalTypes.SIGN_UP);
+        setIsSubmitting(false);
+        setValid("");
+      }, 1000)
       return;
     }
     // Ensure input is a monetary value
@@ -219,48 +139,96 @@ const BidModal = () => {
   };
 
   return (
-    <Modal type={ModalTypes.BID} title={"Place your bid"}>
+    <Modal type={ModalTypes.ITEM} title={activeItem.title}>
+      <div className="modal-body">
+        <p>{activeItem.detail}</p>
+        <img src={secondaryImageSrc} className="img-fluid" alt={activeItem.title} />
+      </div>
+      <div className="modal-footer justify-content-start">
+        <div className="input-group mb-2">
+          <span className="input-group-text">{activeItem.currency}</span>
+          <input
+            className={`form-control ${valid}`}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            />
+          <button
+            type="submit"
+            className="btn btn-primary"
+            onClick={handleSubmitBid}
+            disabled={isSubmitting}
+            >
+            Submit bid
+          </button>
+          <div className="invalid-feedback">{feedback}</div>
+        </div>
+        <label className="form-label">Enter {minBid} or more</label>
+        <p className="text-muted">(This is just a demo, you&apos;re not bidding real money)</p>
+      </div>
+    </Modal>
+  );
+};
+
+const SignUpModal = () => {
+  const { closeModal } = useContext(ModalsContext);
+  const [username, setUsername] = useState("");
+  const [valid, setValid] = useState("");
+
+  const handleSignUp = () => {
+    const user = auth.currentUser;
+    updateProfile(user, { displayName: username });
+    setDoc(doc(db, "users", user.uid), { name: username, admin: "" });
+    console.debug(`signUp() write to users/${user.uid}`);
+    setValid("is-valid");
+    setTimeout(() => {
+      closeModal();
+      setValid("");
+    }, 1000);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSignUp();
+    }
+  };
+
+  return (
+    <Modal type={ModalTypes.SIGN_UP} title="Sign up for Markatplace Auction">
       <div className="modal-body">
         <p>
-          You are about to place a bid on <strong>{activeItem.title}</strong>
-        </p>
-        <p className="text-muted">
-          (This is just a demo, you&apos;re not bidding real money)
+          We use anonymous authentication provided by Google. Your account is
+          attached to your device signature.
         </p>
+        <p>The username just lets us know who&apos;s bidding!</p>
         <form onSubmit={(e) => e.preventDefault()}>
           <div className="form-floating mb-3">
             <input
               autoFocus
-              id="amount-input"
-              type="amount"
+              id="username-input"
+              type="username"
               className={`form-control ${valid}`}
-              onChange={handleChange}
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
               onKeyDown={handleKeyDown}
             />
-            <label>Enter {minBid} or more</label>
-            <div className="invalid-feedback">{feedback}</div>
+            <label>Username</label>
           </div>
         </form>
       </div>
       <div className="modal-footer">
-        <button
-          type="button"
-          className="btn btn-secondary"
-          onClick={closeModal}
-        >
-          Close
+        <button type="button" className="btn btn-secondary">
+          Cancel
         </button>
         <button
           type="submit"
           className="btn btn-primary"
-          onClick={handleSubmitBid}
-          disabled={isSubmitting}
+          onClick={handleSignUp}
         >
-          Submit bid
+          Sign up
         </button>
       </div>
     </Modal>
   );
 };
 
-export { InfoModal, SignUpModal, BidModal };
+export { ItemModal, SignUpModal };
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,12 +1,11 @@
 import Grid from "../components/Grid";
-import { InfoModal, BidModal } from "../components/Modal";
+import { ItemModal } from "../components/Modal";
 
 function HomePage() {
   return (
     <div className="container mt-3">
       <Grid />
-      <InfoModal />
-      <BidModal />
+      <ItemModal />
     </div>
   );
 }

diff --git a/src/utils/modalTypes.js b/src/utils/modalTypes.js
@@ -1,6 +1,5 @@
 export const ModalTypes = {
-  INFO: "info",
+  ITEM: "item",
   SIGN_UP: "signUp",
-  BID: "bid",
   NONE: null,
 };