amap/frontend/src/pages/Products/index.tsx

import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
import { t } from "@/config/i18n";
import { createProduct, editProduct, getProduct, getProducts } from "@/services/api";
import { IconPlus } from "@tabler/icons-react";
import ProductRow from "@/components/Products/Row";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { ProductModal } from "@/components/Products/Modal";
import { useCallback, useMemo } from "react";
import { productCreateFromProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
import ProductsFilters from "@/components/Products/Filter";

export default function Products() {
    const [ searchParams, setSearchParams ] = useSearchParams();
    const location = useLocation();
    const navigate = useNavigate();

    const isCreate = location.pathname === "/dashboard/products/create";
    const isEdit = location.pathname.includes("/edit");

    const editId = useMemo(() => {
        if (isEdit) {
            return location.pathname.split("/")[3]
        }
        return null
    }, [location, isEdit])

    const closeModal = () => {
        navigate(`/dashboard/products${searchParams ? `?${searchParams.toString()}` : ""}`);
    };

    const { data: products, isPending } = getProducts(searchParams);
    const { data: currentProduct } = getProduct(Number(editId), { enabled: !!editId });
    const { data: allProducts } = getProducts();

    const names = useMemo(() => {
        return allProducts?.map((product: Product) => (product.name))
            .filter((season, index, array) => array.indexOf(season) === index)
    }, [allProducts])

    const productors = useMemo(() => {
        return allProducts?.map((product: Product) => (product.productor.name))
            .filter((productor, index, array) => array.indexOf(productor) === index)
    }, [allProducts])

    const createProductMutation = createProduct();
    const editProductMutation = editProduct();

    const handleCreateProduct = useCallback(async (product: ProductInputs) => {
        await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
        closeModal();
    }, [createProductMutation, closeModal]);

    const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
        if (!id)
            return;
        await editProductMutation.mutateAsync({
            id: id,
            product: productCreateFromProductInputs(product)
        });
        closeModal();
    }, [editProductMutation, closeModal]);
    
    const onFilterChange = useCallback((values: string[], filter: string) => {
        setSearchParams(prev => {
            const params = new URLSearchParams(prev);
            params.delete(filter);
            
            values.forEach(value => {
                params.append(filter, value);
            });
            return params;
        });
    }, [searchParams, setSearchParams])

    if (!products || isPending)
        return (
            <Group 
                align="center"
                justify="center"
                h="80vh"
                w="100%"
            >
                <Loader color="pink"/>
            </Group>
        );
    
    return (
        <Stack>
            <Group justify="space-between">
                <Title order={2}>{t("all products", {capfirst: true})}</Title>
                <Tooltip label={t("create product", {capfirst: true})}>
                    <ActionIcon
                        onClick={(e) => {
                            e.stopPropagation();
                            navigate(`/dashboard/products/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                        }}
                    >
                        <IconPlus/>
                    </ActionIcon>
                </Tooltip>
                <ProductModal
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateProduct}
                />
            </Group>
            <ProductsFilters
                productors = {productors || []}
                names={names || []}
                filters={searchParams}
                onFilterChange={onFilterChange}
            />
            <ProductModal
                opened={isEdit}
                onClose={closeModal}
                currentProduct={currentProduct}
                handleSubmit={handleEditProduct}
            />
            <ScrollArea type="auto">
                <Table striped>
                    <Table.Thead>
                        <Table.Tr>
                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("type", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("price", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("priceKg", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("quantity", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("unit", {capfirst: true})}</Table.Th>
                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {
                            products.map((product) => (
                                <ProductRow 
                                    product={product}
                                    key={product.id}
                                />
                            ))
                        }
                    </Table.Tbody>
                </Table>
            </ScrollArea>
        </Stack>
    );
}