new features added, basically 99% done

flask-react/src/App.js

@@ -13,6 +13,8 @@ import AddReview from './components/AddReview.js';
 import MovieCoverPage from './components/MoviePage.js';
 import Categories from './components/Categories.js';
 import Account from './components/Account.js';
+import Recommended from './components/Recommended.js';
+import SearchResults from './components/SearchResults.js';
 
 function App() { 
     return (
@@ -24,8 +26,10 @@ function App() {
                 <Route exact path='/myreviews' component={ MyReviews } />
                 <Route exact path="/login" component={ Login } />
                 <Route exact path="/register" component={ Register } />
+                <Route exact path="/recommended" component={ Recommended } />
                 <Route exact path="/account/:id" component={ Account } />
                 <Route exact path="/addreview/:id" component={ AddReview } />
+                <Route exact path="/search/:searchTerm" component={ SearchResults } />
                 <Route exact path="/categories/:category" component={ Categories } />
                 <Route exact path="/movies/:id" component={ MovieCoverPage } />
             </Switch>

flask-react/src/components/Account.js

@@ -157,19 +157,18 @@ export default function Account() {
   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]);setUserReviews(data.userReviews[0]);setMovieDetails(data.movieDetails[0]);}));
+			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)
-  const reviewCount = myReviews.length;
-    console.log(reviewCount)
-  if (userID!==null){
+  if (userID==id){
       return (
           <React.Fragment>
             <div className={classes.container}>
@@ -206,6 +205,6 @@ export default function Account() {
           </React.Fragment>
       );
     }else{
-        {window.location.href='/login'}
+        {window.location.href='/'}
     }
 }

flask-react/src/components/AddReview.js

@@ -163,7 +163,11 @@ const useStyles = makeStyles((theme) => ({
         position: 'fixed',
         right: '40px',
         bottom: '40px',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        '&:hover': {
+            transform: 'scale(1.8)',
+            transition:'transform .25s ease-in-out',
+        },
     }
 }));
 
@@ -174,7 +178,7 @@ export default function AddReview() {
     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'); //January is 0!
+    var mm = String(today.getMonth() + 1).padStart(2, '0');
     var yyyy = today.getFullYear();
     today = dd + '/' + mm + '/' + yyyy;
     const userID=localStorage.getItem('userid')

flask-react/src/components/MoviesRecommended.js

@@ -0,0 +1,78 @@
+import React, {useEffect,useState} from 'react';
+import NavBar from './NavBar.js';
+import { List, Header, Rating  } from "semantic-ui-react";
+import { fade, makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    title: {
+        color: 'red',
+        fontSize: '12pt',
+        position: 'relative',
+        top: '0px',
+        textAlign: 'center',
+        letterSpacing: '3px',
+    },
+    container: {
+        width: 'auto',
+        height: '300px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginLeft: '2.5px',
+        rowGap: '5px',
+    },
+    cover: {
+        width:'200px',
+        height:'280px',
+        position: 'relative',
+    },
+    movieCard: {
+        marginBottom: '40px',
+        marginRight: '2.5px',
+        marginLeft: '2.5px',
+        width: '200px',
+        height: '280px',
+        position: 'relative',
+        '&:hover>div': {
+            opacity:1,
+            transition:'opacity .25s ease-in-out',
+        },
+        '&:hover>img': {
+            opacity:0.1,
+            transition:'opacity .25s ease-in-out',
+        }, 
+    },
+    movieCardHover: {
+        textAlign: 'justify',
+        position: 'absolute',
+        top: '3px',
+        color: 'white',
+        margin: '0px 10px',
+        fontSize: '10pt',
+        opacity: '0',
+        cursor:'pointer'
+    }
+}));
+
+export const MoviesRecommended = ({ movies }) => {
+    const classes = useStyles();
+	return (
+		<div className={classes.container}>
+			{movies.map(movie => {
+				return (
+					<div className={classes.movieCard} onClick={() => {window.location.href='/movies/'+movie.id}}>
+                        <img className={classes.cover} src={movie.coverPhoto} alt=" " />
+                        <div className={classes.movieCardHover}>
+                            <Rating rating={movie.rating} maxRating={5} disabled icon='ui massive star rating' />
+                            <p style={{ textAlign: 'center' }}>Length: {movie.movieLength}</p>
+                            <p style={{ textAlign: 'center' }}>Release: {movie.release}</p>
+                            <p style={{ textAlign: 'center' }}>Category: {movie.category}</p>
+                            <p>{movie.description}</p>
+                        </div>
+					</div>
+
+					)
+				})}
+		</div>
+
+	)
+}

flask-react/src/components/NavBar.js

@@ -100,7 +100,11 @@ const useStyles = makeStyles((theme) => ({
         marginTop: '20px',
         fontSize: '15pt',
         textAlign: 'center',
-        cursor:'pointer'
+        cursor:'pointer',
+        '&:hover': {
+            textDecoration: 'underline',
+            transition:'backgroundColor color .25s ease-in-out',
+        },
     },
     categories: {
        fontSize: '17pt',
@@ -127,37 +131,61 @@ const useStyles = makeStyles((theme) => ({
         zIndex: '1',
         top: '0'
     },
+    menuIcon: {
+        '&:hover': {
+            transform: 'scale(1.4)',
+            transition:'transform .25s ease-in-out',
+        },
+    },
+    accountIcon: {
+        '&:hover': {
+            transform: 'scale(1.4)',
+            transition:'transform .25s ease-in-out',
+        },
+    },
     sideAccountdiv: {
         width: '280px',
         height: '185px',
         backgroundColor: '#0B0C0D',
         position: 'absolute',
         right: '0',
         zIndex: '1',
-        top: '0'
+        top: '0',
     },
     accountOptions: {
         color: 'white',
         marginTop: '20px',
         fontSize: '15pt',
         textAlign: 'center',
-        cursor:'pointer'
+        cursor:'pointer',
+        '&:hover': {
+            textDecoration: 'underline',
+            transition:'textDecoration .25s ease-in-out',
+        },
     },
     closeIcon: {
         color: 'white',
         float: 'right',
         marginTop: '20px',
         marginRight: '20px',
         transform: 'scale(1.8)',
-        cursor:'pointer'
+        cursor:'pointer',
+        '&:hover': {
+            transform: 'scale(2.4)',
+            transition:'transform .15s ease-in-out',
+        },
     },
     closeIconAccount: {
         color: 'white',
         float: 'left',
         marginLeft: '20px',
         marginTop: '5px',
         transform: 'scale(1.8)',
-        cursor:'pointer'
+        cursor:'pointer',
+        '&:hover': {
+            transform: 'scale(2.4)',
+            transition:'transform .15s ease-in-out',
+        },
     },
     title: {
         '&:hover': {
@@ -298,6 +326,9 @@ export default function NavBar() {
                 input: classes.inputInput,
               }}
               inputProps={{ 'aria-label': 'search' }}
+              onKeyDown={(event) => {
+                   if (event.key === 'Enter'){
+                        window.location=('/search/'+event.target.value)}}}
             />
           </div>
           <div className={classes.sectionDesktop}>
@@ -308,7 +339,7 @@ export default function NavBar() {
               aria-haspopup="true"
               color="inherit"
             >
-              <AccountCircle
+              <AccountCircle 
                 />
             </IconButton>
           </div>
@@ -327,7 +358,6 @@ export default function NavBar() {
       </AppBar>
       {renderMobileMenu}
       {(() => {
-
         if(account){
             return(
                 <React.Fragment>
@@ -353,8 +383,8 @@ export default function NavBar() {
                                 <p className={classes.usernameStyle}>{username}
                                 <CloseIcon className={classes.closeIconAccount} onClick={() => {setAccount(account => !account)}}/>
                                 </p>
+                                <p className={classes.accountOptions} onClick={() => {window.location.href='/account/'+userID}}>Account</p>
                                 <p className={classes.accountOptions} onClick={handleLogout}>Logout</p>
-                                <p className={classes.accountOptions} onClick={() => {window.location.href='/account/'+userID}}>My account</p>
                             </React.Fragment>
                     )}
                     })()}

flask-react/src/components/Recommended.js

@@ -9,38 +9,96 @@ 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 { List, Header, Rating  } from "semantic-ui-react";
 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 { MoviesRecommended } from './MoviesRecommended.js';
 
 const useStyles = makeStyles((theme) => ({
     title: {
+        color: 'white',
+        fontSize: '25pt',
+        marginTop: '9px',
+        marginBottom: '9px',
+        marginLeft: '5px',
+        letterSpacing: '3px'
+    },
+     categoryTitle: {
         color: 'white',
         fontSize: '25pt',
         marginTop: '9px',
         marginBottom: '9px',
         marginLeft: '35px',
         letterSpacing: '3px'
+    },
+    container: {
+        height: 'auto',
+    },
+    cover: {
+        width:'220px',
+        height:'320px',
+        position: 'relative',
+    },
+    movieCard: {
+        marginTop: '0px',
+        marginBottom: '10px',
+        marginRight: '10px',
+        marginLeft: '10px',
+        float: 'left',
+        width: '220px',
+        height: '320px',
+        position: 'relative',
+        '&:hover>div': {
+            opacity:1,
+            transition:'opacity .25s ease-in-out',
+        },
+        '&:hover>img': {
+            opacity:0.1,
+            transition:'opacity .25s ease-in-out',
+        }, 
+    },
+    movieCardHover: {
+        textAlign: 'justify',
+        position: 'absolute',
+        top: '3px',
+        color: 'white',
+        margin: '0px 10px',
+        fontSize: '10pt',
+        opacity: '0',
+        cursor:'pointer'
+    },
+    movieDetails: {
+        marginTop: '5px',
+        fontSize: '12pt'
     }
 }));
 
 export default function Recommended() {
     const classes = useStyles();
-    const [movies, setMovies] = useState([]);
+    const [moviesRecommended, setMoviesRecommended] = useState([]);
+    const [copy, setCopy] = useState([]);
+    const userID=localStorage.getItem('userid')
+    const token=localStorage.getItem('authorization')
     useEffect(()=> {
-			fetch('https://arthur-laura-5000.codio-box.uk/movies', { credentials: 'include' }).then(response =>response.json().then(data => {setMovies(data.movies);
+			fetch('https://arthur-laura-5000.codio-box.uk/recommended', { method: "POST", credentials: 'include', headers: {'Content-type': 'application/json','Authorization': token}, body: JSON.stringify(userID)  }).then(response =>response.json().then(data => {setMoviesRecommended(data.moviesRecommended);
 			})
 		);
 	},[]);
-    console.log(movies)
-  return (
-      <React.Fragment>
-      <p className = {classes.title}>Recommended</p>
-      <Movies movies={}/>
-      </React.Fragment>
-  );
+    console.log(moviesRecommended)
+    return (
+        <div>
+        {moviesRecommended.map(movie => {
+            return (
+                <div className={classes.container}>
+                    <p className={classes.title}>Because you like {movie.category} movies</p>
+                    <MoviesRecommended movies={movie.movies}/>
+                </div>
+                );
+			})}
+        </div>
+    );
 }