From 56259182b0a31db9dac4424d308c6e3fbb5ec5fe Mon Sep 17 00:00:00 2001 From: AndriiYelieva Date: Tue, 1 Aug 2023 21:42:40 +0300 Subject: [PATCH] add task solution --- README.md | 2 +- package-lock.json | 84 +++++++++++++++++++-------------------- package.json | 2 +- src/App.tsx | 92 ++++++++++++++++++++++++++++++++++--------- src/api/goods.ts | 8 ++-- src/service/Status.ts | 5 +++ 6 files changed, 126 insertions(+), 67 deletions(-) create mode 100644 src/service/Status.ts diff --git a/README.md b/README.md index aa688e6f2..ccbf56ddc 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,4 @@ You have 3 button that should load [the goods](https://mate-academy.github.io/re - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_dynamic-list-of-goods/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://AndriiYelieva.github.io/react_dynamic-list-of-goods/) and add it to the PR description. diff --git a/package-lock.json b/package-lock.json index 16ac8e28b..7c3512cfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2090,9 +2090,9 @@ } }, "@mate-academy/scripts": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.3.tgz", - "integrity": "sha512-clsxVN4sQap5pgFev+WOEi9GVSYU5/C6puBgwGFmwePMTK+ssFFw+tdE5agrKkqmRsEgT38+wRbzITh+rZs1Yw==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.8.tgz", + "integrity": "sha512-MqvuqrG8UUzQkRc375ZUIOd23nJ0BYqae/Nn5t01aDutSqZnz1ye65W4sLHiSuQJGIuHRO0CEyJxAO72wX1efw==", "dev": true, "requires": { "@octokit/rest": "^17.11.2", @@ -2233,12 +2233,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2269,12 +2269,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } }, "is-plain-object": { @@ -2303,12 +2303,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } }, "universal-user-agent": { @@ -2320,9 +2320,9 @@ } }, "@octokit/openapi-types": { - "version": "12.10.1", - "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.10.1.tgz", - "integrity": "sha512-P+SukKanjFY0ZhsK6wSVnQmxTP2eVPPE8OPSNuxaMYtgVzwJZgfGdwlYjf4RlRU4vLEw4ts2fsE2icG4nZ5ddQ==", + "version": "12.11.0", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz", + "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==", "dev": true }, "@octokit/plugin-paginate-rest": { @@ -2335,12 +2335,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2387,12 +2387,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } }, "is-plain-object": { @@ -2421,12 +2421,12 @@ }, "dependencies": { "@octokit/types": { - "version": "6.40.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz", - "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==", + "version": "6.41.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz", + "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==", "dev": true, "requires": { - "@octokit/openapi-types": "^12.10.0" + "@octokit/openapi-types": "^12.11.0" } } } @@ -2538,9 +2538,9 @@ } }, "@sinonjs/text-encoding": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz", - "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz", + "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==", "dev": true }, "@stylelint/postcss-css-in-js": { @@ -4125,9 +4125,9 @@ } }, "before-after-hook": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz", - "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", "dev": true }, "bfj": { @@ -12570,9 +12570,9 @@ "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==" }, "macos-release": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz", - "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz", + "integrity": "sha512-DXqXhEM7gW59OjZO8NIjBCz9AQ1BEMrfiOAl4AYByHCtVHRF4KoGNO8mqQeM8lRCtQe/UnJ4imO/d2HdkKsd+A==", "dev": true }, "magic-string": { @@ -13466,9 +13466,9 @@ } }, "node-fetch": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", - "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", + "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==", "dev": true, "requires": { "whatwg-url": "^5.0.0" diff --git a/package.json b/package.json index 3fe08e488..af87fd478 100755 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@mate-academy/cypress-tools": "^1.0.4", "@mate-academy/eslint-config-react": "0.0.7", "@mate-academy/eslint-config-react-typescript": "^1.0.1", - "@mate-academy/scripts": "^1.2.3", + "@mate-academy/scripts": "^1.2.8", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^17.0.23", diff --git a/src/App.tsx b/src/App.tsx index 2cf5239da..06eec255d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,81 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; + import './App.scss'; + import { GoodsList } from './GoodsList'; -// import { getAll, get5First, getRed } from './api/goods'; -// or -// import * as goodsAPI from './api/goods'; +import { + get5First, + getAll, + getRedGoods, +} from './api/goods'; +import { Good } from './types/Good'; +import { Status } from './service/Status'; + +export const App: React.FC = () => { + const [goods, setGoods] = useState([]); + const [filter, setFilter] = useState(Status.ALL); + + useEffect(() => { + getAll().then(setGoods); + }, []); + + const handleButtonClick = (status: Status): void => { + if (status === filter) { + return; + } + + setFilter(status); + + switch (status) { + case Status.ALL: + getAll().then(setGoods); + break; + + case Status.FIRST5: + get5First().then(setGoods); + break; + + case Status.RED: + getRedGoods().then(setGoods); + break; + + default: + getAll().then(setGoods); + } + }; -export const App: React.FC = () => ( -
-

Dynamic list of Goods

+ return ( +
+

Dynamic list of Goods

- + - + - + - -
-); + +
+ ); +}; diff --git a/src/api/goods.ts b/src/api/goods.ts index f0d1659f8..cabbd0f7e 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -8,12 +8,12 @@ export function getAll(): Promise { .then(response => response.json()); } -export const get5First = () => { +export const get5First = (): Promise => { return getAll() - .then(goods => goods); // sort and get the first 5 + .then(goods => goods.slice(0, 5)); // sort and get the first 5 }; -export const getRedGoods = () => { +export const getRedGoods = (): Promise => { return getAll() - .then(goods => goods); // get only red + .then(goods => goods.filter(item => item.color === 'red')); // get only red }; diff --git a/src/service/Status.ts b/src/service/Status.ts new file mode 100644 index 000000000..92b0a0f55 --- /dev/null +++ b/src/service/Status.ts @@ -0,0 +1,5 @@ +export enum Status { + ALL = 'All', + RED = 'Red', + FIRST5 = 'First5', +}