dont remember what lesson it was))

src/api/apiBurger.js

@@ -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) => {

src/api/instances.js

@@ -4,4 +4,16 @@ import {burgerApiUrl} from "./apiUrl";
 
 export const burgerInstance = axios.create({
     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

src/components/ErrorBoundary/ErrorBoundary.js

+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

src/components/Order/OrderItem/OrderItem.js

-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>} */}
+        </>
     )
 }
 

src/containers/Orders/Orders.js

@@ -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}
-                        />
+                                    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

src/hoc/WithErrorHandler.js

+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

src/index.js

@@ -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