Use Hooks

.gitignore

@@ -5,3 +5,4 @@ app/node_modules
 .log
 app/dist/
 dataconnect/.dataconnect
+.firebaserc

app/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@movie/dataconnect": "file:src/lib/dataconnect-sdk",
+    "@tanstack-query-firebase/react": "^1.0.6",
+    "@tanstack/react-query": "^5.67.1",
     "dotenv": "^16.4.5",
-    "firebase": "^10.12.4-dataconnect-preview.d986d4bf2",
+    "firebase": "^11.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

app/src/App.tsx

@@ -24,21 +24,24 @@ import VectorSearchPage from "./pages/VectorSearch";
 import AdvancedSearchPage from "./pages/AdvancedSearch";
 import NotFound from "./pages/NotFound";
 import RootLayout from "./layout/RootLayout";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 export default function App() {
   return (
-    <Router>
-      <RootLayout>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/actor/:id" element={<ActorPage />} />
-          <Route path="/movie/:id" element={<MoviePage />} />
-          <Route path="/myprofile" element={<MyProfilePage />} />
-          <Route path="/vectorsearch" element={<VectorSearchPage />} />
-          <Route path="/advancedsearch" element={<AdvancedSearchPage />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </RootLayout>
-    </Router>
+    <QueryClientProvider client={new QueryClient()}>
+      <Router>
+        <RootLayout>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/actor/:id" element={<ActorPage />} />
+            <Route path="/movie/:id" element={<MoviePage />} />
+            <Route path="/myprofile" element={<MyProfilePage />} />
+            <Route path="/vectorsearch" element={<VectorSearchPage />} />
+            <Route path="/advancedsearch" element={<AdvancedSearchPage />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </RootLayout>
+      </Router>
+    </QueryClientProvider>
   );
 }

app/src/components/moviecard.tsx

@@ -19,11 +19,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { MdFavorite, MdFavoriteBorder, MdStar } from "react-icons/md";
 import { onAuthStateChanged, User } from "firebase/auth";
 import { AuthContext } from "@/lib/firebase";
-import {
-  handleAddFavoritedMovie,
-  handleDeleteFavoritedMovie,
-  handleGetIfFavoritedMovie,
-} from "@/lib/MovieService";
+import { getIfFavoritedMovieRef } from "@/lib/dataconnect-sdk";
+import { useAddFavoritedMovie, useDeleteFavoritedMovie, useGetIfFavoritedMovie } from "@/lib/dataconnect-sdk/react";
 
 interface MovieCardProps {
   id: string;
@@ -43,25 +40,22 @@ export default function MovieCard({
   tags,
 }: MovieCardProps) {
   const [user, setUser] = useState<User | null>(null);
-  const [isFavorited, setIsFavorited] = useState(false);
   const auth = useContext(AuthContext);
   const navigate = useNavigate();
+const { mutate: handleAddFavoritedMovie } = useAddFavoritedMovie({
+    invalidate: [getIfFavoritedMovieRef({ movieId: id })],
+  });
+  const { mutate: handleDeleteFavoritedMovie } = useDeleteFavoritedMovie({
+    invalidate: [getIfFavoritedMovieRef({ movieId: id })],
+  });
+  const { data } = useGetIfFavoritedMovie({ movieId: id });
+  const isFavorited = data?.favorite_movie;
 
   useEffect(() => {
-    async function checkIfFavorited() {
-      try {
-        const isFav = await handleGetIfFavoritedMovie(id);
-        setIsFavorited(isFav);
-      } catch (error) {
-        console.error("Error checking if movie is favorited:", error);
-      }
-    }
+
     const unsubscribe = onAuthStateChanged(auth, (user) => {
       if (user) {
         setUser(user);
-        checkIfFavorited();
-      } else {
-        setIsFavorited(false);
       }
     });
 
@@ -73,13 +67,11 @@ export default function MovieCard({
     e.preventDefault();
     if (!user) return;
     try {
-      const isFav = await handleGetIfFavoritedMovie(id);
-      if (isFav) {
-        await handleDeleteFavoritedMovie(id);
+      if (isFavorited) {
+        await handleDeleteFavoritedMovie({ movieId: id });
       } else {
-        await handleAddFavoritedMovie(id);
+        await handleAddFavoritedMovie({ movieId: id });
       }
-      setIsFavorited(!isFav);
     } catch (error) {
       console.error("Error updating favorite status:", error);
     }

app/src/lib/MovieService.tsx

@@ -14,99 +14,87 @@
  * limitations under the License.
  */
 
-// import { listMovies, ListMoviesData, OrderDirection } from "@movie/dataconnect";
-// import { getMovieById, GetMovieByIdData } from "@movie/dataconnect";
-// import { GetActorByIdData, getActorById } from "@movie/dataconnect";
+// import { AddFavoritedMovieData, AddFavoritedMovieVariables, DeleteFavoritedMovieData, DeleteFavoritedMovieVariables, GetCurrentUserData, getCurrentUserRef, GetIfFavoritedMovieData, getIfFavoritedMovieRef, GetIfFavoritedMovieVariables, getMovieByIdRef, ListMoviesData, ListMoviesVariables, OrderDirection, searchAll, SearchAllData, upsertUser } from "@movie/dataconnect";
+// import { useAddFavoritedMovie, useAddReview, useDeleteFavoritedMovie, useDeleteReview, useGetActorById, useGetCurrentUser, useGetIfFavoritedMovie, useGetMovieById, useListMovies } from "@movie/dataconnect/react";
+// import { FlattenedMutationResult, FlattenedQueryResult } from "@tanstack-query-firebase/react/data-connect";
+// import { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
+// import { FirebaseError } from "firebase/app";
 
-// import { upsertUser } from "@movie/dataconnect";
-// import { getCurrentUser, GetCurrentUserData } from "@movie/dataconnect";
-
-// import { addFavoritedMovie, deleteFavoritedMovie, getIfFavoritedMovie } from "@movie/dataconnect";
-// import { addReview, deleteReview } from "@movie/dataconnect";
-
-// import { searchAll, SearchAllData } from "@movie/dataconnect";
-
-// import {
-//   searchMovieDescriptionUsingL2similarity,
-//   SearchMovieDescriptionUsingL2similarityData,
-// } from "@movie/dataconnect";
-
-import { onAuthStateChanged, User } from "firebase/auth";
+import { OrderDirection } from "@movie/dataconnect";
+import { User } from "firebase/auth";
 
 // Fetch top-rated movies
-export const handleGetTopMovies = async (
-  limit: number
-): Promise<any[]> => {
-  return [];
-};
+export const useHandleTopMovies = (limit: number, orderByRating: OrderDirection): { data: any; isLoading: any; } => {
+  return { data: { movies: [] }, isLoading: false };
+}
 
 // Fetch latest movies
-export const handleGetLatestMovies = async (
-  limit: number
-): Promise<any[]> => {
-  return [];
-};
+export const useHandleLatestMovies = (limit: number, orderByReleaseYear: OrderDirection): { data: any; isLoading: any; } => {
+  return { data: { movies: [] }, isLoading: false };
+}
 
 // Fetch movie details by ID
-export const handleGetMovieById = async (
-  movieId: string
-): Promise<any | null> => {
-  return null;
-};
-
+export const useHandleGetMovieById = (id: string): { data: any; isLoading: any; error: any } => {
+  return {
+    error: new Error("Function not implemented."),
+    isLoading: false,
+    data: {},
+  };
+}
 
 // Fetch actor details by ID
-export const handleGetActorById = async (
-  actorId: string
-): Promise<any | null> => {
-  return null;
-};
+export const useHandleGetActorById = (id: string): { error: any; isLoading: any; data: any; } => {
+  return {
+    error: new Error("Function not implemented."),
+    isLoading: false,
+    data: {},
+  };
+}
 
 // Updates user table when user signs in
 export const handleAuthStateChange = (auth: any, setUser: (user: User | null) => void) => {
   return () => {};
 };
 
 // Fetch current user profile
-export const handleGetCurrentUser = async (): Promise<any | null> => {
-  return null;
+export const  useHandleGetCurrentUser =(enabled: boolean): { data: any, isLoading: boolean, refetch: any} => {
+  return { data: {}, isLoading: false, refetch: () => {}};
 };
 
-
 // Add a movie to user's favorites
-export const handleAddFavoritedMovie = async (
-  movieId: string
-): Promise<void> => {
-  return;
-};
+export const useHandleAddFavoritedMovie = (id: string): {mutate: any} => {
+  return {
+    mutate: () => {}
+  }
+}
 
 // Remove a movie from user's favorites
-export const handleDeleteFavoritedMovie = async (
-  movieId: string
-): Promise<void> => {
-  return;
-};
+export const useHandleDeleteFavoritedMovie = (id: string): {mutate: any} => {
+return {
+    mutate: () => {}
+  }
+}
 
 // Check if the movie is favorited by the user
-export const handleGetIfFavoritedMovie = async (
-  movieId: string
-): Promise<boolean> => {
-  return false;
-};
+export const useHandleGetIfFavoritedMovie = (movieId: string, enabled: boolean): {data: any} => {
+  return {
+    data: {},
+  };
+}
 
 // Add a review to a movie
-export const handleAddReview = async (
-  movieId: string,
-  rating: number,
-  reviewText: string
-): Promise<void> => {
-  return;
-};
+export const useHandleAddReview = (id: string): { mutate: any; } => {
+  return {
+    mutate: () => {}
+  }
+}
 
 // Delete a review from a movie
-export const handleDeleteReview = async (movieId: string): Promise<void> => {
-  return;
-};
+export const useHandleDeleteReview = (): { mutate: any; } => {
+ return {
+    mutate: () => {}
+  }
+}
 
 // Function to perform the search using the query and filters
 export const handleSearchAll = async (