Others interested offer table modified to show only list of persons interest in an offer

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -75,7 +75,7 @@ export default function ManageInterestOffer(props) {
                                     type="button"
                                     className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
                                     onClick={() =>
-                                        navigate(props.offerDetails.pathname, { replace: true })
+                                        navigate('/offer-interest', { replace: true })
                                     }
                                     >
                                     <svg
@@ -161,7 +161,7 @@ export default function ManageInterestOffer(props) {
                                 </div>
                                 {/* message list */}
                                 {currentMessageList.map((item, index)=>(
-                                    <div className="my-3 w-full">
+                                    <div key={index} className="my-3 w-full">
                                         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">2023-04-06-from { }<span className="font-normal">Dummy name</span></p>
                                         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">I am testing message</p>
                                     </div>

src/components/OffersInterest/OffersInterestTable.jsx

@@ -52,9 +52,9 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOfferInterestList?.map((item, idx) => {
+                            {currentOfferInterestList?.map((item, index) => {
                                 return (
-                                <tr key={item?.offer_uid} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
                                             <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">

src/components/OffersInterest/OthersInterestedTable.jsx

@@ -4,6 +4,8 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
+import { useDispatch } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
 
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
@@ -11,6 +13,7 @@ import familyImage from '../../assets/images/no-family-side.png'
 
 export default function OthersInterestTable({othersInterestedList, className}) {
 
+    const dispatch = useDispatch()
     const navigate = useNavigate();
     let { pathname } = useLocation();
     
@@ -52,9 +55,9 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                             </tr> */}
                             </thead>
                             <tbody className="h-full">
-                            {currentOthersInterestedList?.map((item, idx) => {
+                            {currentOthersInterestedList?.map((item, index) => {
                                 return (
-                                <tr key={item?.offer_uid} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
                                             <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
@@ -87,6 +90,7 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                     <td className="text-right py-4">
                                         <button
                                             onClick={() => {
+                                                dispatch(tableReload({type:'OTHERSINTERESTEDTABLE'}))
                                                 navigate("/manage-offer", {
                                                     state: { ...item, pathname },
                                                 });

src/store/TableReloads.js

@@ -3,7 +3,8 @@ import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   jobListTable: false,
   pendingListTable: false,
-  myTaskTable: false
+  myTaskTable: false,
+  othersInterestedTable: false
 };
 
 export const tableReloadSlice = createSlice({
@@ -21,6 +22,9 @@ export const tableReloadSlice = createSlice({
         case 'MYTASKTABLE' :
           state.myTaskTable = !state.myTaskTable;
           return
+        case 'OTHERSINTERESTEDTABLE' :
+          state.othersInterestedTable = !state.othersInterestedTable;
+          return
         default:
           return state
       }

src/views/ManageInterestOfferPage.jsx

@@ -9,6 +9,7 @@ export default function MyReviewDueJobsPage() {
     let navigate = useNavigate()
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+    let { othersInterestedTable } = useSelector((state) => state.tableReload);
 
     const apiCall = new usersService();
     const [othersInterestedList, setOthersInterestedList] = useState({loading: true, data: []})
@@ -19,12 +20,18 @@ export default function MyReviewDueJobsPage() {
             return
         }
         apiCall.offersInterestList().then(res => {
-            setOthersInterestedList({loading: false, data: res.data.result_list})
+            let newData
+            if(res.data.result_list.length){
+                newData = res.data.result_list.filter(item => item.offer_code == state.offer_code && item.client_uid != state.client_uid)
+            }else{
+                newData = []
+            }
+            setOthersInterestedList({loading: false, data: newData})
         }).catch(err => {
             setOthersInterestedList({loading: false, data: []})
             console.log('Error: ', err)
         })
-    }, []);
+    }, [othersInterestedTable]);
 
     // debugger;
     return (