smarti/src/components/Tutorial/Builder/Hardware.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
  changeContent,
  setError,
  deleteError,
} from "../../../actions/tutorialBuilderActions";

import hardware from "../../../data/hardware.json";

import { withStyles } from "@material-ui/core/styles";
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
import ImageList from "@material-ui/core/ImageList";
import ImageListTile from "@material-ui/core/ImageListItem";
import ImageListTileBar from "@material-ui/core/ImageListItemBar";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormLabel from "@material-ui/core/FormLabel";
import * as Blockly from "blockly";

const styles = (theme) => ({
  multiImageListTile: {
    background: theme.palette.primary.main,
    opacity: 0.9,
    height: "30px",
  },
  multiImageListTileTitle: {
    color: theme.palette.text.primary,
  },
  border: {
    cursor: "pointer",
    "&:hover": {
      width: "calc(100% - 4px)",
      height: "calc(100% - 4px)",
      border: `2px solid ${theme.palette.primary.main}`,
    },
  },
  active: {
    cursor: "pointer",
    width: "calc(100% - 4px)",
    height: "calc(100% - 4px)",
    border: `2px solid ${theme.palette.primary.main}`,
  },
  errorColor: {
    color: theme.palette.error.dark,
    lineHeight: "initial",
    marginBottom: "10px",
  },
});

class Requirements extends Component {
  onChange = (hardware) => {
    var hardwareArray = this.props.value;
    if (hardwareArray.filter((value) => value === hardware).length > 0) {
      hardwareArray = hardwareArray.filter((value) => value !== hardware);
    } else {
      hardwareArray.push(hardware);
      if (this.props.error) {
        this.props.deleteError(this.props.index, "hardware");
      }
    }
    this.props.changeContent(hardwareArray, this.props.index, "hardware");
    if (hardwareArray.length === 0) {
      this.props.setError(this.props.index, "hardware");
    }
  };

  render() {
    var cols = isWidthDown("md", this.props.width)
      ? isWidthDown("sm", this.props.width)
        ? isWidthDown("xs", this.props.width)
          ? 2
          : 3
        : 4
      : 6;
    return (
      <div
        style={{
          marginBottom: "10px",
          padding: "18.5px 14px",
          borderRadius: "25px",
          border: "1px solid lightgrey",
          width: "calc(100% - 28px)",
        }}
      >
        <FormLabel style={{ color: "black" }}>Hardware</FormLabel>
        <FormHelperText
          style={
            this.props.error
              ? { lineHeight: "initial", marginTop: "5px" }
              : {
                  marginTop: "5px",
                  lineHeight: "initial",
                  marginBottom: "10px",
                }
          }
        >
          {Blockly.Msg.builder_hardware_order}
        </FormHelperText>
        {this.props.error ? (
          <FormHelperText className={this.props.classes.errorColor}>
            {Blockly.Msg.builder_hardware_helper}
          </FormHelperText>
        ) : null}
        <ImageList rowHeight={100} cols={cols} gap={10}>
          {hardware.map((picture, i) => (
            <ImageListTile
              key={i}
              onClick={() => this.onChange(picture.id)}
              classes={{
                item:
                  this.props.value.filter((value) => value === picture.id)
                    .length > 0
                    ? this.props.classes.active
                    : this.props.classes.border,
              }}
            >
              <div style={{ margin: "auto", width: "max-content" }}>
                <img
                  src={`/media/hardware/${picture.src}`}
                  alt={picture.name}
                  height={100}
                />
              </div>
              <ImageListTileBar
                classes={{ root: this.props.classes.multiImageListTile }}
                title={
                  <div
                    style={{ overflow: "hidden", textOverflow: "ellipsis" }}
                    className={this.props.classes.multiImageListTileTitle}
                  >
                    {picture.name}
                  </div>
                }
              />
            </ImageListTile>
          ))}
        </ImageList>
      </div>
    );
  }
}

Requirements.propTypes = {
  changeContent: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  deleteError: PropTypes.func.isRequired,
  change: PropTypes.number.isRequired,
};

const mapStateToProps = (state) => ({
  change: state.builder.change,
});

export default connect(mapStateToProps, {
  changeContent,
  setError,
  deleteError,
})(withStyles(styles, { withTheme: true })(withWidth()(Requirements)));