From 110dca142fafad7cb57f3faaca468ff24bf6391d Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 21 Dec 2024 09:03:55 +0100
Subject: [PATCH] modal added

---
 src/component/calendar/EventCalendar.jsx |  3 +-
 src/component/home/Products.jsx          |  5 ++-
 src/component/product/ProductStart.jsx   | 48 +++++++++++++++++++++++-
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/component/calendar/EventCalendar.jsx b/src/component/calendar/EventCalendar.jsx
index 16234ed..5d03708 100644
--- a/src/component/calendar/EventCalendar.jsx
+++ b/src/component/calendar/EventCalendar.jsx
@@ -27,8 +27,7 @@ export default function EventCalendar({draggedEvent, setDraggedEvent}) {
         setMyEvents((prev) => {
           const existing = prev.find((ev) => ev.id === event.id) ?? {}
           const filtered = prev.filter((ev) => ev.id !== event.id)
-          // return [...filtered, { ...existing, start, end, allDay: event.allDay }]
-          return [...prev]
+          return [...filtered, { ...existing, start, end, allDay: event.allDay }]
         })
       },
       [setMyEvents]
diff --git a/src/component/home/Products.jsx b/src/component/home/Products.jsx
index 2badff6..67d3893 100644
--- a/src/component/home/Products.jsx
+++ b/src/component/home/Products.jsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { productData } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
 import productPath from "../../utils/productpath";
+import { Link } from 'react-router-dom';
 export default function Products() {
 
     const {data, isFetching, isError, error} = useQuery({
@@ -37,7 +38,7 @@ export default function Products() {
                 <div className="row m-b-20">
                     {products && products.map((product, index) => (
                         <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
-                            <a href={productPath(product?.uid)}  >
+                            <Link to={productPath(product?.uid)}  >
                                 <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>
@@ -47,7 +48,7 @@ export default function Products() {
                                         <h4>{product?.description}</h4>
                                     </div>
                                 </div>
-                            </a>
+                            </Link>
 
                         </div>
                     ))}
diff --git a/src/component/product/ProductStart.jsx b/src/component/product/ProductStart.jsx
index c41a02f..256ebc9 100644
--- a/src/component/product/ProductStart.jsx
+++ b/src/component/product/ProductStart.jsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useRef } from "react";
 import getImage from "../../utils/getImage";
+import { Modal } from "bootstrap";
 export default function ProductStart(props){
 
     console.log(props)
@@ -8,6 +9,16 @@ export default function ProductStart(props){
     const productDescription  = props.productData.description;
     const promotion_text  = props.productData.promotion_text;
 
+    const modalRef = useRef()
+
+    const hideModal = () => {
+        // modalRef.current.hide()
+
+        // document.body.classList.remove('modal-open')
+        // const modal = new Modal(document.querySelector('.modal'))
+        // modal.hide()
+    }
+
     return (
         <>
             <div className="row">
@@ -37,11 +48,44 @@ export default function ProductStart(props){
                         {/*    <a href="javascript:void(0)" className="card-link">Another link</a>*/}
                         {/*</div>*/}
                         <div  className="subscribe-box">
-                            <a href="javascript:void(0)" className="btn btn-primary mt-2">Start Product</a>
+                            <button className="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#verticalCenter">Start Product</button>
                         </div>
                     </div>
                 </div>
             </div>
+
+            {/* Vertical Center Modal */}
+            <div ref={modalRef} className="modal fade" id="verticalCenter" tabIndex="-1" role="dialog" aria-hidden="true">
+                <div className="modal-dialog modal-dialog-centered" role="document">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h5 className="modal-title" id="verticalCenterTitle">Modal title</h5>
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div className="modal-body">
+                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+                                in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
+                                eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
+                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
+                                bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque
+                                nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
+                                fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+                                dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
+                                ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
+                                et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean
+                                lacinia bibendum nulla sed consectetur.
+                            </p>
+                        </div>
+                        <div className="modal-footer">
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-success" onClick={hideModal}>Save changes</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* END of Vertical Center Modal */}
         </>
     )
 }
\ No newline at end of file