diff --git a/public/app.bundle.js b/public/app.bundle.js
index a2a672320983d2981aeb5a529e783912907ae900..1f7677bfdddee0cc1b4ef20be71e9ae8135ba24f 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2348,7 +2348,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\n\nconst styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n },\n};\n\nexport default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {\n const [favoriteLikes, setFavoriteLikes] = useState(likes);\n\n const toggleFavorite = (id) => {\n const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n\n const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);\n\n return (\n <div>\n {filteredFavoriteList.map((item) => (\n <Card sx={styles.card} key={item.collectionId}>\n <CardContent>\n <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n </CardContent>\n <CardActions>\n <IconButton onClick={() => toggleFavorite(item.collectionId)}>\n {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n </IconButton>\n </CardActions>\n </Card>\n ))}\n </div>\n );\n}\n*/\n\n\n\n\nvar styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction Favorites(_ref) {\n var favoriteList = _ref.favoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes,\n removeFromFavoriteList = _ref.removeFromFavoriteList;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n _useState2 = _slicedToArray(_useState, 2),\n favoriteLikes = _useState2[0],\n setFavoriteLikes = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n setFavoriteLikes(likes);\n }, [likes]);\n var toggleFavorite = function toggleFavorite(id) {\n var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n var filteredFavoriteList = favoriteList.filter(function (item) {\n return favoriteLikes[item.collectionId];\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId);\n }\n }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\n\nconst styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n },\n};\n\nexport default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {\n const [favoriteLikes, setFavoriteLikes] = useState(likes);\n\n const toggleFavorite = (id) => {\n const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n\n const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);\n\n return (\n <div>\n {filteredFavoriteList.map((item) => (\n <Card sx={styles.card} key={item.collectionId}>\n <CardContent>\n <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n </CardContent>\n <CardActions>\n <IconButton onClick={() => toggleFavorite(item.collectionId)}>\n {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n </IconButton>\n </CardActions>\n </Card>\n ))}\n </div>\n );\n}\n*/\n//\n\n\n\nvar styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction Favorites(_ref) {\n var favoriteList = _ref.favoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes,\n removeFromFavoriteList = _ref.removeFromFavoriteList;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n _useState2 = _slicedToArray(_useState, 2),\n favoriteLikes = _useState2[0],\n setFavoriteLikes = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n setFavoriteLikes(likes);\n }, [likes]);\n var toggleFavorite = function toggleFavorite(id) {\n var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n var filteredFavoriteList = favoriteList.filter(function (item) {\n return favoriteLikes[item.collectionId];\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId);\n }\n }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
/***/ }),
@@ -2933,7 +2933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("176c70e49286aa6566be")
+/******/ __webpack_require__.h = () => ("e672bb656978aaea7ff2")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
diff --git a/src/Favorites.js b/src/Favorites.js
index 345779d300f2320122d6cd8a7894eb18b756171a..b821ef166f11962e1c3d25a6be77a88c24554114 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -43,7 +43,7 @@ export default function Favorites({ favoriteList, likes, handleLikes, removeFrom
);
}
*/
-
+//
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
import { Favorite, FavoriteBorder } from '@mui/icons-material';
diff --git a/src/MusicList.js b/src/MusicList.js
index 3a14f4f4665ae8d862f9ea938e9096e6f5d7a82a..1a66f719429b75f369397abaab958c90604403e1 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -62,6 +62,7 @@ export default function MusicList({ list, favoriteList, addToFavoriteList, likes
}
*/
+
import React from 'react';
import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';
import { Favorite, FavoriteBorder } from '@mui/icons-material';