added uploaded files

src/components/Resources/index.jsx

@@ -1,21 +1,21 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
 // import authProfilePic from "../../assets/images/auth-profile-picture.png";
 // import profileBanner from "../../assets/images/profile-cover.png";
 // import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
 // import marketPlace from "../../data/marketplace_data.json";
+import { useSelector } from "react-redux";
 import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
 import products from "../../data/product_data.json";
+import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import {
-  ActivitiesTab, BlogTab,
-  QuestionsTab,
+  ActivitiesTab,
+  BlogTab,
   CollectionTab,
-  CreatedTab,
   HiddenProductsTab,
   MyUploadedFiles,
-  OnSaleTab,
   OwnTab,
+  QuestionsTab,
 } from "./tabs";
 //import MyUploadedFiles from "./tabs/MyUploadedFiles";
 
@@ -24,14 +24,58 @@ export default function Resources(props) {
   const ownProducts = products.datas;
   // Resource Props
   const __resources = props.MyResourceData;
-//debugger;
+  //debugger;
   // Collection Items
   const CreatedSell = __resources?.marketdata?.data;
   const tab_categories = __resources?.tab_categories?.data;
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
   const CreatedBits = __resources?.productdata?.datas;
-  const blogItems =   __resources?.blogdata?.payload;
+  const blogItems = __resources?.blogdata?.payload;
+
+  // My Items Data
+  const [uploadedFiles, setUploadedFiles] = useState({
+    loading: false,
+    msg: "",
+    data: null,
+  });
+  const { uploadsTable } = useSelector((state) => state.tableReload);
+
+  const apiCall = new usersService();
+
+  const getUploadedFiles = async () => {
+    setUploadedFiles((prev) => ({ ...prev, loading: true }));
+
+    let res;
+
+    try {
+      res = await apiCall.getUploadedList();
+      res = res.data;
+      if (res?.internal_return < 0) {
+        setUploadedFiles((prev) => ({
+          ...prev,
+          loading: false,
+          msg: "something went wrong",
+        }));
+      }
+      setUploadedFiles((prev) => ({
+        ...prev,
+        loading: false,
+        msg: "success",
+        data: res?.result_list,
+      }));
+    } catch (error) {
+      setUploadedFiles((prev) => ({
+        ...prev,
+        loading: false,
+        msg: "An error occurred",
+      }));
+    }
+  };
+
+  useEffect(() => {
+    getUploadedFiles();
+  }, [uploadsTable]);
 
   const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
 
@@ -44,7 +88,7 @@ export default function Resources(props) {
     blog: <BlogTab blogdata={blogItems} />,
     onsale: <QuestionsTab products={onSaleProducts} />,
     owned: <OwnTab products={ownProducts} />,
-    created: <MyUploadedFiles marketProducts={CreatedSell} mainProducts={CreatedBits} />,
+    created: <MyUploadedFiles uploadedFiles={uploadedFiles} />,
     hidden: (
       <HiddenProductsTab
         marketProducts={CreatedSell}
@@ -61,20 +105,21 @@ export default function Resources(props) {
 
   // Tab Item Component
   const TabItem = ({ tabValue, isActive }) => {
-    let countNumber = (name) => { // FUNCTION TO DETERMINE THE COUNT NUMBER
-      if(name == 'blog'){
-        return blogItems?.blogdata?.length
-      }else if(name == 'onsale'){
-        return onSaleProducts?.length
+    let countNumber = (name) => {
+      // FUNCTION TO DETERMINE THE COUNT NUMBER
+      if (name == "blog") {
+        return blogItems?.blogdata?.length;
+      } else if (name == "onsale") {
+        return onSaleProducts?.length;
         // return null
-      }else if(name == 'owned'){
-        return ownProducts?.length
-      }else if(name == 'created'){
-        return CreatedSell?.length + CreatedBits?.length
-      }else{
-        return 0
+      } else if (name == "owned") {
+        return ownProducts?.length;
+      } else if (name == "created") {
+        return uploadedFiles?.data?.length;
+      } else {
+        return 0;
       }
-    }
+    };
     return (
       <li
         className={`relative group inline`}
@@ -89,17 +134,17 @@ export default function Resources(props) {
         >
           {tabValue.content}
         </span>
-        {tabValue.name != 'onsale' &&
-        <span
-          className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
-            isActive
-              ? "text-white bg-pink"
-              : "text-thin-light-gray bg-[#F2B8FD]"
-          }`}
-        >
-          {countNumber(tabValue.name)}
-        </span>
-        }
+        {tabValue.name != "onsale" && (
+          <span
+            className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
+              isActive
+                ? "text-white bg-pink"
+                : "text-thin-light-gray bg-[#F2B8FD]"
+            }`}
+          >
+            {countNumber(tabValue.name)}
+          </span>
+        )}
       </li>
     );
   };
@@ -136,14 +181,6 @@ export default function Resources(props) {
                     <div className="tab-items">
                       <TabList tabCategories={tab_categories} />
                     </div>
-                    {/* <div style={{ transform: "translateY(-22px)" }}>
-                      <Link
-                        to="/my-uploads"
-                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                      >
-                        Add My Item
-                      </Link>
-                    </div> */}
                   </div>
                   <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>