diff --git a/package.json b/package.json
index 8f327e716b7a35ce7be08cdad5c3882287e5a459..17db8d732434203bac8cc20fb37c84ee33dc53f0 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.13.7",
- "@mui/material": "^5.8.6"
+ "@mui/material": "^5.8.6",
+ "recoil": "^0.7.7"
},
"devDependencies": {
"@babel/cli": "^7.18.6",
diff --git a/public/app.bundle.js b/public/app.bundle.js
index 7de7d23141a414bf0762fa35e58bfb7e8b9f2238..4c94652694087014632ea2960e9d47a297b8ae9a 100644
--- a/public/app.bundle.js
+++ b/public/app.bundle.js
@@ -2326,7 +2326,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 */ App)\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_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./data */ \"./src/data.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\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\n\n\n\n\n\n\n\nfunction App() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n currentTab = _React$useState2[0],\n setCurrentTab = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n searchResult = _React$useState4[0],\n setSearchResult = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1];\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n position: \"fixed\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n align: \"center\",\n variant: \"h3\",\n color: \"inherit\"\n }, \"Sumin's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n height: 60,\n width: \"100%\"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n sx: {\n borderBottom: 1,\n borderColorl: \"divider\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n label: \"Favorites\",\n value: 1\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n label: \"More Contents\",\n value: 2\n }))), currentTab == 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n list: searchResult,\n onSearch: setSearchResult\n }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: searchResult,\n likes: likes\n }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n align: \"center\",\n variant: \"h2\"\n }, \"More\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ App)\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_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\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\n\n\n\nfunction App() {\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n currentTab = _React$useState2[0],\n setCurrentTab = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n searchResult = _React$useState4[0],\n setSearchResult = _React$useState4[1];\n var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n likes = _React$useState6[0],\n setLikes = _React$useState6[1];\n var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n favorites = _React$useState8[0],\n setFavorites = _React$useState8[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n var fetchLikes = function fetchLikes() {\n fetch(\"/likes\").then(function (response) {\n return response.json();\n }).then(function (r) {\n console.log(r);\n setLikes(r);\n })[\"catch\"](function (e) {\n return console.log('error while getting likes');\n });\n };\n fetchLikes();\n }, []);\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n var handleLike = function handleLike(id, item) {\n var isLiked = likes[id] === true;\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !isLiked));\n });\n if (!isLiked) {\n var updatedFavorites = [].concat(_toConsumableArray(favorites), [item]);\n setFavorites(updatedFavorites);\n fetch(\"/likes\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(item)\n })[\"catch\"](function (e) {\n return console.log(\"error while posting likes\");\n });\n } else {\n var _updatedFavorites = favorites.filter(function (favorite) {\n return favorite.collectionId !== id;\n });\n setFavorites(_updatedFavorites);\n fetch(\"/likes/\".concat(id), {\n method: \"DELETE\"\n })[\"catch\"](function (e) {\n return console.log(\"error while deleting\");\n });\n }\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n position: \"fixed\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n align: \"center\",\n variant: \"h3\",\n color: \"inherit\"\n }, \"Sumin's Favorite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n height: 60,\n width: \"100%\"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n sx: {\n borderBottom: 1,\n borderColorl: \"divider\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Search Music\",\n value: 0\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"Favorites\",\n value: 1\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n label: \"More Contents\",\n value: 2\n }))), currentTab == 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n list: searchResult,\n onSearch: setSearchResult,\n likes: likes,\n onLike: handleLike\n }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: favorites,\n likes: likes,\n onLike: handleLike\n }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n align: \"center\",\n variant: \"h2\"\n }, \"More\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
/***/ }),
@@ -2337,7 +2337,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\": () => (__WEBPACK_DEFAULT_EXPORT__)\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_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n\n\n\nvar Favorites = function Favorites(_ref) {\n var list = _ref.list,\n likes = _ref.likes;\n var favoriteList = list.filter(function (item) {\n return likes[item.collectionCensoredName];\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n align: \"center\",\n variant: \"h2\"\n }, \"Favorites\"), favoriteList.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: favoriteList\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n align: \"center\",\n variant: \"h4\"\n }, \"No favorites yet.\"));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Favorites);\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\": () => (__WEBPACK_DEFAULT_EXPORT__)\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 _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n\n\nvar Favorites = function Favorites(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n onLike = _ref.onLike;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: list,\n likes: likes,\n onLike: onLike\n }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Favorites);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.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 */ MusicList)\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_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.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\n\n\n\nvar styles = {\n content: {},\n layout: {\n display: \"flex\",\n justifyContent: \"center\"\n },\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: \"20pt\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n likes = _React$useState2[0],\n setLikes = _React$useState2[1];\n var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n open: false,\n msg: \"\"\n }),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n snackState = _React$useState4[0],\n setSnackState = _React$useState4[1];\n var toggleFavorite = function toggleFavorite(id) {\n return function () {\n setLikes(_objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id])));\n setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n open: true,\n msg: \"\".concat(id, \" is clicked\")\n }));\n };\n };\n var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n if (reason === 'clickaway') {\n return;\n }\n setSnackState({\n open: false,\n msg: ''\n });\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artistName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n onClick: toggleFavorite(item.collectionCensoredName)\n }, likes[item.collectionCensoredName] === true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ MusicList)\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_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.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\n\n\n\nvar styles = {\n content: {},\n layout: {\n display: \"flex\",\n justifyContent: \"center\"\n },\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: \"20pt\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n likes = _ref.likes,\n onLike = _ref.onLike;\n if (!likes) return null;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n open: false,\n msg: \"\"\n }),\n _useState2 = _slicedToArray(_useState, 2),\n snackState = _useState2[0],\n setSnackState = _useState2[1];\n var toggleFavorite = function toggleFavorite(id, name, item) {\n return function () {\n onLike(id, item);\n setSnackState(function (prevState) {\n return _objectSpread(_objectSpread({}, prevState), {}, {\n open: true,\n msg: \"\".concat(name, \" is clicked\")\n });\n });\n };\n };\n var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n if (reason === 'clickaway') {\n return;\n }\n setSnackState({\n open: false,\n msg: ''\n });\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.map(function (item) {\n var isLiked = likes.hasOwnProperty(item.collectionId) && likes[item.collectionId] === true;\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artistName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n onClick: toggleFavorite(item.collectionId, item.collectionCensoredName, item)\n }, isLiked ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
/***/ }),
@@ -2359,7 +2359,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 */ SearchPage)\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_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\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\n\n\nfunction SearchPage(_ref) {\n var list = _ref.list,\n onSearch = _ref.onSearch;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"\"),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n searchWord = _React$useState2[0],\n setSearchWord = _React$useState2[1];\n var handleSearch = function handleSearch(event) {\n event.preventDefault();\n console.log(searchWord);\n setSearchWord(\"\");\n fetch(\"http://itunes.apple.com/search?term=\".concat(searchWord, \"&entity=album\")).then(function (r) {\n return r.json();\n }).then(function (r) {\n console.log(r);\n onSearch(r.results);\n setSearchWord(\"\");\n })[\"catch\"](function (e) {\n return console.log(\"error when search musician\");\n });\n };\n var handleSearchTextChange = function handleSearchTextChange(event) {\n setSearchWord(event.target.value);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n style: {\n display: \"flex\",\n marginTop: 20,\n marginBottom: 15\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n display: \"flex\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n variant: \"outlined\",\n label: \"Music Album Search\",\n type: \"serach\",\n style: {\n width: 450\n },\n onChange: handleSearchTextChange,\n value: searchWord\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"contained\",\n color: \"primary\",\n type: \"submit\",\n onClick: handleSearch,\n style: {\n marginLeft: 20\n }\n }, \"Search\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: list\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ SearchPage)\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_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\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\n\n\nfunction SearchPage(_ref) {\n var list = _ref.list,\n onSearch = _ref.onSearch,\n likes = _ref.likes,\n onLike = _ref.onLike;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(\"\"),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n searchWord = _React$useState2[0],\n setSearchWord = _React$useState2[1];\n var handleSearch = function handleSearch(event) {\n event.preventDefault();\n fetch(\"/musicSearch/\".concat(searchWord)).then(function (response) {\n return response.json();\n }).then(function (r) {\n console.log(r);\n onSearch(r.results);\n setSearchWord(\"\");\n })[\"catch\"](function (e) {\n return console.log(\"error when search musician\");\n });\n };\n var handleSearchTextChange = function handleSearchTextChange(event) {\n setSearchWord(event.target.value);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n style: {\n display: \"flex\",\n marginTop: 20,\n marginBottom: 15\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n style: {\n display: \"flex\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n variant: \"outlined\",\n label: \"Music Album Search\",\n type: \"serach\",\n style: {\n width: 450\n },\n onChange: handleSearchTextChange,\n value: searchWord\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"contained\",\n color: \"primary\",\n type: \"submit\",\n onClick: handleSearch,\n style: {\n marginLeft: 20\n }\n }, \"Search\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: list,\n likes: likes,\n onLike: onLike\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
/***/ }),
@@ -2374,17 +2374,6 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }),
-/***/ "./src/data.js":
-/*!*********************!*\
- !*** ./src/data.js ***!
- \*********************/
-/***/ ((__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\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ music_list: () => (/* binding */ music_list)\n/* harmony export */ });\n// In browser https://itunes.apple.com/search?term=\"blackpink\"&entity=album\n\nvar music_list = {\n \"resultCount\": 50,\n \"results\": [{\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1263315668,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK - EP\",\n \"collectionCensoredName\": \"BLACKPINK - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-ep/1263315668?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/27/a8/2d/27a82df6-aad9-a7ca-4001-ed03f9223c56/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/27/a8/2d/27a82df6-aad9-a7ca-4001-ed03f9223c56/source/100x100bb.jpg\",\n \"collectionPrice\": 7.74,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 6,\n \"copyright\": \"℗ 2017 AVEX ENTERTAINMENT INC.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2017-08-29T07:00:00Z\",\n \"primaryGenreName\": \"J-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1441511506,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK IN YOUR AREA\",\n \"collectionCensoredName\": \"BLACKPINK IN YOUR AREA\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-in-your-area/1441511506?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music115/v4/1f/fe/d0/1ffed01b-7510-1b15-fa1e-da620bc749b9/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music115/v4/1f/fe/d0/1ffed01b-7510-1b15-fa1e-da620bc749b9/source/100x100bb.jpg\",\n \"collectionPrice\": 11.61,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 9,\n \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-12-05T08:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1455720702,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK ARENA TOUR 2018 \\\"SPECIAL FINAL IN KYOCERA DOME OSAKA\\\"\",\n \"collectionCensoredName\": \"BLACKPINK ARENA TOUR 2018 \\\"SPECIAL FINAL IN KYOCERA DOME OSAKA\\\"\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-arena-tour-2018-special-final-in-kyocera/1455720702?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/d2/98/1a/d2981a24-1f59-68f6-80e9-6a882025489d/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/d2/98/1a/d2981a24-1f59-68f6-80e9-6a882025489d/source/100x100bb.jpg\",\n \"collectionPrice\": 12.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 15,\n \"copyright\": \"℗ 2019 AVEX ENTERTAINMENT INC.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-03-13T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1533894050,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"THE ALBUM\",\n \"collectionCensoredName\": \"THE ALBUM\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/the-album/1533894050?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music115/v4/1c/40/08/1c400860-ebac-750e-d769-70452c613641/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music115/v4/1c/40/08/1c400860-ebac-750e-d769-70452c613641/source/100x100bb.jpg\",\n \"collectionPrice\": 7.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 8,\n \"copyright\": \"℗ 2020 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-10-02T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1570169082,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK 2021 'THE SHOW' LIVE\",\n \"collectionCensoredName\": \"BLACKPINK 2021 'THE SHOW' LIVE\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2021-the-show-live/1570169082?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/b6/48/3c/b6483cb5-3b12-8fe4-51fc-29e4c9f41c81/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music125/v4/b6/48/3c/b6483cb5-3b12-8fe4-51fc-29e4c9f41c81/source/100x100bb.jpg\",\n \"collectionPrice\": 11.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 15,\n \"copyright\": \"℗ 2021 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-06-01T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1313151079,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"SQUARE TWO - EP\",\n \"collectionCensoredName\": \"SQUARE TWO - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/square-two-ep/1313151079?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/db/ea/fc/dbeafc60-c44d-115a-bac8-b1ed6b88768b/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/db/ea/fc/dbeafc60-c44d-115a-bac8-b1ed6b88768b/source/100x100bb.jpg\",\n \"collectionPrice\": 3.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 5,\n \"copyright\": \"℗ 2016 YG Entertainment\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2016-11-01T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1551479990,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"SQUARE UP - EP\",\n \"collectionCensoredName\": \"SQUARE UP - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/square-up-ep/1551479990?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/71/ac/31/71ac31ed-61b6-e120-f504-f4c707a27a91/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/71/ac/31/71ac31ed-61b6-e120-f504-f4c707a27a91/source/100x100bb.jpg\",\n \"collectionPrice\": 3.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 4,\n \"copyright\": \"℗ 2018 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-06-15T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1512384089,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK 2019-2020 WORLD TOUR IN YOUR AREA - TOKYO DOME (Live)\",\n \"collectionCensoredName\": \"BLACKPINK 2019-2020 WORLD TOUR IN YOUR AREA - TOKYO DOME (Live)\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2019-2020-world-tour-in-your-area-tokyo-dome-live/1512384089?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/59/12/c8/5912c802-307a-0dd8-5fc1-4deb64e36d1e/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/59/12/c8/5912c802-307a-0dd8-5fc1-4deb64e36d1e/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 12,\n \"copyright\": \"An Interscope Records release; ℗ 2020 UNIVERSAL MUSIC LLC\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-05-14T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 921425189,\n \"collectionId\": 1573682660,\n \"amgArtistId\": 3361376,\n \"artistName\": \"Ted Park & Mike Gao\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/ted-park/921425189?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1573682660?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/78/f2/4b/78f24b7c-ba68-8f36-1dd3-6c21ecee28ad/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/78/f2/4b/78f24b7c-ba68-8f36-1dd3-6c21ecee28ad/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2021 Ted Park\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-07-09T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1477390055,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"BLACKPINK 2018 TOUR 'IN YOUR AREA' SEOUL (Live)\",\n \"collectionCensoredName\": \"BLACKPINK 2018 TOUR 'IN YOUR AREA' SEOUL (Live)\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-2018-tour-in-your-area-seoul-live/1477390055?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/88/d6/14/88d61441-7b38-5a53-d6df-904714e6f4a2/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/88/d6/14/88d61441-7b38-5a53-d6df-904714e6f4a2/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 14,\n \"copyright\": \"℗ 2019 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-08-30T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1359000280,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"Re: BLACKPINK - EP\",\n \"collectionCensoredName\": \"Re: BLACKPINK - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/re-blackpink-ep/1359000280?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music125/v4/b8/29/4e/b8294ecc-aaaa-aa94-c6fc-ec7f434856d6/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music125/v4/b8/29/4e/b8294ecc-aaaa-aa94-c6fc-ec7f434856d6/source/100x100bb.jpg\",\n \"collectionPrice\": 7.74,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 6,\n \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-03-28T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1551479989,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"KILL THIS LOVE - EP\",\n \"collectionCensoredName\": \"KILL THIS LOVE - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/kill-this-love-ep/1551479989?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/a0/30/89/a03089c6-73d6-e758-69e0-6d821d4bc06e/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/a0/30/89/a03089c6-73d6-e758-69e0-6d821d4bc06e/source/100x100bb.jpg\",\n \"collectionPrice\": 4.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 5,\n \"copyright\": \"℗ 2019 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-04-05T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1315917456,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"SQUARE ONE - Single\",\n \"collectionCensoredName\": \"SQUARE ONE - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/square-one-single/1315917456?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/b9/7b/1c/b97b1c40-b8a0-3de8-f3f9-92e33c92d555/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/b9/7b/1c/b97b1c40-b8a0-3de8-f3f9-92e33c92d555/source/100x100bb.jpg\",\n \"collectionPrice\": 1.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 2,\n \"copyright\": \"℗ 2016 YG Entertainment\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2016-08-08T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1251249729,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"As If It's Your Last - Single\",\n \"collectionCensoredName\": \"As If It's Your Last - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/as-if-its-your-last-single/1251249729?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music124/v4/d5/d2/a9/d5d2a927-309d-e104-11aa-51c7c54f613c/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music124/v4/d5/d2/a9/d5d2a927-309d-e104-11aa-51c7c54f613c/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2017 YG Entertainment\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2017-06-22T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 913944,\n \"collectionId\": 1441819348,\n \"artistName\": \"JENNIE (from BLACKPINK)\",\n \"collectionName\": \"SOLO - Single\",\n \"collectionCensoredName\": \"SOLO - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/jennie/913944?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/solo-single/1441819348?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/78/18/60/7818608f-3e65-c3cd-f54a-5742dc3f3cf7/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music118/v4/78/18/60/7818608f-3e65-c3cd-f54a-5742dc3f3cf7/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2018 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-11-12T08:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 491599229,\n \"collectionId\": 730855247,\n \"amgArtistId\": 1088191,\n \"artistName\": \"livetune\",\n \"collectionName\": \"Pink or Black (feat. Hatsune Miku) - Single\",\n \"collectionCensoredName\": \"Pink or Black (feat. Hatsune Miku) - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/livetune/491599229?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-or-black-feat-hatsune-miku-single/730855247?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music4/v4/25/4a/1a/254a1a01-31f9-c971-11a6-d9d00e7a45f9/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music4/v4/25/4a/1a/254a1a01-31f9-c971-11a6-d9d00e7a45f9/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2013 TOY'S FACTORY\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2013-11-06T08:00:00Z\",\n \"primaryGenreName\": \"Electronic\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1406242696,\n \"collectionId\": 1557744841,\n \"artistName\": \"ROSÉ\",\n \"collectionName\": \"R - Single\",\n \"collectionCensoredName\": \"R - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/ros%C3%A9/1406242696?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/r-single/1557744841?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/b0/35/a4/b035a4c4-50b3-3fe9-6206-48f9a57428e3/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/b0/35/a4/b035a4c4-50b3-3fe9-6206-48f9a57428e3/source/100x100bb.jpg\",\n \"collectionPrice\": 1.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 2,\n \"copyright\": \"℗ 2021 YG Entertainment, distributed through Interscope Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-03-12T08:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 929709668,\n \"collectionId\": 929709656,\n \"artistName\": \"Montessori Dads\",\n \"collectionName\": \"Black & White & Pink\",\n \"collectionCensoredName\": \"Black & White & Pink\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/montessori-dads/929709668?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-white-pink/929709656?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music3/v4/5a/58/63/5a5863dc-6a07-2e90-3426-4ebd6e9fd357/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music3/v4/5a/58/63/5a5863dc-6a07-2e90-3426-4ebd6e9fd357/source/100x100bb.jpg\",\n \"collectionPrice\": 8.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 10,\n \"copyright\": \"℗ 2015 Paine Group, LLC\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2015-02-10T08:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1449813048,\n \"collectionId\": 1528439853,\n \"artistName\": \"DooPiano\",\n \"collectionName\": \"The Best of BLACKPINK (Piano Album)\",\n \"collectionCensoredName\": \"The Best of BLACKPINK (Piano Album)\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/doopiano/1449813048?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/the-best-of-blackpink-piano-album/1528439853?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music115/v4/62/85/68/628568a0-7679-dad4-4b2f-ee28385fd043/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music115/v4/62/85/68/628568a0-7679-dad4-4b2f-ee28385fd043/source/100x100bb.jpg\",\n \"collectionPrice\": 9.90,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 10,\n \"copyright\": \"℗ 2020 DooPiano\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-08-19T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 459030916,\n \"collectionId\": 1050941389,\n \"artistName\": \"Chinatsu Yoshikawa\",\n \"collectionName\": \"ゆるゆり うた♪ソロ!02「ぴんぶら☆ピン -Pink★Black☆Pink-」 - EP\",\n \"collectionCensoredName\": \"ゆるゆり うた♪ソロ!02「ぴんぶら☆ピン -Pink★Black☆Pink-」 - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/chinatsu-yoshikawa/459030916?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/%E3%82%86%E3%82%8B%E3%82%86%E3%82%8A-%E3%81%86%E3%81%9F-%E3%82%BD%E3%83%AD-02-%E3%81%B4%E3%82%93%E3%81%B6%E3%82%89-%E3%83%94%E3%83%B3-pink-black-pink-ep/1050941389?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music6/v4/79/91/ea/7991eacf-134a-d59e-c6ae-7d34ad3a34c1/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music6/v4/79/91/ea/7991eacf-134a-d59e-c6ae-7d34ad3a34c1/source/100x100bb.jpg\",\n \"collectionPrice\": 5.16,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 4,\n \"copyright\": \"℗ 2015 Pony Canyon Inc.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2015-11-04T08:00:00Z\",\n \"primaryGenreName\": \"Anime\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 951231115,\n \"collectionId\": 1467003776,\n \"amgArtistId\": 3473663,\n \"artistName\": \"Piano Dreamers\",\n \"collectionName\": \"Piano Dreamers Play Blackpink (Instrumental)\",\n \"collectionCensoredName\": \"Piano Dreamers Play Blackpink (Instrumental)\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/piano-dreamers/951231115?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/piano-dreamers-play-blackpink-instrumental/1467003776?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/51/ad/0b/51ad0b1f-f843-cf5f-f074-0e8605b7384a/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/51/ad/0b/51ad0b1f-f843-cf5f-f074-0e8605b7384a/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 12,\n \"copyright\": \"℗ 2019 CC Entertainment, Inc.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-07-05T07:00:00Z\",\n \"primaryGenreName\": \"Instrumental\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1482719359,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"Kill This Love (Japan Version) - EP\",\n \"collectionCensoredName\": \"Kill This Love (Japan Version) - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/kill-this-love-japan-version-ep/1482719359?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/86/2f/45/862f455e-8b7a-c071-b922-100f93d1efc8/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music124/v4/86/2f/45/862f455e-8b7a-c071-b922-100f93d1efc8/source/100x100bb.jpg\",\n \"collectionPrice\": 4.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 5,\n \"copyright\": \"An Interscope Records release; ℗ 2019 UNIVERSAL MUSIC LLC\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-10-16T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1482285399,\n \"collectionId\": 1521352986,\n \"artistName\": \"Shin Giwon Piano\",\n \"collectionName\": \"BLACKPINK Piano Collection\",\n \"collectionCensoredName\": \"BLACKPINK Piano Collection\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/shin-giwon-piano/1482285399?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-piano-collection/1521352986?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/76/cc/6f/76cc6ffe-62ef-f225-0d5e-4f846c463f61/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music123/v4/76/cc/6f/76cc6ffe-62ef-f225-0d5e-4f846c463f61/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 17,\n \"copyright\": \"℗ 2020 Shin Giwon\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-06-29T07:00:00Z\",\n \"primaryGenreName\": \"New Age\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 76107280,\n \"collectionId\": 1416167580,\n \"artistName\": \"A.B.Y.S.S.\",\n \"collectionName\": \"Black Suits & Pink Slips\",\n \"collectionCensoredName\": \"Black Suits & Pink Slips\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/a-b-y-s-s/76107280?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-suits-pink-slips/1416167580?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music118/v4/42/a8/2a/42a82ad9-21f1-7eae-113f-feffc24f901d/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music118/v4/42/a8/2a/42a82ad9-21f1-7eae-113f-feffc24f901d/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 13,\n \"copyright\": \"℗ 2018 A.B.Y.S.S.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-08-11T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1413680648,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"DDU-DU DDU-DU (JP Ver.) - Single\",\n \"collectionCensoredName\": \"DDU-DU DDU-DU (JP Ver.) - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/ddu-du-ddu-du-jp-ver-single/1413680648?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/ae/de/b9/aedeb9c8-7e83-b63d-f178-fdcfc52c3b7f/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/ae/de/b9/aedeb9c8-7e83-b63d-f178-fdcfc52c3b7f/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2018 AVEX ENTERTAINMENT INC.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-08-22T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1474802237,\n \"collectionId\": 1571958799,\n \"artistName\": \"Demaklenco, DJP Montedo & Maicol\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/demaklenco/1474802237?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1571958799?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/3d/04/ae/3d04aef6-a6f1-0850-ac64-e1f087f70ec2/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music115/v4/3d/04/ae/3d04aef6-a6f1-0850-ac64-e1f087f70ec2/source/100x100bb.jpg\",\n \"collectionPrice\": 1.98,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 2,\n \"copyright\": \"℗ 2021 Paolo Montedonico\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-06-19T07:00:00Z\",\n \"primaryGenreName\": \"Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1496808208,\n \"collectionId\": 1496813775,\n \"amgArtistId\": 3699652,\n \"artistName\": \"UPTOWN BOYBAND\",\n \"collectionName\": \"BLACKPINK - Single\",\n \"collectionCensoredName\": \"BLACKPINK - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/uptown-boyband/1496808208?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1496813775?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music113/v4/b1/2f/f1/b12ff170-ba67-a3df-af6b-fb2ac0bda08d/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music113/v4/b1/2f/f1/b12ff170-ba67-a3df-af6b-fb2ac0bda08d/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2020 CLUB UBB\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-02-03T08:00:00Z\",\n \"primaryGenreName\": \"Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1065825050,\n \"collectionId\": 1456873558,\n \"artistName\": \"Royal Sadness\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/royal-sadness/1065825050?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1456873558?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/01/42/77/01427753-9a2e-403a-782c-4b296a616a72/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/01/42/77/01427753-9a2e-403a-782c-4b296a616a72/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2019 Royal Sadness\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-03-19T07:00:00Z\",\n \"primaryGenreName\": \"Electronic\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 331122,\n \"collectionId\": 1479103847,\n \"artistName\": \"Various Artists\",\n \"collectionName\": \"Blackpink\",\n \"collectionCensoredName\": \"Blackpink\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink/1479103847?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music123/v4/35/68/83/3568834d-3efb-0a07-456b-064a39765161/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music123/v4/35/68/83/3568834d-3efb-0a07-456b-064a39765161/source/100x100bb.jpg\",\n \"collectionPrice\": 8.91,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 9,\n \"copyright\": \"℗ 2019 Udea Zenti\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-09-04T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1564279585,\n \"collectionId\": 1531913742,\n \"artistName\": \"WU\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/wu/1564279585?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1531913742?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/6c/41/c0/6c41c038-e2f6-1e35-4b9b-31dfa09e7f53/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music124/v4/6c/41/c0/6c41c038-e2f6-1e35-4b9b-31dfa09e7f53/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2020 Bariswu Production\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-09-11T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1141774019,\n \"collectionId\": 1574291360,\n \"amgArtistId\": 3243151,\n \"artistName\": \"BLACKPINK\",\n \"collectionName\": \"Lovesick Girls (Japan Version) - Single\",\n \"collectionCensoredName\": \"Lovesick Girls (Japan Version) - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1141774019?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/lovesick-girls-japan-version-single/1574291360?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/47/b9/aa/47b9aa2c-5220-32d5-46bf-fce3fec8eaf0/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/47/b9/aa/47b9aa2c-5220-32d5-46bf-fce3fec8eaf0/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"An Interscope Records release; ℗ 2021 UNIVERSAL MUSIC LLC\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-07-13T07:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1200899105,\n \"collectionId\": 1497233316,\n \"artistName\": \"Bashment YC & Kali Blanco\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/bashment-yc/1200899105?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1497233316?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/76/8f/d1/768fd1b6-08e8-f7a5-41d4-998f6db162ea/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music123/v4/76/8f/d1/768fd1b6-08e8-f7a5-41d4-998f6db162ea/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2020 Electric Station Label\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-03-06T08:00:00Z\",\n \"primaryGenreName\": \"House\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1528237530,\n \"collectionId\": 1530405192,\n \"artistName\": \"Rolenbmusic\",\n \"collectionName\": \"Blackpink - Single\",\n \"collectionCensoredName\": \"Blackpink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/rolenbmusic/1528237530?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/blackpink-single/1530405192?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music114/v4/67/ff/43/67ff43e5-ca50-f2f1-4db2-a1622ecc7727/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music114/v4/67/ff/43/67ff43e5-ca50-f2f1-4db2-a1622ecc7727/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2020 RolenMusic\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-09-02T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 19810758,\n \"collectionId\": 1037593355,\n \"amgArtistId\": 2120823,\n \"artistName\": \"Les Black's Amazing Pink Holes\",\n \"collectionName\": \"We're Glad We Are What We Are\",\n \"collectionCensoredName\": \"We're Glad We Are What We Are\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/les-blacks-amazing-pink-holes/19810758?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/were-glad-we-are-what-we-are/1037593355?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/81/bf/5781bf3d-6af1-7aef-29d0-e076c08415bc/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/81/bf/5781bf3d-6af1-7aef-29d0-e076c08415bc/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 25,\n \"copyright\": \"℗ 2000 Smog Veil Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2000-11-03T08:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 211586470,\n \"collectionId\": 211586462,\n \"amgArtistId\": 943854,\n \"artistName\": \"Little Mascara\",\n \"collectionName\": \"Hot Pink & Black\",\n \"collectionCensoredName\": \"Hot Pink & Black\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/little-mascara/211586470?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/hot-pink-black/211586462?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/cf/2d/57/cf2d575f-6bda-d63c-3a45-d1731efa228c/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/cf/2d/57/cf2d575f-6bda-d63c-3a45-d1731efa228c/source/100x100bb.jpg\",\n \"collectionPrice\": 9.90,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 10,\n \"copyright\": \"℗ 2006 Candy Darling Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2006-12-18T08:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1292250339,\n \"collectionId\": 1436989049,\n \"artistName\": \"Ferrini 41\",\n \"collectionName\": \"The Pink and Black Project\",\n \"collectionCensoredName\": \"The Pink and Black Project\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/ferrini-41/1292250339?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/the-pink-and-black-project/1436989049?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music128/v4/36/ea/0e/36ea0ec9-c398-bd3a-af1b-33b8e09b0db4/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music128/v4/36/ea/0e/36ea0ec9-c398-bd3a-af1b-33b8e09b0db4/source/100x100bb.jpg\",\n \"collectionPrice\": 6.21,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 9,\n \"copyright\": \"℗ 2018 41 Mob\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-09-20T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1521729674,\n \"collectionId\": 1538532761,\n \"artistName\": \"Pianella Piano\",\n \"collectionName\": \"Piano Tribute to Blackpink, Vol. 1\",\n \"collectionCensoredName\": \"Piano Tribute to Blackpink, Vol. 1\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/pianella-piano/1521729674?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/piano-tribute-to-blackpink-vol-1/1538532761?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/28/50/ea/2850eaa2-5170-d0c4-a917-5b968af8549a/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/28/50/ea/2850eaa2-5170-d0c4-a917-5b968af8549a/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 16,\n \"copyright\": \"℗ 2020 Pianella Piano\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2020-11-03T08:00:00Z\",\n \"primaryGenreName\": \"K-Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 320714476,\n \"collectionId\": 320714466,\n \"amgArtistId\": 1164901,\n \"artistName\": \"The Big Pink Black\",\n \"collectionName\": \"The Big Pink Black\",\n \"collectionCensoredName\": \"The Big Pink Black\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/the-big-pink-black/320714476?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/the-big-pink-black/320714466?uo=4\",\n \"artworkUrl60\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/40/5a/71/405a7176-6a6e-7905-a20a-551f35b0067c/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is4-ssl.mzstatic.com/image/thumb/Music/v4/40/5a/71/405a7176-6a6e-7905-a20a-551f35b0067c/source/100x100bb.jpg\",\n \"collectionPrice\": 8.91,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 9,\n \"copyright\": \"℗ 2009 The Big Pink Black\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2009-06-15T07:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 19810758,\n \"collectionId\": 1037558837,\n \"amgArtistId\": 2120823,\n \"artistName\": \"Les Black's Amazing Pink Holes\",\n \"collectionName\": \"Breakfast With the Holes\",\n \"collectionCensoredName\": \"Breakfast With the Holes\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/les-blacks-amazing-pink-holes/19810758?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/breakfast-with-the-holes/1037558837?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music5/v4/cb/5e/97/cb5e9702-776a-b6c4-5e83-d8f99915eae0/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music5/v4/cb/5e/97/cb5e9702-776a-b6c4-5e83-d8f99915eae0/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 18,\n \"copyright\": \"℗ 2008 Smog Veil Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2008-07-31T07:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 368236250,\n \"collectionId\": 1087165594,\n \"amgArtistId\": 2092643,\n \"artistName\": \"Tex Smith\",\n \"collectionName\": \"Pink and Black\",\n \"collectionCensoredName\": \"Pink and Black\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/tex-smith/368236250?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-and-black/1087165594?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/ee/e6/57eee68a-5500-e3d0-b0f6-f2920de9c322/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music69/v4/57/ee/e6/57eee68a-5500-e3d0-b0f6-f2920de9c322/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 13,\n \"copyright\": \"℗ 2015 Tex Smith\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2015-12-11T08:00:00Z\",\n \"primaryGenreName\": \"Country\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1083661855,\n \"collectionId\": 1484425793,\n \"artistName\": \"AKAI SOLO & Pink Siifu\",\n \"collectionName\": \"Black Sand\",\n \"collectionCensoredName\": \"Black Sand\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/akai-solo/1083661855?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-sand/1484425793?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music114/v4/5c/f0/35/5cf03578-66a4-edb5-6a3d-9e2c7e51d707/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music114/v4/5c/f0/35/5cf03578-66a4-edb5-6a3d-9e2c7e51d707/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 15,\n \"copyright\": \"℗ 2019 Field-Left\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-10-29T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1569909010,\n \"collectionId\": 1569916263,\n \"artistName\": \"RDQO BEATS\",\n \"collectionName\": \"Black Pink - Single\",\n \"collectionCensoredName\": \"Black Pink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/rdqo-beats/1569909010?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1569916263?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/31/d0/86/31d086d0-35c2-3fef-5170-664f5d2249ff/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music125/v4/31/d0/86/31d086d0-35c2-3fef-5170-664f5d2249ff/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2021 3075302 Records DK\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-05-27T07:00:00Z\",\n \"primaryGenreName\": \"Hip-Hop/Rap\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1204917424,\n \"collectionId\": 1358440377,\n \"artistName\": \"BlackPink\",\n \"collectionName\": \"Peep Show - EP\",\n \"collectionCensoredName\": \"Peep Show - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/blackpink/1204917424?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/peep-show-ep/1358440377?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music128/v4/d6/91/77/d691770d-270b-e2fa-ce34-ad318234e22f/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music128/v4/d6/91/77/d691770d-270b-e2fa-ce34-ad318234e22f/source/100x100bb.jpg\",\n \"collectionPrice\": 4.95,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 5,\n \"copyright\": \"℗ 2018 Black Pink\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-03-08T08:00:00Z\",\n \"primaryGenreName\": \"Alternative\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1445708481,\n \"collectionId\": 1457441806,\n \"artistName\": \"Gavin\",\n \"collectionName\": \"Pink and Black\",\n \"collectionCensoredName\": \"Pink and Black\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/gavin/1445708481?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-and-black/1457441806?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/96/1c/68/961c688f-216c-af37-fd34-7700fe7ac808/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/96/1c/68/961c688f-216c-af37-fd34-7700fe7ac808/source/100x100bb.jpg\",\n \"collectionPrice\": 7.53,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 7,\n \"copyright\": \"℗ 2019 BOVEE's PRODUCE DEPT.\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-03-28T07:00:00Z\",\n \"primaryGenreName\": \"Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1413635617,\n \"collectionId\": 1442944804,\n \"artistName\": \"Latindian Style\",\n \"collectionName\": \"Black Pink - Single\",\n \"collectionCensoredName\": \"Black Pink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/latindian-style/1413635617?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1442944804?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music128/v4/5d/39/24/5d39240c-064e-feda-942d-dc3b46582d68/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music128/v4/5d/39/24/5d39240c-064e-feda-942d-dc3b46582d68/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2018 Hinjew Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2018-07-29T07:00:00Z\",\n \"primaryGenreName\": \"Techno\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1499787910,\n \"collectionId\": 1553000005,\n \"artistName\": \"firstclasslikealways\",\n \"collectionName\": \"Black Pink - Single\",\n \"collectionCensoredName\": \"Black Pink - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/firstclasslikealways/1499787910?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-pink-single/1553000005?uo=4\",\n \"artworkUrl60\": \"https://is3-ssl.mzstatic.com/image/thumb/Music124/v4/2e/de/87/2ede8757-1d9d-f9ce-1cca-4e8c853d45e4/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is3-ssl.mzstatic.com/image/thumb/Music124/v4/2e/de/87/2ede8757-1d9d-f9ce-1cca-4e8c853d45e4/source/100x100bb.jpg\",\n \"collectionPrice\": 0.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2021 1604518 Records DK\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2021-02-08T08:00:00Z\",\n \"primaryGenreName\": \"Pop\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1472450899,\n \"collectionId\": 1472865026,\n \"artistName\": \"Jesus the Snake\",\n \"collectionName\": \"Black Acid, Pink Rain\",\n \"collectionCensoredName\": \"Black Acid, Pink Rain\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/jesus-the-snake/1472450899?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-acid-pink-rain/1472865026?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music113/v4/f3/c4/99/f3c4996b-c0ae-90a2-0bcd-64a59784ca6f/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music113/v4/f3/c4/99/f3c4996b-c0ae-90a2-0bcd-64a59784ca6f/source/100x100bb.jpg\",\n \"collectionPrice\": 9.99,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 5,\n \"copyright\": \"℗ 2019 1363643 Records DK\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2019-07-11T07:00:00Z\",\n \"primaryGenreName\": \"Alternative\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 1458647578,\n \"collectionId\": 500609353,\n \"artistName\": \"Black Earth\",\n \"collectionName\": \"Pink Champagne\",\n \"collectionCensoredName\": \"Pink Champagne\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/black-earth/1458647578?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-champagne/500609353?uo=4\",\n \"artworkUrl60\": \"https://is1-ssl.mzstatic.com/image/thumb/Music/v4/f3/c7/66/f3c766b1-7ac7-8f1e-9d53-cdfbdcd565a4/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is1-ssl.mzstatic.com/image/thumb/Music/v4/f3/c7/66/f3c766b1-7ac7-8f1e-9d53-cdfbdcd565a4/source/100x100bb.jpg\",\n \"collectionPrice\": 9.90,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 10,\n \"copyright\": \"℗ 2012 Purple Kush\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2012-01-03T08:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 964320885,\n \"collectionId\": 964320884,\n \"artistName\": \"Lindy Vision\",\n \"collectionName\": \"Pink + Black - EP\",\n \"collectionCensoredName\": \"Pink + Black - EP\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/lindy-vision/964320885?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/pink-black-ep/964320884?uo=4\",\n \"artworkUrl60\": \"https://is2-ssl.mzstatic.com/image/thumb/Music5/v4/6a/c5/5a/6ac55ade-2bd0-0f22-deae-ff468ca2419a/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is2-ssl.mzstatic.com/image/thumb/Music5/v4/6a/c5/5a/6ac55ade-2bd0-0f22-deae-ff468ca2419a/source/100x100bb.jpg\",\n \"collectionPrice\": 4.95,\n \"collectionExplicitness\": \"explicit\",\n \"contentAdvisoryRating\": \"Explicit\",\n \"trackCount\": 5,\n \"copyright\": \"℗ 2014 Lindy Vision\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2014-07-18T07:00:00Z\",\n \"primaryGenreName\": \"Electronic\"\n }, {\n \"wrapperType\": \"collection\",\n \"collectionType\": \"Album\",\n \"artistId\": 47793786,\n \"collectionId\": 1398956234,\n \"amgArtistId\": 685284,\n \"artistName\": \"The Pink Spiders\",\n \"collectionName\": \"Black Dagger - Single\",\n \"collectionCensoredName\": \"Black Dagger - Single\",\n \"artistViewUrl\": \"https://music.apple.com/us/artist/the-pink-spiders/47793786?uo=4\",\n \"collectionViewUrl\": \"https://music.apple.com/us/album/black-dagger-single/1398956234?uo=4\",\n \"artworkUrl60\": \"https://is5-ssl.mzstatic.com/image/thumb/Music115/v4/05/b0/24/05b0243f-b852-8ed8-8f75-3a6edd2105f3/source/60x60bb.jpg\",\n \"artworkUrl100\": \"https://is5-ssl.mzstatic.com/image/thumb/Music115/v4/05/b0/24/05b0243f-b852-8ed8-8f75-3a6edd2105f3/source/100x100bb.jpg\",\n \"collectionPrice\": 1.29,\n \"collectionExplicitness\": \"notExplicit\",\n \"trackCount\": 1,\n \"copyright\": \"℗ 2018 Mean Buzz Records\",\n \"country\": \"USA\",\n \"currency\": \"USD\",\n \"releaseDate\": \"2017-12-05T08:00:00Z\",\n \"primaryGenreName\": \"Rock\"\n }]\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (music_list);\n\n//# sourceURL=webpack://muibasic_starterkit/./src/data.js?");
-
-/***/ }),
-
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
@@ -2933,7 +2922,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
-/******/ __webpack_require__.h = () => ("52634868a9d6b368ada4")
+/******/ __webpack_require__.h = () => ("125a413f8e7df3fb0262")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
diff --git a/public/index.html b/public/index.html
index ea79ccfcf996112baca51c5c6310e7084f0cb267..a9902c04fefb0ed2a7ce8dedf0e00f444cf349fc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,6 @@
<html>
<head>
- <title> muiBasic </title>
+ <title> sumin's music </title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
diff --git a/src/App.js b/src/App.js
index a6c8243b2f4a367c250427ca3153127892d9c2c0..dbdccf6dd27b2e19c5f4ec7e395a794dd56e735b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,59 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import {Box,Tabs,Tab, Typography, AppBar, CssBaseline} from "@mui/material";
-import MusicList from "./MusicList";
import Favorites from './Favorites';
-import music_list from "./data";
-import SnackMsg from './SnackMsg';
import SearchPage from './SearchPage';
-import { SettingsCellRounded } from '@mui/icons-material';
export default function App (){
const [currentTab,setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [likes, setLikes] = React.useState({});
+ const [favorites, setFavorites] = React.useState([]);
+
+
+ useEffect(() => {
+ const fetchLikes = () => {
+ fetch("/likes")
+ .then((response)=>response.json())
+ .then((r)=>{
+ console.log(r);
+ setLikes(r);
+ }).catch(e => console.log('error while getting likes'));
+ };
+
+ fetchLikes();
+ }, []);
+
const handleTabChange = (event, newValue)=>{
setCurrentTab(newValue);
}
+ const handleLike = (id, item) => {
+ const isLiked = likes[id] === true;
+
+ setLikes((prevLikes) => ({ ...prevLikes, [id]: !isLiked }));
+
+ if(!isLiked){
+ const updatedFavorites = [...favorites, item];
+ setFavorites(updatedFavorites);
+
+ fetch("/likes", {
+ method: "POST",
+ headers: {
+ "Content-Type" : "application/json",
+ },
+ body: JSON.stringify(item),
+ }).catch((e) => console.log("error while posting likes"));
+ } else {
+ const updatedFavorites = favorites.filter(favorite => favorite.collectionId !== id);
+ setFavorites(updatedFavorites);
+
+ fetch(`/likes/${id}`, {
+ method: "DELETE",
+ }).catch((e) => console.log("error while deleting"));
+ }
+ };
+
return (
<React.Fragment>
<AppBar position ="fixed">
@@ -32,10 +70,9 @@ export default function App (){
</Tabs>
</Box>
- {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
- {currentTab === 1 && <Favorites list={searchResult} likes={likes} />}
+ {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} likes={likes} onLike={handleLike}/>}
+ {currentTab === 1 && <Favorites list={favorites} likes={likes} onLike={handleLike}/>}
{currentTab == 2 && <Typography align="center" variant='h2'>More</Typography>}
</React.Fragment>
);
-}
-
+}
\ No newline at end of file
diff --git a/src/Favorites.js b/src/Favorites.js
index 121e8b98565fcf94a0a8134240c6d65e04c8964f..06f7c0548bad9042f82a8375ffe3060842918cf1 100644
--- a/src/Favorites.js
+++ b/src/Favorites.js
@@ -1,19 +1,13 @@
-import React from 'react';
-import { Typography } from '@mui/material';
+import React, { useEffect } from 'react';
import MusicList from './MusicList';
-const Favorites = ({ list, likes }) => {
- const favoriteList = list.filter(item => likes[item.collectionCensoredName]);
-
+const Favorites = ({ list, likes, onLike}) => {
+
return (
<React.Fragment>
- <Typography align="center" variant="h2">Favorites</Typography>
- {favoriteList.length > 0 ? (
- <MusicList list={favoriteList} />
- ) : (
- <Typography align="center" variant="h4">No favorites yet.</Typography>
- )}
+ <MusicList list={list} likes={likes} onLike={onLike} />
</React.Fragment>
);
}
+
export default Favorites;
diff --git a/src/MusicList.js b/src/MusicList.js
index f336053fb358430db314dc76d903dc4b803991ab..5db45c5566066face9fa2d6d22cb8cdaf86f9c5a 100644
--- a/src/MusicList.js
+++ b/src/MusicList.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from 'react';
import {Card, CardContent,CardActions, Typography,IconButton, Alert} from "@mui/material";
import {Favorite, FavoriteBorder} from "@mui/icons-material";
import SnackMsg from "./SnackMsg";
@@ -19,14 +19,18 @@ const styles={
};
-export default function MusicList ({list}){
+export default function MusicList ({list, likes, onLike}){
+ if (!likes) return null;
- const [likes,setLikes] = React.useState({});
- let [snackState, setSnackState] = React.useState({open:false, msg:""});
+ let [snackState, setSnackState] = useState({open:false, msg:""});
- const toggleFavorite=(id) => () => {
- setLikes({...likes, [id]: !likes[id]});
- setSnackState({...snackState, open :true, msg:`${id} is clicked`});
+ const toggleFavorite=(id, name, item) => () => {
+ onLike(id, item);
+ setSnackState((prevState) => ({
+ ...prevState,
+ open: true,
+ msg: `${name} is clicked`,
+ }));
}
const handleSnackbarClose = (event, reason) => {
@@ -34,24 +38,28 @@ export default function MusicList ({list}){
return;
}
setSnackState({open : false, msg : ''});
-}
+ };
+
return (
- <div>{list.map(item =>{
- return (
- <Card sx={styles.card} key={item.collectionId}>
- <CardContent>
- <Typography variant="subtitle1">{item.artistName}</Typography>
- <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
-
- </CardContent>
- <CardActions>
- <IconButton onClick={toggleFavorite(item.collectionCensoredName)}>
- {(likes[item.collectionCensoredName]===true)? <Favorite />:<FavoriteBorder />}
- </IconButton>
- </CardActions>
- </Card>)
- })}
- <SnackMsg open ={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
+ <div>
+ {list.map(item =>{
+ var isLiked = likes.hasOwnProperty(item.collectionId) && likes[item.collectionId] === true;
+ return (
+ <Card sx={styles.card} key={item.collectionId}>
+ <CardContent>
+ <Typography variant="subtitle1">{item.artistName}</Typography>
+ <Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
+
+ </CardContent>
+ <CardActions>
+ <IconButton onClick={toggleFavorite(item.collectionId, item.collectionCensoredName, item)}>
+ {isLiked ?
+ <Favorite /> : <FavoriteBorder />}
+ </IconButton>
+ </CardActions>
+ </Card>)
+ })}
+ <SnackMsg open ={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
</div>
)
-}
\ No newline at end of file
+}
diff --git a/src/SearchPage.js b/src/SearchPage.js
index 67da1eef7b7500202fe7826aa3cabc8690c51a65..618a2a3ed71426660d37886500890e47a6865c8c 100644
--- a/src/SearchPage.js
+++ b/src/SearchPage.js
@@ -2,18 +2,20 @@ import React from "react";
import {Button, TextField} from "@mui/material";
import MusicList from "./MusicList";
-export default function SearchPage ({list, onSearch}) {
+export default function SearchPage ({list, onSearch, likes, onLike}) {
const [searchWord, setSearchWord] = React.useState("");
const handleSearch = (event) => {
event.preventDefault();
- console.log(searchWord);
- setSearchWord("");
- fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`).then(r=>r.json()).then(r=>{
- console.log(r);
- onSearch(r.results);
- setSearchWord("");
- }).catch(e=>console.log("error when search musician"));
+
+ fetch(`/musicSearch/${searchWord}`)
+ .then(response=>response.json())
+ .then(r=>{
+ console.log(r);
+ onSearch(r.results);
+ setSearchWord("");
+ })
+ .catch(e=>console.log("error when search musician"));
}
const handleSearchTextChange = (event)=>{
@@ -32,9 +34,7 @@ export default function SearchPage ({list, onSearch}) {
</Button>
</div>
</form>
-
- {/* <MusicList list={music_list}></MusicList> */}
- <MusicList list={list}></MusicList>
+ <MusicList list={list} likes={likes} onLike={onLike}></MusicList>
</React.Fragment>
)
}
diff --git a/src/SnackMsg.js b/src/SnackMsg.js
index 76843de47e4f3b988f0cbdec91e19139bfccda95..9a7226ea25a529bb5633a0ef21806c0eaa8a2a1c 100644
--- a/src/SnackMsg.js
+++ b/src/SnackMsg.js
@@ -13,4 +13,4 @@ const SnackMsg = (props) => {
</Snackbar>
)
}
-export default SnackMsg;
\ No newline at end of file
+export default SnackMsg;
diff --git a/src/index.js b/src/index.js
index 41f167450e9b2db20951bb5e3726796bd54a6c84..52a6a52032eb9133c2d5fac73f9b4a6efc6b3a33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,3 +3,4 @@ import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('app'));
+