\n { this.props.selectionMenu === 'pads' && makeSelectionMenu(padsArray) }\n { this.props.selectionMenu === 'firstDirMenu' && makeSelectionMenu(Object.keys(wavFiles)) }\n { this.props.selectionMenu === 'secondDirMenu' && makeSelectionMenu(Object.keys(wavFiles[this.state.fileStringArray[0]])) }\n { this.props.selectionMenu === 'thirdDirMenu' && makeSelectionMenu((() => {\n const menuItems = wavFiles[this.state.fileStringArray[0]][this.state.fileStringArray[1]]\n .filter(item => typeof item === 'string');\n if (!(typeof wavFiles[this.state.fileStringArray[0]][this.state.fileStringArray[1]][0] === 'string')) {\n const moreDirs = Object.keys(wavFiles[this.state.fileStringArray[0]][this.state.fileStringArray[1]][0]);\n moreDirs.forEach(item => menuItems.push(item));\n }\n return menuItems;\n })()) }\n { this.props.selectionMenu === 'fourthDirMenu' && makeSelectionMenu(wavFiles[this.state.fileStringArray[0]][this.state.fileStringArray[1]][0][this.state.fileStringArray[2]]) }\n
\n );\n } else if (this.props.drumPadGrid === 'volumeSelectionMenu') {\n return(\n \n { this.props.selectionMenu === 'pads' && makeSelectionMenu(padsArray) }\n { this.props.selectionMenu === 'volumeSelectionMenuItems' && makeSelectionMenu(volumeSelectionMenuItems) }\n
\n );\n } else if (this.props.drumPadGrid === 'metronomeSelectionMenu') {\n return(\n \n { this.props.selectionMenu === 'pads' && makeSelectionMenu(padsArray) }\n { this.props.selectionMenu === 'metronomeSelectionMenuItems' && makeSelectionMenu((() => {\n const tempos = Object.keys(metronomeTempos).map(item => {\n const keyItems = item.split(' ');\n if (keyItems.length === 3) {\n return keyItems[0] + ' ' + keyItems[1] + ': ' + metronomeTempos[item].slice(0,-4);\n } else {\n return keyItems[0] + ': ' + metronomeTempos[item].slice(0,-4);\n }\n });\n tempos.unshift('Metronome Off');\n return tempos;\n })()) }\n
\n );\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectionMenu);\n","import React from 'react';\nimport { connect } from \"react-redux\";\n\nimport './DisplayMiddle.css';\nimport DrumPadGrid from \"./DrumPadGrid\";\nimport SelectionLeft from \"./SelectionLeft\";\nimport SelectionRight from \"./SelectionRight\";\nimport VolumeContainer from \"./VolumeContainer\";\nimport SelectionMenu from \"./SelectionMenu\";\n\nconst mapStateToProps = (state) => ({ ...state });\n\nclass DisplayMiddle extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showVolumeToolTip: false,\n };\n this.handleMouseOverOut = this.handleMouseOverOut.bind(this);\n };\n\n handleMouseOverOut(willShow) {\n if (willShow !== this.state.showVolumeToolTip) {\n this.setState({\n showVolumeToolTip: willShow,\n });\n }\n };\n\n render() {\n const selectionMenus = ['selectionMenu','volumeSelectionMenu','metronomeSelectionMenu'];\n return (\n \n
\n );\n }\n}\n\nexport default connect(mapStateToProps)(DisplayMiddle);\n","import React from 'react';\n\nimport './DrumMachine.css';\nimport DisplayMiddle from \"./DisplayMiddle\";\n\nconst DrumMachine = () => {\n return (\n \n
\n \n
\n \n { this.props.drumPadGrid === 'drumPadGrid' &&
\n \n
\n \n
\n \n
\n \n
\n \n
\n this.handleMouseOverOut(true)} onMouseLeave={(event) => this.handleMouseOverOut(false)}>\n { \n this.state.showVolumeToolTip &&
\n \n
\n }\n {this.props.volume}\n
\n \n
\n \n
\n );\n}\n\nexport default DrumMachine;\n","import React from 'react';\n\nimport './App.css';\nimport DrumMachine from \"./DrumMachine\";\n\nclass App extends React.Component {\n render() {\n return (\n \n
\n \n
\n \n
\n \n \n ![\"Fork](\"https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149\"\n)
\n \n
\n );\n }\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from \"react-redux\";\nimport store from \"./store\";\n\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n