From 3ec716c0abadac0afc93d1911f6056d6746d4620 Mon Sep 17 00:00:00 2001 From: Hanna Vasylieva Date: Tue, 1 Aug 2023 08:11:27 +0100 Subject: [PATCH] Solution --- package-lock.json | 84 +++++++++++++++++++++++------------------------ package.json | 2 +- src/App.tsx | 76 +++++++++++++++++++++++++++++++----------- src/GoodsList.tsx | 2 +- src/api/goods.ts | 10 ++++-- 5 files changed, 109 insertions(+), 65 deletions(-) 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..1ec4b101b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,65 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import './App.scss'; import { GoodsList } from './GoodsList'; +import { getAll, get5First, getRedGoods } from './api/goods'; +import { Good } from './types/Good'; -// import { getAll, get5First, getRed } from './api/goods'; -// or -// import * as goodsAPI from './api/goods'; +export const App: React.FC = () => { + const [allGoods, setAllGoods] = useState([]); -export const App: React.FC = () => ( -
-

Dynamic list of Goods

+ useEffect(() => { + getAll().then(goods => { + setAllGoods(goods); + }); + }, []); - + const handleLoadAllGoods = () => { + getAll().then(goods => { + setAllGoods(goods); + }); + }; - + const handleLoad5FirstGoods = () => { + get5First().then(goods => { + setAllGoods(goods); + }); + }; - + const handleLoadRedGoods = () => { + getRedGoods().then(goods => { + setAllGoods(goods); + }); + }; - -
-); + return ( +
+

Dynamic list of Goods

+ + + + + + + + +
+ ); +}; diff --git a/src/GoodsList.tsx b/src/GoodsList.tsx index b56a4331e..304707bf9 100644 --- a/src/GoodsList.tsx +++ b/src/GoodsList.tsx @@ -8,7 +8,7 @@ type Props = { export const GoodsList: React.FC = ({ goods }) => (
    {goods.map(good => ( -
  • +
  • {good.name}
    • ))} diff --git a/src/api/goods.ts b/src/api/goods.ts index f0d1659f8..9786c1002 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -10,10 +10,16 @@ export function getAll(): Promise { export const get5First = () => { return getAll() - .then(goods => goods); // sort and get the first 5 + .then(goods => { + goods.sort((a, b) => a.name.localeCompare(b.name)); + + return goods.slice(0, 5); + }); }; export const getRedGoods = () => { return getAll() - .then(goods => goods); // get only red + .then(goods => { + return goods.filter(good => good.color === 'red'); + }); };