From fe114433ffcf644257919ac6c1297de5dfb8b730 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sun, 15 Dec 2024 07:34:38 +0100
Subject: [PATCH] product url added

---
 src/component/home/HomeSections.jsx | 118 +---------------------------
 src/component/home/ProductsURL.jsx  |  86 ++++++++++++++++++++
 src/services/queryKeys.js           |   3 +-
 src/services/services.js            |   5 ++
 4 files changed, 95 insertions(+), 117 deletions(-)
 create mode 100644 src/component/home/ProductsURL.jsx

diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index 67f7f34..411288b 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -3,42 +3,10 @@ import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import RecentActions from "./RecentActions";
 import Products from "./Products";
 import TopBar from "./TopBar";
-// import { useQuery } from "@tanstack/react-query";
-// import { accountDashboard } from "../../services/services";
-// import queryKeys from "../../services/queryKeys";
-// import MainLoaderBS from "../loaders/MainLoaderBS";
-
+import ProductsURL from "./ProductsURL";
 
 export default function HomeSections(){
 
-    // const {data:dashData, isFetching, isError} = useQuery({
-    //     queryKey: queryKeys.dashboard,
-    //     queryFn: async () => await accountDashboard()
-    // })
-
-    // if(isFetching){
-    //     return(
-    //         <>
-    //             {/* <MainLoaderBS /> */}
-    //             <div className="row">
-    //                 <div className="col-12">
-    //                     <p className='text-success'>Loading...</p>
-    //                 </div>
-    //             </div>
-    //         </>
-    //     )
-    // }
-
-    // if(isError){
-    //     return (
-    //         <div className="row">
-    //             <div className="col-12">
-    //                 <p className='text-danger'>Error occured! Please refresh to continue</p>
-    //             </div>
-    //         </div>
-    //     )
-    // }
-
     return <>
         {/* <div className="row">
             <div className="col-md-12 m-b-30">
@@ -75,90 +43,8 @@ export default function HomeSections(){
             </div>
         </div>
         <div className="row">
-            <div className="col-xxl-8 m-b-30">
-                <div className="card card-statistics h-100 mb-0">
-                    <div className="card-header d-flex align-items-center justify-content-between">
-                        <div className="card-heading">
-                            <h4 className="card-title">My Product URLs</h4>
-                        </div>
-                        <div className="dropdown">
-                            {/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
-                        </div>
-                    </div>
-                    <div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
-                        <div className="datatable-wrapper table-responsive">
-                            <table id="datatable" className="table table-borderless table-striped">
-                                <thead>
-                                <tr>
-                                    <th style={{width: '30px'}}>#</th>
-                                    <th>Description</th>
+            <ProductsURL />
 
-                                    <th  style={{width: '100px'}}>Status</th>
-                                    <th  style={{width: '40px'}}>Action</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>1</td>
-                                    <td>Description - URL(Clickable) </td>
-
-                                    <td><span className="badge badge-success-inverse">Active</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-                                <tr>
-                                    <td>2</td>
-                                    <td>Main Website - https://starterweb.0ach30996.mermsemr.com </td>
-
-                                    <td><span className="badge badge-success-inverse">Updating</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-                                <tr>
-                                    <td>3</td>
-                                    <td>Blog Site - https://starterblog.0ach30996.mermsemr.com </td>
-
-                                    <td><span className="badge badge-danger-inverse">Refreshing</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-                                <tr>
-                                    <td>4</td>
-                                    <td>Long Sleeve Bow Top</td>
-
-                                    <td><span className="badge badge-success-inverse">Active</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-                                <tr>
-                                    <td>5</td>
-                                    <td>Shine Stripe Long Sleeve Ruffle</td>
-
-                                    <td><span className="badge badge-success-inverse">Active</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-                                <tr>
-                                    <td>6</td>
-                                    <td>Long Sleeve Micro Thermal Shirt</td>
-
-                                    <td><span className="badge badge-info-inverse">info</span></td>
-                                    <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
-                                </tr>
-
-
-
-                                </tbody>
-                                <tfoot>
-                                <tr>
-                                    <th>#</th>
-                                    <th>Name</th>
-                                    <th>Price</th>
-                                    <th>In stock</th>
-                                    <th>Status</th>
-                                    <th>Action</th>
-                                </tr>
-                                </tfoot>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
             <div className="col-xxl-4 m-b-30">
                 <div className="card card-statistics h-100 mb-0 panel_round_c3">
                     <div className="card-header d-flex justify-content-between">
diff --git a/src/component/home/ProductsURL.jsx b/src/component/home/ProductsURL.jsx
new file mode 100644
index 0000000..baafc4e
--- /dev/null
+++ b/src/component/home/ProductsURL.jsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import { productsURL } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+export default function ProductsURL() {
+
+    const {data:data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product_url,
+        queryFn: () => productsURL()
+    })
+
+    const urlData = data?.data?.url_data?.url
+
+  return (
+    <>
+        <div className="col-xxl-8 m-b-30">
+            <div className="card card-statistics h-100 mb-0">
+                <div className="card-header d-flex align-items-center justify-content-between">
+                    <div className="card-heading">
+                        <h4 className="card-title">My Product URLs</h4>
+                    </div>
+                    <div className="dropdown">
+                        {/*<a className="btn btn-xs" href="#!">Export <i className="zmdi zmdi-download pl-1"></i> </a>*/}
+                    </div>
+                </div>
+                <div className="card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
+                    <div className="datatable-wrapper table-responsive">
+                    {isFetching ? 
+                        <>
+                            <div className="col-12">
+                                <div className="p-4">
+                                    <p className='text-mute'>Loading...</p>
+                                </div>
+                            </div>
+                        </>
+                        : isError ?
+                        <div className="col-12">
+                            <div className="p-4">
+                                <p className='text-danger'>{error.message}</p>
+                            </div>
+                        </div>
+                        :
+                        <table id="datatable" className="table table-borderless table-striped">
+                            <thead>
+                            <tr>
+                                <th style={{width: '30px'}}>#</th>
+                                <th>Description</th>
+
+                                <th  style={{width: '100px'}}>Status</th>
+                                <th  style={{width: '40px'}}>Action</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                {urlData && urlData.map((item, index) => {
+                                    let statusColor = item?.status == 'Active' ? 'badge-success-inverse' : item?.status == 'Updating' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
+                                    return (
+                                        <tr key={index}>
+                                            <td>{Number(item?.no) + Number(index)}</td>
+                                            <td>{item?.description} - <a href={item?.url} target='_blank'>{item?.url}</a></td>
+
+                                            <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
+                                            <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
+                                        </tr>
+                                    )
+                                })}
+                            </tbody>
+                            <tfoot>
+                            <tr>
+                                <th>#</th>
+                                <th>Name</th>
+                                <th>Price</th>
+                                <th>In stock</th>
+                                <th>Status</th>
+                                <th>Action</th>
+                            </tr>
+                            </tfoot>
+                        </table>
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index e184ee4..f263e8a 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -1,7 +1,8 @@
 const queryKeys = {
     dashboard: ['dashboard'],
     recentAction: ['recent-action'],
-    product: ['product-data']
+    product: ['product-data'],
+    product_url: ['product_url']
 }
 
 export default queryKeys
\ No newline at end of file
diff --git a/src/services/services.js b/src/services/services.js
index aa0caea..2566d20 100644
--- a/src/services/services.js
+++ b/src/services/services.js
@@ -66,6 +66,11 @@ export const productData = () => {
     return getAuxEnd(`/panel/account/products`)
 }
 
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const productsURL = () => {
+    return getAuxEnd(`/panel/account/products/url`)
+}
+
 export const MyProductData = () => {
     return getAuxEnd(`/panel/myproduct/dash`)
 }
\ No newline at end of file