change to lint config

my-next-app/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "no-console": "error"
+    "no-console": ["error", { "allow": ["error"] }]
   }
 }

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

@@ -1,47 +1,78 @@
 'use client';
-
-import Image from 'next/image';
-
-import React, { useState } from 'react';
-import movies from '../mock_db/movies.json';
-import reviews from '../mock_db/reviews.json';
+import React, { useState, useEffect } from 'react';
+import styles from './page.module.css';
+// import movies from '../mock_db/movies.json';
+// import reviews from '../mock_db/reviews.json';
 export default function MoviePage() {
   const [movieId, setMovieId] = useState(null); // Initial movie
-  const movie = movies.find((movie) => movie.id === movieId);
-  const movieReviews = reviews.filter((review) => review.movie_id === movieId);
+  const [movieData, setMovieData] = useState(null);
+  const [reviewData, setReviewData] = useState(null);
+  const options = {
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+      Authorization:
+        'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OTM5NTE2MmJjNDA5MzQ2MTMyNmM5NzUyZTBkZjMzZiIsIm5iZiI6MTcyNzI1NjM4Ny41OTcyMzYsInN1YiI6IjY2Y2RkOWM2NmZkMmYwN2FiNzlkYjE3MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.n6Dhal1cf-trWSV3ewyYHw9HMouvYGBgv-pqFu3N2B0',
+    },
+  };
+  useEffect(() => {
+    fetch(`https://api.themoviedb.org/3/movie/${movieId}?language=en-US`, options)
+      .then((response) => response.json())
+      .then((data) => {
+        setMovieData(data);
+        //console.log(data);
+      })
+      .catch((err) => console.error(err));
+  }, [movieId]);
+  const reviews = {
+    method: 'GET',
+    headers: {
+      accept: 'application/json',
+      Authorization:
+        'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OTM5NTE2MmJjNDA5MzQ2MTMyNmM5NzUyZTBkZjMzZiIsIm5iZiI6MTcyNzI1NjM4Ny41OTcyMzYsInN1YiI6IjY2Y2RkOWM2NmZkMmYwN2FiNzlkYjE3MCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.n6Dhal1cf-trWSV3ewyYHw9HMouvYGBgv-pqFu3N2B0',
+    },
+  };
+  useEffect(() => {
+    fetch(`https://api.themoviedb.org/3/movie/${movieId}/reviews`, reviews)
+      .then((response) => response.json())
+      .then((data) => {
+        setReviewData(data);
+        //console.log(data);
+      })
+      .catch((err) => console.error(err));
+  }, [movieId]);
   return (
-    <div>
+    <div className={styles.wrapper}>
       {/* Movie Selector */}
       <div>
         <label>Select a movie: </label>
-        <select value={movieId} onChange={(e) => setMovieId(Number(e.target.value))}>
-          {movies.map((movie) => (
-            <option key={movie.id} value={movie.id}>
-              {movie.title}
-            </option>
-          ))}
-        </select>
+        <input type="text" value={movieId} onChange={(e) => setMovieId(Number(e.target.value))} />
       </div>
-      {movie ? (
-        <>
-          <h1>{movie.title}</h1>
-          <p>{movie.overview}</p>
-          <p>Release Date: {movie.release_date}</p>
-          <Image src={movie.poster_path} alt={movie.title} width="200" />
-        </>
+      {movieData ? (
+        <div className={styles.text}>
+          <img
+            src={`https://image.tmdb.org/t/p/w200/${movieData.poster_path}`}
+            alt={movieData.title}
+            width="200"
+          />
+          <h1>{movieData.original_title}</h1>
+          <p>{movieData.overview}</p>
+          <p>Release Date: {movieData.release_date}</p>
+        </div>
       ) : (
         <p>Movie not found</p>
       )}
-      <h2>Reviews</h2>
-      {movieReviews.length > 0 ? (
-        movieReviews.map((review) => (
-          <div key={review.review_id}>
-            <h3>{review.reviewer_name}</h3>
-            <p>{review.review}</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>No reviews found for this movie</p>
+        <p className={styles.text}>No reviews found for this movie</p>
       )}
     </div>
   );

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

@@ -0,0 +1,6 @@
+.wrapper {
+    background: linear-gradient(150deg, #001523, #003356, #001523 90%);
+}
+.text{
+    color: #D7DAE3
+}