Commit d0dadb30 authored by Pavel Mishakov's avatar Pavel Mishakov

dont remember what lesson it was))

parent 9ac633fe
...@@ -4,9 +4,9 @@ class ApiBurger { ...@@ -4,9 +4,9 @@ class ApiBurger {
getOrders = async () => { getOrders = async () => {
try { try {
const response = await burgerInstance.get('/orders.json') const response = await burgerInstance.get('/orders.json')
return response.data return response?.data
} catch(err) { } catch(err) {
console.log(err) console.log('API BURGER ERROR **** ', err)
} }
} }
createOrder = async (order) => { createOrder = async (order) => {
......
...@@ -4,4 +4,16 @@ import {burgerApiUrl} from "./apiUrl"; ...@@ -4,4 +4,16 @@ import {burgerApiUrl} from "./apiUrl";
export const burgerInstance = axios.create({ export const burgerInstance = axios.create({
baseURL: burgerApiUrl baseURL: burgerApiUrl
}) })
\ No newline at end of file
// burgerInstance.interceptors.request.use(req => {
// console.log('REQUEST: ', req)
// return req
// })
// burgerInstance.interceptors.response.use(res => {
// console.log('RESPONSE: ', res)
// return res
// }, err => {
// console.log('RESPONSE ERROR: ', err)
// })
\ No newline at end of file
import React, { Component } from "react";
class ErrorBoundary extends Component {
state = {
hasError: false,
errorMessage: ''
}
componentDidCatch = (err, stack) => {
this.setState({hasError: true, errorMessage: err.message})
}
render(){
if (this.state.hasError) {
return this.props.errorComp
} else {
return this.props.children
}
}
}
export default ErrorBoundary
\ No newline at end of file
import React from "react"; import React, { useState } from "react";
import './OrderItem.css' import './OrderItem.css'
const OrderItem = (props) => { const OrderItem = (props) => {
const ingredientOutput = Object.keys(props.ingredients).map((key, i) => { const ingredientOutput = Object.keys(props.ingredients).map((key, i) => {
return <li className={'OrderItem__li'} key={i}>{key}: {props.ingredients[key]}</li> return <li className={'OrderItem__li'} key={i}>{key}: {props.ingredients[key]}</li>
}) })
// const [errorState, setErrorState] = useState(false)
// if (Math.random() > 0.7) setErrorState(true);
// if (Math.random() > 0.7) throw new Error('Well, this happened.');
return ( return (
<>
<div className={'OrderItem'}> <div className={'OrderItem'}>
<ul><strong>Ingredients:</strong> {ingredientOutput}</ul> <ul><strong>Ingredients:</strong> {ingredientOutput}</ul>
<p>Price: <strong>{props.price} KZT</strong></p> <p>Price: <strong>{props.price} KZT</strong></p>
</div> </div>
{/* {errorState ? <p>ERROR!!!!</p> :<div className={'OrderItem'}>
<ul><strong>Ingredients:</strong> {ingredientOutput}</ul>
<p>Price: <strong>{props.price} KZT</strong></p>
</div>} */}
</>
) )
} }
......
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
import {apiBurger} from "../../api/apiBurger"; import {apiBurger} from "../../api/apiBurger";
import Spinner from "../../components/UI/Spinner/Spinner"; import Spinner from "../../components/UI/Spinner/Spinner";
import OrderItem from "../../components/Order/OrderItem/OrderItem"; import OrderItem from "../../components/Order/OrderItem/OrderItem";
import WithErrorHandler from '../../hoc/WithErrorHandler';
import { burgerInstance } from '../../api/instances';
import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';
const Orders = () => { const Orders = () => {
...@@ -12,7 +15,7 @@ const Orders = () => { ...@@ -12,7 +15,7 @@ const Orders = () => {
setLoading(true) setLoading(true)
try { try {
const response = await apiBurger.getOrders() const response = await apiBurger.getOrders()
setOrders(response) setOrders(response || {})
} finally { } finally {
setLoading(false) setLoading(false)
} }
...@@ -27,12 +30,24 @@ const Orders = () => { ...@@ -27,12 +30,24 @@ const Orders = () => {
? <Spinner /> ? <Spinner />
: :
<div> <div>
{Object.keys(orders).map((key, i) => { {/* {Object.keys(orders)?.map((key, i) => {
return <OrderItem return <OrderItem
key={key} key={key}
ingredients={orders[key].ingredients} ingredients={orders[key].ingredients}
price={orders[key].price} price={orders[key].price}
/> />
})} */}
{Object.keys(orders)?.map((key, i) => {
return <ErrorBoundary
key={key}
errorComp={<></>}
>
<OrderItem
ingredients={orders[key].ingredients}
price={orders[key].price}
/>
</ErrorBoundary>
})} })}
</div> </div>
} }
...@@ -40,4 +55,4 @@ const Orders = () => { ...@@ -40,4 +55,4 @@ const Orders = () => {
) )
} }
export default Orders export default WithErrorHandler(Orders, burgerInstance)
\ No newline at end of file \ No newline at end of file
import React, { useEffect, useRef, useState } from "react";
import Modal from '../components/UI/Modal/Modal'
const WithErrorHandler = (WrappedComponent, axiosHandler) => {
return function WithErrorHandler(props) {
const [error, setError] = useState('')
const ic = useRef(null)
if (!ic.current) {
ic.current = axiosHandler.interceptors.response.use(res => {
return res
}, err => {
setError(err.message)
throw err
})
}
useEffect(() => {
return () => axiosHandler.interceptors.response.eject(ic.current)
}, [])
const errorDismissed = () => {
setError('')
}
return (
<>
<Modal
show={!!error}
closed={errorDismissed}
>
{error}
</Modal>
<WrappedComponent {...props}/>
</>
)
}
}
export default WithErrorHandler
\ No newline at end of file
...@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals'; ...@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode>
<App /> <App />
</React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment