Commit d0dadb30 authored by Pavel Mishakov's avatar Pavel Mishakov

dont remember what lesson it was))

parent 9ac633fe
......@@ -4,9 +4,9 @@ class ApiBurger {
getOrders = async () => {
try {
const response = await burgerInstance.get('/orders.json')
return response.data
return response?.data
} catch(err) {
console.log(err)
console.log('API BURGER ERROR **** ', err)
}
}
createOrder = async (order) => {
......
......@@ -5,3 +5,15 @@ import {burgerApiUrl} from "./apiUrl";
export const burgerInstance = axios.create({
baseURL: burgerApiUrl
})
// 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'
const OrderItem = (props) => {
const ingredientOutput = Object.keys(props.ingredients).map((key, i) => {
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 (
<>
<div className={'OrderItem'}>
<ul><strong>Ingredients:</strong> {ingredientOutput}</ul>
<p>Price: <strong>{props.price} KZT</strong></p>
</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 @@
import {apiBurger} from "../../api/apiBurger";
import Spinner from "../../components/UI/Spinner/Spinner";
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 = () => {
......@@ -12,7 +15,7 @@ const Orders = () => {
setLoading(true)
try {
const response = await apiBurger.getOrders()
setOrders(response)
setOrders(response || {})
} finally {
setLoading(false)
}
......@@ -27,12 +30,24 @@ const Orders = () => {
? <Spinner />
:
<div>
{Object.keys(orders).map((key, i) => {
{/* {Object.keys(orders)?.map((key, i) => {
return <OrderItem
key={key}
ingredients={orders[key].ingredients}
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>
}
......@@ -40,4 +55,4 @@ const Orders = () => {
)
}
export default Orders
\ No newline at end of file
export default WithErrorHandler(Orders, burgerInstance)
\ 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';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// 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