From 273bcc1e598178b8a1de93412a6cff34d6a839c5 Mon Sep 17 00:00:00 2001 From: Oleh Obiukh Date: Sat, 28 Oct 2023 16:34:56 +0100 Subject: [PATCH 1/5] goods requests --- src/App.tsx | 72 +++++++++++++++++++++++++++++++++++------------- src/api/goods.ts | 11 +++----- 2 files changed, 57 insertions(+), 26 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2cf5239da..960c753c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,61 @@ -import React from 'react'; +import React, { 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 { getAll, get5First, getRed } from './api/goods'; -export const App: React.FC = () => ( -
-

Dynamic list of Goods

+interface Goods { + id: number; + name: string; + color: string; +} - +export const App: React.FC = () => { + const [goods, setGoods] = useState([]); - + const fetchData = async (condition?: string) => { + let data; - + if (condition === 'index') { + data = await get5First(); + } else if (condition === 'color') { + data = await getRed(); + } else { + data = await getAll(); + } - -
-); + setGoods(data); + }; + + return ( +
+

Dynamic list of Goods

+ + + + + + + + +
+ ); +}; diff --git a/src/api/goods.ts b/src/api/goods.ts index f0d1659f8..73ed577b2 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -4,16 +4,13 @@ import { Good } from '../types/Good'; const API_URL = `https://mate-academy.github.io/react_dynamic-list-of-goods/goods.json`; export function getAll(): Promise { - return fetch(API_URL) - .then(response => response.json()); + return fetch(API_URL).then((response) => response.json()); } export const get5First = () => { - return getAll() - .then(goods => goods); // sort and get the first 5 + return getAll().then((goods) => goods.slice(0, 5)); }; -export const getRedGoods = () => { - return getAll() - .then(goods => goods); // get only red +export const getRed = () => { + return getAll().then((goods) => goods.filter((item) => item.color === 'red')); }; From cafcc5bf7b11f3c989b670747072f2f004131378 Mon Sep 17 00:00:00 2001 From: Oleh Obiukh Date: Sat, 28 Oct 2023 20:54:21 +0100 Subject: [PATCH 2/5] Goods solution --- src/GoodsList.tsx | 10 +++++----- src/api/goods.ts | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/GoodsList.tsx b/src/GoodsList.tsx index b56a4331e..4cd6fa02f 100644 --- a/src/GoodsList.tsx +++ b/src/GoodsList.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import { Good } from './types/Good'; +import React from "react"; +import { Good } from "./types/Good"; type Props = { - goods: Good[] + goods: Good[]; }; export const GoodsList: React.FC = ({ goods }) => (
    - {goods.map(good => ( -
  • + {goods.map((good) => ( +
  • {good.name}
    • ))} diff --git a/src/api/goods.ts b/src/api/goods.ts index 73ed577b2..79fdd7871 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -8,7 +8,8 @@ export function getAll(): Promise { } export const get5First = () => { - return getAll().then((goods) => goods.slice(0, 5)); + return getAll().then((goods) => goods.slice(0, 5) + .sort((a, b) => a.name.localeCompare(b.name))); }; export const getRed = () => { From e79ba68e65f03a2a66e810fde6cc78997e7fbdd4 Mon Sep 17 00:00:00 2001 From: Oleh Obiukh Date: Sat, 28 Oct 2023 21:05:19 +0100 Subject: [PATCH 3/5] sort 5 goods --- src/api/goods.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/goods.ts b/src/api/goods.ts index 79fdd7871..e5c15e9e4 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -8,8 +8,8 @@ export function getAll(): Promise { } export const get5First = () => { - return getAll().then((goods) => goods.slice(0, 5) - .sort((a, b) => a.name.localeCompare(b.name))); + return getAll().then((goods) => goods + .sort((a, b) => a.name.localeCompare(b.name)).slice(0, 5)); }; export const getRed = () => { From 2e34bf86cdc50a70f7ca2e656512e0b495cba752 Mon Sep 17 00:00:00 2001 From: Oleh Obiukh Date: Sat, 28 Oct 2023 21:08:03 +0100 Subject: [PATCH 4/5] lint --- src/GoodsList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/GoodsList.tsx b/src/GoodsList.tsx index 4cd6fa02f..9efe65b06 100644 --- a/src/GoodsList.tsx +++ b/src/GoodsList.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Good } from "./types/Good"; +import React from 'react'; +import { Good } from './types/Good'; type Props = { goods: Good[]; From 563b283d562527619aef98b1625b2f40351551d6 Mon Sep 17 00:00:00 2001 From: Oleh Obiukh Date: Sat, 28 Oct 2023 21:10:02 +0100 Subject: [PATCH 5/5] demo link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aa688e6f2..2f11f9774 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://olegobiukh.github.io/react_dynamic-list-of-goods/) and add it to the PR description.