MermsPanelReactJS/src/component/product/ProductFactory.jsx

import { useQuery } from '@tanstack/react-query'
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
// import getImage from "../../utils/getImage";
import ProductStart from "./ProductStart";
import { useLocation, useNavigate } from 'react-router-dom';
import {MyProductData} from "../../services/services";
import ProductActive from "./ProductActive";
import ProductProvision from "./ProductProvision";
import {productConst} from "../../constants/products";
import queryKeys from "../../services/queryKeys";
import siteLinks from '../../links/siteLinks';

export default function ProductFactory(){
    const navigate = useNavigate()
    const location = useLocation();
    const pathname = location.pathname;

    // Split the pathname by '/' and get the last element
    const productID = pathname.split('/').pop();

    let reqData = {
        product_id : productID,
        token: localStorage.getItem('token'), // USER TOKEN
        uid: localStorage.getItem('uid') // USER UID
    }
    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.product_page,
        queryFn: () => MyProductData(reqData),
        staleTime: 0
    })

    const myproduct_data = data?.data?.myproduct?.myproudct // PRODUCT DETAILS
    const product_name =  myproduct_data?.product_name;
    const product_status  = myproduct_data?.status;

    return(
        <>
            <BreadcrumbComBS title={product_name} paths={['Dashboard', 'Product']} />
            <div className="row">
                {isFetching ?
                    <>
                        <div className="row">
                            <div className="col-12">
                                <p className='text-mute'>Loading...</p>
                            </div>
                        </div>
                    </>
                    : isError ?
                        <div className="row">
                            <div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
                                <p className='text-danger'>{error?.message}</p>
                                <button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
                            </div>
                        </div>
                    :
                    <div>
                        {(product_status <= productConst.PRODUCT_AVAILABLE)?
                            <ProductStart productData={myproduct_data} />
                            :<></> }

                        {(product_status === productConst.PRODUCT_PROVISIONING)?
                            <ProductProvision productData={myproduct_data} />
                            :<></> }

                        {(product_status === productConst.PRODUCT_ACTIVE)?
                            <ProductActive productData={myproduct_data} />
                            :<></> }
                    </div>
               }
            </div>
        </>
    )
}