product provision list fixed

src/component/product/ProductFactory.jsx

@@ -20,7 +20,7 @@ export default function ProductFactory(){
 
     // Split the pathname by '/' and get the last element
     const lastPart = pathname.split('/').pop();
-    console.log(lastPart)
+    // console.log(lastPart)
 
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.product,

src/component/product/ProductProvision.jsx

@@ -1,12 +1,18 @@
+import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import queryKeys from "../../services/queryKeys";
 import { productProvision } from "../../services/services";
 import getImage from "../../utils/getImage";
+import { SocketContextValues } from "../context/SocketIOContext";
+
 
 export default function ProductProvision(props){
-    const productTitle  = props.productData?.title;
-    const productDescription  = props.productData?.description;
+    const {joinRoom} = SocketContextValues() // Destructures values from socket context
+
+    const productTitle  = props?.productData?.title;
+    const productDescription  = props?.productData?.description;
     const productID = props?.productData?.product_id
+    const productSubUID = props?.productData?.product_subscription_uid
 
     const {data:provision, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.myproduct_provision,
@@ -15,6 +21,10 @@ export default function ProductProvision(props){
 
     const provisionData = provision?.data?.provision
 
+    // useEffect(()=>{
+    //     joinRoom(productSubUID); // provision subscription room
+    // },[])
+
     return (
         <>
             {isFetching ? 
@@ -76,7 +86,7 @@ export default function ProductProvision(props){
                                             </tr>
                                             </thead>
                                             <tbody>
-                                                {provisionData?.url?.map(item => (
+                                                {provisionData?.activities?.map(item => (
                                                 <tr key={item.id}>
                                                     <th scope="row">{item.id}</th>
                                                     <td>{item.action}</td>