Merge pull request #13 from Saksham-Chauhan/main

feat: added functionality to donate for multiple devices
koders-in · Dec 13, 2023 · ff23535 · ff23535
2 parents aacc276 + 993b1f5
commit ff23535
Show file tree

Hide file tree

Showing 1,388 changed files with 68,816 additions and 230 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 ./server/node_modules/
 data/
 .DS_Store
+./*/.env
diff --git a/client/package.json b/client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "client2",
+  "name": "gaming-donation",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/client/src/app/App.js b/client/src/app/App.js
@@ -6,8 +6,6 @@ import AppRoutes from "./routes";
 import Headermain from "../header";
 import AnimatedCursor from "../hooks/AnimatedCursor";
 import "./App.css";
-import AlertModal from "../pages/crowdfunding/components/AlertModal";
-import { useSelector } from "react-redux";
 
 function _ScrollToTop(props) {
   const { pathname } = useLocation();
@@ -19,7 +17,6 @@ function _ScrollToTop(props) {
 const ScrollToTop = withRouter(_ScrollToTop);
 
 export default function App() {
-  const isFundCollected = useSelector((state) => state.appSlice.fundingModal);
   return (
     <Router basename={process.env.PUBLIC_URL}>
       <div className="cursor__dot">
@@ -32,7 +29,6 @@ export default function App() {
           outerScale={5}
         />
       </div>
-      {isFundCollected && <AlertModal />}
       <ScrollToTop>
         <Headermain />
         <AppRoutes />

diff --git a/client/src/components/funding-page-card/index.js b/client/src/components/funding-page-card/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+import "./style.css";
+
+const ProductCard = ({ productImage, productName, onClick }) => {
+  return (
+    <div onClick={onClick} className="product-card">
+      <img src={productImage} alt={productName} className="" />
+      <div className="product-name">{productName}</div>
+      <div className="go-corner" href="#">
+        <div className="go-arrow">→</div>
+      </div>
+      <div className="go-corner-ex"></div>
+    </div>
+  );
+};
+
+export default ProductCard;
diff --git a/client/src/components/funding-page-card/style.css b/client/src/components/funding-page-card/style.css
@@ -0,0 +1,75 @@
+.product-card{
+    width: 23%;
+    background-color: white;
+    border-radius: 10px;
+    border: 1px solid rgb(77, 75, 75);
+    padding: 1rem;
+    position: relative;
+    overflow: hidden;
+    text-decoration: none;
+    z-index: 0;
+}
+
+.product-card::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: -16px;
+    right: -16px;
+    background: #9f9e9e;
+    height: 32px;
+    width: 32px;
+    border-radius: 32px;
+    transform: scale(1);
+    transform-origin: 50% 50%;
+    transition: transform 0.25s ease-out;
+  }
+
+  .product-card:hover::before {
+    transform: scale(21);
+  }
+  .product-card:hover .product-name{
+color: white;
+  }
+
+
+.product-card>img{
+    width: auto;
+    border-radius: 10px;
+    max-height: 100px;
+    display: block;
+    margin: 0 auto;
+    z-index: 2;
+}
+.product-card>.product-name{
+    margin-top: 10px;
+    color: black;
+    z-index: 2;
+    text-align: center;
+}
+
+
+.go-corner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+    top: 0;
+    right: 0;
+    background-color: #9f9e9e;
+    border-radius: 0 4px 0 32px;
+  }
+
+  .go-arrow {
+    margin-top: -4px;
+    margin-right: -4px;
+    color: white;
+    font-family: courier, sans;
+  }
+
+
+
+
diff --git a/client/src/content_option.js b/client/src/content_option.js
@@ -1,6 +1,6 @@
-// BASE_URL: https://api.xhunter.in
-
-const BASE_URL = "http://localhost:8086/";
+const BASE_URL = "https://api.xhunter.in";
+// use in dev mode only
+// const BASE_URL = "http://localhost:3006/";
 
 const logotext = "XHUNTER";
 const meta = {
@@ -187,6 +187,59 @@ const donationPageData = {
     " This device can help me capture premium quality game records.Throwing in your support can seriously level up my game recordings. Big or small, your contribution means the world to me!",
 };
 
+const productList = [
+  {
+    productName: "Gaming Console",
+    productImage:
+      "https://i.pcmag.com/imagery/reviews/04dRlD6i7f8OrAtbWbNfZoB-3.fit_scale.size_1028x578.v1569482971.jpg",
+  },
+  {
+    productName: "Gaming PC",
+    productImage:
+      "https://imgs.search.brave.com/j_nGr15TooFsRPylodJCLwP3_gtpofUHfpDwqS4nQUw/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvZ2FtaW5nLWJh/Y2tncm91bmQtazA4/aW5jeTNzemlmdzQy/ZS5qcGc",
+  },
+  {
+    productName: "Gaming Laptop",
+    productImage:
+      "https://imgs.search.brave.com/Jd-gXripl5i2FgEqJ7_k0_qXGFyegdGgFdC6dfFm5Q0/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvZ2FtaW5nLXBp/Y3R1cmVzLW12c3ox/a2toMXhkbHNmNjgu/anBn",
+  },
+  {
+    productName: "Gaming Mouse",
+    productImage:
+      "https://imgs.search.brave.com/yk2lYjhLmMvgHMn7QglHekURFTh7P2OL-Csg5KCJh3Y/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by8z/ZC13b3Jrc3RhdGlv/bi13aXRoLWNvbXB1/dGVyLXBlcmlwaGVy/YWwtZGV2aWNlc18y/My0yMTUwNzE0MjAx/LmpwZz9zaXplPTYy/NiZleHQ9anBn",
+  },
+  {
+    productName: "Gaming Keyboard",
+    productImage:
+      "https://i.pcmag.com/imagery/reviews/04dRlD6i7f8OrAtbWbNfZoB-3.fit_scale.size_1028x578.v1569482971.jpg",
+  },
+  {
+    productName: "Gaming Headset",
+    productImage:
+      "https://imgs.search.brave.com/j_nGr15TooFsRPylodJCLwP3_gtpofUHfpDwqS4nQUw/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvZ2FtaW5nLWJh/Y2tncm91bmQtazA4/aW5jeTNzemlmdzQy/ZS5qcGc",
+  },
+  {
+    productName: "Gaming Monitor",
+    productImage:
+      "https://imgs.search.brave.com/yk2lYjhLmMvgHMn7QglHekURFTh7P2OL-Csg5KCJh3Y/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by8z/ZC13b3Jrc3RhdGlv/bi13aXRoLWNvbXB1/dGVyLXBlcmlwaGVy/YWwtZGV2aWNlc18y/My0yMTUwNzE0MjAx/LmpwZz9zaXplPTYy/NiZleHQ9anBn",
+  },
+  {
+    productName: "Gaming Controller",
+    productImage:
+      "https://imgs.search.brave.com/j_nGr15TooFsRPylodJCLwP3_gtpofUHfpDwqS4nQUw/rs:fit:500:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvZ2FtaW5nLWJh/Y2tncm91bmQtazA4/aW5jeTNzemlmdzQy/ZS5qcGc",
+  },
+  {
+    productName: "VR Headset",
+    productImage:
+      "https://i.pcmag.com/imagery/reviews/04dRlD6i7f8OrAtbWbNfZoB-3.fit_scale.size_1028x578.v1569482971.jpg",
+  },
+  {
+    productName: "Gaming Capture Card",
+    productImage:
+      "https://imgs.search.brave.com/yk2lYjhLmMvgHMn7QglHekURFTh7P2OL-Csg5KCJh3Y/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by8z/ZC13b3Jrc3RhdGlv/bi13aXRoLWNvbXB1/dGVyLXBlcmlwaGVy/YWwtZGV2aWNlc18y/My0yMTUwNzE0MjAx/LmpwZz9zaXplPTYy/NiZleHQ9anBn",
+  },
+];
+
 export {
   meta,
   dataabout,
@@ -200,4 +253,5 @@ export {
   logotext,
   donationPageData,
   BASE_URL,
+  productList,
 };
diff --git a/client/src/hooks/useDonation.js b/client/src/hooks/useDonation.js
@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
-import client from "../utils/api";
+import { useState } from "react";
 import { useDispatch } from "react-redux";
+
+import client from "../utils/api";
 import { updateModalState } from "../features/appSlice";
 
 const useDonation = () => {
@@ -13,6 +14,9 @@ const useDonation = () => {
     loadingDonation: false,
     loadingProgressBar: true,
   });
+  // const isFundCollected = useSelector((state) => state.appSlice.fundingModal);
+
+  const [device, setDevice] = useState(null);
 
   const dispatch = useDispatch();
 
@@ -31,8 +35,9 @@ const useDonation = () => {
     try {
       if (!donationAmt) return;
       setFetchingStatus((pre) => ({ ...pre, loadingDonation: true }));
-      const res = await client.post("paynow", {
+      const res = await client.post("pay-now", {
         amt: donationAmt,
+        ...device,
       });
       window.open(res.data.data, "_self");
       setFetchingStatus((pre) => ({ ...pre, loadingDonation: false }));
@@ -48,39 +53,51 @@ const useDonation = () => {
     }
   };
 
-  useEffect(() => {
-    const getFundDetails = async () => {
-      try {
-        setFetchingStatus((pre) => ({ ...pre, loadingProgressBar: true }));
-        const res = await client.get("get-fund");
-        const totalAmt = Number(res?.data?.totalAmt);
+  const handleCloseModal = () => {
+    setIsFundCollected(false);
+  };
 
-        if (!isNaN(totalAmt) && totalAmt) {
-          setProgressBarStats((totalAmt * 100) / 10000);
-          setDonatedYet(totalAmt);
-          if (totalAmt >= 10000) {
-            setIsFundCollected(true);
-            dispatch(updateModalState(true));
-          }
-        } else {
-          setDonatedYet(0);
-          setProgressBarStats(0);
-        }
-        if (res?.data?.documents?.length) setFundDetails(res?.data?.documents);
-        else setFundDetails([]);
-        setFetchingStatus((pre) => ({ ...pre, loadingProgressBar: false }));
-      } catch (error) {
-        console.log("error", error?.message);
-        window.alert("Unable to fetch fund progress details," + error?.message);
+  const handleSelectDevice = async (productInfo) => {
+    setDevice(productInfo);
+    await handleFetchDeviceData(productInfo?.productName);
+  };
+  const handleFetchDeviceData = async (device) => {
+    try {
+      setFetchingStatus((pre) => ({ ...pre, loadingProgressBar: true }));
+      const res = await client.get(`get-fund?device=${device}`);
+
+      const userList = res?.data?.result?.donarList;
+      if (!userList?.length) {
         setFetchingStatus(0);
         setFundDetails([]);
+        setDonatedYet(0);
+        setProgressBarStats(0);
+        return;
+      }
+      setFundDetails(userList);
+      let totalAmt = 0;
+      for (let i = 0; i < userList.length; i++) {
+        totalAmt = totalAmt + Number(userList[i].amt);
       }
-    };
-    getFundDetails();
-  }, [dispatch]);
 
-  const handleCloseModal = () => {
-    dispatch(updateModalState(false));
+      if (totalAmt) {
+        setProgressBarStats((totalAmt * 100) / 10000);
+        setDonatedYet(totalAmt);
+        if (totalAmt >= 10000) {
+          setIsFundCollected(true);
+          dispatch(updateModalState(true));
+        }
+      } else {
+        setDonatedYet(0);
+        setProgressBarStats(0);
+      }
+      setFetchingStatus((pre) => ({ ...pre, loadingProgressBar: false }));
+    } catch (error) {
+      console.log("error", error?.message);
+      window.alert("Unable to fetch fund progress details," + error?.message);
+      setFetchingStatus(0);
+      setFundDetails([]);
+    }
   };
 
   return {
@@ -94,6 +111,8 @@ const useDonation = () => {
     fundDetails,
     fetchingStatus,
     isFundCollected,
+    device,
+    handleSelectDevice,
   };
 };
 

diff --git a/client/src/pages/crowdfunding/components/AlertModal.js b/client/src/pages/crowdfunding/components/AlertModal.js
@@ -3,23 +3,21 @@ import s60 from "../../../assets/images/s60.jpeg";
 
 import "../style.css";
 import { FaPlus } from "react-icons/fa";
-import { useDispatch } from "react-redux";
-import { updateModalState } from "../../../features/appSlice";
 
-const AlertModal = () => {
-  const dispatch = useDispatch();
-  const handleCloseModal = () => {
-    dispatch(updateModalState(false));
-  };
+const AlertModal = ({ handleCloseModal, device }) => {
   return (
     <div onClick={handleCloseModal} className="alert-modal flex-utility">
       <div className="flex-utility data-container">
         <FaPlus onClick={handleCloseModal} className="close-btn" />
         <div className="modal-data">
           <div>🌟 Goal Achieved! Funding Closed! 🌟</div>
-          <img src={s60} alt="s60" className="d-block mx-auto w-50" />
+          <img
+            src={device?.productImage || s60}
+            alt="s60"
+            className="d-block mx-auto w-50"
+          />
           <div className="fs-6 fw-light fst-italic text-center">
-            Fund for Device Elegato HD60 S
+            {device?.productName || "Fund for Device Elegato HD60 S"}
           </div>
           <div> Dear Visitor,</div>
           <div>