{"size": 2579, "ext": "js", "max_stars_repo_path": "frontend/src/screens/client/search-products-results/SearchProductsResultsScreen.js", "max_stars_repo_name": "CarlosjVar/PR-Dise-o", "max_stars_repo_stars_event_min_datetime": "2021-03-02T19:15:12.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-02T21:56:10.000Z", "max_issues_repo_path": "frontend/src/screens/client/search-products-results/SearchProductsResultsScreen.js", "max_issues_repo_name": "aguilarandress/HardwareStore", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/screens/client/search-products-results/SearchProductsResultsScreen.js", "max_forks_repo_name": "aguilarandress/HardwareStore", "max_forks_repo_forks_event_min_datetime": "2021-06-16T23:20:21.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-16T23:20:21.000Z"}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 34.8513513514, "max_line_length": 79, "alphanum_fraction": 0.4307871268}
import React from 'react';
import { Link } from 'react-router-dom';
import { Container, Card, Image, Row, Col } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import NumberFormat from 'react-number-format';

import SearchProducts from '../../../components/products/SearchProducts';
import Spinner from '../../../components/layout/Spinner';

const SearchProductsResultsScreen = () => {
  const { productList, searchedProductName, productListLoading } = useSelector(
    (state) => state.product
  );

  return (
    <>
      <SearchProducts />
      <Container className="py-5">
        <h2 className="mb-5">Resultados para "{searchedProductName}"</h2>
        {productListLoading ? (
          <Spinner />
        ) : productList.length === 0 ? (
          <h4>No se encontraron resultados</h4>
        ) : (
          productList.map((product) => (
            <Card key={product.id} className="mb-4">
              <Card.Body>
                <Row>
                  <Col md="2">
                    <div className="product-card-img-container">
                      <Image
                        style={{ maxHeight: '128px', maxWidth: '128px' }}
                        src={
                          product.imageFileName === 'default_img' ||
                          !product.imageFileName
                            ? '/img/placeholder-image.jpg'
                            : `/api/utils/image/${product.imageFileName}`
                        }
                        fluid
                      />
                    </div>
                  </Col>
                  <Col md="10">
                    <h5>{product.name}</h5>
                    <p className="mt-3">{product.Categories.name}</p>
                    <p>
                      Precio:{' '}
                      <NumberFormat
                        value={product.price}
                        displayType={'text'}
                        thousandSeparator={'.'}
                        decimalSeparator={','}
                        isNumericString={true}
                        prefix={'₡'}
                      />
                    </p>
                    <p style={{ marginBottom: '0' }}>
                      <Link className="link" to={`/products/${product.id}`}>
                        Informacion del producto
                      </Link>
                    </p>
                  </Col>
                </Row>
              </Card.Body>
            </Card>
          ))
        )}
      </Container>
    </>
  );
};

export default SearchProductsResultsScreen;
