import React, { useState, useEffect, useContext } from "react"; import Axios from "axios"; import { MovieContext } from "../MovieContext"; import { makeStyles } from "@material-ui/core/styles"; import Grid from "@material-ui/core/Grid"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; import CardMedia from "@material-ui/core/CardMedia"; import Button from "@material-ui/core/Button"; import Typography from "@material-ui/core/Typography"; import "../App.css"; import loadingImg from "./loading.gif"; import { ButtonGroup } from "@material-ui/core"; import { addMovieData } from "../Config/firebaseConfig"; import { UserContext } from "../UserContext"; const API_KEY = process.env.REACT_APP_OMDB_API_KEY; const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value]); return debouncedValue; }; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, titleText: { overflow: "hidden", }, })); function convertToInt(string) { const parsed = parseInt(string, 10); if (isNaN(parsed)) { return 0; } return parsed; } const Movie = () => { const contextData = useContext(MovieContext); const user = useContext(UserContext); const classes = useStyles(); const [mTime, setMTime] = useState({}); const time = useDebounce(mTime, 500); const handleClick = async (val) => { var movieId = val.imdbID; var movieTime = ""; var totalMovieTime = 0; try { const response = await Axios.get( `https://www.omdbapi.com/?apikey=${API_KEY}&i=${movieId}` ); if (typeof response.data === "object") { contextData.watched.push(response.data); } if (user) { if (contextData.watched.length > 0) { addMovieData(contextData.watched, user.uid); } else { console.log("No Movies Added"); } } movieTime = response.data.Runtime; totalMovieTime = contextData.totalTime + convertToInt(movieTime); contextData.setLoading(false); contextData.setTotalTime(totalMovieTime); } catch (error) { console.log(error); } }; useEffect(() => { if (time) { contextData.setLoading(true); handleClick(time); } }, [time]); if (!contextData.loading && contextData.searchArray !== undefined) { return ( <Grid container spacing={4} justify="center"> {contextData.searchArray.map((item, index) => { if (item.Poster !== "N/A") { return ( <Grid item xs={10} sm={4} lg={2} xl={2} key={index}> <Card raised={true} className={classes.root}> <CardMedia image={item.Poster} title={item.Title} // height="450px" width="150px" component="img" /> <CardContent> <Typography gutterBottom variant="h6" component="h2" noWrap className={classes.titleText} > {item.Title} </Typography> <Typography variant="body2" color="textSecondary" component="p" > {item.Year} </Typography> </CardContent> <CardActions style={{ justifyContent: "center", alignItems: "center" }} > <ButtonGroup orientation="vertical" aria-label="vertical button group" style={{ width: "auto" }} > <Button size="small" variant="contained" color="primary" style={{ marginBottom: "15px" }} onClick={() => { setMTime(item); }} > Add This Movie </Button> <Button size="small" variant="contained" color="primary" style={{ marginBottom: "15px" }} > <a href={`https://www.imdb.com/title/${item.imdbID}`} target="_blank" style={{ textDecoration: "none", color: "white" }} > Check On IMDB </a> </Button> </ButtonGroup> </CardActions> </Card> </Grid> ); } })} </Grid> ); } else if (contextData.loading === true) { return ( <div style={{ color: "white", textAlign: "center" }}> <img src={loadingImg} alt="loading" /> </div> ); } }; export default Movie;