added reviews to movie detail page

components/Layout.jsx

@@ -1,11 +1,9 @@
 import Navbar from "./Navbar";
-import Auth from "./Auth";
 
 const Layout = ({ children }) => {
  return (
  <div>
  <Navbar />
- <Auth />
  {children}
  </div>
  );

components/LazyBanner.jsx

@@ -0,0 +1,10 @@
+import Image from "next/image";
+
+const LazyBanner = ({ data }) => {
+ const { src, alt, width,height } = data;
+ return ( 
+ <Image src={src} width={width} height={height} alt={alt} />
+ );
+}
+
+export default LazyBanner;

components/Reviews.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import reviewCardStyle from '@/styles/ReviewsCard.module.css';
+import Image from 'next/image';
+import { BiLinkExternal } from 'react-icons/bi'
+
+const Reviews = ({ data }) => {
+const { review, images } = data;
+const { author, author_details, content, url } = review;
+const { name, username, avatar_path } = author_details;
+const [showFullContent, setShowFullContent] = useState(false);
+
+const toggleContent = () => {
+setShowFullContent(!showFullContent);
+};
+
+return (
+ <div className={reviewCardStyle.card}>
+ <div className={reviewCardStyle.top}>
+ <div className={reviewCardStyle.name}>
+ <div className={reviewCardStyle.img}>
+ {avatar_path && (
+ <Image
+ src={`${images.base_url}/original/${avatar_path}`}
+ alt={`${name} PFP`}
+ width={100}
+ height={100}
+ />
+ )}
+ </div>
+ <div>
+ <h3>{name || author}</h3>
+ <span>@{username}</span>
+ </div>
+ </div>
+ <a href={url}><BiLinkExternal className={reviewCardStyle.link} /></a>
+ </div>
+ {showFullContent ? <p>{content}</p> : <p>{content.slice(0, 250)}...</p>}
+ {!showFullContent && <button onClick={toggleContent}>Read More</button>}
+ {showFullContent && <button onClick={toggleContent}>Read Less</button>}
+ </div>
+);
+};
+
+export default Reviews;

pages/movie/[id].jsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState,Suspense,lazy } from "react";
 import singlePageDesign from "../../styles/SinglePage.module.css";
 import {
  AiOutlineGlobal,
@@ -13,8 +13,11 @@ import Link from "next/link";
 import TrailerBox from "@/components/TrailerBox";
 import Head from "next/head";
 import { getImageDetails } from "@/libs/cacheImage";
+import Reviews from "@/components/Reviews";
 
-const SingleMoviePage = ({ data, images, castResult, crew, trailerData }) => {
+const LazyBanner = lazy(()=>import('@/components/LazyBanner'))
+
+const SingleMoviePage = ({ data, images, castResult, crew, trailerData,reviewsData }) => {
  const { user } = useContext(userContext);
  const [status, setStatus] = useState(null);
  const [trailerVisibility, setTailerVisibility] = useState(false);
@@ -41,6 +44,8 @@ const SingleMoviePage = ({ data, images, castResult, crew, trailerData }) => {
  setTailerVisibility((prevData) => !prevData);
  };
 
+
+
  const { base_url, backdrop_sizes, profile_sizes } = images;
 
  const handleAdd = async (type) => {
@@ -82,12 +87,22 @@ const SingleMoviePage = ({ data, images, castResult, crew, trailerData }) => {
  )}
  {backdrop_path && (
  <div className={singlePageDesign.moviePoster}>
- <Image
- src={`${base_url}${backdrop_sizes[3]}${backdrop_path}`}
- alt={title}
- width={3800}
- height={2200}
- />
+ <Suspense
+ fallback={
+ <div>
+ <p>Loading...</p>
+ </div>
+ }
+ >
+ <LazyBanner
+ data={{
+ src: `${base_url}${backdrop_sizes[3]}${backdrop_path}`,
+ alt: title,
+ width: 3800,
+ height: 2200,
+ }}
+ />
+ </Suspense>
  </div>
  )}
  <div className={singlePageDesign.movieDetails}>
@@ -207,6 +222,14 @@ const SingleMoviePage = ({ data, images, castResult, crew, trailerData }) => {
  </ul>
  </article>
  </section>
+ <section className={singlePageDesign.reviews}>
+ <h2>Reviews</h2>
+ <div className={singlePageDesign.reviewContainer}>
+ {reviewsData.map((review) => (
+ <Reviews data={{ review, images }} />
+ ))}
+ </div>
+ </section>
  </div>
  </div>
  </div>
@@ -243,6 +266,13 @@ export const getServerSideProps = async (context) => {
  const trailerD = await trailerResponse.json();
  const trailerData = trailerD.results;
 
+
+
+ //get reviews
+ const reviewsResponse = await fetch(`https://api.themoviedb.org/3/movie/${id}/reviews?api_key=${process.env.NEXT_PUBLIC_API_KEY}`);
+ const reviewsD = await reviewsResponse.json();
+ const reviewsData = reviewsD.results;
+
  return {
  props: {
  data,
@@ -251,6 +281,7 @@ export const getServerSideProps = async (context) => {
  crew,
  trailerData,
  id,
+ reviewsData,
  },
  };
 };

styles/ReviewsCard.module.css

@@ -0,0 +1,67 @@
+.card {
+ border: 2px #2CEC65 solid;
+ border-radius: 10px;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ height: 100%;
+}
+.card .top {
+ display: flex;
+ gap: 1rem;
+ justify-content: space-between;
+}
+.card .top .name {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+.card .top .name .img {
+ width: 3rem;
+ height: 3rem;
+ overflow: hidden;
+ border-radius: 100px;
+}
+.card .top .name .img img {
+ -o-object-fit: cover;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+}
+.card .top .name div {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+.card .top .name div h3 {
+ color: white;
+}
+.card .top .name div span {
+ color: #2CEC65;
+ font-size: 0.9rem;
+}
+.card .top .link {
+ color: #2CEC65;
+ width: 1.5rem;
+ height: 1.5rem;
+}
+.card p {
+ font-size: 1rem;
+ border: 1px #2CEC65 solid;
+ letter-spacing: 1px;
+ color: white;
+ padding: 1rem;
+ border-radius: 10px;
+ line-height: 25px;
+}
+.card button {
+ background-color: #2CEC65;
+ border: none;
+ border-radius: 100px;
+ color: black;
+ font-size: 1rem;
+ padding: 0.5rem;
+ font-weight: 900;
+ cursor: pointer;
+}/*# sourceMappingURL=ReviewsCard.module.css.map */

styles/ReviewsCard.module.scss

@@ -0,0 +1,79 @@
+.card {
+ border: 2px #2CEC65 solid;
+ border-radius: 10px;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ height: 100%;
+
+
+
+ .top {
+ display: flex;
+ gap: 1rem;
+ justify-content: space-between;
+
+ .name {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+
+
+ .img {
+ width: 3rem;
+ height: 3rem;
+ overflow: hidden;
+ border-radius: 100px;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ gap: .5rem;
+
+ h3 {
+ color: white;
+ }
+
+ span {
+ color: #2CEC65;
+ font-size: .9rem;
+ }
+ }
+ }
+
+ .link {
+ color: #2CEC65;
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ }
+
+ p {
+ font-size: 1rem;
+ border: 1px #2CEC65 solid;
+ letter-spacing: 1px;
+ color: white;
+ padding: 1rem;
+ border-radius: 10px;
+ line-height: 25px;
+ }
+
+ button {
+ background-color: #2CEC65;
+ border: none;
+ border-radius: 100px;
+ color: black;
+ font-size: 1rem;
+ padding: .5rem;
+ font-weight: 900;
+ cursor: pointer;
+ }
+}

styles/SinglePage.module.css

@@ -249,6 +249,21 @@
  margin-top: 0.5rem;
  color: rgb(82, 82, 82);
 }
+.singlePage .movieDetails .reviews {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+.singlePage .movieDetails .reviews h2 {
+ color: rgb(82, 82, 82);
+}
+.singlePage .movieDetails .reviews .reviewContainer {
+ display: grid;
+ grid-template-columns: repeat(2, 50%);
+ grid-template-rows: auto;
+ gap: 4rem;
+ align-items: end;
+}
 
 @media only screen and (max-width: 800px) {
  .singlePage .moviePoster {

styles/SinglePage.module.scss

@@ -317,6 +317,25 @@
 
  }
 
+ .reviews {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ h2 {
+ color: rgb(82, 82, 82);
+ }
+
+ .reviewContainer {
+ display: grid;
+ grid-template-columns: repeat(2, 50%);
+ grid-template-rows: auto;
+ gap: 4rem;
+ align-items: end;
+
+ }
+ }
+
  }
 }