{"size": 1288, "ext": "js", "max_stars_repo_path": "05-managing-local-and-global-states-in-nextjs/with-redux/components/ProductCard.js", "max_stars_repo_name": "JulienSisi/Real-World-Next.js", "max_stars_repo_stars_event_min_datetime": "2021-03-19T07:50:25.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T14:36:05.000Z", "max_issues_repo_path": "05-managing-local-and-global-states-in-nextjs/with-redux/components/ProductCard.js", "max_issues_repo_name": "JulienSisi/Real-World-Next.js", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "05-managing-local-and-global-states-in-nextjs/with-redux/components/ProductCard.js", "max_forks_repo_name": "JulienSisi/Real-World-Next.js", "max_forks_repo_forks_event_min_datetime": "2021-09-30T09:50:37.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-26T05:45:10.000Z"}
{"max_stars_count": 47, "max_issues_count": null, "max_forks_count": 13, "avg_line_length": 31.4146341463, "max_line_length": 79, "alphanum_fraction": 0.5861801242}
import { useDispatch } from 'react-redux';
import { useSelector, shallowEqual } from 'react-redux';

function useGlobalItems() {
  return useSelector((state) => state, shallowEqual);
}

function ProductCard({ id, name, price, picture }) {
  const dispatch = useDispatch();
  const items = useGlobalItems();
  const productAmount = items?.[id] ?? 0;

  return (
    <div className="bg-gray-200 p-6 rounded-md">
      <div className="relative 100% h-40 m-auto">
        <img src={picture} alt={name} className="object-cover" />
      </div>
      <div className="flex justify-between mt-4">
        <div className="font-bold text-l"> {name} </div>
        <div className="font-bold text-l text-gray-500"> ${price} per kg </div>
      </div>
      <div className="flex justify-between mt-4 w-2/4 m-auto">
        <button
          className="pl-2 pr-2 bg-red-400 text-white rounded-md"
          disabled={productAmount === 0}
          onClick={() => dispatch({ type: 'DECREMENT', id })}>
          -
        </button>
        <div>{productAmount}</div>
        <button
          className="pl-2 pr-2 bg-green-400 text-white rounded-md"
          onClick={() => dispatch({ type: 'INCREMENT', id })}>
          +
        </button>
      </div>
    </div>
  );
}

export default ProductCard;
