AddReview.js

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

const useStyles = makeStyles((theme) => ({      //page styling
    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();      //here the classes is assigned to get access to the styling
    const [movies, setMovies] = useState([]);
    const [userRating,setUserRating] = useState("1");   //using useState hook to give states to the components when rendering
    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');   //generating the date of when the function is ran so that there is a date for when a review was submitted
    var yyyy = today.getFullYear();
    today = dd + '/' + mm + '/' + yyyy;
    const userID=localStorage.getItem('userid')    //local storage gives userid of current user logged in
    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);
			})
		);
	},[]);   //fetching the data from the API URL, using the right method, credentials and authorisation token
    console.log(movies)
  function handleAddReview(event) {
              const details = [userRating, userReview, userID, id, today];     //details is an array of data that is taking the user inputs, userID, movies's id and the date
                      console.log(details)
              fetch('https://arthur-laura-5000.codio-box.uk/addnewreview', {
                        method: 'POST',
                        credentials: 'include',    //the post to the API is then called
                        headers: {
                            'Content-type': 'application/json',
                        },
                            body: JSON.stringify(details),
                    }).then(response =>response.json().then(data => {  //the response will create some user feedback in the form of an alert and redirect them back to the movie's page which is the previous window
                      alert("Your review has been added")
                      window.history.back()
                  }))
    event.preventDefault();
  }
  if (userID!==null){    //client side security so that when a user is logged in the data is shown, otherwise the else path will redirect them to the login page
  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 movie details for the movie the user wishes to give a review on 
      * to show movie details the movies.*columnName* is used to get each piece of information to show on the page*/}
             <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>
        {/*new div is started below to split up the content of the page into separate boxes
        * this container is created to build the form where the user can use the rating stars to give a rating and type a review below it
        * when they are finished with the review the send icon in the bottom right calls the handleAddReview function which posts the review into the database using the API */}
        <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{    //no user is logged in, redirect to login page
     {window.location.href='/login'}
 }
}