fixed some bugs and clean up

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,76 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import InputCom from "../Helpers/Inputs/InputCom";
+import React, { useState } from "react";
 import Layout from "../Partials/Layout";
-import FamilyTable from "./FamilyTable";
-import SiteService from "../../services/SiteService";
-import ModalCom from "../Helpers/ModalCom";
 import FamilyManageTabs from "./FamilyManageTabs";
 import { useLocation } from "react-router-dom";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
-  const [familyList, setFamilyList] = useState([]);
-  const [loader, setLoader] = useState(false);
-  const [popUp, setPopUp] = useState(false);
-  const [listReload, setListReload] = useState(false);
-  const [msgErr, setMsgErr] = useState("");
-  const [formData, setFormData] = useState({
-    first_name: "",
-    last_name: "",
-  });
 
   let location = useLocation();
   let accountDetails = location?.state
-
-  const apiCall = useMemo(() => new SiteService(), []);
-
-  // This is to make sure it's called once and used everywhere
-  let memberId = localStorage.getItem("member_id");
-  let uid = localStorage.getItem("uid");
-  let sessionId = localStorage.getItem("session_token");
-
-  const popUpHandler = () => {
-    setPopUp((prev) => !prev);
-  };
-
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
   };
 
-  // member listing
-  const memberList = useCallback(async () => {
-    setLoader(true);
-    try {
-      let reqData = {
-        member_id: memberId,
-        uid: uid,
-        session_id: sessionId,
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      let res = await apiCall.familyListings(reqData);
-      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status == "OK") {
-        let { result_list } = data;
-        setFamilyList(result_list);
-        setLoader(false);
-      } else return;
-    } catch (error) {
-      setLoader(false);
-      throw new Error(error);
-    }
-  }, [apiCall, memberId, sessionId, uid]);
-
-  useEffect(() => {
-    memberList();
-  }, [listReload, memberList]);
-
-  console.log('Ebueb', familyList)
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -94,7 +36,7 @@ export default function FamilyManage() {
               ></div>
             </div>
           </div>
-          <FamilyManageTabs accountDetails={accountDetails} loader={loader} />
+          <FamilyManageTabs accountDetails={accountDetails} />
         </div>
       </div>
     </Layout>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
@@ -14,6 +13,7 @@ import FamilyTasks from "./FamilyTasks";
 export default function FamilyManageTabs({
   className,
   accountDetails,
+  listReload,
   loader,
 }) {
   const [familyDetails, setFamilyDetails] = useState(null);
@@ -75,9 +75,8 @@ export default function FamilyManageTabs({
 
   useEffect(() => {
     familyManageHandler();
-  }, []);
+  }, [tab]);
 
-  console.log(familyDetails);
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -212,10 +211,6 @@ function ProfileInfo({
   );
 }
 
-function Tasks() {
-  return <>Tasks</>;
-}
-
 function Account({ familyDetails }) {
   return (
     <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">

src/components/FamilyAcc/FamilyTable.jsx

@@ -2,19 +2,32 @@ import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
 export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   const navigate = useNavigate();
   // let location = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
         className || ""
       }`}
     >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
         {loader ? (
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
@@ -30,10 +43,10 @@ export default function FamilyTable({ className, familyList, loader }) {
                   <th className="py-4 text-right"></th>
                 </tr>
               </thead>
-              <tbody className="overflow-y-scroll h-auto">
+              <tbody className="h-full">
                 <>
                   {familyList?.length > 0 ? (
-                    familyList?.map((props, idx) => {
+                    currentFamilyList?.map((props, idx) => {
                       let {
                         firstname,
                         lastname,
@@ -115,6 +128,21 @@ export default function FamilyTable({ className, familyList, loader }) {
           </table>
         )}
       </div>
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          familyList?.length
+            ? true
+            : false
+        }
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
     </div>
   );
 }

src/components/FamilyAcc/index.jsx

@@ -73,6 +73,7 @@ export default function FamilyAcc() {
         if (data?.internal_return > 0 && data?.status == "OK") {
           setLoader(false);
           setListReload((prev) => !prev);
+          popUpHandler()
         } else {
           setLoader(false);
           setMsgErr("Sorry, something went wrong");
@@ -93,6 +94,7 @@ export default function FamilyAcc() {
         first_name: "",
         last_name: "",
       });
+      setSelectedAge("")
     }
   };
 

src/components/Helpers/DataIteration.jsx

@@ -5,9 +5,8 @@ function DataIteration(props) {
   return (
     <>
       {datas &&
-        datas.length >= endLength &&
-        datas
-          .slice(startLength, endLength)
+        datas?.length >= endLength &&
+        datas?.slice(startLength, endLength)
           .map((value) => children({ datas: value }))}
     </>
   );

src/components/MarketPlace/MainSection.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
 import DataIteration from "../Helpers/DataIteration";
-// import SearchCom from "../Helpers/SearchCom";
-// import ActiveJobsCard from "../Cards/ActiveJobsCard";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
 export default function MainSection({ className, marketPlaceProduct }) {
@@ -13,13 +10,13 @@ export default function MainSection({ className, marketPlaceProduct }) {
   };
   useEffect(() => {
     if (tab === "artist") {
-      setProducts(marketPlaceProduct.slice(0, 3));
+      setProducts(marketPlaceProduct?.slice(0, 3));
     } else if (tab === "market") {
-      setProducts(marketPlaceProduct.slice(0, 6));
+      setProducts(marketPlaceProduct?.slice(0, 6));
     } else if (tab === "shop") {
-      setProducts(marketPlaceProduct.slice(6, 9));
+      setProducts(marketPlaceProduct?.slice(6, 9));
     } else if (tab === "assets") {
-      setProducts(marketPlaceProduct.slice(3, 6));
+      setProducts(marketPlaceProduct?.slice(3, 6));
     } else {
       setProducts(marketPlaceProduct);
     }

src/store/UserDetails.js

@@ -8,8 +8,8 @@ export const userSlice = createSlice({
   name: "userDetails",
   initialState,
   reducers: {
-    updateUserDetails: (state,payload) => {
-      state.userDetails = {...payload.payload}
+    updateUserDetails: (state,action) => {
+      state.userDetails = {...action.payload}
     },
   },
 });

src/store/jobLists.js

@@ -8,8 +8,8 @@ export const jobSlice = createSlice({
   name: "jobLists",
   initialState,
   reducers: {
-    updateJobs: (state, payload) => {
-      state.jobLists = { ...payload.payload };
+    updateJobs: (state, action) => {
+      state.jobLists = { ...action.payload };
     },
   },
 });