Merge branch 'main' of https://github.com/SchoolOfCode/final-project-…

…reelstack

my-next-app/src/app/globals.css

@@ -2,7 +2,8 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   background: linear-gradient(150deg, #001523, #003356, #001523 90%);
   color: #d7dae3;
 }
@@ -30,7 +31,7 @@ p {
 hr {
   border: none;
   height: 3px;
-  background: linear-gradient(90deg, #ff6d00, #ff9e00 );
+  background: linear-gradient(90deg, #ff6d00, #ff9e00);
   margin-top: 2rem;
-  width: 95%
-}
+  width: 95%;
+}

my-next-app/src/app/moviepage/page.jsx

@@ -20,7 +20,7 @@ export default function MoviePage() {
       .then((response) => response.json())
       .then((data) => {
         setMovieData(data);
-        //console.log(data);
+        console.log(data);
       })
       .catch((err) => console.error(err));
   }, [movieId]);
@@ -37,7 +37,7 @@ export default function MoviePage() {
       .then((response) => response.json())
       .then((data) => {
         setReviewData(data);
-        //console.log(data);
+        console.log(data);
       })
       .catch((err) => console.error(err));
   }, [movieId]);
@@ -62,18 +62,29 @@ export default function MoviePage() {
       ) : (
         <p>Movie not found</p>
       )}
-      <h2 className={styles.text}>Reviews</h2>
-      {reviewData && reviewData.results && reviewData.results.length > 0 ? (
-        reviewData.results.map((review) => (
-          <div className={styles.text} key={review.id}>
-            <h3>{review.author}</h3>
-            <h3>Rating: {review.author_details?.rating ?? 'No rating'}</h3>
-            <p>{review.content}</p>
-          </div>
-        ))
-      ) : (
-        <p className={styles.text}>No reviews found for this movie</p>
-      )}
+      <div className={styles.wrapperReview}>
+        <h2 className={styles.text}>Reviews</h2>
+        <div className={styles.reviewScroll}>
+          {reviewData && reviewData.results && reviewData.results.length > 0 ? (
+            reviewData.results.map((review) => (
+              <div className={styles.reviewCard} key={review.id}>
+                <h3>{review.author}</h3>
+                <h3>Rating: {review.author_details?.rating ?? 'No rating'}</h3>
+                <p>
+                  {review.content.split('\n').map((paragraph, index) => (
+                    <React.Fragment key={index}>
+                      {paragraph}
+                      <br />
+                    </React.Fragment>
+                  ))}
+                </p>
+              </div>
+            ))
+          ) : (
+            <p className={styles.text}>No reviews found for this movie</p>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

my-next-app/src/app/moviepage/page.module.css

@@ -4,3 +4,50 @@
 .text {
   color: #d7dae3;
 }
+
+.wrapperReview {
+  margin-top: 2rem;
+  background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+  display:flex;
+  flex-direction: column;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  white-space: nowrap;
+  /*scroll-snap-type: x mandatory;*/
+}
+.reviewScroll{
+  display: flex;
+  padding: 10px;
+  overflow-x: auto;
+  gap: 10px;
+
+}
+.reviewCard {
+  min-width: 300px;
+  max-width: 300px;
+  height: 400px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.reviewCard::-webkit-scrollbar {
+  display: none;
+}
+.reviewCard h3 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.reviewCard p {
+  flex-grow: 1;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+

my-next-app/src/app/movies/[id]/page.jsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import styles from './page.module.css';
+
+export default function MovieDetail() {
+  const params = useParams(); // Access route parameters
+  const { id } = params || {}; // Destructure 'id' safely
+
+  const [movie, setMovie] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!id) return; // Wait until 'id' is available
+
+    const fetchMovieDetail = async () => {
+      try {
+        const response = await fetch(`https://api.themoviedb.org/3/movie/${id}?language=en-US`, {
+          method: 'GET',
+          headers: {
+            accept: 'application/json',
+            Authorization:
+            'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OTM5NTE2MmJjNDA5MzQ2MTMyNmM5NzUyZTBkZjMzZiIsIm5iZiI6MTcyNzI1NjM4Ny41OTcyMzYsInN1YiI6IjY2Y2RkOWM2NmZkMmYwN2FiNzlkYjE3MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.n6Dhal1cf-trWSV3ewyYHw9HMouvYGBgv-pqFu3N2B0',
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setMovie(data);
+      } catch (err) {
+        console.error('Error fetching movie details:', err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMovieDetail();
+  }, [id]);
+
+  if (loading) return <p className={styles.p2}>Loading...</p>;
+  if (error) return <p className={styles.p2}>Error: {error}</p>;
+  if (!movie) return <p className={styles.p2}>No movie data available.</p>;
+
+  return (
+    <div className={styles.container2}>
+      <h1 className={styles.steph1}>{movie.title}</h1>
+      <img
+        src={movie.poster_path ? `https://image.tmdb.org/t/p/w300${movie.poster_path}` : '/no-image-available.png'}
+        alt={movie.title}
+        className={styles.posteridsection}
+      />
+      <p className={styles.p2}><strong className={styles.strongidsection}>Release Date:</strong> {movie.release_date}</p>
+      <p className={styles.p2}><strong className={styles.strongidsection}>Rating:</strong> {movie.vote_average} ⭐️</p>
+      <p className={styles.p2}><strong className={styles.strongidsection}>Overview:</strong> {movie.overview}</p>
+      {/* Add more details as desired */}
+    </div>
+  );
+}

my-next-app/src/app/movies/[id]/page.module.css

@@ -0,0 +1,34 @@
+.container2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 450px;
+    margin: 0 auto;
+  }
+
+  .posteridsection {
+    width: 100%;
+    max-width: 300px;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .steph1 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .p2 {
+    font-size: 1rem;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .strongidsection {
+    color: #ff6d00;
+  }

my-next-app/src/app/page.js

@@ -1,13 +1,14 @@
 'use client';
 
 import React from 'react';
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 import styles from './page.module.css';
 import reviews from './mock_db/reviews.json';
 import moviesjson from './mock_db/movies.json';
 
 export default function Homepage() {
 
+
   const options = {
     method: 'GET',
     headers: {
@@ -17,13 +18,13 @@ export default function Homepage() {
   };
     const [movies, setMovies] = useState([]);
 
+
     useEffect(() => {
       fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', options)
         .then(response => response.json())
         .then(data => setMovies(data.results))
         .catch(err => console.error(err));
-    }, []);
-
+    }, [];
     const StarIcon = () => (
       <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#ff6d00">
         <path d="m305-704 112-145q12-16 28.5-23.5T480-880q18 0 34.5 7.5T543-849l112 145 170 57q26 8 41 29.5t15 47.5q0 12-3.5 24T866-523L756-367l4 164q1 35-23 59t-56 24q-2 0-22-3l-179-50-179 50q-5 2-11 2.5t-11 .5q-32 0-56-24t-23-59l4-165L95-523q-8-11-11.5-23T80-570q0-25 14.5-46.5T135-647l170-57Zm49 69-194 64 124 179-4 191 200-55 200 56-4-192 124-177-194-66-126-165-126 165Zm126 135Z"/>
@@ -36,20 +37,22 @@ export default function Homepage() {
         stars.push(<StarIcon key={i} className={styles.star} />);
       }
       return stars;
-    };
-
+}
   return (
     <>
       <hr className={styles.hr}></hr>
       <section className={styles.heroSection}>
         <h1>Welcome to Reel Magic, the home of movie reviews you can trust.</h1>
-        <h2>Join the Reel Revolution!</h2>
+        <div className={styles.taglineContainer}>
+          <h2 className={styles.tagline}>Join the Reel Revolution!</h2>
+        </div>
       </section>
       <hr className={styles.hr}></hr>
 
       <section>
         <h3>Popular Movies</h3>
         <div className={styles.carousel}>
+
           {Array.isArray(movies) && movies.map((movie, movie_id) => {
             return (
               <div key={movie_id} className={styles.movieBox}>
@@ -62,18 +65,19 @@ export default function Homepage() {
           </div>
         </div>
              );
+
           })}
-
         </div>
       </section>
       <hr className={styles.hr}></hr>
       <section className={styles.reviewsSection}>
-      <h3>Check out the hottest reviews from the community...</h3>
+        <h3>Check out the hottest reviews from the community...</h3>
         <div className={styles.reviewsContainer}>
           {reviews.map((review, review_id) => {
             return (
               <div key={review_id} className={styles.reviewCard}>
                 <h4 className={styles.reviewerName}>{review.reviewer_name}</h4>
+
                 {moviesjson.map((movie, movie_id) => {
                   return movie.id === review.movie_id && <h5 className={styles.movieTitle} key={movie_id}>{movie.title}</h5>;
                 })}
@@ -82,9 +86,7 @@ export default function Homepage() {
                   <span key={i}><StarIcon /></span>
                 ))}
                 </div>
-                <p>
-                  {review.review}
-                </p>
+                <p>{review.review}</p>
                 <div className={styles.voteContainer}>
                   <span>
                     {review.weighting > 0 ? review.weighting : 0}{' '}

my-next-app/src/app/page.module.css

@@ -56,7 +56,9 @@
   padding: 1rem;
 }
 
-.reviewerName, .reviewCard h5, .reviewCard p {
+.reviewerName,
+.reviewCard h5,
+.reviewCard p {
   margin: 0;
 }
 
@@ -67,14 +69,32 @@
 }
 
 .starsWrapper span {
-margin-right: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-
-
 /* .voteContainer {
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin-top: 1em;
 } */
+
+.taglineContainer {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.tagline {
+  display: inline-block;
+  padding-left: 100%;
+  animation: marquee 15s linear infinite;
+}
+
+@keyframes marquee {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(-100%, 0);
+  }
+}

my-next-app/src/components/Header/Header.jsx

@@ -16,11 +16,9 @@ export default function Header() {
 
   return (
     <header className={`${styles.header} ${isSearchActive ? styles.searchActiveHeader : ''}`}>
-      <h1 className={`${styles.title} ${isSearchActive ? styles.hidden : ''}`}>
-        📽Reel Magic📽
-      </h1>
+      <h1 className={`${styles.title} ${isSearchActive ? styles.hidden : ''}`}>📽Reel Magic📽</h1>
       <button
-        aria-label="Search"
+        aria-label="Open search"
         className={`${styles.searchButton} ${isSearchActive ? styles.searchActive : ''}`}
         onClick={!isSearchActive ? handleSearchClick : undefined}
       >