item.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import Title from "./styles/Title";
import ItemStyles from "./styles/ItemStyles";
import PriceTag from "./styles/PriceTag";
import formatMoney from "../lib/formatMoney";
import AddToCart from "./AddToCart";
import styled from "styled-components";

const { createClient } = require("@moltin/request");

const client = new createClient({
  client_id: "CsuvAhjJzuWme6u1mrihA4Hef3xOSSJ9DLMfBqQ1Ez"
});

const StyledLink = styled(Link)`
  color: #f44245;
  background: #f44245;
`;
export default class Item extends Component {
  static propTypes = {
    item: PropTypes.object.isRequired
  };
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  async handleClick() {
    //TODO create cart id
    const quantity = 1;
    const cartId = localStorage.getItem("moltinCartId");
    console.log("add item", "carts/" + cartId + "/items");

    const cart = await client
      .post("carts/" + cartId + "/items", {
        type: "cart_item",
        id: this.props.id,
        quantity
      })
      .then(console.log)
      .catch(console.error);
  }

  render() {
    const style = {
      color: "red"
    };
    const { item } = this.props;
    return (
      <ItemStyles>
        <div className="hvrbox">
          {item.image && <img src={item.image} alt={item.name} />}
          <Title>
            <Link
              href={{
                pathname: "/item",
                query: { id: item.id }
              }}
            >
              <p>{item.name}</p>
            </Link>
            <p>{formatMoney(item.price[0].amount)}</p>
          </Title>
          <div className="hvrbox-layer_top">
            <div className="hvrbox-text-quickview">
              <Link
                href={{
                  pathname: "/products",
                  query: { id: item.id }
                }}
              >
                <button>View</button>
              </Link>
            </div>
            <div className="hvrbox-text-buynow">
              <a>
                <span
                  className="moltin-cart-button"
                  data-moltin-product-id={item.id}
                  data-moltin-text="Buy Now"
                />
              </a>
            </div>
          </div>
        </div>
      </ItemStyles>
    );
  }
}