(#15) Fixed bug when favorizing a movie

Co-authored-by: dherikk <dherikk@users.noreply.github.com>

frontend/src/components/favButton/index.tsx

@@ -6,7 +6,8 @@ interface FavButtonProps {
     isFavorited: boolean;
     userName: string;
     id: string;
-}
+    onPressed: (newValue: boolean) => void;
+  }
 
 /**
  * This is a component for favoriting a movie. We take in three props. 
@@ -15,7 +16,7 @@ interface FavButtonProps {
  * @param isFavorited, userName, id 
  * @returns a button with Heart. 
  */
-const FavButton: React.FC<FavButtonProps> =({isFavorited, userName, id}) => {
+const FavButton: React.FC<FavButtonProps> =({isFavorited, userName, id, onPressed}) => {
 
     const [favorited, setFavorited] = useState(isFavorited);
 
@@ -48,6 +49,7 @@ const FavButton: React.FC<FavButtonProps> =({isFavorited, userName, id}) => {
         else {
             removeFavorite();
         }
+        onPressed(!favorited, id)
         setFavorited(!favorited);
       }
 

frontend/src/components/moviesview/index.tsx

@@ -23,6 +23,11 @@ interface MovieTableProps {
   fetchMore: () => void;
 }
 
+type favoritedMovie = {
+  id:string;
+  isFavorited:boolean;
+}
+
 
 const MovieTable: React.FC<MovieTableProps> = ({fetchMore}) => {
   const movies = useSelector(selectMovies);
@@ -30,6 +35,7 @@ const MovieTable: React.FC<MovieTableProps> = ({fetchMore}) => {
   const userName = useSelector(selectUserName)
   const [modalVisible, setModalVisible] = useState(false);
   const [modalMovie, setModalMovie] = useState<searchMovies_getMoviesBySearch>();
+  const [favoritedInSession, setFavoritedInSession] = useState<Array<favoritedMovie>>([]);
 
   const [fontsLoaded] = useFonts({
     'Quicksand-Regular': require('../../assets/fonts/Quicksand-Regular.ttf')
@@ -39,9 +45,27 @@ const MovieTable: React.FC<MovieTableProps> = ({fetchMore}) => {
     if (movie === null || !userName ) {
       return false;
     }
+    let favoritedArray = favoritedInSession.filter(favoritedInSession => favoritedInSession.id === movie.id)
+    if (favoritedArray.length > 0 ) {
+      return favoritedArray[0].isFavorited;
+    }
     return movie.favoritedByUser.includes(userName)
   }
 
+  function handleFavorize(newValue: boolean, id: string) {
+    
+    let alreadyInFavorites = favoritedInSession.filter(favoritedInSession => favoritedInSession.id === id)
+    if (alreadyInFavorites.length > 0) {
+      let newFav = alreadyInFavorites[0]
+      newFav.isFavorited = newValue
+    } else {
+      setFavoritedInSession((state) => [...state, {id:id, isFavorited:newValue}])
+    }
+
+
+    
+  }
+
   const Movie = ({item}: IMovieObject) => (
     <Card 
       style={styles.cardContainer} 
@@ -57,7 +81,7 @@ const MovieTable: React.FC<MovieTableProps> = ({fetchMore}) => {
       </View>
       <Card.Content style={styles.contentContainer}>
         { isLoggedIn
-          ? <FavButton isFavorited={isFavorited(item)} userName={userName !== undefined ? userName : ""} id={item.id}/>
+          ? <FavButton isFavorited={isFavorited(item)} userName={userName !== undefined ? userName : ""} id={item.id} onPressed = {(newValue: boolean, id: string) => handleFavorize(newValue, id)}/>
           : null
         }
         <Title style={styles.title}>{item?.title}</Title>