{"size": 841, "ext": "js", "max_stars_repo_path": "client/components/Products.js", "max_stars_repo_name": "Torchic-Trainers-8/grace-shopper", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/Products.js", "max_issues_repo_name": "Torchic-Trainers-8/grace-shopper", "max_issues_repo_issues_event_min_datetime": "2022-03-01T16:06:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T17:10:59.000Z", "max_forks_repo_path": "client/components/Products.js", "max_forks_repo_name": "Torchic-Trainers-8/grace-shopper", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 24, "max_forks_count": null, "avg_line_length": 24.0285714286, "max_line_length": 62, "alphanum_fraction": 0.564803805}
import React, { useEffect } from 'react'
import axios from 'axios'
import { useSelector, useDispatch } from 'react-redux'
import Product from './Product'
import { fetchProducts } from '../store/'
import { Link } from 'react-router-dom'

const Products = () => {
  const dispatch = useDispatch()
  const products = useSelector((state) => state.products)

  useEffect(() => {
    dispatch(fetchProducts())
  }, [])
  return !products ? (
    <div>Loading Products...</div>
  ) : (
    <div className="products">
      {products.map((product) => (
        <div key={product.id}>
          {/*
            o: rather than using two brs here you can just add
              padding to Product
          */}
          <br />
          <Product product={product} />
          <br />
        </div>
      ))}
    </div>
  )
}

export default Products
