Account.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: {
        marginTop: '20px',
        backgroundColor: '#16161A',
        display: 'block',
        marginLeft: 'auto',
        marginRight: 'auto',
        width: '98%',
        height: '310px'
    },
    profileCover: {
        display: 'block',
        marginLeft: '625px',
        marginRight: 'auto',
        paddingTop: '15px',
        paddingBottom: '5px',
        width: '160px',
        height: '180px',
        cursor: 'pointer',
    },
    userName: {
        color: 'white',
        textAlign: 'center',
        fontSize: '22pt',
        marginBottom: '5px',
        marginTop: '5px'
    },
    joinDate: {
        color: 'white',
        textAlign: 'center',
        fontSize: '12pt',
        marginBottom: '5px',
        marginTop: '10px'
    },
    reviewDetails: {
        color: 'white',
    },
    myReviews: {
        backgroundColor: '#16161A',
        border: '0px',
        fontSize: '13pt',
        color: 'white',
        float: 'right',
        marginTop: '10px',
        marginRight: '10px',
        cursor: 'pointer',
        '&:hover': {
            textDecoration: 'underline',
        },
    },
    recentReview: {
        marginTop: '10px',
        backgroundColor: '#16161A',
        display: 'block',
        marginLeft: 'auto',
        marginRight: 'auto',
        width: '98%',
        height: '310px'
    },
    container2: {
        width: '98%',
        backgroundColor: '#16161A',
        rowGap: '5px',
        margin: '15px',
    },
    reviewCard: {
        backgroundColor: '#0B0C0D',
        height: '275px',
        width: '85.5%',
        float: 'right',
        marginBottom: '15px',
        marginTop: '8px',
        marginRight: '8px',
    },
    userRating: {
        marginRight: '30px',
    },
    reviewCard2: {
        backgroundColor: '#16161A',
        padding: '20px',
        color: 'white',
        width: 'auto',
        height: '100%',
        fontSize: '15pt',
    },
    cover: {
        width: '180px',
        height: '280px',
        position: 'relative',
        backgroundColor: '#16161A',
        marginTop: '15px',
    },
    reviewDateCSS: {
        marginTop: '85px',
        fontSize: '10pt',
        posotion: 'absolute',
        marginLeft: '3px',
    },
    reviewTextCSS: {
        marginBottom: '0px',
    },
    yourReviewCSS: {
        marginLeft: '3px'
    },
    reviewCard3: {
        color: 'white',
        margin: '10px',
        width: '102%',
        height: '58%',
        float: 'left',
        marginLeft: '0px',
        backgroundColor: '#0B0C0D',
        padding: '5px',
        fontSize: '13pt'
    },
}));

export default function Account() {
  const classes = useStyles();   //here the classes is assigned to get access to the styling
  const [userDetails, setUserDetails] = useState([]);
  const [userReviews, setUserReviews] = useState([]);     //using useState hook to give states to the components when rendering
  const [movieDetails, setMovieDetails] = useState([]);
  const [reviewCount, setReviewCount] = useState(0);
  const [myReviews] = useState([]);
  let { id } = useParams();      //useParams hook gives us the right routing into the page using the user id
  const userID=localStorage.getItem('userid')          //localStorage provides the currently logged in users's id and authorisation token
  const token=localStorage.getItem('authorization')
  useEffect(()=> {
			fetch('https://arthur-laura-5000.codio-box.uk/myaccount', { method: "POST", credentials: 'include', headers: {'Content-type': 'application/json','Authorization': token}, body: JSON.stringify(id) }).then(response =>response.json().then(data => {setUserDetails(data.userDetails[0]);setMovieDetails(data.movieDetails[0]);setReviewCount(data.userReviews.length);setUserReviews(data.userReviews.pop());}));
  },[]);    //fetching the data from the API URL, using the right method, credentials and authorisation token
    console.log(userDetails)
    console.log(movieDetails)
    console.log(userReviews)
  if (userID==id){    //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 (
          <React.Fragment>
          {/*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 user details therfore using userDetails.*columnName* to show the user information*/}
            <div className={classes.container}>
                <div className = {classes.accountInfo}>
                  <img className={classes.profileCover} src={'../profilePicture.png'} alt=" " />   
                  <p className = {classes.userName}>{userDetails.userName}</p>
                  <p className = {classes.joinDate}>Member since: {userDetails.joinDate}</p>
                  <p className = {classes.joinDate}>Reviews: {reviewCount}</p>
                </div>
            </div>
            <p className = {classes.title}>Most recent review</p>
          {/*new div is started below to split up the content of the page into separate boxes
            * this container shows movie and review details which is why both movideDetails and userReviews are used to display data
            * the review is for the most recent review on the user's account */}
            <div className = {classes.recentReview}>
                <div className={classes.container2}>
                 <div className={classes.movieCover}>
                     <img className={classes.cover} src={'../'+movieDetails.coverPhoto} alt=" " onClick={() => {window.location.href='/movies/'+movieDetails.id}}/>
                 <div className={classes.reviewCard}>
                     <div className={classes.reviewCard2}>
                         <p style={{ textAlign: 'left', width: '100px', display: 'inline-block'}}>Your rating</p>
                         <p style={{ textAlign: 'left', marginLeft: '30px',width: '150px', display: 'inline-block'}}>Average rating</p>
                         <br></br>
                         <Rating rating={userReviews.rating} maxRating={5} disabled icon='ui large star rating' />
                         <Rating rating={movieDetails.rating} style={{ marginLeft: '40px' }}maxRating={5} disabled icon='ui large star rating' />
                         <p style={{ textAlign: 'left'}}> </p> 
                         <p className={classes.reviewTextCSS} style={{ textAlign: 'left'}}>Your review:</p> 
                            <div className={classes.reviewCard3}>
                                <p className={classes.yourReviewCSS} style={{ textAlign: 'left' }}>{userReviews.review}</p>
                                <p className={classes.reviewDateCSS}style={{ textAlign: 'left' }}>Date: {userReviews.reviewDate}</p>
                            </div>
                        </div>
                 </div>
                </div>
                </div>
            </div>
          </React.Fragment>
      );
    }else{       //no user is logged in, redirect to login page
        {window.location.href='/'}
    }
}