Favorites.js

/*
import React, { useState } from 'react';
import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
import { Favorite, FavoriteBorder } from '@mui/icons-material';

const styles = {
  card: {
    minWidth: 275,
    maxWidth: 600,
    marginBottom: '20pt',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
};

export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {
  const [favoriteLikes, setFavoriteLikes] = useState(likes);

  const toggleFavorite = (id) => {
    const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
    setFavoriteLikes(updatedLikes);
    handleLikes(id);
  };

  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);

  return (
    <div>
      {filteredFavoriteList.map((item) => (
        <Card sx={styles.card} key={item.collectionId}>
          <CardContent>
            <Typography variant="subtitle1">{item.artisName}</Typography>
            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
          </CardContent>
          <CardActions>
            <IconButton onClick={() => toggleFavorite(item.collectionId)}>
              {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </div>
  );
}
*/
//
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
import { Favorite, FavoriteBorder } from '@mui/icons-material';

const styles = {
  card: {
    minWidth: 275,
    maxWidth: 600,
    marginBottom: '20pt',
    marginLeft: 'auto',
    marginRight: 'auto'
  },
};

export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {
  const [favoriteLikes, setFavoriteLikes] = useState(likes);

  useEffect(() => {
    setFavoriteLikes(likes);
  }, [likes]);

  const toggleFavorite = (id) => {
    const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
    setFavoriteLikes(updatedLikes);
    handleLikes(id);
  };

  const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);

  return (
    <div>
      {filteredFavoriteList.map((item) => (
        <Card sx={styles.card} key={item.collectionId}>
          <CardContent>
            <Typography variant="subtitle1">{item.artisName}</Typography>
            <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
          </CardContent>
          <CardActions>
            <IconButton onClick={() => toggleFavorite(item.collectionId)}>
              {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </div>
  );
}