mvp

db/data/movies.js

@@ -222,7 +222,7 @@ export default [
   title: 'He\'s All That',
   director: 'Mark Waters',
   image: 'https://m.media-amazon.com/images/M/MV5BYzM3NmYyMTItZWY5My00MTQzLWFmMzEtOTc2ZjRkMDJkYWM3XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg',
-  title: 'https://www.youtube.com/watch?v=XqTPaRz8Nx8',
+  trailer: 'https://www.youtube.com/watch?v=XqTPaRz8Nx8',
   releaseYear: 2021,
   description: "An influencer who specializes in makeovers bets that she can transform an unpopular classmate into a prom king.",
   cast: ['Addison Rae', 'Tanner Bauchanan', 'Pet'],

front-end/src/components/AddARatingLike.js

@@ -1,21 +1,56 @@
 import axios from 'axios'
 import * as React from 'react' 
+import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import { getAxiosRequestConfig, deleteLikes } from '../helpers/api'
 import Button from 'react-bootstrap/Button'
+import { getAxiosRequestConfig, deleteLikes } from '../helpers/api'
+import { getToken } from '../helpers/auth'
 
 const AddARatingLike = ({
-  comment, 
-  setComments
+  setComments,
+  commentId, 
+  commentLikesArray
 }) => {
 
   const { id } = useParams()
   const commentLikes = {
     like: 1
   }
-
+
+  const [ userId, setUserId ] = useState('')
+  const [ userLike, setUserLike ] = useState(false)
+
+  ////////////////check whether a user has liked a comment.///////////////////
+  useEffect(() => {
+    async function getProfile() {
+      const config = {
+        method: 'get',
+        url: '/api/profile',
+        headers: { 
+          Authorization: `${getToken()}`
+        }
+      }
+      const response = await axios(config)
+      setUserId(response.data.id)
+      console.log(response.data)
+    }
+    getProfile()
+  }, [])
+
+  useEffect(() => {
+    for (let i = 0; i < commentLikesArray.length; i++) {
+      const ownerId = toString(commentLikesArray[i].owner)
+      if (ownerId === userId){
+        setUserLike(true)
+      } else {
+        setUserLike(false)
+      }
+    }
+  }, [])
+
+  ///////////////////////////////handle the like.///////////////////
   const handleLike = async () => {
-    const config = getAxiosRequestConfig(`/movies/${id}/rating/${comment}/commentLikes`, commentLikes)
+    const config = getAxiosRequestConfig(`/movies/${id}/rating/${commentId}/commentLikes`, commentLikes)
     console.log(commentLikes)
     try {
       const { data } = await axios(config)
@@ -27,6 +62,7 @@ const AddARatingLike = ({
     }
   }
 
+  ///////////////////////////////handle the dislike.///////////////////
   async function fetchMovie() {
     const config = {
       method: 'get',
@@ -36,11 +72,11 @@ const AddARatingLike = ({
     const response = await axios(config)
     console.log(response.data.rating)
     setComments(response.data.rating)
-    console.log('comments', comment)
+    console.log('comments', commentId)
   }
 
   const handleDislike = async () => {
-    const config = deleteLikes(`/movies/${id}/rating/${comment}/commentLikes`)
+    const config = deleteLikes(`/movies/${id}/rating/${commentId}/commentLikes`)
     console.log(commentLikes)
     try {
       await axios(config)
@@ -52,47 +88,16 @@ const AddARatingLike = ({
 
   return (
     <>
-      <Button onClick={handleLike} className="button">
-        Like
-      </Button>
-      <Button onClick={handleDislike} className="button">
-        Unlike
-      </Button>
+      { userLike === true ?
+        (<Button onClick={handleDislike} className="button">
+          Unlike
+        </Button>) :
+        (<Button onClick={handleLike} className="button">
+          Like
+        </Button>)
+      }
     </>
   )
 }
 
-export default AddARatingLike
-
-const [ userId, setUserId ] = useState('')
-
-useEffect(() => {
-  async function getProfile() {
-    const config = {
-      method: 'get',
-      url: '/api/profile',
-      headers: { 
-        Authorization: `${getToken()}`
-      }
-    }
-    const response = await axios(config)
-    setUserData(response.data.id)
-    console.log(response.data)
-  }
-  getProfile()
-}, [])
-
-// const likesArray = comment.commentLikes
-// for(let i = 0; i < likesArray.length; i++) {
-//   const ownerId = toString(likesArray[i].owner) 
-//   const userId = toString(currentUser._id)
-//   if(ownerId === userId){
-//   <Button onClick={handleDislike} className="button">
-//   Unlike
-//   </Button>
-//   } else {
-//   <Button onClick={handleLike} className="button">
-//   Like
-//   </Button>
-//   }
-// }
+export default AddARatingLike

front-end/src/components/MovieCard.js

@@ -7,14 +7,9 @@ const MovieCard = ({
   _id,
   title, 
   image, 
-  averageRating,
-  owner,
-  User,
-  user
+  averageRating
 }) => {
-  console.log(owner.username)
-  console.log(User)
-  console.log(user)
+
   return (
     <div>
       <Card style={{ width: '18rem' }} className="movie-card">
@@ -25,9 +20,9 @@ const MovieCard = ({
           <Card.Text className="card-text">
             {averageRating}
           </Card.Text>
-          <Card.Text className="card-user">
-            <p>Added by {owner?.username}</p>
-          </Card.Text>
+          {/* <Card.Text className="card-user">
+            <p>Added by {user?.username}</p>
+          </Card.Text> */}
           <Button className="button">
             <Link className="link" to={`/movies/${_id}`} >More Info</Link>
           </Button>

front-end/src/pages/AddARatingLike.js

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'
 import { getAxiosRequestConfig } from '../helpers/api'
 import Form from 'react-bootstrap/Form'
 
+
 const AddARatingLike = () => {
   const [ like, setLike ] = useState('')
   const [errorInfo, setErrorInfo] = useState({})

front-end/src/pages/MovieShow.js

@@ -85,7 +85,7 @@ const MovieShow = ({ isLoggedIn }) => {
                       <p>{comment.owner.username}: {comment.text}  {comment.timestamps}</p>
                       <p>Likes: {comment.commentLikes.length} </p>
                     </div>
-                    <AddARatingLike setComments={setComments} comment={comment._id}/>
+                    <AddARatingLike setComments={setComments} commentId={comment._id} commentLikesArray={comment.commentLikes}/>
                   </div>
                   : false
               ))}

front-end/src/pages/Profile.js

@@ -12,10 +12,10 @@ const Profile = () => {
     username: '',
     email: '',
     gender: '',
-    favouriteFilm: '',
+    favoriteFilm: '',
     image: ''
   })
-
+  
 
   useEffect(() => {
     async function getProfile() {
@@ -49,14 +49,14 @@ const Profile = () => {
               <p className="card-text">Gender: {userData.gender}</p>
             </Card.Text>
             <Card.Text>
-              <p className="card-text">Favourite Films: {userData.favouriteFilm}</p>
+              <p className="card-text">Favorite Films: {userData.favoriteFilm}</p>
             </Card.Text>
           </Card.Body>
         </Card>
       </div>
-      <div className="created-movies-div">
+      <div className="movie-list-div" id="created-movies-div">
         <p className="movies-add-by">Your Movies</p>
-        <ul id="profile-movie-list" className="movie-list">
+        <ul className="movie-list" id="profile-movie-list">
           {moviesAdded.map((m) => (
             <li key={m._id}>
               <MovieCard {...m} />

front-end/src/pages/SearchBar.js

@@ -40,7 +40,7 @@ const SearchBar = () => {
 
     const filmObject = info.filter(item => item.title === search)
     console.log('Film Object', filmObject)
-    if (filmObject[0]._id === null || undefined) return
+    if (filmObject[0]._id === null || filmObject[0]._id === undefined) return
     const filmObjectId = (filmObject[0]._id)
     console.log('Film Object Id', filmObjectId)
     navigate(`/movies/${filmObjectId}`)

front-end/src/styles/header.scss

@@ -38,15 +38,14 @@
         border: 2px solid $mid-dark-brown;
         border-radius: 5px 0 0 5px;
         background-color: $dark-butter-yellow;
-        font-size: 0.5em;
-        border: 2px solid $mid-dark-brown;
+        font-size: 0.7em;
         border-radius: 5px 0 0 5px;
         background-color: $dark-butter-yellow;
         text-align: center;
       }
       #toast {
         height: 100%;
-        font-size: 0.5em;
+        font-size: 0.8em;
         align-self: center;
         color: $mid-dark-brown;
         border: 2px solid $mid-dark-brown;

front-end/src/styles/movieShow.scss

@@ -4,12 +4,14 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: 0.5%;
+  gap: 5%;
   width: 100vw;
   height: 100vh;
   padding-top: 1%;
   .movie-show-img-div {
-    width: 50%;
+    display: flex;
+    justify-content: center;
+    width: 35%;
     .video {
       width: 100%;
       border: 5px solid rgb(250, 241, 190);

front-end/src/styles/profile.scss

@@ -17,8 +17,6 @@
       .card-body {
         text-align: center;
         .card-title {
-          .card-title {
-          }
           .username {
             font-size: 3rem;
             color: $mid-dark-brown;
@@ -27,7 +25,7 @@
       }
     }
   }
-  .created-movies-div {
+  #created-movies-div {
     width: 100%;
     height: 80vh;
     overflow: scroll;
@@ -41,6 +39,9 @@
     .movie-list {
       width: 100%;
       height: 100%;
+      li {
+        list-style: none;
+      }
     }
   }
 }
@@ -72,8 +73,6 @@
       .movies-add-by {
         font-size: 1rem;
       }
-      .movie-list {
-      }
     }
   }
 }
@@ -82,30 +81,30 @@
   .profile-container {
     .personal-details {
       .profile-card {
-        .card-image {
-        }
+        // .card-image {
+        // }
         .card-body {
           .card-title {
             text-align: center;
             margin: auto;
-            .card-text {
-            }
+            // .card-text {
+            // }
             .username {
               text-align: center;
             }
           }
         }
       }
     }
-    .created-movies-div {
-      .movies-add-by {
-      }
-      .movie-list {
-      }
-    }
+    //   .created-movies-div {
+    //     .movies-add-by {
+    //     }
+    //     .movie-list {
+    //     }
+    //   }
+    // }
   }
-}
 
-// .personal-details {
-//   height: 100%;
-// }
+  // .personal-details {
+  //   height: 100%;
+}