{"size": 2897, "ext": "js", "max_stars_repo_path": "package/src/components/ProductList.js", "max_stars_repo_name": "reactioncommerce/admin-products", "max_stars_repo_stars_event_min_datetime": "2021-11-04T17:42:38.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-04T17:42:38.000Z", "max_issues_repo_path": "package/src/components/ExampleComponent.js", "max_issues_repo_name": "reactioncommerce/admin-plugin-example", "max_issues_repo_issues_event_min_datetime": "2020-04-08T21:58:07.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-15T16:04:14.000Z", "max_forks_repo_path": "package/src/components/ProductList.js", "max_forks_repo_name": "reactioncommerce/admin-products", "max_forks_repo_forks_event_min_datetime": "2020-12-15T07:57:36.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-04T17:42:44.000Z"}
{"max_stars_count": 1, "max_issues_count": 3, "max_forks_count": 2, "avg_line_length": 28.1262135922, "max_line_length": 141, "alphanum_fraction": 0.6044183638}
import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import PlusIcon from "mdi-material-ui/Plus";
import { Reaction } from "/client/api";

/**
 * Get url for product, variant or option
 * @param {Object} item Product, variant or option
 * @returns {String} URL
 */
function getURL(item) {
  // Top level product
  if (item.type === "simple") {
    return `/products/${item._id}`;
  }

  // Variant
  if (item.ancestors.length === 1) {
    return `/products/${item.ancestors[0]}/${item._id}`;
  }

  // Option
  return `/products/${item.ancestors[0]}/${item.ancestors[1]}/${item._id}`;
}

/**
 * Get the secondary label for the product item
 * @param {Object} item A product, variant or option
 * @returns {String} A text label with status and price
 */
function getItemSecondaryLabel({ isVisible, displayPrice }) {
  const visibility = isVisible ? "Visible" : "Hidden";

  return `${visibility} - ${displayPrice}`;
}

/**
 * Product list
 * @param {Object} props Component props
 * @returns {Node} Component representing a list of products, variants, or options
 */
function ProductList({ items, title, onCreate, selectedVariantId }) {
  if (!Array.isArray(items)) {
    return null;
  }

  const hasCreateProductPermission = Reaction.hasPermission(["reaction:legacy:products/create"], Reaction.getUserId(), Reaction.getShopId());

  return (
    <Card>
      {hasCreateProductPermission ?
        <CardHeader
          action={
            <IconButton onClick={onCreate}>
              <PlusIcon />
            </IconButton>
          }
          title={title}
        />
        :
        <CardHeader
          title={title}
        />
      }
      <List dense>
        {items.map((item) => (
          <Link key={item._id} to={getURL(item)}>
            <ListItem button selected={item._id === selectedVariantId}>
              {(Array.isArray(item.media) && item.media.length &&
                <img
                  alt=""
                  src={item.media[0].url({ absolute: true, store: "thumbnail" })}
                  width={36}
                />
              ) || ""}
              <ListItemText
                primary={item.optionTitle || item.title || "Untitled"}
                secondary={getItemSecondaryLabel(item)}
              />
            </ListItem>
          </Link>
        ))}
      </List>
    </Card>
  );
}

ProductList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object),
  onCreate: PropTypes.func,
  selectedVariantId: PropTypes.string,
  title: PropTypes.string
};

export default ProductList;
