text: import React, { useEffect } from 'react'
  import { Link } from 'react-router-dom'
  import { useDispatch, useSelector } from 'react-redux'
  import { Row, Col } from 'react-bootstrap'
  import Product from '../components/Product'
  import Message from '../components/Message'
  import Loader from '../components/Loader'
  import Paginate from '../components/Paginate'
  import ProductCarousel from '../components/ProductCarousel'
  import Meta from '../components/Meta'
  import { listProducts } from '../actions/productActions'
  
  const HomeScreen = ({ match }) => {
    const keyword = match.params.keyword
  
    const pageNumber = match.params.pageNumber || 1
  
    const dispatch = useDispatch()
  
    const productList = useSelector((state) => state.productList)
    const { loading, error, products, page, pages } = productList
  
    useEffect(() => {
      dispatch(listProducts(keyword, pageNumber))
    }, [dispatch, keyword, pageNumber])
  
    return (
      <>
        <Meta />
        {!keyword ? (
          <ProductCarousel />
        ) : (
          <Link to='/' className='btn btn-light'>
            Go Back
          </Link>
        )}
        <h1>Latest Products</h1>
        {loading ? (
          <Loader />
        ) : error ? (
          <Message variant='danger'>{error}</Message>
        ) : (
          <>
            <Row>
              {products.map((product) => (
                <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                  <Product product={product} />
                </Col>
              ))}
            </Row>
            <Paginate
              pages={pages}
              page={page}
              keyword={keyword ? keyword : ''}
            />
          </>
        )}
      </>
    )
  }
  
  export default HomeScreen
  