AddReview.js

import React,  {useEffect, useState} from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import NavBar from './NavBar.js';
import SendIcon from '@material-ui/icons/Send';
import { List, Header, Rating  } from "semantic-ui-react";
import { Reviews } from './Reviews.js';
import { useParams } from "react-router-dom";

const useStyles = makeStyles((theme) => ({
    title: {
        color: 'white',
        fontSize: '15pt',
        marginLeft: '18px',
        letterSpacing: '3px',
        width: '180px',
        padding: '0px',
        top: '385px',
        textAlign: 'center',
        position: 'absolute',
    },
    movieTitle: {
        color: 'white',
        fontSize: '10pt',
        marginLeft: '18px',
        letterSpacing: '3px',
        width: '180px',
        padding: '0px',
        top: '385px',
        textAlign: 'center',
        position: 'absolute',
    },
    container2: {
        width: '98%',
        backgroundColor: '#16161A',
        rowGap: '5px',
        margin: '15px',
    },
    reviewCard: {
        backgroundColor: '#0B0C0D',
        height: '335px',
        width: '85.5%',
        float: 'right',
        marginBottom: '15px',
        marginRight: '8px',
    },
    userRating: {
        marginRight: '30px',
    },
    reviewCard2: {
        backgroundColor: '#16161A',
        padding: '20px',
        color: 'white',
        width: 'auto',
        height: '100%',
        fontSize: '15pt',
    },
    cover: {
        width: '180px',
        height: '285px',
        position: 'relative',
        backgroundColor: '#16161A',
        marginBottom: '35px',
        marginLeft: '15px',
        marginTop: '25px',
    },
    reviewDateCSS: {
        marginTop: '80px',
        fontSize: '10pt',
        posotion: 'absolute',
        marginLeft: '3px',
    },
    reviewTextCSS: {
        marginBottom: '0px',
    },
    yourReviewCSS: {
        marginLeft: '3px'
    },
    ratingCSS: {
        marginBottom: '10px',
    },
    movieLengthCSS: {
        width: '200px',
        display: 'inline-block',
        marginBottom: '0px'
    },
    releasedCSS: {
        width: '230px',
        display: 'inline-block',
        marginBottom: '10px',
    },
    descriptionTitleCSS: {
        width: '230px',
        display: 'inline-block',
        marginBottom: '0px',
    },
    description: {
        fontSize: '12pt',
        textAlign: 'justify'
    },
    reviewCard3: {
        color: 'white',
        margin: '10px',
        width: '100%',
        height: '50%',
        float: 'left',
        marginLeft: '0px',
        backgroundColor: '#0B0C0D',
        padding: '5px',
        fontSize: '13pt'
    },
    container3: {
        height: '330px',
        width: '98%',
        marginTop: '20px',
        backgroundColor: '#16161A',
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    addReviewText: {
        textAlign: 'center',
        color: 'white',
        fontSize: '18pt',
        marginBottom: '0px'
    },
    rateMovieText: {
        textAlign: 'center',
        color: 'white',
        fontSize: '15pt',
        marginBottom: '5px',
    },
    rating: {
        marginLeft: '645px',
        transform: 'scale(1.2)',
    },
    container4: {
        color: 'white',
        fontSize: '12pt',
        marginTop: '10px',
        height: '215px',
        width: '98%',
        backgroundColor: '#0B0C0D',
        marginLeft: '15px',
        border: '0px',
        textAlign: 'center'
    },
    sendIcon: {
        color: 'white',
        transform: 'scale(1.5)',
        position: 'fixed',
        right: '40px',
        bottom: '40px',
        cursor: 'pointer',
        '&:hover': {
            transform: 'scale(1.8)',
            transition:'transform .25s ease-in-out',
        },
    }
}));

export default function AddReview() {
    const classes = useStyles();
    const [movies, setMovies] = useState([]);
    const [userRating,setUserRating] = useState("1");
    const [userReview,setUserReview] = useState("");
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    today = dd + '/' + mm + '/' + yyyy;
    const userID=localStorage.getItem('userid')
    let { id } = useParams();
    useEffect(()=> {
			fetch('https://arthur-laura-5000.codio-box.uk/addreview', { credentials: 'include', method: 'POST', headers: { 'Content-type': 'application/json'}, body: JSON.stringify(id)}).then(response =>response.json().then(data => {setMovies(data.thisMovie);
			})
		);
	},[]);
    console.log(movies)
  function handleAddReview(event) {
              const details = [userRating, userReview, userID, id, today];
                      console.log(details)
              fetch('https://arthur-laura-5000.codio-box.uk/addnewreview', {
                        method: 'POST',
                        credentials: 'include',
                        headers: {
                            'Content-type': 'application/json',
                        },
                            body: JSON.stringify(details),
                    }).then(response =>response.json().then(data => {
                      alert("Your review has been added")
                      window.history.back()
                  }))
    event.preventDefault();
  }
  if (userID!==null){
  return (
      <div className={classes.container}>
             <div className={classes.container2}>
                 <div className={classes.movieCover}>
                     <img className={classes.cover} src={'../'+movies.coverPhoto}  alt=" " />
                     <p className={classes.movieTitle}>{movies.title}</p>
                 <div className={classes.reviewCard}>
                     <div className={classes.reviewCard2}>
                         <p className={classes.movieLengthCSS}>Length: {movies.movieLength}</p>
                         <p className={classes.ratingCSS} style={{ textAlign: 'left', marginLeft: '30px',width: '150px', display: 'inline-block'}}>Average rating</p>
                         <br></br>
                         <p className={classes.releasedCSS}>Released: {movies.release}</p>
                         <Rating rating={movies.rating} maxRating={5} disabled icon='ui huge star rating' />
                         <br></br>
                         <p className={classes.releasedCSS}>Category: {movies.category}</p>
                         <br></br>
                         <p className={classes.descriptionTitleCSS}>Description:</p> 
                            <div className={classes.reviewCard3}>
                                 <p className={classes.description}>{movies.longDescription}</p>
                            </div>
                        </div>
                 </div>
                </div>
                </div>
        
        <div className={classes.container3}>
            <p className={classes.addReviewText}>Add your review</p> 
            <p className={classes.rateMovieText}>Rate the movie:</p>
            <Rating className={classes.rating} maxRating={5} defaultRating={1} enabled icon='ui huge star rating' rating={userRating} onRate={(_,data) => {setUserRating(data.rating)}}/>
            <div>
                <input className={classes.container4} type="text" placeholder="type your review here" value={userReview} onChange={(e) => setUserReview(e.target.value)}/>
                <SendIcon className = {classes.sendIcon} onClick={handleAddReview}/>
            </div>
		</div>
        </div>
  );
 }else{
     {window.location.href='/login'}
 }
}