e-commerce-starter

ProductList.js

// Apollo
import { useQuery, gql } from '@apollo/client';

// Ant design
import { Row, Col } from 'antd';

// Components
import ProductCard from './Product';

export const QUERY = gql`
    query listProducts {
        listProducts {
            data {
                id
                title
                description
                price
                image
                category {
                    title
                }
            }
        }
        listCategories {
            data {
                title
            }
        }
    }
`;

export default function ProductList(props) {
    const { loading, error, data } = useQuery(QUERY);
    // if products are returned from the GraphQL query, run the filter query
    // and set equal to variable searchQuery
    if (loading) return <h1>Fetching</h1>;

    if (error) return 'Error loading products: ' + error.message;

    let ProductData = data.listProducts.data;

    // Remove the static data that came up with the e-commerce-starter code
    // let ProductData = [
    //     ...
    // ];

    if (ProductData && ProductData.length) {
        const searchQuery = ProductData.filter((query) =>
            query.title.toLowerCase().includes(props.search),
        );
        if (searchQuery.length != 0) {
            return (
                <Row>
                    {searchQuery.map((res) => (
                        <Col
                            xs={24}
                            md={12}
                            lg={8}
                            key={('card: ', res.title)}
                            // flex={3}
                        >
                            <ProductCard {...res} />
                        </Col>
                    ))}
                </Row>
            );
        } else {
            return <h1>No Products Found</h1>;
        }
    }
    return <h5>Visit your Webiny Headless CMS to add your Products</h5>;
}