API Integration

Author: Saurabh251000

backend/.gitignore

@@ -20,7 +20,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env
+
 
 # vercel
 .vercel

backend/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "tsx src/index.ts"
+    "dev": "tsx src/index.ts",
+    "build": "tsc"
   },
   "keywords": [],
   "author": "Saurabh Kushwaha",

backend/src/controllers/movieController.ts

@@ -50,3 +50,15 @@ export const deleteMovie = async (req: Request, res: Response) => {
     }
 };
 
+export const findMovie = async (req: Request, res: Response) => {
+    const { id } = req.body;
+    try {
+        const movie = await prisma.movie.findUnique({
+            where: { id },
+        });
+        res.status(200).json(movie);
+    } catch (error) {
+        res.status(500).json({ message: 'Movie not found', error });
+    }
+};
+

backend/src/routes/movieRoutes.ts

@@ -1,11 +1,12 @@
 import { Router } from 'express';
-import { addMovie, fetchMovies, deleteMovie, updateMovie } from '../controllers/movieController';
+import { addMovie, fetchMovies, deleteMovie, updateMovie , findMovie} from '../controllers/movieController';
 
 const router = Router();
 
 router.post('/add', addMovie);
 router.get('/fetch', fetchMovies);
 router.post('/delete', deleteMovie);
 router.post('/update', updateMovie);
+router.post('/find',findMovie);
 
 export default router;

moviewhub/src/api/moviesAPI.ts

@@ -1,6 +1,6 @@
 import apiCall from "@/utils/apiCall";
 import { Movie } from "@/utils/interfaces";
-import { addMovieURI, deleteMovieURI, fetchMovieURI, updateMovieURI } from "@/utils/apiURI";
+import { addMovieURI, deleteMovieURI, fetchMovieURI, findMovieURI, updateMovieURI } from "@/utils/apiURI";
 
 export const addMovie = (movieData: Movie) => {
   return apiCall({ method: 'POST', uri: addMovieURI, postData: movieData });
@@ -17,3 +17,7 @@ export const deleteMovie = (id:string) => {
 export const updateMovie = (movieData: Movie) => {
   return apiCall({ method: 'POST', uri: updateMovieURI, postData: movieData});
 };
+
+export const findMovie = (id:string) => {
+  return apiCall({ method: 'POST', uri: findMovieURI, postData: {id}});
+};

moviewhub/src/app/page.tsx

@@ -21,7 +21,7 @@ const Home: React.FC = () => {
       try {
         setLoading(true);
         const movieData = await fetchMovies();
-        console.log(movieData);
+        // console.log(movieData);
         setMovielist(movieData);
       } catch (error) {
         console.error("Failed to fetch movies:", error);
@@ -36,10 +36,12 @@ const Home: React.FC = () => {
   const handleCreateMovie = async (name: string, releaseDate: string) => {
     try {
       const movieData = { name, releaseDate };
-      await addMovie(movieData); 
-      setMovielist((prevMovielist) => [...prevMovielist, movieData]); // Correctly append the new movie
-      console.log(`New Movie added: ${name}, Release Date: ${releaseDate}`);
+      const newMovie = await addMovie(movieData); 
+      // console.log(newMovie);
+      setMovielist((prevMovielist) => [...prevMovielist, newMovie]); // Correctly append the new movie
+      // console.log(`New Movie added: ${name}, Release Date: ${releaseDate}`);
       setIsMovieModalOpen(false); // Close the modal after adding the movie
+      return alert("Movie Added Successfully");
     } catch (error) {
       console.error("Failed to add movie:", error);
     }
@@ -50,7 +52,7 @@ const Home: React.FC = () => {
     try {
       const reviewData = { movieId, movieName, reviewerName, rating, comments };
       await addReview(reviewData);
-      console.log(`Review added for ${movieName} by ${reviewerName}: Rating ${rating}/10, Comments: ${comments}`);
+       console.log(`Review added for ${movieName} by ${reviewerName}: Rating ${rating}/10, Comments: ${comments}`);
       setIsReviewModalOpen(false); // Close the modal after adding the review
     } catch (error) {
       console.error("Failed to add review:", error);

moviewhub/src/app/review/[id]/page.tsx

@@ -1,75 +1,105 @@
 "use client";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import Navbar from '@/components/Navbar';
 import ReviewCard from '@/components/ReviewCard';
-import { movies } from '@/utils/data';
 import AddMovieModal from '@/components/AddNewMovie';
 import AddReviewModal from '@/components/AddNewReview';
+import { findMovie, fetchMovies } from '@/api/moviesAPI';
+import { Movie, Review } from '@/utils/interfaces';
+import Loader from '@/components/Loader';
 
 const ReviewPage: React.FC = () => {
   const params = useParams();
   const id = params.id;
-  const movie = movies.find((movie) => movie.id === Number(id));
-
-  // State for managing modal visibility
   const [isAddMovieModalOpen, setAddMovieModalOpen] = useState(false);
   const [isAddReviewModalOpen, setAddReviewModalOpen] = useState(false);
+  const [movie, setMovie] = useState<Movie | null>(null);
+  const [movielist, setMovielist] = useState<Movie[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const getMovie = async () => {
+      try {
+        setLoading(true);
+        const movieData = await findMovie(id as string);
+        const movies = await fetchMovies();
+        setMovie(movieData);
+        setMovielist(movies);
+      } catch (error) {
+        console.error("Failed to fetch movie:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getMovie();
+  }, [id]);
 
   const handleCreateMovie = (name: string, releaseDate: string) => {
     console.log(`New Movie: ${name}, Release Date: ${releaseDate}`);
   };
 
-  const handleAddReview = (movieName: string, reviewerName: string, rating: number, comments: string) => {
-    console.log(`Review for ${movieName} by ${reviewerName}: Rating ${rating}/10, Comments: ${comments}`);
+  const handleAddReview = (movieId: string, movieName: string, reviewerName: string, rating: number, comments: string) => {
+    console.log(`Review for ${movieName} (${movieId}) by ${reviewerName}: Rating ${rating}/10, Comments: ${comments}`);
   };
 
+  if (loading) {
+    return <Loader />;
+  }
+
   if (!movie) {
     return (
       <div>
-        <Navbar 
-          onAddMovie={() => setAddMovieModalOpen(true)} 
-          onAddReview={() => setAddReviewModalOpen(true)} 
+        <Navbar
+          onAddMovie={() => setAddMovieModalOpen(true)}
+          onAddReview={() => setAddReviewModalOpen(true)}
         />
         <div className="container mx-auto px-4 py-6">
           <h1 className="text-3xl font-bold mb-4 text-center">Review Not found</h1>
         </div>
       </div>
     );
   }
-
+  
   const { name: movieName, reviews } = movie;
-    // Calculate the average rating
-  const totalRating = reviews.reduce((acc, review) => acc + review.rating, 0);
-  const averageRating = reviews.length > 0 ? totalRating / reviews.length : 0;
+
+  // Check if there are any reviews
+  const hasReviews = reviews && reviews.length > 0;
+  const totalRating = hasReviews ? reviews.reduce((acc: number, review: Review) => acc + review.rating, 0) : 0;
+  const averageRating = hasReviews ? totalRating / reviews.length : 0;
+  
 
   return (
     <div className='w-full min-h-lvh'>
-      <Navbar 
-        onAddMovie={() => setAddMovieModalOpen(true)} 
-        onAddReview={() => setAddReviewModalOpen(true)} 
+      <Navbar
+        onAddMovie={() => setAddMovieModalOpen(true)}
+        onAddReview={() => setAddReviewModalOpen(true)}
       />
       <div className="container mx-auto px-4 py-6">
         <div className='flex justify-between'>
           <h1 className="text-3xl font-bold mb-4 ">{movieName}</h1>
-          <h1 className="text-3xl font-bold mb-4 ">{averageRating}</h1>
+          <h1 className="text-3xl font-bold mb-4 ">{averageRating.toFixed(1)}</h1>
         </div>
-        
+
         <div className="grid grid-cols-1 gap-6">
-          {reviews.map((review, index) => (
-            <ReviewCard key={index} review={review} />
-          ))}
+          {reviews && reviews.length > 0 ? (
+            reviews.map((review, index) => (
+              <ReviewCard key={index} review={review} />
+            ))
+          ) : (
+            <p className="text-center text-gray-500">No reviews available for this movie.</p>
+          )}
         </div>
       </div>
 
-      {/* Modals */}
-     
       <AddMovieModal
         isOpen={isAddMovieModalOpen}
         onClose={() => setAddMovieModalOpen(false)}
         onCreateMovie={handleCreateMovie}
       />
       <AddReviewModal
+        movielist={movielist}
         isOpen={isAddReviewModalOpen}
         onClose={() => setAddReviewModalOpen(false)}
         onAddReview={handleAddReview}

moviewhub/src/components/ReviewCard.tsx

@@ -1,6 +1,6 @@
 "use client"
+import { Review } from '@/utils/interfaces';
 import React from 'react';
-import { Review } from '@/utils/data';
 
 interface ReviewCardProps {
   review: Review;

moviewhub/src/utils/apiURI.ts

@@ -5,6 +5,7 @@ export const addMovieURI =  `${BASE_URL}/movies/add`
 export const fetchMovieURI =  `${BASE_URL}/movies/fetch`
 export const deleteMovieURI =  `${BASE_URL}/movies/delete`
 export const updateMovieURI =  `${BASE_URL}/movies/update`
+export const findMovieURI =  `${BASE_URL}/movies/find`
 
 export const addReviewURI =  `${BASE_URL}/reviews/add`
 export const fetchReviewURI =  `${BASE_URL}/reviews/fetch`