Task 5: add all functionality from task #2
Conversation
vladyslavdmytrenko
force-pushed
the
task_5
branch
from
68b10d9
to
a3dc0ac
Compare
vladyslavdmytrenko
changed the title
|
|
||
| const BasketButton = (props) => { | ||
| return ( | ||
| <div className={style.container} onClick={() => props.toggleBasketDetail()}> | ||
| <BasketIcon className={style.icon} /> | ||
| {props.countItems ? ( | ||
| {props.countItems > 0 && ( |
There was a problem hiding this comment.
You can also convert to boolean in the following way: !!props.countItems
src/components/app/App.js
Outdated
| @@ -1,133 +1,58 @@ | |||
| import React from 'react'; | |||
|
|
|||
| import Logo from 'components/common/Logo'; | |||
| import Search from 'components/Search'; | |||
There was a problem hiding this comment.
The folder is called search (lower case)
Also for the following imports:
- App
- Basket
- BasketDetails
- BasketButton
- BasketDetailItem
| @@ -1,17 +1,27 @@ | |||
| import React from 'react'; | |||
|
|
|||
| import style from './BasketDetailItem.module.css'; | |||
| import Loader from 'components/common/Loader'; | |||
| import { ReactComponent as DeleteIcon } from '../../../../assets/images/delete.svg'; | |||
src/components/Dish/Dish.js
Outdated
|
|
||
| import style from './Dish.module.css'; | ||
|
|
||
| class Dish extends React.Component { |
There was a problem hiding this comment.
As this component renders many dishes more suitable component name will be Dishes
| @@ -6,6 +6,7 @@ | |||
| "@testing-library/jest-dom": "^5.11.4", | |||
| "@testing-library/react": "^11.1.0", | |||
| "@testing-library/user-event": "^12.1.10", | |||
| "axios": "^0.24.0", | |||
There was a problem hiding this comment.
I suppose that json-server is installed globally.
Let's add json-server to dev project dependecies and create a script in package.json that will start it.
src/api/data.js
Outdated
| @@ -0,0 +1,5 @@ | |||
| import axios from 'axios'; | |||
|
|
|||
| export default axios.create({ | |||
There was a problem hiding this comment.
Let's create a response interceptor that will return response.data
Example: https://www.npmjs.com/package/axios#interceptors (Interceptors section)
src/api/data.js
Outdated
| import axios from 'axios'; | ||
|
|
||
| export default axios.create({ | ||
| baseURL: 'http://localhost:3000/', |
There was a problem hiding this comment.
Let's create an env file and specify there the URL
src/components/Dish/Dish.js
Outdated
| } | ||
| } | ||
|
|
||
| _loadInitDishes = async () => { |
There was a problem hiding this comment.
I do not recommend using underscores in methos naming because underscore indicates that the method is private which is really not.
Also, if you are interested in more details you can check it here:
airbnb/javascript#1024
airbnb/javascript#490
src/components/basket/Basket.js
Outdated
| price: newItem.price, | ||
| count: 1, | ||
| }; | ||
| await dataApi.post('basket', results); |
There was a problem hiding this comment.
Imagine the case when dataApi.put('basket') (line 81) completed successfully, but dataApi.post('basket') not.
Then the data in json file will be updated, but not on the UI becase setting the data to the state is located after post API call
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/vladyslavdmytrenko/project-1/AwvkL4LqPyyW5dhEocTwf5ByVrUV |
vladyslavdmytrenko
force-pushed
the
task_5
branch
from
7c96aa1
to
32e499c
Compare
No description provided.