From b0dae469d5644ad19d5420e0a518e9a1cb6be4b6 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Wed, 10 May 2023 16:33:10 +0100
Subject: [PATCH] Implemented zero state to all listings

---
 .env                                          |   3 +
 src/components/ActiveBids/AllBidsSection.jsx  |   2 +-
 .../AuthPages/AuthProfile/CollectionTab.jsx   |   2 +-
 .../AuthPages/AuthProfile/OnSaleTab.jsx       |   2 +-
 .../AuthPages/AuthProfile/OwnTab.jsx          |   2 +-
 .../AuthPages/UserProfile/CollectionTab.jsx   |   2 +-
 .../AuthPages/UserProfile/OnSaleTab.jsx       |   2 +-
 .../AuthPages/UserProfile/OwnTab.jsx          |   2 +-
 src/components/Cards/AvailableJobsCard.jsx    | 223 +++++++++---------
 src/components/FamilyAcc/FamilyTable.jsx      |   2 +-
 src/components/MarketPlace/MainSection.jsx    |   2 +-
 .../CollectionItem/MainSection.jsx            |   2 +-
 src/components/MyCollection/MainSection.jsx   |   2 +-
 src/components/Resources/CollectionTab.jsx    |   2 +-
 src/components/Resources/OnSaleTab.jsx        |   2 +-
 src/components/Resources/OwnTab.jsx           |   2 +-
 src/components/Saved/MainSection.jsx          |   2 +-
 17 files changed, 125 insertions(+), 131 deletions(-)

diff --git a/.env b/.env
index 3efdd7a..0b4c923 100644
--- a/.env
+++ b/.env
@@ -31,5 +31,8 @@ REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 #NUMBER OF ITEMS PER PAGE
 REACT_APP_ITEM_PER_PAGE=5
 
+# Empty Listings
+REACT_APP_ZERO_STATE=0
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
diff --git a/src/components/ActiveBids/AllBidsSection.jsx b/src/components/ActiveBids/AllBidsSection.jsx
index b8a7e2e..8750b89 100644
--- a/src/components/ActiveBids/AllBidsSection.jsx
+++ b/src/components/ActiveBids/AllBidsSection.jsx
@@ -12,7 +12,7 @@ export default function AllBidsSection({ className, allBids = [] }) {
         </div>
         <div className="w-full">
           <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
-            <DataIteration datas={allBids} startLength={0} endLength={8}>
+            <DataIteration datas={allBids} startLength={process.env.REACT_APP_ZERO_STATE} endLength={8}>
               {({ datas }) => (
                 <div key={datas.id} className="item">
                   <ProductCardStyleOne datas={datas} />
diff --git a/src/components/AuthPages/AuthProfile/CollectionTab.jsx b/src/components/AuthPages/AuthProfile/CollectionTab.jsx
index b1804bc..679f5e3 100644
--- a/src/components/AuthPages/AuthProfile/CollectionTab.jsx
+++ b/src/components/AuthPages/AuthProfile/CollectionTab.jsx
@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/AuthPages/AuthProfile/OnSaleTab.jsx b/src/components/AuthPages/AuthProfile/OnSaleTab.jsx
index 77ab34e..c4c510b 100644
--- a/src/components/AuthPages/AuthProfile/OnSaleTab.jsx
+++ b/src/components/AuthPages/AuthProfile/OnSaleTab.jsx
@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/AuthPages/AuthProfile/OwnTab.jsx b/src/components/AuthPages/AuthProfile/OwnTab.jsx
index 7a216f6..da7d29d 100644
--- a/src/components/AuthPages/AuthProfile/OwnTab.jsx
+++ b/src/components/AuthPages/AuthProfile/OwnTab.jsx
@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/AuthPages/UserProfile/CollectionTab.jsx b/src/components/AuthPages/UserProfile/CollectionTab.jsx
index b1804bc..679f5e3 100644
--- a/src/components/AuthPages/UserProfile/CollectionTab.jsx
+++ b/src/components/AuthPages/UserProfile/CollectionTab.jsx
@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/AuthPages/UserProfile/OnSaleTab.jsx b/src/components/AuthPages/UserProfile/OnSaleTab.jsx
index 77ab34e..c4c510b 100644
--- a/src/components/AuthPages/UserProfile/OnSaleTab.jsx
+++ b/src/components/AuthPages/UserProfile/OnSaleTab.jsx
@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/AuthPages/UserProfile/OwnTab.jsx b/src/components/AuthPages/UserProfile/OwnTab.jsx
index 7a216f6..da7d29d 100644
--- a/src/components/AuthPages/UserProfile/OwnTab.jsx
+++ b/src/components/AuthPages/UserProfile/OwnTab.jsx
@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx
index 0eb70d9..9ae4bc4 100644
--- a/src/components/Cards/AvailableJobsCard.jsx
+++ b/src/components/Cards/AvailableJobsCard.jsx
@@ -5,123 +5,114 @@ import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";
 
 export default function AvailableJobsCard({
-                                           className,
-                                           datas,
-                                           hidden = false,
-                                       }) {
-    //debugger;
-    const [addFavorite, setValue] = useState(datas.whishlisted);
-    const [options, setOption] = useState(false);
-    const favoriteHandler = () => {
-        if (!addFavorite) {
-            setValue(true);
-            toast.success("Added to Favorite List");
-        } else {
-            setValue(false);
-            toast.warn("Remove to Favorite List");
-        }
-    };
-    return (
-        <div
-            className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-                className || ""
-            }`}
-        >
-            <div className="flex flex-col justify-between w-full h-full">
-                <Link to="/shop-details" className="mb-2.5">
-                    <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                        {datas.title}
-                    </h1>
-                </Link>
+  className,
+  datas,
+  hidden = false,
+}) {
+  //debugger;
+  const [addFavorite, setValue] = useState(datas.whishlisted);
+  const [options, setOption] = useState(false);
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+      toast.success("Added to Favorite List");
+    } else {
+      setValue(false);
+      toast.warn("Remove to Favorite List");
+    }
+  };
+  return (
+    <div
+      className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col justify-between w-full h-full">
+        <Link to="/shop-details" className="mb-2.5">
+          <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+            {datas.title}
+          </h1>
+        </Link>
 
-                <div className="card-two-info flex justify-between items-center">
-                    <div className="owned-by flex space-x-2 items-center">
-                        <div>
-                            <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                            <p className="text-base   text-dark-gray dark:text-white">
-                                {datas.offer_added}
-                            </p>
-                        </div>
-                    </div>
-                    <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-                    <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                        <div>
-                            <p className="text-thin-light-gray text-sm leading-3 text-right">
-                                Expires
-                            </p>
-                            <p className="text-base text-dark-gray dark:text-white text-right">
-                                {datas.expire}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div className="thumbnail-area w-full">
-                    <div
-                        className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
-                        style={{
-                            background: `url(${localImgLoad(
-                                `images/${datas.thumbnil}`
-                            )}) 0% 0% / cover no-repeat`,
-                        }}
-                    >
-                        <div className="flex justify-center">
-                            {datas.description}
-                        </div>
-
-
-
-
-
-                    </div>
-
-                </div>
-                <div className="details-area">
-                    <div className="product-two-options flex justify-between mb-5 relative">
-
-                        {/*      <div className="status">*/}
-                        {/*          {datas.isActive && (*/}
-                        {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-                        {/*  Active*/}
-                        {/*</span>*/}
-                        {/*          )}*/}
-                        {/*      </div>*/}
-
-
-                        {/*<div className=" review flex space-x-2">*/}
-                        {/*    <button*/}
-                        {/*        onClick={favoriteHandler}*/}
-                        {/*        type="button"*/}
-                        {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-                        {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-                        {/*        }`}*/}
-                        {/*    >*/}
-                        {/*        <Icons name="star" />*/}
-                        {/*    </button>*/}
-                        {/*</div>*/}
-                    </div>
-
-                    <div className="flex justify-between">
-                        <div className="flex items-center space-x-2">
-                            <div>
-                                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                                    {datas.price*0.01}{datas.currency} | {datas.timeline_days} day(s)
-                                </p>
-                                <p className="text-sm text-lighter-gray">
-                                    ( {datas.offer_code})
-                                </p>
-                            </div>
-                        </div>
-                        <div>
-                            <button
-                                type="button"
-                                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                            >
-                                View
-                            </button>
-                        </div>
-                    </div>
-                </div>
+        <div className="card-two-info flex justify-between items-center">
+          <div className="owned-by flex space-x-2 items-center">
+            <div>
+              <p className="text-thin-light-gray text-sm leading-3">Added</p>
+              <p className="text-base   text-dark-gray dark:text-white">
+                {datas.offer_added}
+              </p>
             </div>
+          </div>
+          <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+          <div className="created-by flex space-x-2 items-center flex-row-reverse">
+            <div>
+              <p className="text-thin-light-gray text-sm leading-3 text-right">
+                Expires
+              </p>
+              <p className="text-base text-dark-gray dark:text-white text-right">
+                {datas.expire}
+              </p>
+            </div>
+          </div>
         </div>
-    );
+        <div className="thumbnail-area w-full">
+          <div
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            style={{
+              background: `url(${localImgLoad(
+                `images/${datas.thumbnil}`
+              )}) 0% 0% / cover no-repeat`,
+            }}
+          >
+            <div className="flex justify-center">{datas.description}</div>
+          </div>
+        </div>
+        <div className="details-area">
+          <div className="product-two-options flex justify-between mb-5 relative">
+            {/*      <div className="status">*/}
+            {/*          {datas.isActive && (*/}
+            {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+            {/*  Active*/}
+            {/*</span>*/}
+            {/*          )}*/}
+            {/*      </div>*/}
+
+            {/*<div className=" review flex space-x-2">*/}
+            {/*    <button*/}
+            {/*        onClick={favoriteHandler}*/}
+            {/*        type="button"*/}
+            {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+            {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+            {/*        }`}*/}
+            {/*    >*/}
+            {/*        <Icons name="star" />*/}
+            {/*    </button>*/}
+            {/*</div>*/}
+          </div>
+
+          <div className="flex justify-between">
+            <div className="flex items-center space-x-2">
+              <div>
+                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                  {datas.price * 0.01}
+                  {datas.currency} | {datas.timeline_days} day(s)
+                </p>
+                <p className="text-sm text-lighter-gray">
+                  ( {datas.offer_code})
+                </p>
+              </div>
+            </div>
+            <div>
+              <button
+                type="button"
+                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              >
+                View
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index 0626588..943e665 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -20,7 +20,7 @@ export default function FamilyTable({ className, familyList }) {
               <td className="py-4 text-center">No of Tasks</td>
               <td className="py-4 text-right"></td>
             </tr>
-            {familyList?.length > 0 &&
+            {familyList?.length > process.env.REACT_APP_ZERO_STATE &&
               familyList?.map(({firstname, lastname, age,added}, idx) => (
                 <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50" key={idx}>
                   <td className=" py-4">
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index fec95a8..566b7fb 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -95,7 +95,7 @@ export default function MainSection({ className, marketPlaceProduct }) {
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">
             <DataIteration
               datas={products}
-              startLength="0"
+              startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
               {({ datas }) => (
diff --git a/src/components/MyCollection/CollectionItem/MainSection.jsx b/src/components/MyCollection/CollectionItem/MainSection.jsx
index e4f5aed..a32918d 100644
--- a/src/components/MyCollection/CollectionItem/MainSection.jsx
+++ b/src/components/MyCollection/CollectionItem/MainSection.jsx
@@ -9,7 +9,7 @@ export default function MainSection({ collectionData, className }) {
         <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
           <DataIteration
             datas={collectionData}
-            startLength={0}
+            startLength={process.env.REACT_APP_ZERO_STATE}
             endLength={collectionData.length}
           >
             {({ datas }) => (
diff --git a/src/components/MyCollection/MainSection.jsx b/src/components/MyCollection/MainSection.jsx
index f5b94df..5eefb91 100644
--- a/src/components/MyCollection/MainSection.jsx
+++ b/src/components/MyCollection/MainSection.jsx
@@ -8,7 +8,7 @@ function MainSection({ collectionData, className }) {
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
         <DataIteration
           datas={collectionData}
-          startLength={0}
+          startLength={process.env.REACT_APP_ZERO_STATE}
           endLength={collectionData.length}
         >
           {({ datas }) => (
diff --git a/src/components/Resources/CollectionTab.jsx b/src/components/Resources/CollectionTab.jsx
index ac684e9..e55d087 100644
--- a/src/components/Resources/CollectionTab.jsx
+++ b/src/components/Resources/CollectionTab.jsx
@@ -42,7 +42,7 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/Resources/OnSaleTab.jsx b/src/components/Resources/OnSaleTab.jsx
index cbe8665..7685cae 100644
--- a/src/components/Resources/OnSaleTab.jsx
+++ b/src/components/Resources/OnSaleTab.jsx
@@ -42,7 +42,7 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/Resources/OwnTab.jsx b/src/components/Resources/OwnTab.jsx
index 5831b9d..36b0155 100644
--- a/src/components/Resources/OwnTab.jsx
+++ b/src/components/Resources/OwnTab.jsx
@@ -42,7 +42,7 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
+                startLength={process.env.REACT_APP_ZERO_STATE}
                 endLength={products.length}
               >
                 {({ datas }) => (
diff --git a/src/components/Saved/MainSection.jsx b/src/components/Saved/MainSection.jsx
index cd7b8f0..fe73254 100644
--- a/src/components/Saved/MainSection.jsx
+++ b/src/components/Saved/MainSection.jsx
@@ -7,7 +7,7 @@ export default function MainSection({ products }) {
     <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-6">
       <DataIteration
         datas={products}
-        startLength={0}
+        startLength={process.env.REACT_APP_ZERO_STATE}
         endLength={products.length}
       >
         {({ datas }) => (