made a bookmarkbutton component

src/components/BookmarkButton/BookMarkButton.style.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+export const StyledBookmarkButton = styled.button`
+  position: relative;
+  left: 4px;
+  color: white;
+  cursor: pointer;
+  background: none;
+  border: none;
+`;

src/components/BookmarkButton/BookmarkButton.tsx

@@ -0,0 +1,55 @@
+import { Tooltip } from "@mantine/core";
+import { useContext, useRef, useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { Movie, MovieContext } from "../../contexts/MovieContext";
+import { StyledBookmarkButton } from "./BookMarkButton.style";
+
+function BookmarkButton(movie: Movie) {
+  const { bookmarkedMovies, setBookmarkedMovies } = useContext(MovieContext);
+  const [opened, setOpened] = useState(false);
+  const [tooltipText, setTooltipText] = useState("");
+  const tooltipTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const handleBookmarkClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    // Check if the movie is already bookmarked
+    const isBookmarked = bookmarkedMovies.some(m => m.title === movie.title);
+    if (!isBookmarked) {
+      setTooltipText("Added to bookmarks!");
+    } else {
+      setTooltipText("Removed from bookmarks!");
+    }
+
+    setOpened(true);
+
+    if (tooltipTimer.current) {
+      clearTimeout(tooltipTimer.current);
+    }
+    tooltipTimer.current = setTimeout(() => {
+      setOpened(false);
+    }, 1200);
+
+    // If it's bookmarked, remove it; otherwise, add it
+    const updatedBookmarkedMovies = isBookmarked
+      ? bookmarkedMovies.filter(m => m.title !== movie.title)
+      : [...bookmarkedMovies, movie];
+
+    // Update the bookmarkedMovies state with the new array
+    setBookmarkedMovies(updatedBookmarkedMovies);
+  };
+
+  return (
+    <Tooltip label={tooltipText} position='bottom' offset={-25} opened={opened}>
+      <StyledBookmarkButton onClick={handleBookmarkClick} data-testid={`bookmark-${movie.title}`}>
+        {/* If movie is bookmarked, show solid icon, else show outlined icon. */}
+        {bookmarkedMovies.some(m => m.title === movie.title) ? (
+          <FaBookmark size={"30px"} />
+        ) : (
+          <FaRegBookmark size={"30px"} />
+        )}
+      </StyledBookmarkButton>
+    </Tooltip>
+  );
+}
+
+export default BookmarkButton;

src/components/MovieCard/MovieCard.style.ts

@@ -22,11 +22,4 @@ export const StyledMovieCard = styled.div`
     margin-top: 10px;
     gap: 0.3rem;
   }
-
-  .bookmark-box {
-    position: relative;
-    left: 4px;
-    color: white;
-    cursor: pointer;
-  }
 `;

src/components/MovieCard/MovieCard.tsx

@@ -1,61 +1,16 @@
-import { Box, Image, Text, Tooltip } from "@mantine/core";
-import { useContext, useRef, useState } from "react";
-import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { Box, Image, Text } from "@mantine/core";
 import { Link } from "react-router-dom";
-import { MovieContext } from "../../contexts/MovieContext";
+import { Movie } from "../../contexts/MovieContext";
 import { titleToSlug } from "../../pages/MovieViewPage";
+import BookmarkButton from "../BookmarkButton/BookmarkButton";
 import { StyledMovieCard } from "./MovieCard.style";
 
-export interface MovieProps {
-  title: string;
-  year: number;
-  rating: string;
-  actors: string[];
-  genre: string;
-  synopsis: string;
-  thumbnail: string;
-  isTrending?: boolean;
-}
-
-function MovieCard(movie: MovieProps) {
-  const { bookmarkedMovies, setBookmarkedMovies } = useContext(MovieContext);
-  const [opened, setOpened] = useState(false);
-  const [tooltipText, setTooltipText] = useState("");
-  const tooltipTimer = useRef<NodeJS.Timeout | null>(null);
-
+function MovieCard(movie: Movie) {
   const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
     // Replace the failed image with the placeholder image
     event.currentTarget.src = "./404.png";
   };
 
-  const handleBookmarkClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    // Check if the movie is already bookmarked
-    const isBookmarked = bookmarkedMovies.some(m => m.title === movie.title);
-    if (!isBookmarked) {
-      setTooltipText("Added to bookmarks!");
-    } else {
-      setTooltipText("Removed from bookmarks!");
-    }
-
-    setOpened(true);
-
-    if (tooltipTimer.current) {
-      clearTimeout(tooltipTimer.current);
-    }
-    tooltipTimer.current = setTimeout(() => {
-      setOpened(false);
-    }, 1500);
-
-    // If it's bookmarked, remove it; otherwise, add it
-    const updatedBookmarkedMovies = isBookmarked
-      ? bookmarkedMovies.filter(m => m.title !== movie.title)
-      : [...bookmarkedMovies, movie];
-
-    // Update the bookmarkedMovies state with the new array
-    setBookmarkedMovies(updatedBookmarkedMovies);
-  };
-
   return (
     <StyledMovieCard data-testid={`id-${movie.title}`}>
       <Link to={`/movie/${titleToSlug(movie.title)}`}>
@@ -76,20 +31,7 @@ function MovieCard(movie: MovieProps) {
             <Text>{movie.rating}</Text>
           </Box>
         </Link>
-        <Tooltip label={tooltipText} position='bottom' offset={-25} opened={opened}>
-          <Box
-            onClick={handleBookmarkClick}
-            className='bookmark-box'
-            data-testid={`bookmark-${movie.title}`}
-          >
-            {/* If movie is bookmarked, show a text with text "OO" else show FaRegBookmark icon. */}
-            {bookmarkedMovies.some(m => m.title === movie.title) ? (
-              <FaBookmark size={"30px"} />
-            ) : (
-              <FaRegBookmark size={"30px"} />
-            )}
-          </Box>
-        </Tooltip>
+        <BookmarkButton {...movie} />
       </Box>
     </StyledMovieCard>
   );

src/components/MovieView/MovieView.tsx

@@ -1,8 +1,7 @@
-import { useContext } from "react";
-import { FaBookmark, FaRegBookmark } from "react-icons/fa";
-import { Movie, MovieContext } from "../../contexts/MovieContext";
 import { Box, Image, Text, Title } from "@mantine/core";
 import { useState } from "react";
+import { Movie } from "../../contexts/MovieContext";
+import BookmarkButton from "../BookmarkButton/BookmarkButton";
 import { StyledMovieView } from "./MovieView.style";
 
 interface Props {
@@ -17,23 +16,6 @@ function MovieView({ movie }: Props) {
   };
   const { title, genre, synopsis, year, rating, actors } = movie;
 
-  const { bookmarkedMovies, setBookmarkedMovies } = useContext(MovieContext);
-
-  const handleBookmarkClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
-    e.preventDefault();
-
-    // Check if the movie is already bookmarked
-    const isBookmarked = bookmarkedMovies.some(m => m.title === movie.title);
-
-    // If it's bookmarked, remove it; otherwise, add it
-    const updatedBookmarkedMovies = isBookmarked
-      ? bookmarkedMovies.filter(m => m.title !== movie.title)
-      : [...bookmarkedMovies, movie];
-
-    // Update the bookmarkedMovies state with the new array
-    setBookmarkedMovies(updatedBookmarkedMovies);
-  };
-
   return (
     <StyledMovieView>
       <Image src={imageSrc} onError={handleImageError} alt={title} />
@@ -49,13 +31,7 @@ function MovieView({ movie }: Props) {
               {rating}
             </Title>
           </Box>
-          <Box onClick={handleBookmarkClick} className='bookmark'>
-            {bookmarkedMovies.some(m => m.title === movie.title) ? (
-              <FaBookmark size={"30px"} />
-            ) : (
-              <FaRegBookmark size={"30px"} />
-            )}
-          </Box>
+          <BookmarkButton {...movie} />
         </Box>
         <Box>
           <Title order={1}>{title}</Title>
@@ -70,7 +46,6 @@ function MovieView({ movie }: Props) {
               </Text>
             ))}
           </Box>
-
           <Text span>Genre: {genre}</Text>
         </Box>
       </Box>