import React, { useState, useEffect, useRef, useCallback } from "react"; import { Link } from "react-router-dom"; import axios from "axios"; import Button from "@material-ui/core/Button"; import { useNavigate } from "react-router-dom"; import { isAutheticated } from "src/auth"; import swal from "sweetalert"; import debounce from "lodash.debounce"; const Products = () => { const token = isAutheticated(); const navigate = useNavigate(); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(true); const [productsData, setProductsData] = useState([]); const [categories, setCategories] = useState([]); const [brands, setBrands] = useState([]); const nameRef = useRef(); const categoryRef = useRef(); const brandRef = useRef(); const [currentPage, setCurrentPage] = useState(1); const [itemPerPage, setItemPerPage] = useState(10); const [totalData, setTotalData] = useState(0); const getProductsData = async () => { setLoading(true); try { const response = await axios.get(`/api/product/getAll/admin/`, { headers: { Authorization: `Bearer ${token}`, }, params: { page: currentPage, show: itemPerPage, name: nameRef.current?.value || "", category: categoryRef.current?.value || "", brand: brandRef.current?.value || "", }, }); setProductsData(response.data?.products || []); setTotalData(response.data?.total_data || 0); } catch (err) { const msg = err?.response?.data?.msg || "Something went wrong!"; swal({ title: "Error", text: msg, icon: "error", button: "Retry", dangerMode: true, }); } finally { setLoading(false); } }; const getCatagories = () => { axios .get(`/api/category/getCategories`, { headers: { "Access-Control-Allow-Origin": "*", Authorization: `Bearer ${token}`, }, }) .then((res) => { // console.log(res?.data?.categories); setCategories(res?.data?.categories); }); }; const getBrands = () => { axios .get(`/api/brand/getBrands`, { headers: { "Access-Control-Allow-Origin": "*", Authorization: `Bearer ${token}`, }, }) .then((res) => { // console.log(res?.data?.brands); setBrands(res?.data?.brands); }); }; const [currencyDetails, setCurrencyDetails] = useState(null); const getCurrency = async () => { try { const response = await axios.get("/api/currency/getall", { // headers: { // Authorization: `Bearer ${token}`, // }, }); if (response.status === 200) { setCurrencyDetails(response?.data?.currency[0]); } } catch (error) { console.log(error); } }; useEffect(() => { getCatagories(); getCurrency(); getBrands(); }, []); useEffect(() => { getProductsData(); }, [success, itemPerPage, currentPage]); const debouncedSearch = useCallback( debounce(() => { setCurrentPage(1); getProductsData(); }, 500), [] ); const handleSearchChange = () => { debouncedSearch(); }; const handleDelete = (id) => { swal({ title: "Are you sure?", icon: "error", buttons: { Yes: { text: "Yes", value: true }, Cancel: { text: "Cancel", value: "cancel" }, }, }).then((value) => { if (value === true) { axios .delete(`/api/product/delete/${id}`, { headers: { "Access-Control-Allow-Origin": "*", Authorization: `Bearer ${token}`, }, }) .then((res) => { swal({ title: "Deleted", text: "Product Deleted successfully!", icon: "success", button: "ok", }); setSuccess((prev) => !prev); }) .catch((err) => { let msg = err?.response?.data?.message ? err?.response?.data?.message : "Something went wrong!"; swal({ title: "Warning", text: msg, icon: "error", button: "Retry", dangerMode: true, }); }); } }); }; const handleStatus = (id) => { swal({ title: "Are you sure?", icon: "warning", buttons: { Yes: { text: "Yes", value: true }, Cancel: { text: "Cancel", value: "cancel" }, }, }).then((value) => { if (value === true) { axios .patch(`/api/product/admin/status/${id}`, { headers: { "Access-Control-Allow-Origin": "*", Authorization: `Bearer ${token}`, }, }) .then((res) => { swal({ title: "Changed", text: "Product status changed successfully!", icon: "success", button: "ok", }); setSuccess((prev) => !prev); }) .catch((err) => { swal({ title: "Warning", text: "Something went wrong!", icon: "error", button: "Retry", dangerMode: true, }); }); } }); }; // console.log("currencyDetails", currencyDetails); return (
Products
{loading ? ( ) : productsData?.length > 0 ? ( productsData?.map((product, i) => ( )) ) : ( )}
Image SKU Product Category Name Brand Name Price Status Added On Actions
Loading...
{product?.image && product?.image?.length !== 0 ? ( preview ) : (

No

image

uploaded!

)} 		{product.SKU} {product.name} {product.category?.categoryName || "Category Not selected"} {product.brand?.brandName || "Brand Not selected"} {currencyDetails?.CurrencySymbol} {product?.price} {new Date(product.createdAt).toLocaleString( "en-IN", { weekday: "short", month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "numeric", hour12: true, } )}
No Product Available...
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} {Math.min(currentPage * itemPerPage, totalData)} of{" "} {totalData} entries
  • setCurrentPage((prev) => prev - 1)} disabled={loading} > Previous
    • {!(currentPage - 1 < 1) && (
  • setCurrentPage((prev) => prev - 1) } disabled={loading} > {currentPage - 1}
    • )}
  • {currentPage}
    • {!( (currentPage + 1) * itemPerPage - itemPerPage > totalData - 1 ) && (
  • { setCurrentPage((prev) => prev + 1); }} disabled={loading} > {currentPage + 1}
    • )}
  • totalData - 1 ) ? "paginate_button page-item next" : "paginate_button page-item next disabled" } > setCurrentPage((prev) => prev + 1)} disabled={loading} > Next
); }; export default Products;