From a5325782c8ef5c5958a7b1c353f18f82de5cceec Mon Sep 17 00:00:00 2001 From: Patricia Oliveira Date: Thu, 23 May 2024 18:50:08 +0100 Subject: [PATCH 1/2] Sort Products by Price and Release Date --- .gitignore | 4 +++ .idea/.gitignore | 8 ++++++ package-lock.json | 41 +++++++++++++++++++----------- package.json | 2 +- src/Components/ProductFilters.jsx | 42 ++++++++++++++++++++++++++++--- src/Components/ProductTable.jsx | 5 ++-- 6 files changed, 80 insertions(+), 22 deletions(-) create mode 100644 .idea/.gitignore diff --git a/.gitignore b/.gitignore index d451ff1..0bedd58 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,7 @@ node_modules dist dist-ssr *.local +.idea/modules.xml +.idea/react-ecommerce.iml +.idea/vcs.xml +package-lock.json diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/package-lock.json b/package-lock.json index d01ddfa..0743e95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react-ecommerce", "version": "0.0.1", "dependencies": { "@headlessui/react": "^1.6.0", @@ -16,7 +17,7 @@ "@vitejs/plugin-react-refresh": "^1.3.0", "autoprefixer": "^10.4.5", "json-server": "^0.17.0", - "postcss": "^8.4.12", + "postcss": "8.4.31", "react": "^17.0.2", "react-dom": "^17.0.2", "tailwindcss": "^3.0.24", @@ -2226,9 +2227,15 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz", - "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==", + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -2405,9 +2412,9 @@ } }, "node_modules/postcss": { - "version": "8.4.12", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", - "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "funding": [ { "type": "opencollective", @@ -2416,10 +2423,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.1", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -5071,9 +5082,9 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "nanoid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz", - "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==" + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, "negotiator": { "version": "0.6.3", @@ -5196,11 +5207,11 @@ "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==" }, "postcss": { - "version": "8.4.12", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz", - "integrity": "sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "requires": { - "nanoid": "^3.3.1", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } diff --git a/package.json b/package.json index 23e130e..230e84e 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@tailwindcss/aspect-ratio": "^0.4.0", "autoprefixer": "^10.4.5", "json-server": "^0.17.0", - "postcss": "^8.4.12", + "postcss": "8.4.31", "tailwindcss": "^3.0.24" } } diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx index 0f3262a..be0e118 100644 --- a/src/Components/ProductFilters.jsx +++ b/src/Components/ProductFilters.jsx @@ -6,7 +6,43 @@ function classNames(...classes) { return classes.filter(Boolean).join(" "); } -export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) { +export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts }) { + + const getActiveOption = (optionName) => { + const activeOption = [...sortOptions].map((option) => { + if (option.name === optionName) { + return {...option, current: true} + } else { + return {...option, current: false} + } + + }); + + setSortOptions(activeOption); + } + + const sortByOptions = (option) => { + const productKeys = { + "Price": "price", + "Newest": "releaseDate", + } + + const sortOption = productKeys[option] + const orderedProducts = [...products].sort((product1, product2) => { + if (product1[sortOption] < product2[sortOption]) { + return -1 + } + return 1 + }) + + setProducts(orderedProducts) + } + + const handleOnClick = (optionName) => { + sortByOptions(optionName) + getActiveOption(optionName) + } + return ( {({ active }) => (