{"id":30733721,"url":"https://github.com/poetryofcode/cart","last_synced_at":"2025-09-03T18:51:07.314Z","repository":{"id":307141094,"uuid":"929608429","full_name":"poetryofcode/Cart","owner":"poetryofcode","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-08T23:59:29.000Z","size":19,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T15:33:43.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/poetryofcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-08T23:57:17.000Z","updated_at":"2025-02-11T02:47:54.000Z","dependencies_parsed_at":"2025-07-29T18:58:23.473Z","dependency_job_id":null,"html_url":"https://github.com/poetryofcode/Cart","commit_stats":null,"previous_names":["poetryofcode/cart"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/poetryofcode/Cart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poetryofcode%2FCart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poetryofcode%2FCart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poetryofcode%2FCart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poetryofcode%2FCart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poetryofcode","download_url":"https://codeload.github.com/poetryofcode/Cart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poetryofcode%2FCart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273492840,"owners_count":25115600,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-03T18:50:48.390Z","updated_at":"2025-09-03T18:51:07.300Z","avatar_url":"https://github.com/poetryofcode.png","language":"CSS","readme":"## Figma URL\n\n[Cart](https://www.figma.com/file/5AwKjnWuM6BhRYmxdQFpky/Cart?node-id=0%3A1\u0026t=lfaO4zazTd7nqF1q-1)\n\n## Steps\n\n#### Setup\n\n```sh\n\nnpm install\n```\n\n```sh\nnpm run dev\n```\n\n#### Explore\n\nExplore the current application and analyze its functionality.\n\n#### Global Context and useReducer\n\nSet up global context and immediately create a general setup for useReducer. Create two files, one for reducer and one for actions.\n\n#### Cart State Value\n\nIn the default state, set cart not as an array but as a new Map().\nMore info below.\n\n#### Challenge\n\n- setup cart with new Map()\n- access and iterate in CartContainer\n\n#### Functionalities\n\nImplement these functionalities in the reducer and actions files, and make them available in the global context.\n\nClear Cart - an action that clears the entire cart.\nRemove Item - an action that removes a specific item from the cart.\nIncrease Amount - an action that increases the quantity of a specific item in the cart.\nDecrease Amount - an action that decreases the quantity of a specific item in the cart.\n\n#### Calculate Totals\n\nCalculate Totals - a function that calculates the total cost of items in the cart.\n\n#### Fetch Data\n\n```js\nconst url = 'https://www.course-api.com/react-useReducer-cart-project';\n```\n\nFetch Data - an action that fetches data from an API and stores it in the cart state.\n\n#### Test\n\nTest the functionality of the application and fix any issues that arise.\n\nThe flow of the application should look something like this:\n\n- Explore the current application and analyze its functionality.\n- Set up global context and immediately create a general setup for useReducer. - - Create two files, one for reducer and one for actions.\n- In the default state, set cart not as an array but as a new Map().\n- Create the following functionalities: Clear Cart, Remove Item, Increase Amount, Decrease Amount, Fetch Data, and Calculate Totals.\n- Implement these functionalities in the reducer and actions files, and make them available in the global context.\n- Test the functionality of the application and fix any issues that arise\n\n#### Data Structure Options\n\n- array\n\n```js\nconst cart = [\n  { id: 1, name: 'first', price: 10 },\n  { id: 2, name: 'second', price: 20 },\n];\n```\n\nUsing an array to store shopping cart data may not be the best option because it can be less efficient for lookups and updates, especially for larger datasets. Arrays are also less flexible than Maps when it comes to associating values with unique identifiers.\n\n- object\n\n```js\nconst cart = {\n  'id-1': { id: 1, name: 'first', price: 10 },\n  'id-2': { id: 2, name: 'second', price: 20 },\n};\n```\n\nThe downsides of using an object to store shopping cart data include the risk of unintended property overwriting or unexpected behavior when iterating over inherited properties. Additionally, objects can only use string keys, which can be limiting if you need to use non-string keys. Deleting properties from an object can also be tricky, especially when dealing with inherited properties.\n\n- new Map()\n\nFor a shopping cart application, using a new Map() to store the cart data is beneficial because it allows for efficient lookups and updates based on unique product IDs. Using a Map can also ensure that each item in the cart has a unique identifier and can easily be updated or removed without affecting other items in the cart.\n\n#### Map\n\nA Map is a built-in data structure in JavaScript that allows you to store key-value pairs, where both the keys and values can be any data type. Here's a simple example:\n\n```js\n// create a new Map instance\nconst cart = new Map();\n\n// set some key-value pairs\n\ncart.set('apple', { name: 'Apple', price: 0.5, quantity: 3 });\ncart.set('banana', { name: 'Banana', price: 0.3, quantity: 6 });\ncart.set('orange', { name: 'Orange', price: 0.4, quantity: 4 });\n\n// get the value associated with a key\nconst appleDetails = cart.get('apple'); // returns { name: 'Apple', price: 0.5, quantity: 3 }\n\n// check if a key exists in the map\nconst hasPear = cart.has('pear'); // returns false\n\n// get the number of key-value pairs in the map\nconst size = cart.size; // returns 3\n\n// delete a key-value pair from the map\ncart.delete('banana');\n\n// loop over the key-value pairs in the map\nfor (let [key, { name, price, quantity }] of cart) {\n  console.log(key, name, price, quantity); // prints 'apple' 'Apple' 0.5 3, 'banana' 'Banana' 0.3 6, 'orange' 'Orange' 0.4 4\n}\n```\n\n#### JS Nuggets Video\n\n[Array.from](https://www.youtube.com/watch?v=zg1Bv4xubwo\u0026list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ\u0026index=11)\n\n#### Converting\n\n```js\nconst items = [\n  { id: 1, name: 'first', price: 10 },\n  { id: 2, name: 'second', price: 20 },\n];\nconst cartItems = items.map((item) =\u003e [item.id, item]);\n\nconsole.log(cartItems);\n// prints:\n// [\n//   [1, { id: 1, name: 'first', price: 10 }],\n//   [2, { id: 2, name: 'second', price: 20 }],\n// ];\n\n// create a new Map instance\nconst cart = new Map(cartItems);\n\n// convert the Map to an array of key-value pairs\nconst cartArray = Array.from(cart.entries());\n\nconsole.log(cartArray);\n// prints:\n// [\n//   [1, { id: 1, name: 'first', price: 10 }],\n//   [2, { id: 2, name: 'second', price: 20 }]\n// ]\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoetryofcode%2Fcart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoetryofcode%2Fcart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoetryofcode%2Fcart/lists"}