├── .env ├── .eslintrc.js ├── .gitignore ├── README.md ├── notes ├── create-react-app-notes.md ├── picture-1.png ├── picture-2.png └── picture-3.png ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.jsx ├── App.test.js ├── components │ ├── button.css │ ├── button.jsx │ ├── item.css │ ├── item.jsx │ └── price.jsx ├── index.css ├── index.jsx ├── inventory.js ├── logo.svg ├── map-filter-reduce.js └── serviceWorker.js └── yarn.lock /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint" 4 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Product List Challenge 2 | 3 | This is a starter project for a React challenge. The goal is to create a page that displays a list of **products** and a list of **categories** for those products. Clicking one of the category buttons should filter the list of products display to only display products in that category. 4 | 5 | Use components to your advantage for this assignment. Whenever possible make a component to simplify your work. 6 | 7 | The starter project provides a `categories` array and an `inventory` array in `inventory.js`. You can import these into any module with: 8 | 9 | `import inventory, { categories } from './inventory'` 10 | 11 | - `categories`: `[String]` an Array of category name Strings 12 | - `inventory`: `[Object]` an Array of Objects with the following properties 13 | - `id`: `Number` a unique number id 14 | - `name`: `String` a String name of product 15 | - `description`: `String` a String description of product 16 | - `price`: `String` a _String_ price with two decimal places 17 | - `category`: `String` a String category name 18 | 19 | For example, the first product in the Array looks like this: 20 | 21 | ```JS 22 | { 23 | 'id':1, 24 | 'name':'Duobam', 25 | 'description':'Implemented even-keeled info-mediaries', 26 | 'price':'7.77', 27 | 'category':'Outdoors' 28 | } 29 | ``` 30 | 31 | ## Getting functional 32 | 33 | Besides using React you will also explore and practice functional programming concepts with `Array.map()`, `Array.filter()`, and `Array.reduce`. 34 | 35 | You will use [`Array.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to transform the inventory Objects into a JSX/Components to be displayed by React. 36 | 37 | You will use [`Array.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to filter the list of products displayed by category. 38 | 39 | The stretch challenges use [`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). 40 | 41 | ## Challenges 42 | 43 | Your goal is to follow the steps below and solve the challenges. 44 | 45 | You will fork this repo and start working on your fork. 46 | 47 | **You must commit each time you sit down to work on this project!** 48 | 49 | This challenge should take about 3 hours. Be sure to plan that amount of time to spend on the challenges here. 50 | 51 | **Getting Started** 52 | 53 | 1. Fork this Repo. 54 | 1. Post a link to the progress tracker for class. 55 | 1. `npm install` to install dependencies 56 | 1. `npm start` to run the project at [http://localhost:3000](http://localhost:3000) 57 | 58 | From here as you work you should see changes refresh in the browser as you save files. If there is an error you will see this in the browser. 59 | 60 | This project was bootstrapped with Create React App see the notes [here](notes/create-react-app-notes.md) for more information. 61 | 62 | ## Coding Challenges 63 | 64 | **Level 1 challenge** 65 | 66 | Display the categories and products. 67 | 68 | 1. Challenge: List all of the categories at the top of the page. 69 | - Display the categories as buttons. 70 | - Use `Array.map()` to transform the `category` array into an array of JSX/Components 71 | - You can import categories into any module with `import { categories } from './inventory'` 72 | 1. Challenge: List all of products below the categories. 73 | - Each Product should display with it's name, category, and price. How these are displayed is up to you. 74 | - If you add a class name to a JSX element use `className` in place of `class` for example `
`. See the documentation for [`className`](https://reactjs.org/docs/faq-styling.html) for more information. 75 | - You can import the inventory Array into any module with `import inventory from './inventory'`. 76 | - `inventory` is an Array of Objects with properties: id, name, description, price, and category. See the notes above for more details. 77 | 78 | 79 | 80 | **Level 2 Challenge** 81 | 82 | Add some interaction and functionality. The goal here is to click on a category button to filter the list of products so only products in the chosen category are displayed. 83 | 84 | 1. Challenge: Clicking a category should display only products in that category. 85 | - The parent component, that is the component that is parent to both the product list and the category list, should define the current category on `this.state`. 86 | - Define state as an object in the constructor 87 | - Set a property on the state object, something like: `currentCategory` 88 | - Give it a sensible default value: `this.state = { currentCategory: null }` 89 | - Add an `onClick` handler for each category button. This should: 90 | - Pass the category String/name of the button to the handler. 91 | - Set `currentCategory` on state with `this.setState({ currentCategory: newCategory })` or something similar. 92 | - Use `Array.filter()` to display only products in `inventory` where the category matches. Something like: 93 | ```js 94 | inventory.filter((item) => { 95 | return item.category === this.state.currentCategory || this.state.currentCategory === null 96 | }) 97 | ``` 98 | 99 | **Level 3 Challenges** 100 | 101 | Use components! Whenever possible you should use a component. React uses a component architecture. The component architectrure is a really good thing it makes your projects easier to manage, keeps your code [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), and makes your code more portable. 102 | 103 | 1. Make a component that is a category button. 104 | - Define this in a module/JS file. Something like: `category-button.js` 105 | - Be sure to export this. Something like: `export default CategoryButton` 106 | - Set the label and click function as props, something like: ` clickCategory(name) } />` 107 | 1. Define a component that is a product. 108 | - The product component should take in it's id, name, description, and price as props. Alternately it could take an object with these properties. 109 | - The product component should display these bits of information in a reasonable way. 110 | 111 | The category button component might look like this. These are inclomplete! You'll need to retool these to fit your project. 112 | 113 | ```JS 114 | import { Component } from 'react' 115 | 116 | class CategoryButton extends Component { 117 | render() { 118 | return 119 | } 120 | } 121 | ``` 122 | 123 | The product component might look like this: 124 | 125 | ```JS 126 | import { Component } from 'react' 127 | 128 | class Product extends Component { 129 | render() { 130 | return ( 131 |
132 |

{this.props.name}

133 |

{this.props.name}

134 |

${this.props.price}

135 |
136 | ) 137 | } 138 | } 139 | ``` 140 | 141 | 142 | **Level 4 Challenges** 143 | 144 | Unless you went rogue, the page is probably looking pretty bland. Better add some styles! 145 | 146 | 1. Style the category buttons. Make them look like something people will want to click on. 147 | - Use Flex box to put them all in a row. It's okay if they wrap, there are many categories. 148 | 1. Style the products in the list. 149 | - Use CSS Grid. You can just set the number of columns with: `grid-template-columns` this should be enough to get all your pro**ducks** in a row so to speak. 150 | 151 | **Level 5 Challenges** 152 | 153 | Handling the details. If you've got the items above worked out you'll realize the interface is not very satisfying. You can make it better! 154 | 155 | 1. Display All category 156 | - Add one more button to the list of category buttons. It's label should "All". 157 | - Clicking this button should display all products. 158 | 2. We need to know which category is currently selected. The buttons should reflect. 159 | - Define a style to make the currently selected category stand apart from the other buttons. 160 | - When generating the category elements check the category name against `this.currentCategory` if the names match assign a class to that element, something like `selected-category` remember to use `className` not `class`! 161 | - You'll need to take into account that the "All" button is it's own category and this category should display all the products! 162 | 163 | Level 6 Challenges 164 | 165 | Okay so you did all of the other challenges and you need something more to do, good for you! 166 | 167 | 1. Use `Array.reduce()` to get the sum of all of the prices for all Products. 168 | - Remember the prices are stored as Strings you'll need to convert these to numbers. Something like: `Number(item.price)` should work. 169 | - Display this somewhere on the page. If you got this far I don't need to add too much explaination here. 170 | 2. Using `Array.reduce()` again, sum the total for currently selected products. In other the sum of all the prices for the products in the currently selected category. 171 | 3. Use `Array.reduce()` to count the number of products in each category. 172 | - Display count for each category as "badge" next to the category label in each category button. 173 | 174 | ## Some Visuals 175 | 176 | Some people like pictures. Here are a few images showing what the project might look like when you are finished, with some notes. 177 | 178 | ![picture-1](notes/picture-1.png) 179 | 180 | ![picture-2](notes/picture-2.png) 181 | 182 | ![picture-3](notes/picture-3.png) -------------------------------------------------------------------------------- /notes/create-react-app-notes.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | -------------------------------------------------------------------------------- /notes/picture-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucHighwalker/react-product-list/b1e9b0d574f2698a981124668170d1be2e6fd1f4/notes/picture-1.png -------------------------------------------------------------------------------- /notes/picture-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucHighwalker/react-product-list/b1e9b0d574f2698a981124668170d1be2e6fd1f4/notes/picture-2.png -------------------------------------------------------------------------------- /notes/picture-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucHighwalker/react-product-list/b1e9b0d574f2698a981124668170d1be2e6fd1f4/notes/picture-3.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-product-list", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "lodash": "^4.17.11", 7 | "prop-types": "^15.6.2", 8 | "react": "^16.7.0", 9 | "react-dom": "^16.7.0", 10 | "react-scripts": "^2.1.3" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ], 27 | "devDependencies": { 28 | "babel-eslint": "^10.0.1", 29 | "eslint": "^5.13.0", 30 | "eslint-config-airbnb": "^17.1.0", 31 | "eslint-plugin-import": "^2.16.0", 32 | "eslint-plugin-jsx-a11y": "^6.2.1", 33 | "eslint-plugin-react": "^7.12.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucHighwalker/react-product-list/b1e9b0d574f2698a981124668170d1be2e6fd1f4/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import inventory, { categories } from './inventory'; 3 | 4 | import Button from './components/button'; 5 | import Item from './components/item'; 6 | 7 | import './App.css'; 8 | 9 | class App extends Component { 10 | state = { 11 | currentCat: [], 12 | }; 13 | 14 | getCategories() { 15 | return categories.map(cat => ( 16 | 17 |
107 | 108 |
{this.getInventory()}
109 | 110 | ); 111 | } 112 | } 113 | 114 | export default App; 115 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/button.css: -------------------------------------------------------------------------------- 1 | .button { 2 | background-color: teal; 3 | color: white; 4 | padding: 10px; 5 | margin: 5px; 6 | outline: none; 7 | border-radius: 10px; 8 | border-style: none; 9 | cursor: pointer; 10 | transform: scale(1, 1); 11 | transition: all 0.5s ease; 12 | box-shadow: 1px 1px 10px 1px grey; 13 | } 14 | 15 | .button:hover { 16 | background-color: #03aaaa; 17 | } 18 | 19 | .button:active { 20 | background-color: #015d5d; 21 | transform: scale(0.8, 0.8); 22 | box-shadow: 0 0 5px 0 grey; 23 | } 24 | 25 | .button.active { 26 | background-color: #015d5d; 27 | transform: scale(1.1, 1.1); 28 | box-shadow: 2px 2px 20px 1px grey; 29 | } -------------------------------------------------------------------------------- /src/components/button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import './button.css'; 5 | 6 | function Button(props) { 7 | const { classes, value, onClick } = props; 8 | 9 | return ( 10 | 19 | ); 20 | } 21 | 22 | Button.propTypes = { 23 | classes: PropTypes.string.isRequired, 24 | value: PropTypes.string.isRequired, 25 | onClick: PropTypes.func.isRequired, 26 | }; 27 | 28 | export default Button; 29 | -------------------------------------------------------------------------------- /src/components/item.css: -------------------------------------------------------------------------------- 1 | @keyframes enter { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .item { 12 | display: inline-block; 13 | width: 25%; 14 | min-width: 200px; 15 | border-style: solid; 16 | border-color: grey; 17 | border-width: 1px; 18 | border-radius: 5px; 19 | margin: 10px; 20 | padding: 5px; 21 | box-shadow: 2px 2px 20px 1px grey; 22 | animation-duration: 0.5s; 23 | animation-name: enter; 24 | } -------------------------------------------------------------------------------- /src/components/item.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import Price from './price'; 5 | 6 | import './item.css'; 7 | 8 | function Item(props) { 9 | const { name, price, desc } = props; 10 | 11 | return ( 12 |
13 |

{name}

14 | 15 |

{desc}

16 |
17 | ); 18 | } 19 | 20 | Item.propTypes = { 21 | name: PropTypes.string.isRequired, 22 | price: PropTypes.string.isRequired, 23 | desc: PropTypes.string.isRequired, 24 | }; 25 | 26 | export default Item; 27 | -------------------------------------------------------------------------------- /src/components/price.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | function Price(props) { 5 | const { value } = props; 6 | 7 | return ( 8 |

9 | $  10 | {value} 11 |

12 | ); 13 | } 14 | 15 | Price.propTypes = { 16 | value: PropTypes.string.isRequired, 17 | }; 18 | 19 | export default Price; 20 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import { register } from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); // eslint-disable-line no-undef 8 | register(); 9 | -------------------------------------------------------------------------------- /src/inventory.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | const inventory = [ 4 | { 5 | id: 12, 6 | name: 'Y-Solowarm', 7 | description: 'Mandatory stable internet solution', 8 | price: '8.67', 9 | category: 'Automotive', 10 | }, 11 | { 12 | id: 27, 13 | name: 'Bitchip', 14 | description: 'Team-oriented optimal hub', 15 | price: '4.06', 16 | category: 'Automotive', 17 | }, 18 | { 19 | id: 91, 20 | name: 'Flexidy', 21 | description: 'Profound uniform database', 22 | price: '2.27', 23 | category: 'Automotive', 24 | }, 25 | { 26 | id: 6, 27 | name: 'Redhold', 28 | description: 'Optional holistic leverage', 29 | price: '6.30', 30 | category: 'Baby', 31 | }, 32 | { 33 | id: 15, 34 | name: 'Daltfresh', 35 | description: 'Operative asymmetric customer loyalty', 36 | price: '1.73', 37 | category: 'Baby', 38 | }, 39 | { 40 | id: 26, 41 | name: 'Sonsing', 42 | description: 'Centralized 4th generation superstructure', 43 | price: '3.19', 44 | category: 'Beauty', 45 | }, 46 | { 47 | id: 154, 48 | name: 'Aerified', 49 | description: 'Right-sized impactful circuit', 50 | price: '1.49', 51 | category: 'Beauty', 52 | }, 53 | { 54 | id: 20, 55 | name: 'Bamity', 56 | description: 'Managed full-range collaboration', 57 | price: '0.76', 58 | category: 'Books', 59 | }, 60 | { 61 | id: 23, 62 | name: 'Biodex', 63 | description: 'Expanded system-worthy groupware', 64 | price: '7.20', 65 | category: 'Books', 66 | }, 67 | { 68 | id: 13, 69 | name: 'Viva', 70 | description: 'Polarised stable website', 71 | price: '9.46', 72 | category: 'Clothing', 73 | }, 74 | { 75 | id: 18, 76 | name: 'Cookley', 77 | description: 'Expanded systemic analyzer', 78 | price: '0.81', 79 | category: 'Clothing', 80 | }, 81 | { 82 | id: 5, 83 | name: 'Sonair', 84 | description: 'Horizontal even-keeled internet solution', 85 | price: '8.62', 86 | category: 'Computers', 87 | }, 88 | { 89 | id: 31, 90 | name: 'Span', 91 | description: 'Proactive attitude-oriented approach', 92 | price: '6.94', 93 | category: 'Computers', 94 | }, 95 | { 96 | id: 114, 97 | name: 'Gembucket', 98 | description: 'Open-architected interactive Graphic Interface', 99 | price: '2.87', 100 | category: 'Computers', 101 | }, 102 | { 103 | id: 130, 104 | name: 'Quo Lux', 105 | description: 'Total tertiary approach', 106 | price: '8.41', 107 | category: 'Computers', 108 | }, 109 | { 110 | id: 9, 111 | name: 'Rank', 112 | description: 'Expanded exuding encoding', 113 | price: '8.47', 114 | category: 'Electronics', 115 | }, 116 | { 117 | id: 25, 118 | name: 'Fintone', 119 | description: 'Team-oriented bifurcated array', 120 | price: '5.85', 121 | category: 'Electronics', 122 | }, 123 | { 124 | id: 33, 125 | name: 'Solarbreeze', 126 | description: 'Customizable scalable methodology', 127 | price: '8.27', 128 | category: 'Electronics', 129 | }, 130 | { 131 | id: 50, 132 | name: 'Bytecard', 133 | description: 'Multi-layered reciprocal initiative', 134 | price: '7.13', 135 | category: 'Electronics', 136 | }, 137 | { 138 | id: 167, 139 | name: 'Otcom', 140 | description: 'Sharable high-level matrix', 141 | price: '0.01', 142 | category: 'Electronics', 143 | }, 144 | { 145 | id: 178, 146 | name: 'Regrant', 147 | description: 'Face to face grid-enabled forecast', 148 | price: '6.89', 149 | category: 'Electronics', 150 | }, 151 | { 152 | id: 65, 153 | name: 'Veribet', 154 | description: 'Grass-roots demand-driven function', 155 | price: '7.60', 156 | category: 'Games', 157 | }, 158 | { 159 | id: 80, 160 | name: 'Voltsillam', 161 | description: 'Progressive hybrid productivity', 162 | price: '7.55', 163 | category: 'Games', 164 | }, 165 | { 166 | id: 242, 167 | name: 'It', 168 | description: 'Synergistic logistical info-mediaries', 169 | price: '7.35', 170 | category: 'Games', 171 | }, 172 | { 173 | id: 342, 174 | name: 'Opela', 175 | description: 'Networked composite emulation', 176 | price: '5.72', 177 | category: 'Games', 178 | }, 179 | { 180 | id: 29, 181 | name: 'Ronstring', 182 | description: 'Customizable optimizing hierarchy', 183 | price: '8.89', 184 | category: 'Garden', 185 | }, 186 | { 187 | id: 46, 188 | name: 'Job', 189 | description: 'Front-line bandwidth-monitored system engine', 190 | price: '7.20', 191 | category: 'Garden', 192 | }, 193 | { 194 | id: 227, 195 | name: 'Konklab', 196 | description: 'Upgradable even-keeled structure', 197 | price: '2.14', 198 | category: 'Garden', 199 | }, 200 | { 201 | id: 11, 202 | name: 'Zoolab', 203 | description: 'Reactive leading edge access', 204 | price: '4.29', 205 | category: 'Grocery', 206 | }, 207 | { 208 | id: 86, 209 | name: 'Pannier', 210 | description: 'Focused secondary approach', 211 | price: '0.09', 212 | category: 'Grocery', 213 | }, 214 | { 215 | id: 103, 216 | name: 'Tin', 217 | description: 'Programmable demand-driven installation', 218 | price: '1.14', 219 | category: 'Grocery', 220 | }, 221 | { 222 | id: 111, 223 | name: 'Vagram', 224 | description: 'Self-enabling multi-state challenge', 225 | price: '5.38', 226 | category: 'Grocery', 227 | }, 228 | { 229 | id: 2, 230 | name: 'Trippledex', 231 | description: 'Ergonomic stable pricing structure', 232 | price: '8.45', 233 | category: 'Health', 234 | }, 235 | { 236 | id: 34, 237 | name: 'Zontrax', 238 | description: 'Compatible impactful firmware', 239 | price: '9.87', 240 | category: 'Health', 241 | }, 242 | { 243 | id: 52, 244 | name: 'Wrapsafe', 245 | description: 'Upgradable mission-critical encryption', 246 | price: '8.31', 247 | category: 'Health', 248 | }, 249 | { 250 | id: 70, 251 | name: 'Home Ing', 252 | description: 'Synergized heuristic toolset', 253 | price: '3.02', 254 | category: 'Health', 255 | }, 256 | { 257 | id: 89, 258 | name: 'Namfix', 259 | description: 'Up-sized encompassing algorithm', 260 | price: '4.90', 261 | category: 'Health', 262 | }, 263 | { 264 | id: 117, 265 | name: 'Stringtough', 266 | description: 'Assimilated disintermediate pricing structure', 267 | price: '4.54', 268 | category: 'Health', 269 | }, 270 | { 271 | id: 42, 272 | name: 'Alphazap', 273 | description: 'Proactive impactful moratorium', 274 | price: '3.08', 275 | category: 'Home', 276 | }, 277 | { 278 | id: 98, 279 | name: 'Sub-Ex', 280 | description: 'Progressive disintermediate database', 281 | price: '6.97', 282 | category: 'Home', 283 | }, 284 | { 285 | id: 197, 286 | name: 'Domainer', 287 | description: 'Decentralized needs-based architecture', 288 | price: '1.78', 289 | category: 'Home', 290 | }, 291 | { 292 | id: 7, 293 | name: 'Zathin', 294 | description: 'Ameliorated bi-directional strategy', 295 | price: '6.13', 296 | category: 'Industrial', 297 | }, 298 | { 299 | id: 22, 300 | name: 'Mat Lam Tam', 301 | description: 'Inverse motivating groupware', 302 | price: '6.92', 303 | category: 'Industrial', 304 | }, 305 | { 306 | id: 68, 307 | name: 'Zamit', 308 | description: 'Organized empowering knowledge user', 309 | price: '5.78', 310 | category: 'Industrial', 311 | }, 312 | { 313 | id: 14, 314 | name: 'Konklux', 315 | description: 'Object-based even-keeled frame', 316 | price: '8.50', 317 | category: 'Jewelery', 318 | }, 319 | { 320 | id: 19, 321 | name: 'Lotstring', 322 | description: 'Upgradable human-resource conglomeration', 323 | price: '1.69', 324 | category: 'Jewelery', 325 | }, 326 | { 327 | id: 36, 328 | name: 'Temp', 329 | description: 'Decentralized user-facing access', 330 | price: '7.54', 331 | category: 'Jewelery', 332 | }, 333 | { 334 | id: 97, 335 | name: 'Cardify', 336 | description: 'Front-line attitude-oriented groupware', 337 | price: '5.28', 338 | category: 'Jewelery', 339 | }, 340 | { 341 | id: 24, 342 | name: 'Tampflex', 343 | description: 'Realigned mission-critical adapter', 344 | price: '9.78', 345 | category: 'Kids', 346 | }, 347 | { 348 | id: 72, 349 | name: 'Zaam-Dox', 350 | description: 'Digitized context-sensitive concept', 351 | price: '0.75', 352 | category: 'Kids', 353 | }, 354 | { 355 | id: 208, 356 | name: 'Fix San', 357 | description: 'Reduced intangible superstructure', 358 | price: '4.22', 359 | category: 'Kids', 360 | }, 361 | { 362 | id: 88, 363 | name: 'Ventosanzap', 364 | description: 'Open-source foreground portal', 365 | price: '8.66', 366 | category: 'Movies', 367 | }, 368 | { 369 | id: 159, 370 | name: 'Bigtax', 371 | description: 'Horizontal uniform middleware', 372 | price: '1.28', 373 | category: 'Movies', 374 | }, 375 | { 376 | id: 8, 377 | name: 'Tempsoft', 378 | description: 'Fundamental stable structure', 379 | price: '0.61', 380 | category: 'Music', 381 | }, 382 | { 383 | id: 44, 384 | name: 'Holdlamis', 385 | description: 'Exclusive explicit local area network', 386 | price: '8.77', 387 | category: 'Music', 388 | }, 389 | { 390 | id: 45, 391 | name: 'Subin', 392 | description: 'Sharable content-based local area network', 393 | price: '0.38', 394 | category: 'Music', 395 | }, 396 | { 397 | id: 54, 398 | name: 'Tres-Zap', 399 | description: 'Programmable eco-centric budgetary management', 400 | price: '3.91', 401 | category: 'Music', 402 | }, 403 | { 404 | id: 62, 405 | name: 'Hatity', 406 | description: 'Horizontal client-server migration', 407 | price: '4.85', 408 | category: 'Music', 409 | }, 410 | { 411 | id: 110, 412 | name: 'Fixflex', 413 | description: 'Mandatory intangible function', 414 | price: '5.29', 415 | category: 'Music', 416 | }, 417 | { 418 | id: 216, 419 | name: 'Bitwolf', 420 | description: 'Streamlined 4th generation definition', 421 | price: '1.51', 422 | category: 'Music', 423 | }, 424 | { 425 | id: 277, 426 | name: 'Treeflex', 427 | description: 'Innovative didactic framework', 428 | price: '4.38', 429 | category: 'Music', 430 | }, 431 | { 432 | id: 1, 433 | name: 'Duobam', 434 | description: 'Implemented even-keeled info-mediaries', 435 | price: '7.77', 436 | category: 'Outdoors', 437 | }, 438 | { 439 | id: 17, 440 | name: 'Matsoft', 441 | description: 'Operative static orchestration', 442 | price: '8.73', 443 | category: 'Outdoors', 444 | }, 445 | { 446 | id: 37, 447 | name: 'Lotlux', 448 | description: 'Proactive tangible support', 449 | price: '8.87', 450 | category: 'Outdoors', 451 | }, 452 | { 453 | id: 81, 454 | name: 'Transcof', 455 | description: 'Phased foreground extranet', 456 | price: '7.63', 457 | category: 'Outdoors', 458 | }, 459 | { 460 | id: 82, 461 | name: 'Overhold', 462 | description: 'Multi-layered maximized application', 463 | price: '5.86', 464 | category: 'Outdoors', 465 | }, 466 | { 467 | id: 207, 468 | name: 'Cardguard', 469 | description: 'Diverse asynchronous moratorium', 470 | price: '5.80', 471 | category: 'Outdoors', 472 | }, 473 | { 474 | id: 338, 475 | name: 'Stronghold', 476 | description: 'De-engineered didactic open architecture', 477 | price: '2.11', 478 | category: 'Outdoors', 479 | }, 480 | { 481 | id: 57, 482 | name: 'Stim', 483 | description: 'Compatible multimedia hierarchy', 484 | price: '3.08', 485 | category: 'Shoes', 486 | }, 487 | { 488 | id: 119, 489 | name: 'Latlux', 490 | description: 'Proactive fault-tolerant hardware', 491 | price: '0.38', 492 | category: 'Shoes', 493 | }, 494 | { 495 | id: 32, 496 | name: 'Andalax', 497 | description: 'Persistent multi-tasking intranet', 498 | price: '6.66', 499 | category: 'Sports', 500 | }, 501 | { 502 | id: 43, 503 | name: 'Y-find', 504 | description: 'User-centric 5th generation project', 505 | price: '0.86', 506 | category: 'Sports', 507 | }, 508 | { 509 | id: 84, 510 | name: 'Tresom', 511 | description: 'Managed directional hub', 512 | price: '8.07', 513 | category: 'Sports', 514 | }, 515 | { 516 | id: 156, 517 | name: 'Voyatouch', 518 | description: 'Decentralized 4th generation migration', 519 | price: '7.69', 520 | category: 'Sports', 521 | }, 522 | { 523 | id: 4, 524 | name: 'Keylex', 525 | description: 'Phased 24/7 capability', 526 | price: '5.41', 527 | category: 'Tools', 528 | }, 529 | { 530 | id: 49, 531 | name: 'Toughjoyfax', 532 | description: 'Assimilated responsive secured line', 533 | price: '6.85', 534 | category: 'Tools', 535 | }, 536 | { 537 | id: 64, 538 | name: 'Flowdesk', 539 | description: 'Cloned systemic contingency', 540 | price: '4.41', 541 | category: 'Tools', 542 | }, 543 | { 544 | id: 153, 545 | name: 'Greenlam', 546 | description: 'Centralized zero defect collaboration', 547 | price: '3.16', 548 | category: 'Tools', 549 | }, 550 | { 551 | id: 21, 552 | name: 'Kanlam', 553 | description: 'Cloned encompassing time-frame', 554 | price: '9.52', 555 | category: 'Toys', 556 | }, 557 | { 558 | id: 28, 559 | name: 'Prodder', 560 | description: 'Ameliorated object-oriented hierarchy', 561 | price: '1.47', 562 | category: 'Toys', 563 | }, 564 | { 565 | id: 139, 566 | name: 'Asoka', 567 | description: 'Phased analyzing array', 568 | price: '3.72', 569 | category: 'Toys', 570 | }, 571 | { 572 | id: 172, 573 | name: 'Alpha', 574 | description: 'Up-sized full-range database', 575 | price: '8.64', 576 | category: 'Toys', 577 | }, 578 | ]; 579 | 580 | // inventory = _.uniqBy(inventory, 'name') 581 | const sortedInventory = _.sortBy(inventory, 'category'); 582 | const c = inventory.map(item => item.category); 583 | 584 | export const categories = _.uniq(c); 585 | export default sortedInventory; 586 | 587 | // console.log(inventory) 588 | // console.log(categories) 589 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/map-filter-reduce.js: -------------------------------------------------------------------------------- 1 | import inventory, { categories } from './inventory' 2 | 3 | 4 | // ========================================================== 5 | // Reduce inventory to count number of items in each category 6 | function countCategory(items, category) { 7 | return items.reduce((total, item) => { 8 | return item.category === category ? total += 1 : total 9 | }, 0) 10 | } 11 | 12 | categories.forEach((cat) => { 13 | console.log(cat, countCategory(inventory, cat)) 14 | }) 15 | 16 | // ========================================================== 17 | // Filter inventory on category 18 | 19 | function filterOnCategory(items, category) { 20 | return items.filter((item) => { 21 | return item.category === category 22 | }) 23 | } 24 | 25 | categories.forEach((cat) => { 26 | console.log(cat, filterOnCategory(inventory, cat)) 27 | }) 28 | 29 | // ========================================================== 30 | // Map inventory from object to string of name and price 31 | 32 | function mapInventoryToString(items) { 33 | return items.map((item) => { 34 | return `${item.name} $${item.price}` 35 | }) 36 | } 37 | 38 | mapInventoryToString(inventory).forEach((item) => { 39 | console.log(item) 40 | }) 41 | 42 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | --------------------------------------------------------------------------------