fix

src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import './App.scss';
 
-import { GoodsList } from './GoodsList';
+import { GoodsList } from './types/components/GoodsList';
 
 import {
   get5First,

src/api/goods.ts

@@ -10,10 +10,14 @@ export function getAll(): Promise<Good[]> {
 
 export const get5First = (): Promise<Good[]> => {
   return getAll()
-    .then(goods => goods.slice(0, 5)); // 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 = (): Promise<Good[]> => {
   return getAll()
-    .then(goods => goods.filter(item => item.color === 'red')); // get only red
+    .then(goods => goods.filter(item => item.color === 'red'));
 };

src/GoodsList.tsx → src/types/components/GoodsList.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import { Good } from './types/Good';
+
+import { Good } from '../Good';
 
 type Props = {
-  goods: Good[]
+  goods: Good[];
 };
 
 export const GoodsList: React.FC<Props> = ({ goods }) => (
   <ul>
     {goods.map(good => (
-      <li key={good.id} data-cy="good">
+      <li
+        key={good.id}
+        data-cy="good"
+        style={{ color: good.color }}
+      >
         {good.name}
       </li>
     ))}