{"size": 4514, "ext": "js", "max_stars_repo_path": "src/components/App/UserAccountPage/ShowPage/WishList.js", "max_stars_repo_name": "loivp13/gameApp-react", "max_stars_repo_stars_event_min_datetime": "2019-04-02T16:52:52.000Z", "max_stars_repo_stars_event_max_datetime": "2019-04-02T16:52:52.000Z", "max_issues_repo_path": "src/components/App/UserAccountPage/ShowPage/WishList.js", "max_issues_repo_name": "loivp13/gameApp-react", "max_issues_repo_issues_event_min_datetime": "2020-09-04T18:23:01.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-12T07:58:43.000Z", "max_forks_repo_path": "src/components/App/UserAccountPage/ShowPage/WishList.js", "max_forks_repo_name": "loivp13/gameApp-react", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 30.2953020134, "max_line_length": 146, "alphanum_fraction": 0.4849357554}
import React, { Component } from "react";
import { connect } from "react-redux";
import {
  Card,
  Button,
  CardImg,
  CardColumns,
  CardTitle,
  CardText,
  CardGroup,
  CardSubtitle,
  CardBody,
  ButtonGroup,
  CardHeader,
  CardFooter
} from "reactstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { withRouter } from "react-router-dom";
import { addToCart } from "../../redux/actions";

export class WishList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cartStorage: JSON.parse(localStorage.getItem("cart")) || [],
      wishlistStorage: JSON.parse(localStorage.getItem("wishlist")) || []
    };
  }

  componentWillMount() {
    // localStorage.clear();
  }
  handleTrashClick = index => {
    if (this.props.userIdLocal) {
      let clonewishlist = [...this.state.wishlistStorage];
      clonewishlist.splice(index, 1);
      this.setState({
        wishlistStorage: clonewishlist
      });
      localStorage.setItem("wishlist", JSON.stringify(clonewishlist));
    } else {
      this.props.history.push("/");
    }
  };
  render() {
    const browseColumnStyle = () => {
      return this.props.collapse
        ? "col-10 col-sm-5 col-md-4 col-lg-3 mb-2"
        : "col-10 col-sm-5 col-md-4 col-lg-2 mb-2";
    };
    const renderCards = () => {
      let { wishlistStorage } = this.state;

      return wishlistStorage.length > 0 ? (
        wishlistStorage.map((data, index) => {
          let checkForCoverArt = () => {
            if (data.cover) {
              return data.cover.url.replace(/thumb/, "cover_big");
            } else {
              return "https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fuh.edu%2Fpharmacy%2F_images%2Fdirectory-staff%2Fno-image-available.jpg&f=1";
            }
          };
          return (
            <div key={index} className={browseColumnStyle()}>
              <Card className="h-100 ">
                <CardImg
                  className="browse_img_size"
                  top
                  width="100%"
                  src={checkForCoverArt()}
                />
                <CardBody>
                  <div>{data.name}</div>
                </CardBody>
                <CardFooter className="align-content-end">
                  <div className="row">
                    <div className=" col-12 mb-2 text-center border-bottom border-dark">
                      ${((data.popularity / 20) * 60).toFixed(2)}
                    </div>
                    <hr className="browse_hr_dark" />
                    <div
                      onClick={() => {
                        this.handleTrashClick(index);
                      }}
                      className="col-6 browse_fonticon_hovertransform align-self-end"
                      color="primary"
                    >
                      <FontAwesomeIcon
                        className="text-danger "
                        icon={["fas", "trash"]}
                      />
                    </div>
                    <div
                      onClick={() => {
                        this.props.addToCart(data);
                        this.handleTrashClick(index);
                      }}
                      className="col-6 browse_fonticon_hovertransform align-self-end"
                      color="primary"
                    >
                      <FontAwesomeIcon
                        className="text-primary "
                        icon={["fas", "cart-plus"]}
                      />
                    </div>
                  </div>
                </CardFooter>
              </Card>
            </div>
          );
        })
      ) : (
        <div className="align-items-center mb-5">
          Nothing in wishlist! Go add some!
        </div>
      );
    };
    return (
      <div>
        <div id="browse_container" className="row rounded border border-dark">
          <div className="col-6 w-100" />

          <div className="col-12">
            <div className="h4 p-2">WishList</div>
            <hr />
            <div className="row">
              {/* <div className={browseColumnStyle()} /> */}

              {renderCards()}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
  return {
    apiSearchResponse: state.apiSearchResponse,
    userIdLocal: state.localAuth.userIdLocal
  };
};
export default withRouter(
  connect(
    mapStateToProps,
    { addToCart }
  )(WishList)
);
