working on comments

kocsisa2 · Nov 27, 2021 · 3d67617616f5155076b85770b4482fb5148f22f9 · 3d67617
1 parent 6565475
commit 3d67617616f5155076b85770b4482fb5148f22f9
Show file tree

Hide file tree

Showing 23 changed files with 328 additions and 487 deletions.
diff --git a/api/database.db b/api/database.db
diff --git a/api/databaseBACKUP.db b/api/databaseBACKUP.db
diff --git a/api/databaseBACKUPNEW2.db → api/databaseBACKUP22-11.db b/api/databaseBACKUPNEW2.db → api/databaseBACKUP22-11.db
diff --git a/api/databaseBACKUPNEW.db b/api/databaseBACKUPNEW.db
diff --git a/api/models.py b/api/models.py
@@ -5,7 +5,7 @@ class MOVIE_DETAILS(db.Model):
     title = db.Column(db.String(50), nullable=False)
     release = db.Column(db.Integer, nullable=False)
     description = db.Column(db.String(500), nullable=False)
-    rating = db.Column(db.Integer, nullable=False)
+    rating = db.Column(db.Integer, nullable=False)                                                  #this class imports the MOVIE_DETAILS columns from the database
     movieLength = db.Column(db.String(50), nullable=False)
     category = db.Column(db.String(50), nullable=False)
     coverPhoto = db.Column(db.String(100), nullable=False)
@@ -15,12 +15,12 @@ class MOVIE_DETAILS(db.Model):
 class USER_DETAILS(db.Model):
     id = db.Column(db.Integer, primary_key=True, unique=True, nullable=False, autoincrement=True)
     userName = db.Column(db.String(64), nullable=False)
-    userPassword = db.Column(db.String(64), nullable=False)
+    userPassword = db.Column(db.String(64), nullable=False)                                         #this class imports the USER_DETAILS columns from the database
     joinDate = db.Column(db.String(64), nullable=False)
 
 class REVIEW_DETAILS(db.Model):
     reviewId = db.Column(db.Integer, primary_key=True, unique=True, nullable=False, autoincrement=True)
-    movieId = db.Column(db.Integer, db.ForeignKey('MOVIE_DETAILS.id'), nullable=False)
+    movieId = db.Column(db.Integer, db.ForeignKey('MOVIE_DETAILS.id'), nullable=False)                  #this class imports the REVIEW_DETAILS columns from the database
     userId = db.Column(db.Integer, db.ForeignKey('USER_DETAILS.id'), nullable=False)
     rating = db.Column(db.Integer, nullable=False)
     review = db.Column(db.String(500), nullable=False)

diff --git a/api/views.py b/api/views.py
diff --git a/flask-react/src/components/Account.js b/flask-react/src/components/Account.js
@@ -1,25 +1,10 @@
 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 { makeStyles } from '@material-ui/core/styles';
+                                                                    //essential imports
+import { Rating  } from "semantic-ui-react";
 import { useParams } from "react-router-dom";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({       //page styling
     title: {
         color: 'white',
         height: '50px',
@@ -59,8 +44,9 @@ const useStyles = makeStyles((theme) => ({
     joinDate: {
         color: 'white',
         textAlign: 'center',
-        fontSize: '10pt',
-        marginTop: '0px'
+        fontSize: '12pt',
+        marginBottom: '5px',
+        marginTop: '10px'
     },
     reviewDetails: {
         color: 'white',
@@ -143,43 +129,42 @@ const useStyles = makeStyles((theme) => ({
         padding: '5px',
         fontSize: '13pt'
     },
-    joinDate: {
-        fontSize: '12pt',
-        color: 'white',
-        textAlign: 'center',
-        marginBottom: '5px',
-        marginTop: '10px'
-    }
 }));
 
 export default function Account() {
-  const classes = useStyles();
+  const classes = useStyles();   //here the classes is assigned to get access to the styling
   const [userDetails, setUserDetails] = useState([]);
-  const [userReviews, setUserReviews] = 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();
-  const userID=localStorage.getItem('userid')
+  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){
+  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=" " />
+                  <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}>
@@ -204,7 +189,7 @@ export default function Account() {
             </div>
           </React.Fragment>
       );
-    }else{
+    }else{       //no user is logged in, redirect to login page
         {window.location.href='/'}
     }
 }
diff --git a/flask-react/src/components/AddReview.js b/flask-react/src/components/AddReview.js
@@ -1,26 +1,10 @@
 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 { 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) => ({
+const useStyles = makeStyles((theme) => ({      //page styling
     title: {
         color: 'white',
         fontSize: '15pt',
@@ -172,42 +156,46 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function AddReview() {
-    const classes = useStyles();
+    const classes = useStyles();      //here the classes is assigned to get access to the styling
     const [movies, setMovies] = useState([]);
-    const [userRating,setUserRating] = useState("1");
+    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');
+    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')
+    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];
+              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',
+                        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 => {
+                    }).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){
+  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=" " />
@@ -230,7 +218,9 @@ export default function AddReview() {
                  </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>
@@ -242,7 +232,7 @@ export default function AddReview() {
 		</div>
         </div>
   );
- }else{
+ }else{    //no user is logged in, redirect to login page
      {window.location.href='/login'}
  }
 }
diff --git a/flask-react/src/components/AllMovies.js b/flask-react/src/components/AllMovies.js
@@ -1,24 +1,8 @@
 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 { Movies } from './Movies.js';
-import { List, Header, Rating  } from "semantic-ui-react";
+import { makeStyles } from '@material-ui/core/styles';   //essential imports
+import { Rating  } from "semantic-ui-react";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({   //page styling
     title: {
         color: 'white',
         height: '50px',
@@ -77,16 +61,20 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function AllMovies() {
-    const classes = useStyles();
-    const [movies, setMovies] = useState([]);
+    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
     useEffect(()=> {
 			fetch('https://arthur-laura-5000.codio-box.uk/movies', { credentials: 'include' }).then(response =>response.json().then(data => {setMovies(data.movies);
 			})
 		);
-	},[]);
+	},[]);     //fetching the data from the API URL
     console.log(movies)
   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 using a loop without the need to be logged in
+          * to show movie details the movies.*columnName* and uses a hover state so that the data about each movie is hidden under the hover interaction */}
            <p className = {classes.title}>All movies</p>
 			{movies.map(movie => {
 				return (

diff --git a/flask-react/src/components/Categories.js b/flask-react/src/components/Categories.js
@@ -1,25 +1,9 @@
 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 { Movies } from './Movies.js';
-import { List, Header, Rating  } from "semantic-ui-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) => ({
+const useStyles = makeStyles((theme) => ({    //page styling
     title: {
         color: 'white',
         height: '50px',
@@ -39,18 +23,18 @@ const useStyles = makeStyles((theme) => ({
         rowGap: '5px',
     },
     cover: {
-        width:'220px',
-        height:'320px',
+        width:'190px',
+        height:'310px',
         position: 'relative',
     },
     movieCard: {
         marginTop: '0px',
         marginBottom: '10px',
-        marginRight: '10px',
-        marginLeft: '10px',
+        marginRight: '7.5px',
+        marginLeft: '7.5px',
         float: 'left',
-        width: '220px',
-        height: '320px',
+        width: '190px',
+        height: '310px',
         position: 'relative',
         '&:hover>div': {
             opacity:1,
@@ -78,16 +62,20 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function Categories() {
-    const classes = useStyles();
-    const [movies, setMovies] = useState([]);
-    let { category } = useParams();
+    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 (