{"size": 2600, "ext": "js", "max_stars_repo_path": "src/container/Checkout/Checkout.js", "max_stars_repo_name": "prince2115/React-Ecommerce-Complete", "max_stars_repo_stars_event_min_datetime": "2021-06-16T19:52:35.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-21T18:28:16.000Z", "max_issues_repo_path": "src/container/Checkout/Checkout.js", "max_issues_repo_name": "prince2115/React-Ecommerce-Complete", "max_issues_repo_issues_event_min_datetime": "2021-03-11T04:25:37.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-07T22:50:44.000Z", "max_forks_repo_path": "src/container/Checkout/Checkout.js", "max_forks_repo_name": "prince2115/React-Ecommerce-Complete", "max_forks_repo_forks_event_min_datetime": "2021-06-17T00:21:08.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-21T14:22:28.000Z"}
{"max_stars_count": 15, "max_issues_count": 3, "max_forks_count": 7, "avg_line_length": 34.6666666667, "max_line_length": 79, "alphanum_fraction": 0.3873076923}
import React from "react";
import { useStateValue } from "../../StateProvider/StateProvider";
import CheckoutProduct from "../../components/CheckoutProduct/CheckoutProduct";
import { Container, Item, Card, Grid, Message } from "semantic-ui-react";
import "./Checkout.css";
import SubTotal from "../../components/SubTotal/SubTotal";

function Checkout() {
  const [{ basket }] = useStateValue();
  return (
    <div className="checkout">
      <Container>
        <Grid doubling stackable>
          <Grid.Row>
            <Grid.Column width={8}>
              <div>
                {basket?.length === 0 ? (
                  <div className="checkout__warningMessage">
                    <Message warning>
                      <Message.Header>
                        Your shopping basket is empty
                      </Message.Header>
                      <p>
                        You have no items in your basket. To buy one or more
                        items , please click "Add to basket" next to the item
                      </p>
                    </Message>
                  </div>
                ) : (
                  <div>
                    {basket?.length >= 2 ? (
                      <h2>Your shopping basket items </h2>
                    ) : (
                      <h2>Your shopping basket item </h2>
                    )}
                    <Card fluid className="checkout__card">
                      <Item.Group>
                        {basket?.map((item) => {
                          return (
                            <CheckoutProduct
                              key={item.id}
                              id={item.id}
                              title={item.title}
                              imageUrl={item.imageUrl}
                              price={item.price}
                              rating={item.rating}
                            ></CheckoutProduct>
                          );
                        })}
                      </Item.Group>
                    </Card>
                  </div>
                )}
              </div>
            </Grid.Column>
            {basket?.length > 0 && (
              <div className="checkout__right">
                <Grid.Column width={6}>
                  <Card>
                    <Item.Group divided>
                      <SubTotal></SubTotal>
                    </Item.Group>
                  </Card>
                </Grid.Column>
              </div>
            )}
          </Grid.Row>
        </Grid>
      </Container>
    </div>
  );
}

export default Checkout;
