Categories.js

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

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:'190px',
        height:'310px',
        position: 'relative',
    },
    movieCard: {
        marginTop: '0px',
        marginBottom: '10px',
        marginRight: '7.5px',
        marginLeft: '7.5px',
        float: 'left',
        width: '190px',
        height: '310px',
        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 Categories() {
    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
    let { category } = useParams();     //useParams hook gives us the right routing into the page for the correct category
    useEffect(()=> {
			fetch('https://arthur-laura-5000.codio-box.uk/categories', { credentials: 'include', method: 'POST', headers: { 'Content-type': 'application/json'}, body: JSON.stringify(category)}).then(response =>response.json().then(data => {setMovies(data.categories);}));
	},[]);     //fetching the data from the API URL for a specific category
    console.log(movies)
    console.log(category)
  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 for the specific category using a loop without the need to be logged in
         * to show movie details the movie.*columnName* is used and a hover state so that the data about each movie is hidden under the hover interaction */}
            <p className = {classes.title}>{category}</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} 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>
)}