AllMovies.js

import React,  {useEffect, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';   //essential imports
import { Rating  } from "semantic-ui-react";

const useStyles = makeStyles((theme) => ({   //page styling
    title: {
        color: 'white',
        height: '50px',
        width: '100%',
        fontSize: '25pt',
        marginTop: '9px',
        marginBottom: '0px',
        marginLeft: '15px',
        letterSpacing: '3px'
    },
    container: {
        width: 'auto',
        height: '300px',
        display: 'flex',
        flexWrap: 'wrap',
        marginLeft: 'auto',
        rowGap: '5px',
    },
    cover: {
        width:'220px',
        height:'320px',
        position: 'relative',
    },
    movieCard: {
        marginTop: '0px',
        marginBottom: '10px',
        marginRight: '10px',
        marginLeft: '10px',
        float: 'left',
        width: '220px',
        height: '320px',
        position: 'relative',
        '&:hover>div': {
            opacity:1,
            transition:'opacity .25s ease-in-out',
        },
        '&:hover>img': {
            opacity:0.1,
            transition:'opacity .25s ease-in-out',
        }, 
    },
    movieCardHover: {
        textAlign: 'justify',
        position: 'absolute',
        top: '3px',
        color: 'white',
        margin: '0px 10px',
        fontSize: '10pt',
        opacity: '0',
        cursor:'pointer'
    },
    movieDetails: {
        marginTop: '5px',
        fontSize: '12pt'
    }
}));

export default function AllMovies() {
    const classes = useStyles();    //here the classes is assigned to get access to the styling
    const [movies, setMovies] = useState([]);    //using useState hook to give states to the components when rendering
    useEffect(()=> {
			fetch('https://arthur-laura-5000.codio-box.uk/movies', { credentials: 'include' }).then(response =>response.json().then(data => {setMovies(data.movies);
			})
		);
	},[]);     //fetching the data from the API URL
    console.log(movies)
  return (
		<div className={classes.container}>
        {/*using divs the different parts of the page is built up
          * classes are used to use styling for specific elements of the page 
          * this container shows all movies in the database using a loop without the need to be logged in
          * to show movie details the movies.*columnName* and uses a hover state so that the data about each movie is hidden under the hover interaction */}
           <p className = {classes.title}>All movies</p>
			{movies.map(movie => {
				return (
					<div className={classes.movieCard} onClick={() => {window.location.href='/movies/'+movie.id}}>
                        <img className={classes.cover} src={movie.coverPhoto} alt=" " />
                        <div className={classes.movieCardHover}>
                            <Rating rating={movie.rating} style={{marginLeft: '10px'}} maxRating={5} disabled icon='ui massive star rating' />
                            <p className={classes.movieDetails} style={{ textAlign: 'center' }}>Length: {movie.movieLength}</p>
                            <p className={classes.movieDetails} style={{ textAlign: 'center' }}>Release: {movie.release}</p>
                            <p className={classes.movieDetails} style={{ textAlign: 'center' }}>Category: {movie.category}</p>
                            <p>{movie.description}</p>
                        </div>
					</div>     
        )})}
		</div>
)}