\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default Spinner;\r\n","// Robert Leslie\r\n// 2021\r\n// wheel decider\r\n\r\nimport React, {Component} from 'react';\r\n\r\nclass Categories extends Component{\r\n\r\n constructor(){\r\n super();\r\n this.state = {\r\n category: \"\"\r\n }\r\n }\r\n\r\n // calls parent with new category if category isn't empty\r\n // updates state when submitting and updates our scroller if it is hidden\r\n handleSubmit = (e) => {\r\n e.preventDefault();\r\n const scroller = document.querySelector(\".scrollable\");\r\n if(this.state.category !== \"\"){\r\n this.props.handleSubmit(this.state.category);\r\n if(scroller.classList.contains('hide')){\r\n scroller.classList.remove('hide');\r\n }\r\n }\r\n this.setState({\r\n category: \"\"\r\n });\r\n }\r\n\r\n // handles when someone enters a value into our input\r\n handleChange = (e) => {\r\n const {value, name} = e.target;\r\n this.setState({\r\n [name]: value\r\n });\r\n }\r\n\r\n // handles when screen is resized, it checks if the window is under 1200\r\n // it will hide our scroll area if there are no items or show it if we are above 1200px\r\n handleResize = () => {\r\n const scroller = document.querySelector(\".scrollable\");\r\n if(document.body.clientWidth < 1200 && !this.props.items.length > 0){\r\n scroller.classList.add('hide');\r\n }else if (document.body.clientWidth > 1200){\r\n scroller.classList.remove('hide');\r\n }\r\n }\r\n\r\n // calls parent with current index to hide item\r\n hide = (e) => {\r\n this.props.hide(parseInt(e.target.name));\r\n }\r\n\r\n // calls parent with current index to delete item\r\n delete = (e) => {\r\n this.props.delete(parseInt(e.target.name));\r\n }\r\n\r\n // adds window event to close scroller if needed\r\n componentDidMount(){\r\n window.addEventListener('resize', this.handleResize);\r\n }\r\n\r\n // removes window event to close scroller if needed\r\n componentWillUnmount(){\r\n window.removeEventListener('resize', this.handleResize);\r\n }\r\n\r\n render(){\r\n return(\r\n
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Categories;\r\n","// Robert Leslie\n// 2021\n// wheel decider\n\nimport React, {Component} from 'react';\nimport Spinner from './Spinner';\nimport Categories from './Categories';\n\nclass App extends Component {\n constructor(){\n super();\n let stored = [];\n let filtered = [];\n if(localStorage.storedThings !== undefined){\n stored = JSON.parse(localStorage.getItem(\"storedThings\"));\n filtered = stored.filter(item => {\n return item.display\n });\n } \n this.state = {\n things: stored,//['Pizzas', 'Sandwiches', 'Salads', 'Soup', 'Japanese food', 'Pastas']\n displayed: filtered\n }\n }\n\n // called from component, given new category\n // appends cat to array then sets new state with updated value\n // it also sets a filtered array based on which is currently checked to be displayed\n handleSubmit = (cat) => {\n this.setState(prevState => {\n let ary = prevState.things;\n ary.push({cat, display:true})\n localStorage.setItem(\"storedThings\", JSON.stringify(ary));\n let filtered = ary.filter(item => {\n return item.display\n });\n return{\n things: ary,\n displayed: filtered\n }\n });\n }\n\n // called from component, given an index into things array\n // changes display value of current item then sets new state with updated value\n // it also sets a filtered array based on which is currently checked to be displayed\n hide = (index) => {\n this.setState(prevState => {\n let ary = prevState.things;\n ary[index].display = !ary[index].display;\n localStorage.setItem(\"storedThings\", JSON.stringify(ary));\n let filtered = ary.filter(item => {\n return item.display\n })\n return{\n things: ary,\n displayed: filtered\n }\n });\n }\n\n // called from component, given current index into things array\n // deletes item from things array then sets new state with updated value\n // it also sets a filtered array based on which is currently checked to be displayed\n delete = (index) => {\n this.setState(prevState => {\n let ary = prevState.things;\n ary.splice(index, 1);\n localStorage.setItem(\"storedThings\", JSON.stringify(ary));\n let filtered = ary.filter(item => {\n return item.display\n })\n return{\n things: ary,\n displayed: filtered\n }\n });\n }\n\n render(){\n return (\n
\n
Wheely Good Choices
\n \n \n \n \n
\n \n );\n }\n \n}\n\nexport default App;\n","// Robert Leslie\n// 2021\n// wheel decider\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n"],"sourceRoot":""}