Account.js

import React,  {useEffect, useState} from 'react';
import { Form, Button } from "semantic-ui-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 { List, Header, Rating  } from "semantic-ui-react";
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 { Reviews } from './Reviews.js';
import { useParams } from "react-router-dom";

const useStyles = makeStyles((theme) => ({
    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: '10pt',
        marginTop: '0px'
    },
    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'
    },
    joinDate: {
        fontSize: '12pt',
        color: 'white',
        textAlign: 'center',
        marginBottom: '5px',
        marginTop: '10px'
    }
}));

export default function Account() {
  const classes = useStyles();
  const [userDetails, setUserDetails] = useState([]);
  const [userReviews, setUserReviews] = useState([]);
  const [movieDetails, setMovieDetails] = useState([]);
  const [reviewCount, setReviewCount] = useState(0);
  const [myReviews] = useState([]);
  let { id } = useParams();
  const userID=localStorage.getItem('userid')
  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());}));
  },[]);
    console.log(userDetails)
    console.log(movieDetails)
    console.log(userReviews)
  if (userID==id){
      return (
          <React.Fragment>
            <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>
            <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{
        {window.location.href='/'}
    }
}