add userContext

src/components/app/app.js

@@ -1,21 +1,25 @@
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Header from '../header';
 import Basket from '../basket';
 import RestaurantsPage from '../../pages/restaurants-page';
+import { UserProvider } from '../../contexts/user-context';
 
-export default class App extends PureComponent {
-  render() {
-    return (
-      <div>
+const App = () => {
+  const [name, setName] = useState('Igor');
+  return (
+    <div>
+      <UserProvider value={{ name, setName }}>
         <Header />
         <Switch>
           <Route path="/checkout" component={Basket} />
           <Route path="/restaurants" component={RestaurantsPage} />
           <Route path="/error" component={() => <h1>Error Page</h1>} />
           <Route path="/" component={() => '404 - not found'} />
         </Switch>
-      </div>
-    );
-  }
-}
+      </UserProvider>
+    </div>
+  );
+};
+
+export default App;

src/components/basket/basket.js

@@ -8,8 +8,11 @@ import BasketRow from './basket-row';
 import BasketItem from './basket-item';
 import Button from '../button';
 import { orderProductsSelector, totalSelector } from '../../redux/selectors';
+import { UserConsumer } from '../../contexts/user-context';
 
 function Basket({ title = 'Basket', total, orderProducts }) {
+  // const { name } = useContext(userContext);
+
   if (!total) {
     return (
       <div className={styles.basket}>
@@ -20,7 +23,10 @@ function Basket({ title = 'Basket', total, orderProducts }) {
 
   return (
     <div className={styles.basket}>
-      <h4 className={styles.title}>{title}</h4>
+      {/* <h4 className={styles.title}>{`${name}'s ${title}`}</h4> */}
+      <h4 className={styles.title}>
+        <UserConsumer>{({ name }) => `${name}'s ${title}`}</UserConsumer>
+      </h4>
       {orderProducts.map(({ product, amount, subtotal, restaurantId }) => (
         <BasketItem
           product={product}

src/components/header/header.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import Logo from './logo';
 import styles from './header.module.css';
+import userContext from '../../contexts/user-context';
 
-const Header = () => (
-  <header className={styles.header}>
-    <Logo />
-  </header>
-);
+const Header = () => {
+  const { name, setName } = useContext(userContext);
 
+  return (
+    <header className={styles.header} onClick={() => setName('Ivan')}>
+      <Logo />
+      <h2>{name}</h2>
+    </header>
+  );
+};
 export default Header;

src/components/header/header.module.css

@@ -4,4 +4,12 @@
   justify-content: center;
   height: 60px;
   background: var(--black);
+  position: relative;
+}
+
+.header h2 {
+  position: absolute;
+  color: var(--white);
+  right: 20px;
+  top: 0;
 }

src/contexts/user-context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const userContext = createContext({ name: 'default name' });
+
+export const UserConsumer = userContext.Consumer;
+export const UserProvider = userContext.Provider;
+
+export default userContext;