@mui/material#CardActionArea JavaScript Examples

export default function AddToOutfitCard({ updateWardrobe }) {
  //useContext
  const { overviewProduct, selectedStyleState, clickTracker } =
    useContext(ProductsContext);
  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [selectedStyle, setSelectedStyle] = selectedStyleState;
  const [clickTrackerFunc] = clickTracker;

  const addToOutfitList = (selectedStyleObj) => {
    let copyOfSelectedStyleObj = selectedStyleObj;
    selectedStyleObj.selectedStyleObj = copyOfSelectedStyleObj;
    selectedStyleObj.slogan = overviewProduct.slogan;
    selectedStyleObj.overviewProduct = overviewProductState;
    selectedStyleObj.description = overviewProductState.description;
    selectedStyleObj.category = overviewProductState.category;
    selectedStyleObj.features = overviewProductState.features;

    updateWardrobe(selectedStyleObj);
  };

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc(
          "Add to Outfit List Card",
          event.target
        )
      }
      className={"maxWidth: 300"}
    >
      <CardContent>
        <Typography gutterBottom variant="h5" component="h2">
          Like the above outift?
        </Typography>
        <CardActionArea>
          <DoneOutlineIcon
            style={{ fontSize: 250 }}
            onClick={() => {
              addToOutfitList(selectedStyle);
            }}
          />
        </CardActionArea>
        <Typography variant="body2" color="textSecondary" component="p">
          Click the Icon add to your wardrobe
        </Typography>
      </CardContent>
    </Card>
  );
}

export default function OutfitCard({ OutfitObj, remove }) {
  const classes = useStyles();
  //useContext
  const {
    overviewProduct,
    clickedComponent,
    clickedElement,
    clickTracker,
    selectedStyleState,
  } = useContext(ProductsContext);

  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [selectedStyle, setSelectedStyle] = selectedStyleState;
  const [clickTrackerFunc] = clickTracker;

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc("Outfit List Item", event.target)
      }
      className={classes.root}
    >
      <CardMedia
        className={classes.media}
        image={
          OutfitObj.photos[0].thumbnail_url
            ? OutfitObj.photos[0].thumbnail_url
            : noImage
        }
        title={OutfitObj.name}
      >
        <Grid container direction="column" alignItems="flex-end">
          <Grid item>
            <HighlightOffIcon
              style={{ fill: "black", fontSize: 45 }}
              onClick={() => {
                remove(OutfitObj);
              }}
            />
          </Grid>
        </Grid>
      </CardMedia>
      <CardActionArea>
        <CardContent
          onClick={() => {
            setOverviewProductState(OutfitObj.overviewProduct);
            setSelectedStyle(OutfitObj.selectedStyleObj);
          }}
        >
          <Typography gutterBottom variant="body1" component="h2">
            {OutfitObj.name}
          </Typography>
          <Typography gutterBottom variant="caption" component="h2">
            {OutfitObj.category}
          </Typography>

          {OutfitObj.sale_price ? (
            <>
              <strike>
                <Typography
                  className={{ textDecoration: "line-through" }}
                  variant="body2"
                  color="textSecondary"
                  component="p"
                >
                  ${OutfitObj.original_price}
                </Typography>
              </strike>
              <Typography
                variant="body2"
                style={{ color: "red" }}
                component="div"
              >
                On sale!! ${OutfitObj.sale_price}{" "}
              </Typography>
            </>
          ) : (
            <Typography variant="body2" color="textSecondary" component="p">
              ${OutfitObj.original_price}
            </Typography>
          )}

          <Typography variant="body2" color="textSecondary" component="p">
            {OutfitObj.description}
          </Typography>
          {/* <StarRatings
            rating={3.75}
            starDimension={"15px"}
            starSpacing={"1px"}
          /> */}
        </CardContent>
      </CardActionArea>
      <CardActions></CardActions>
    </Card>
  );
}

export default function RelatedProductCard({ RelatedObj, updatedWardrobe }) {
  //useContext
  const { overviewProduct, clickTracker } = useContext(ProductsContext);
  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [clickTrackerFunc] = clickTracker;

  //State
  const [open, setOpen] = React.useState(false);
  const [currentItem, setCurrentItem] = useState({});
  const [compareFeatures, setCompareFeatures] = useState([]);
  const [clickedStar, setClickedStar] = useState(false);
  const [relatedProductName, updateRelatedProductName] = useState("");
  const [relatedProductFeatures, setRelatedProductFeatures] = useState({});
  const [overviewProductFeatures, setOverviewProductFeatures] = useState({});

  const isInitialMount = useRef(true);
  //Component Updates
  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      if (Object.values(currentItem).length > 0) {
        setCurrentItem({});
        updatedWardrobe(currentItem, clickedStar);
      }
    }
  });
  //Functions
  const handleStarClick = (relatedProduct) => {
    let relatedProductFeaturesObj = {};
    let overviewProductFeaturesObj = {};
    let combinedFeatures = [];

    relatedProduct.features.forEach((feature) => {
      combinedFeatures.push(feature.feature);
      relatedProductFeaturesObj[feature.feature] = feature.value;
    });

    overviewProductState.features.forEach((feature) => {
      combinedFeatures.push(feature.feature);
      overviewProductFeaturesObj[feature.feature] = feature.value;
    });
    updateRelatedProductName(relatedProduct.name);
    setOverviewProductFeatures(overviewProductFeaturesObj);
    setRelatedProductFeatures(relatedProductFeaturesObj);
    setCompareFeatures(combinedFeatures);

    setClickedStar(true);
    handleClickOpen();
  };

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setClickedStar(false);
    setOpen(false);
  };

  //Styling
  const useStyles = makeStyles({
    root: {
      maxWidth: 500,
    },
    media: {
      height: 250,
    },
    iconDepth: {
      zIndex: 1,
      marginLeft: "auto",
    },
  });

  const classes = useStyles();

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc("Related Products", event.target)
      }
      className={classes.root}
    >
      <CardMedia
        className={classes.media}
        image={RelatedObj.url ? RelatedObj.url : noImage}
      >
        <Grid container direction="column" alignItems="flex-end">
          <Grid id="starClick" item>
            {clickedStar ? (
              <StarBorderIcon
                className={classes.iconDepth}
                onClick={() => {
                  handleStarClick(RelatedObj);
                }}
                color="primary"
                style={{ fontSize: 45, color: "rgb(73, 137, 199)" }}
              />
            ) : (
              <StarIcon
                className={classes.iconDepth}
                onClick={() => {
                  handleStarClick(RelatedObj);
                }}
                color="primary"
                style={{ fontSize: 45, color: "rgb(73, 137, 199)" }}
              />
            )}
          </Grid>
        </Grid>
      </CardMedia>
      <CardActionArea>
        <CardContent
          onClick={() => {
            setOverviewProductState(RelatedObj);
          }}
        >
          <Typography gutterBottom variant="body1" component="h2">
            {RelatedObj.name}
          </Typography>
          <Typography gutterBottom variant="caption" component="h2">
            {RelatedObj.category}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            ${RelatedObj.default_price}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {RelatedObj.description}
          </Typography>
          {/* <StarRatings rating={2} starDimension={"15px"} starSpacing={"1px"} /> */}
        </CardContent>
      </CardActionArea>
      <CardActions>
        <ModalPopup
          maxWidth={"lg"}
          compareFeatures={compareFeatures}
          relatedProductName={relatedProductName}
          relatedProductFeatures={relatedProductFeatures}
          overviewProductFeatures={overviewProductFeatures}
          open={open}
          onClose={handleClose}
        />
      </CardActions>
    </Card>
  );
}

function App() {
  const [images, setImages] = useStore.images();
  const [loading, setLoading] = useStore.loading();
  const [error, setError] = useStore.error();

  useEffect(() => {
    fetch("https://picsum.photos/v2/list")
      .then((response) => response.json())
      .then((images) => {
        setImages(images);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setLoading(false);
      });
    // eslint-disable-next-line
  }, []);

  const LoadingView = (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
      style={{ minHeight: "100vh" }}
    >
      <CircularProgress />
    </Grid>
  );
  const ErrorView = <>Something went wrong</>;
  const ListView = (
    <Grid
      container
      spacing={{ xs: 2, md: 3 }}
      columns={{ xs: 4, sm: 8, md: 12 }}
    >
      {images.slice(0, 12).map((data) => {
        const { author, download_url, id } = data;
        return (
          <Grid item xs={2} sm={4} md={4} key={id}>
            <Card sx={{ maxHeight: 345 }}>
              <CardActionArea>
                <CardMedia
                  component="img"
                  height="140"
                  image={download_url}
                  alt="green iguana"
                />
                <CardContent>
                  <Typography gutterBottom variant="h5" component="div">
                    {author}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        );
      })}
    </Grid>
  );
  /**
   * If loading is true show loader,
   * If error is true show Error
   * Otherwise show list
   */
  const ViewToShow = loading ? LoadingView : error ? ErrorView : ListView;
  return (
    <Container maxWidth="lg" sx={{ mb: 4 }}>
      <Stack spacing={2} direction="row" sx={{ py: 4 }}>
        <Button variant="contained" onClick={() => setLoading(!loading)}>
          Toggle Loading State
        </Button>
        <Button
          variant="contained"
          color="error"
          onClick={() => setError(!error)}
        >
          Toggle Error State
        </Button>
      </Stack>
      {ViewToShow}
    </Container>
  );
}