feat: update versions

firebase · Jun 26, 2024 · b066256 · b066256
1 parent b396a6f
commit b066256
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 26 deletions.
diff --git a/dataconnect/dataconnect/connector/queries.gql b/dataconnect/dataconnect/connector/queries.gql
@@ -18,14 +18,14 @@ query ListUsers @auth(level: PUBLIC) {
   users {
     id
     username
-    favoriteActors_on_user {
+    favoriteActors: favoriteActors_on_user {
       actor {
         id
         name
         imageUrl
       }
     }
-    favoriteMovies_on_user {
+    favoriteMovies: favoriteMovies_on_user {
       movie {
         id
         title
@@ -571,6 +571,6 @@ query searchMovieDescriptionUsingL2Similarity1($compare: Vector!, $within: Float
     movies_descriptionEmbedding_similarity(compare: $compare, method: L2, within: $within, where: {description: {ne: $excludesContent}}, limit: $limit) {
       id
       title
-	description
+      description
     }
   }
diff --git a/dataconnect/movie/app/actor/[id]/page.tsx b/dataconnect/movie/app/actor/[id]/page.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
-import { getActorById, GetActorByIdResponse, GetActorByIdVariables, addFavoritedActor, deleteFavoriteActor, getIfFavoritedActor } from '../../../lib/dataconnect-sdk';
+import { getActorById, GetActorByIdResponse, GetActorByIdVariables, addFavoritedActor, deleteFavoriteActor, getIfFavoritedActor } from '@/lib/dataconnect-sdk';
 import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
 
 const Page = () => {

diff --git a/dataconnect/movie/app/advancedsearch/page.tsx b/dataconnect/movie/app/advancedsearch/page.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { FaSearch } from 'react-icons/fa';
 import { MdStar } from 'react-icons/md';
-import { fuzzySearch } from '../../lib/dataconnect-sdk';
+import { fuzzySearch } from '@/lib/dataconnect-sdk';
 
 const genres = ['', 'action', 'crime', 'drama', 'sci-fi', 'thriller', 'adventure'];
 

diff --git a/dataconnect/movie/app/genre/[genre]/page.tsx b/dataconnect/movie/app/genre/[genre]/page.tsx
@@ -1,8 +1,8 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import MovieCard from '../../../components/moviecard';
-import { ListMoviesByGenreResponse, ListMoviesByGenreVariables, listMoviesByGenre } from '../../../lib/dataconnect-sdk';
+import MovieCard from '@/components/moviecard';
+import { ListMoviesByGenreResponse, ListMoviesByGenreVariables, listMoviesByGenre } from '@/lib/dataconnect-sdk';
 
 const Page = () => {
   const { genre } = useParams() as { genre: string };

diff --git a/dataconnect/movie/app/layout.tsx b/dataconnect/movie/app/layout.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Navbar from "../components/navbar";
+import Navbar from "@/components/navbar";
 import "../styles.css";
 export default function RootLayout({
   children,

diff --git a/dataconnect/movie/app/movie/[id]/page.tsx b/dataconnect/movie/app/movie/[id]/page.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { MdFavorite, MdFavoriteBorder, MdCheck, MdCheckBoxOutlineBlank, MdStar } from 'react-icons/md';
+import { MdFavorite, MdFavoriteBorder, MdCheck, MdAdd, MdStar } from 'react-icons/md';
 import {
   getMovieById,
   GetMovieByIdResponse,
@@ -14,7 +14,9 @@ import {
   getIfFavoritedMovie,
   addReview,
   deleteReview,
-} from '../../../lib/dataconnect-sdk';
+  searchMovieDescriptionUsingL2similarity,
+  SearchMovieDescriptionUsingL2similarityResponse,
+} from '@/lib/dataconnect-sdk';
 import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
 
 const Page = () => {
@@ -28,6 +30,7 @@ const Page = () => {
   const [reviewText, setReviewText] = useState('');
   const [userReview, setUserReview] = useState<GetMovieByIdResponse['movie']['reviews'][0] | null>(null);
   const [rating, setRating] = useState(0);
+  const [similarMovies, setSimilarMovies] = useState<SearchMovieDescriptionUsingL2similarityResponse['movies_descriptionEmbedding_similarity']>([]);
 
   useEffect(() => {
     const auth = getAuth();
@@ -50,6 +53,7 @@ const Page = () => {
           setMovie(response.data.movie);
           const userReview = response.data.movie.reviews.find(review => review.user.id === authUser?.uid);
           setUserReview(userReview || null);
+          await fetchSimilarMovies(response.data.movie.description);
         } catch (error) {
           console.error('Error fetching movie:', error);
         } finally {
@@ -59,7 +63,16 @@ const Page = () => {
 
       fetchMovie();
     }
-  }, [id, authUser, movie]);
+  }, [id, authUser]);
+
+  const fetchSimilarMovies = async (description: string) => {
+    try {
+      const response = await searchMovieDescriptionUsingL2similarity({ query: description });
+      setSimilarMovies(response?.data?.movies_descriptionEmbedding_similarity);
+    } catch (error) {
+      console.error('Error fetching similar movies:', error);
+    }
+  };
 
   const checkIfFavorited = async (userId: string) => {
     try {
@@ -167,13 +180,6 @@ const Page = () => {
             >
               {isFavorited ? <MdFavorite size={24} /> : <MdFavoriteBorder size={24} />}
             </button>
-            <button
-              className="flex items-center justify-center p-1 text-green-700 hover:text-green-800 transition-colors duration-200"
-              aria-label="Watched"
-              onClick={handleWatchedToggle}
-            >
-              {isWatched ? <MdCheck size={24} /> : <MdCheckBoxOutlineBlank size={24} />}
-            </button>
           </div>
         </div>
       </div>
@@ -273,6 +279,43 @@ const Page = () => {
           </div>
         ))}
       </div>
+
+      <div className="mt-8">
+        <h2 className="text-2xl font-bold mb-2">Similar Movies</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {similarMovies.map((similarMovie) => (
+            <div key={similarMovie.id} className="bg-gray-800 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer relative">
+              <Link href={`/movie/${similarMovie.id}`}>
+                <img className="w-full h-64 object-cover" src={similarMovie.imageUrl} alt={similarMovie.title} />
+              </Link>
+              <div className="p-4">
+                <h3 className="font-bold text-lg mb-1 text-white">{similarMovie.title}</h3>
+                <p className="text-sm text-gray-300 overflow-y-scroll max-h-12">{similarMovie.description}</p>
+                <div className="flex items-center text-yellow-500 mt-2">
+                  <MdStar className="text-yellow-500" size={20} />
+                  <span className="ml-1 text-gray-400">{similarMovie.rating}</span>
+                </div>
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {similarMovie.tags?.map((tag, index) => (
+                    <span key={index} className="bg-gray-700 text-white px-2 py-1 rounded-full text-xs capitalize">{tag}</span>
+                  ))}
+                </div>
+                {authUser && (
+                  <div className="mt-2 flex space-x-2 items-center">
+                    <button
+                      className="flex items-center justify-center p-1 text-red-500 hover:text-red-600 transition-colors duration-200"
+                      aria-label="Favorite"
+                      onClick={handleFavoriteToggle}
+                    >
+                      {isFavorited ? <MdFavorite size={20} /> : <MdFavoriteBorder size={20} />}
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/dataconnect/movie/app/myprofile/page.tsx b/dataconnect/movie/app/myprofile/page.tsx
@@ -10,7 +10,7 @@ import {
   deleteWatchedMovie,
   deleteFavoritedMovie,
   deleteFavoriteActor,
-} from '../../lib/dataconnect-sdk';
+} from '@/lib/dataconnect-sdk';
 import { MdStar } from 'react-icons/md';
 
 const Page = () => {

diff --git a/dataconnect/movie/app/page.tsx b/dataconnect/movie/app/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 import { useEffect, useState } from "react";
-import Carousel from "../components/carousel";
+import Carousel from "@/components/carousel";
 import {
   moviesTop10,
   moviesRecentlyReleased,
   MoviesRecentlyReleasedResponse,
   MoviesTop10Response,
-} from "../lib/dataconnect-sdk";
+} from "@/lib/dataconnect-sdk";
 
 const Page = () => {
   const [topMovies, setTopMovies] = useState<MoviesTop10Response["movies"]>([]);

diff --git a/dataconnect/movie/app/vectors/page.tsx b/dataconnect/movie/app/vectors/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { searchMovieDescriptionUsingL2similarity, SearchMovieDescriptionUsingL2similarityResponse } from '../../lib/dataconnect-sdk';
+import { searchMovieDescriptionUsingL2similarity, SearchMovieDescriptionUsingL2similarityResponse } from '@/lib/dataconnect-sdk';
 import { FaSpinner } from 'react-icons/fa';
 
 const Page = () => {

diff --git a/dataconnect/movie/components/moviecard.tsx b/dataconnect/movie/components/moviecard.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { MdFavorite, MdFavoriteBorder, MdCheck, MdAdd, MdStar } from 'react-icons/md';
 import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
-import { addFavoritedMovie, deleteFavoritedMovie, addWatchedMovie, deleteWatchedMovie, getIfWatched, getIfFavoritedMovie } from '../lib/dataconnect-sdk';
+import { addFavoritedMovie, deleteFavoritedMovie, addWatchedMovie, deleteWatchedMovie, getIfWatched, getIfFavoritedMovie } from '@/lib/dataconnect-sdk';
 
 interface MovieCardProps {
   id: string;

diff --git a/dataconnect/movie/components/navbar.tsx b/dataconnect/movie/components/navbar.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { getAuth, signInWithRedirect, GoogleAuthProvider, signOut, User } from 'firebase/auth';
-import { firebaseapp, onAuthStateChanged } from '../lib/firebase';
+import { firebaseapp, onAuthStateChanged } from '@/lib/firebase';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { upsertUser } from '../lib/dataconnect-sdk';
+import { upsertUser } from '@/lib/dataconnect-sdk';
 import { FaSearch } from 'react-icons/fa';
 import Image from 'next/image';
-import firebaseLogo from '../assets/firebase_logo.svg';
+import firebaseLogo from '@/assets/firebase_logo.svg';
 
 const Navbar = () => {
   const [user, setUser] = useState<User | null>(null);

diff --git a/dataconnect/movie/tsconfig.json b/dataconnect/movie/tsconfig.json
@@ -1,5 +1,11 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/lib/*": ["lib/*"],
+      "@/components/*": ["components/*"],
+      "@/assets/*": ["assets/*"],
+    },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,