diff --git a/package.json b/package.json index f6d390457f2d2af3877ab256e44bee812dd4bb40..3ec1d0010434d247e9a8d8a35417ef632d54a070 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", + "axios": "^1.4.0" }, "devDependencies": { "@babel/cli": "^7.18.6", diff --git a/public/app.bundle.js b/public/app.bundle.js index f68c29a1f2dca5ca7bc1e4b70ddbe796032fad0f..a2a672320983d2981aeb5a529e783912907ae900 100644 --- a/public/app.bundle.js +++ b/public/app.bundle.js @@ -581,6 +581,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./node_modules/@mui/material/CssBaseline/CssBaseline.js": +/*!***************************************************************!*\ + !*** ./node_modules/@mui/material/CssBaseline/CssBaseline.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 */ body: () => (/* binding */ body),\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */ html: () => (/* binding */ html),\n/* harmony export */ styles: () => (/* binding */ styles)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _GlobalStyles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../GlobalStyles */ \"./node_modules/@mui/material/GlobalStyles/GlobalStyles.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n\n\n\nconst html = (theme, enableColorScheme) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n WebkitFontSmoothing: 'antialiased',\n // Antialiasing.\n MozOsxFontSmoothing: 'grayscale',\n // Antialiasing.\n // Change from `box-sizing: content-box` so that `width`\n // is not affected by `padding` or `border`.\n boxSizing: 'border-box',\n // Fix font resize problem in iOS\n WebkitTextSizeAdjust: '100%'\n}, enableColorScheme && !theme.vars && {\n colorScheme: theme.palette.mode\n});\nconst body = theme => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n color: (theme.vars || theme).palette.text.primary\n}, theme.typography.body1, {\n backgroundColor: (theme.vars || theme).palette.background.default,\n '@media print': {\n // Save printer ink.\n backgroundColor: (theme.vars || theme).palette.common.white\n }\n});\nconst styles = (theme, enableColorScheme = false) => {\n var _theme$components, _theme$components$Mui;\n const colorSchemeStyles = {};\n if (enableColorScheme && theme.colorSchemes) {\n Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {\n var _scheme$palette;\n colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\\s*&/, '')] = {\n colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode\n };\n });\n }\n let defaultStyles = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n html: html(theme, enableColorScheme),\n '*, *::before, *::after': {\n boxSizing: 'inherit'\n },\n 'strong, b': {\n fontWeight: theme.typography.fontWeightBold\n },\n body: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n margin: 0\n }, body(theme), {\n // Add support for document.body.requestFullScreen().\n // Other elements, if background transparent, are not supported.\n '&::backdrop': {\n backgroundColor: (theme.vars || theme).palette.background.default\n }\n })\n }, colorSchemeStyles);\n const themeOverrides = (_theme$components = theme.components) == null ? void 0 : (_theme$components$Mui = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components$Mui.styleOverrides;\n if (themeOverrides) {\n defaultStyles = [defaultStyles, themeOverrides];\n }\n return defaultStyles;\n};\n\n/**\n * Kickstart an elegant, consistent, and simple baseline to build upon.\n */\nfunction CssBaseline(inProps) {\n const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_3__[\"default\"])({\n props: inProps,\n name: 'MuiCssBaseline'\n });\n const {\n children,\n enableColorScheme = false\n } = props;\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, {\n children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_GlobalStyles__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n styles: theme => styles(theme, enableColorScheme)\n }), children]\n });\n}\n true ? CssBaseline.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * You can wrap a node.\n */\n children: (prop_types__WEBPACK_IMPORTED_MODULE_5___default().node),\n /**\n * Enable `color-scheme` CSS property to use `theme.palette.mode`.\n * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme\n * For browser support, check out https://caniuse.com/?search=color-scheme\n * @default false\n */\n enableColorScheme: (prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool)\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CssBaseline);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/CssBaseline/CssBaseline.js?"); + +/***/ }), + /***/ "./node_modules/@mui/material/Fade/Fade.js": /*!*************************************************!*\ !*** ./node_modules/@mui/material/Fade/Fade.js ***! @@ -2326,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\": () => (/* 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 _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\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\");\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 _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 _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 favoriteList = _React$useState8[0],\n setFavoriteList = _React$useState8[1];\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n var addToFavoriteList = function addToFavoriteList(item) {\n setFavoriteList(function (prevList) {\n return [].concat(_toConsumableArray(prevList), [item]);\n });\n };\n var handleLikes = function handleLikes(id) {\n var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n setLikes(updatedLikes);\n };\n var removeFromFavoriteList = function removeFromFavoriteList(id) {\n setFavoriteList(function (prevList) {\n return prevList.filter(function (item) {\n return item.collectionId !== id;\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 }, \"Tae Wook'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 borderColor: '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_1__[\"default\"], {\n list: searchResult,\n onSearch: setSearchResult,\n favoriteList: favoriteList,\n addToFavoriteList: addToFavoriteList,\n likes: likes,\n handleLikes: handleLikes\n }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n favoriteList: favoriteList,\n addToFavoriteList: addToFavoriteList,\n likes: likes,\n handleLikes: handleLikes,\n removeFromFavoriteList: removeFromFavoriteList\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 }, \" Item Three\"));\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 _SearchPage__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CssBaseline/CssBaseline.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport SearchPage from './SearchPage';\nimport Favorites from './Favorites';\nimport { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material';\n\nconst TABS = [\n { label: 'Search Music', component: SearchPage },\n { label: 'Favorites', component: Favorites },\n { label: 'More Contents', component: () => <Typography align=\"center\" variant=\"h2\"> Item Three</Typography> },\n];\n\nexport default function App() {\n const [currentTab, setCurrentTab] = useState(0);\n const [searchResult, setSearchResult] = useState([]);\n const [likes, setLikes] = useState({});\n const [favoriteList, setFavoriteList] = useState([]);\n\n const handleTabChange = (event, newValue) => {\n setCurrentTab(newValue);\n };\n\n const addToFavoriteList = (item) => {\n setFavoriteList((prevList) => [...prevList, item]);\n };\n\n const handleLikes = (id) => {\n setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] }));\n };\n\n const removeFromFavoriteList = (id) => {\n setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));\n };\n\n const TabComponent = TABS[currentTab].component;\n\n return (\n <React.Fragment>\n <CssBaseline />\n <AppBar position=\"fixed\">\n <Typography align=\"center\" variant=\"h3\" color=\"inherit\">Tae Wook's Favorite Music</Typography>\n </AppBar>\n <div style={{ height: 60, width: '100%' }}></div>\n <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n <Tabs value={currentTab} onChange={handleTabChange} aria-label=\"basic tabs\" centered>\n {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)}\n </Tabs>\n </Box>\n <TabComponent\n list={searchResult}\n onSearch={setSearchResult}\n favoriteList={favoriteList}\n addToFavoriteList={addToFavoriteList}\n likes={likes}\n handleLikes={handleLikes}\n removeFromFavoriteList={removeFromFavoriteList}\n />\n </React.Fragment>\n );\n}\n*/\n\n\n\n\n\nvar TABS = [{\n label: 'Search Music',\n component: _SearchPage__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n}, {\n label: 'Favorites',\n component: _Favorites__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n}, {\n label: 'More Contents',\n component: function component() {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n align: \"center\",\n variant: \"h2\"\n }, \" Item Three\");\n }\n}];\nfunction App() {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState2 = _slicedToArray(_useState, 2),\n currentTab = _useState2[0],\n setCurrentTab = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState4 = _slicedToArray(_useState3, 2),\n searchResult = _useState4[0],\n setSearchResult = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}),\n _useState6 = _slicedToArray(_useState5, 2),\n likes = _useState6[0],\n setLikes = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState8 = _slicedToArray(_useState7, 2),\n favoriteList = _useState8[0],\n setFavoriteList = _useState8[1];\n var handleTabChange = function handleTabChange(event, newValue) {\n setCurrentTab(newValue);\n };\n var addToFavoriteList = function addToFavoriteList(item) {\n setFavoriteList(function (prevList) {\n return [].concat(_toConsumableArray(prevList), [item]);\n });\n };\n var handleLikes = function handleLikes(id) {\n setLikes(function (prevLikes) {\n return _objectSpread(_objectSpread({}, prevLikes), {}, _defineProperty({}, id, !prevLikes[id]));\n });\n };\n var removeFromFavoriteList = function removeFromFavoriteList(id) {\n setFavoriteList(function (prevList) {\n return prevList.filter(function (item) {\n return item.collectionId !== id;\n });\n });\n };\n var TabComponent = TABS[currentTab].component;\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_4__[\"default\"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n position: \"fixed\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n align: \"center\",\n variant: \"h3\",\n color: \"inherit\"\n }, \"Tae Wook'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_6__[\"default\"], {\n sx: {\n borderBottom: 1,\n borderColor: 'divider'\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n value: currentTab,\n onChange: handleTabChange,\n \"aria-label\": \"basic tabs\",\n centered: true\n }, TABS.map(function (tab, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n key: index,\n label: tab.label,\n value: index\n });\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(TabComponent, {\n list: searchResult,\n onSearch: setSearchResult,\n favoriteList: favoriteList,\n addToFavoriteList: addToFavoriteList,\n likes: likes,\n handleLikes: handleLikes,\n removeFromFavoriteList: removeFromFavoriteList\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?"); /***/ }), @@ -2337,7 +2348,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\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 Favorites(_ref) {\n var favoriteList = _ref.favoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes,\n removeFromFavoriteList = _ref.removeFromFavoriteList;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n _useState2 = _slicedToArray(_useState, 2),\n favoriteLikes = _useState2[0],\n setFavoriteLikes = _useState2[1];\n var toggleFavorite = function toggleFavorite(id) {\n var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n var filteredFavoriteList = favoriteList.filter(function (item) {\n return favoriteLikes[item.collectionId] === true;\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId);\n }\n }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React, { useState } from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\n\nconst styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n },\n};\n\nexport default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) {\n const [favoriteLikes, setFavoriteLikes] = useState(likes);\n\n const toggleFavorite = (id) => {\n const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n\n const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]);\n\n return (\n <div>\n {filteredFavoriteList.map((item) => (\n <Card sx={styles.card} key={item.collectionId}>\n <CardContent>\n <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n </CardContent>\n <CardActions>\n <IconButton onClick={() => toggleFavorite(item.collectionId)}>\n {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n </IconButton>\n </CardActions>\n </Card>\n ))}\n </div>\n );\n}\n*/\n\n\n\n\nvar styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction Favorites(_ref) {\n var favoriteList = _ref.favoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes,\n removeFromFavoriteList = _ref.removeFromFavoriteList;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n _useState2 = _slicedToArray(_useState, 2),\n favoriteLikes = _useState2[0],\n setFavoriteLikes = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n setFavoriteLikes(likes);\n }, [likes]);\n var toggleFavorite = function toggleFavorite(id) {\n var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n setFavoriteLikes(updatedLikes);\n handleLikes(id);\n };\n var filteredFavoriteList = favoriteList.filter(function (item) {\n return favoriteLikes[item.collectionId];\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n sx: styles.card,\n key: item.collectionId\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle1\"\n }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n variant: \"subtitle2\"\n }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n onClick: function onClick() {\n return toggleFavorite(item.collectionId);\n }\n }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?"); /***/ }), @@ -2348,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 */ 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 _Snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Snackbar */ \"./src/Snackbar.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 favoriteList = _ref.favoriteList,\n addToFavoriteList = _ref.addToFavoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n open: false,\n msg: ''\n }),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n snackState = _React$useState2[0],\n setSnackState = _React$useState2[1];\n var toggleFavorite = function toggleFavorite(id, name) {\n return function () {\n var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n handleLikes(id);\n setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n open: true,\n msg: \"\".concat(name, \" is clicked\")\n }));\n if (updatedLikes[id]) {\n if (!favoriteList.find(function (item) {\n return item.collectionId === id;\n })) {\n addToFavoriteList(list.find(function (item) {\n return item.collectionId === id;\n }));\n }\n } else {\n var updatedFavoriteList = favoriteList.filter(function (item) {\n return item.collectionId !== id;\n });\n addToFavoriteList(updatedFavoriteList);\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.artisName), /*#__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.collectionName)\n }, likes[item.collectionId] === 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), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n }))));\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 _Snackbar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Snackbar */ \"./src/Snackbar.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n/*\nimport React from 'react';\nimport { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material';\nimport { Favorite, FavoriteBorder } from '@mui/icons-material';\nimport SnackMsg from './Snackbar';\n\nconst styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n },\n};\n\nexport default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {\n const [snackState, setSnackState] = React.useState({ open: false, msg: '' });\n\n const toggleFavorite = (id, name) => () => {\n const updatedLikes = { ...likes, [id]: !likes[id] };\n handleLikes(id);\n setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });\n\n if (updatedLikes[id]) {\n if (!favoriteList.find((item) => item.collectionId === id)) {\n addToFavoriteList(list.find((item) => item.collectionId === id));\n }\n } else {\n const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);\n addToFavoriteList(updatedFavoriteList);\n }\n };\n\n const handleSnackbarClose = (event, reason) => {\n if (reason === 'clickaway') {\n return;\n }\n setSnackState({ open: false, msg: '' });\n };\n\n return (\n <div>\n {list.map((item) => {\n return (\n <Card sx={styles.card} key={item.collectionId}>\n <CardContent>\n <Typography variant=\"subtitle1\">{item.artisName}</Typography>\n <Typography variant=\"subtitle2\">{item.collectionCensoredName}</Typography>\n </CardContent>\n <CardActions>\n <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>\n {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}\n </IconButton>\n <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />\n </CardActions>\n </Card>\n );\n })}\n </div>\n );\n}\n*/\n\n\n\n\n\nvar styles = {\n card: {\n minWidth: 275,\n maxWidth: 600,\n marginBottom: '20pt',\n marginLeft: 'auto',\n marginRight: 'auto'\n }\n};\nfunction MusicList(_ref) {\n var list = _ref.list,\n favoriteList = _ref.favoriteList,\n addToFavoriteList = _ref.addToFavoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes;\n var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n open: false,\n msg: ''\n }),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n snackState = _React$useState2[0],\n setSnackState = _React$useState2[1];\n var toggleFavorite = function toggleFavorite(id, name) {\n return function () {\n var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n handleLikes(id);\n setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n open: true,\n msg: \"\".concat(name, \" is clicked\")\n }));\n if (updatedLikes[id]) {\n if (!favoriteList.find(function (item) {\n return item.collectionId === id;\n })) {\n addToFavoriteList(list.find(function (item) {\n return item.collectionId === id;\n }));\n }\n } else {\n removeFromFavoriteList(id);\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.artisName), /*#__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.collectionName)\n }, likes[item.collectionId] ? /*#__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)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Snackbar__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n open: snackState.open,\n message: snackState.msg,\n onClose: handleSnackbarClose\n })));\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?"); /***/ }), @@ -2359,7 +2370,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 favoriteList = _ref.favoriteList,\n addToFavoriteList = _ref.addToFavoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes;\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: \"search\",\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 favoriteList: favoriteList,\n addToFavoriteList: addToFavoriteList,\n likes: likes,\n handleLikes: handleLikes\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/*\nimport React from 'react';\nimport { Button, TextField } from '@mui/material';\nimport MusicList from './MusicList';\n\nexport default function SearchPage({ list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes }) {\n const [searchWord, setSearchWord] = React.useState('');\n\n const handleSearch = (event) => {\n event.preventDefault();\n fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n onSearch(data.results);\n setSearchWord('');\n })\n .catch((error) => console.error('Error when searching for musicians', error));\n };\n\n const handleSearchTextChange = (event) => {\n setSearchWord(event.target.value);\n };\n\n return (\n <React.Fragment>\n <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}>\n <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}>\n <TextField\n variant='outlined'\n label=\"Music Album Search\"\n type='search'\n style={{ width: 450 }}\n onChange={handleSearchTextChange}\n value={searchWord}\n />\n <Button variant=\"contained\" color=\"primary\" type=\"submit\" onClick={handleSearch} style={{ marginLeft: 20 }}>\n Search\n </Button>\n </div>\n </form>\n <MusicList\n list={list}\n favoriteList={favoriteList}\n addToFavoriteList={addToFavoriteList}\n likes={likes}\n handleLikes={handleLikes}\n />\n </React.Fragment>\n );\n}\n*/\n\n\n\n\nvar serverPort = 8098; // MySpringWeb Backend Server의 포트 번호\n\nfunction SearchPage(_ref) {\n var favoriteList = _ref.favoriteList,\n addToFavoriteList = _ref.addToFavoriteList,\n likes = _ref.likes,\n handleLikes = _ref.handleLikes;\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 _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 handleSearch = function handleSearch(event) {\n event.preventDefault();\n fetch(\"http://localhost:\".concat(serverPort, \"/musicSearch/\").concat(searchWord)).then(function (response) {\n return response.json();\n }).then(function (data) {\n console.log(data);\n setSearchResult(data.results);\n setSearchWord('');\n })[\"catch\"](function (error) {\n return console.error('음악 검색 중 오류가 발생했습니다.', error);\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: \"\\uC74C\\uC545 \\uC568\\uBC94 \\uAC80\\uC0C9\",\n type: \"search\",\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 }, \"\\uAC80\\uC0C9\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n list: searchResult,\n favoriteList: favoriteList,\n addToFavoriteList: addToFavoriteList,\n likes: likes,\n handleLikes: handleLikes\n }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?"); /***/ }), @@ -2922,7 +2933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /******/ /******/ /* webpack/runtime/getFullHash */ /******/ (() => { -/******/ __webpack_require__.h = () => ("ad6492cd70b39542d356") +/******/ __webpack_require__.h = () => ("176c70e49286aa6566be") /******/ })(); /******/ /******/ /* webpack/runtime/global */ diff --git a/src/App.js b/src/App.js index 3d8e552ddbfcabbcad1ed86c26a94b0d9d07b414..d64dc2d855836d343aaba66855d2b63d871d85f1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,65 @@ +/* +import React, { useState } from 'react'; +import SearchPage from './SearchPage'; +import Favorites from './Favorites'; +import { Box, Tabs, Tab, Typography, AppBar, CssBaseline } from '@mui/material'; + +const TABS = [ + { label: 'Search Music', component: SearchPage }, + { label: 'Favorites', component: Favorites }, + { label: 'More Contents', component: () => <Typography align="center" variant="h2"> Item Three</Typography> }, +]; + +export default function App() { + const [currentTab, setCurrentTab] = useState(0); + const [searchResult, setSearchResult] = useState([]); + const [likes, setLikes] = useState({}); + const [favoriteList, setFavoriteList] = useState([]); + + const handleTabChange = (event, newValue) => { + setCurrentTab(newValue); + }; + + const addToFavoriteList = (item) => { + setFavoriteList((prevList) => [...prevList, item]); + }; + + const handleLikes = (id) => { + setLikes((prevLikes) => ({ ...prevLikes, [id]: !prevLikes[id] })); + }; + + const removeFromFavoriteList = (id) => { + setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id)); + }; + + const TabComponent = TABS[currentTab].component; + + return ( + <React.Fragment> + <CssBaseline /> + <AppBar position="fixed"> + <Typography align="center" variant="h3" color="inherit">Tae Wook's Favorite Music</Typography> + </AppBar> + <div style={{ height: 60, width: '100%' }}></div> + <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> + <Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered> + {TABS.map((tab, index) => <Tab key={index} label={tab.label} value={index} />)} + </Tabs> + </Box> + <TabComponent + list={searchResult} + onSearch={setSearchResult} + favoriteList={favoriteList} + addToFavoriteList={addToFavoriteList} + likes={likes} + handleLikes={handleLikes} + removeFromFavoriteList={removeFromFavoriteList} + /> + </React.Fragment> + ); +} +*/ + import React, { useState } from 'react'; import SearchPage from './SearchPage'; import Favorites from './Favorites'; diff --git a/src/Favorites.js b/src/Favorites.js index b7af93f3b4fef981a5d7ccf5f755965fec6ae5fc..345779d300f2320122d6cd8a7894eb18b756171a 100644 --- a/src/Favorites.js +++ b/src/Favorites.js @@ -1,3 +1,4 @@ +/* import React, { useState } from 'react'; import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material'; import { Favorite, FavoriteBorder } from '@mui/icons-material'; @@ -41,3 +42,52 @@ export default function Favorites({ favoriteList, likes, handleLikes, removeFrom </div> ); } +*/ + +import React, { useState, useEffect } from 'react'; +import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material'; +import { Favorite, FavoriteBorder } from '@mui/icons-material'; + +const styles = { + card: { + minWidth: 275, + maxWidth: 600, + marginBottom: '20pt', + marginLeft: 'auto', + marginRight: 'auto' + }, +}; + +export default function Favorites({ favoriteList, likes, handleLikes, removeFromFavoriteList }) { + const [favoriteLikes, setFavoriteLikes] = useState(likes); + + useEffect(() => { + setFavoriteLikes(likes); + }, [likes]); + + const toggleFavorite = (id) => { + const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] }; + setFavoriteLikes(updatedLikes); + handleLikes(id); + }; + + const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId]); + + return ( + <div> + {filteredFavoriteList.map((item) => ( + <Card sx={styles.card} key={item.collectionId}> + <CardContent> + <Typography variant="subtitle1">{item.artisName}</Typography> + <Typography variant="subtitle2">{item.collectionCensoredName}</Typography> + </CardContent> + <CardActions> + <IconButton onClick={() => toggleFavorite(item.collectionId)}> + {favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />} + </IconButton> + </CardActions> + </Card> + ))} + </div> + ); +} diff --git a/src/MusicList.js b/src/MusicList.js index 05b1c1abf853ebdee7791f55c12f8531df05fc3b..3a14f4f4665ae8d862f9ea938e9096e6f5d7a82a 100644 --- a/src/MusicList.js +++ b/src/MusicList.js @@ -1,3 +1,4 @@ +/* import React from 'react'; import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material'; import { Favorite, FavoriteBorder } from '@mui/icons-material'; @@ -59,3 +60,65 @@ export default function MusicList({ list, favoriteList, addToFavoriteList, likes </div> ); } +*/ + +import React from 'react'; +import { Card, CardContent, CardActions, IconButton, Typography } from '@mui/material'; +import { Favorite, FavoriteBorder } from '@mui/icons-material'; +import SnackMsg from './Snackbar'; + +const styles = { + card: { + minWidth: 275, + maxWidth: 600, + marginBottom: '20pt', + marginLeft: 'auto', + marginRight: 'auto' + }, +}; + +export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) { + const [snackState, setSnackState] = React.useState({ open: false, msg: '' }); + + const toggleFavorite = (id, name) => () => { + const updatedLikes = { ...likes, [id]: !likes[id] }; + handleLikes(id); + setSnackState({ ...snackState, open: true, msg: `${name} is clicked` }); + + if (updatedLikes[id]) { + if (!favoriteList.find((item) => item.collectionId === id)) { + addToFavoriteList(list.find((item) => item.collectionId === id)); + } + } else { + removeFromFavoriteList(id); + } + }; + + const handleSnackbarClose = (event, reason) => { + if (reason === 'clickaway') { + return; + } + setSnackState({ open: false, msg: '' }); + }; + + return ( + <div> + {list.map((item) => { + return ( + <Card sx={styles.card} key={item.collectionId}> + <CardContent> + <Typography variant="subtitle1">{item.artisName}</Typography> + <Typography variant="subtitle2">{item.collectionCensoredName}</Typography> + </CardContent> + <CardActions> + <IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}> + {likes[item.collectionId] ? <Favorite /> : <FavoriteBorder />} + </IconButton> + <SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} /> + </CardActions> + </Card> + ); + })} + </div> + ); +} diff --git a/src/SearchPage.js b/src/SearchPage.js index d5f466e9dd81cc6c73d909da271a5fbb42bd81c6..9dea8c3c10a929ad688350e5f1822be708c54161 100644 --- a/src/SearchPage.js +++ b/src/SearchPage.js @@ -1,3 +1,4 @@ +/* import React from 'react'; import { Button, TextField } from '@mui/material'; import MusicList from './MusicList'; @@ -48,3 +49,58 @@ export default function SearchPage({ list, onSearch, favoriteList, addToFavorite </React.Fragment> ); } +*/ + +import React from 'react'; +import { Button, TextField } from '@mui/material'; +import MusicList from './MusicList'; + +const serverPort = 8098; // MySpringWeb Backend Server의 포트 번호 + +export default function SearchPage({ favoriteList, addToFavoriteList, likes, handleLikes }) { + const [searchWord, setSearchWord] = React.useState(''); + const [searchResult, setSearchResult] = React.useState([]); + + const handleSearch = (event) => { + event.preventDefault(); + fetch(`http://localhost:${serverPort}/musicSearch/${searchWord}`) + .then((response) => response.json()) + .then((data) => { + console.log(data); + setSearchResult(data.results); + setSearchWord(''); + }) + .catch((error) => console.error('음악 검색 중 오류가 발생했습니다.', error)); + }; + + const handleSearchTextChange = (event) => { + setSearchWord(event.target.value); + }; + + return ( + <React.Fragment> + <form style={{ display: 'flex', marginTop: 20, marginBottom: 15 }}> + <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 'auto' }}> + <TextField + variant='outlined' + label="음악 앨범 검색" + type='search' + style={{ width: 450 }} + onChange={handleSearchTextChange} + value={searchWord} + /> + <Button variant="contained" color="primary" type="submit" onClick={handleSearch} style={{ marginLeft: 20 }}> + 검색 + </Button> + </div> + </form> + <MusicList + list={searchResult} + favoriteList={favoriteList} + addToFavoriteList={addToFavoriteList} + likes={likes} + handleLikes={handleLikes} + /> + </React.Fragment> + ); +}