Ht7

src/components/app/app.js

@@ -2,24 +2,26 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import Restaurants from '../restaurants';
 import Header from '../header';
 import Basket from '../basket';
-import { UserProvider } from '../../contexts/user-context';
+import Error from '../error';
+import { CurrencyProvider } from '../../contexts/currency-context';
 import { useState } from 'react';
 
 const App = () => {
-  const [name, setName] = useState('Andrey');
+  const [currency, setCurrency] = useState('$');
   return (
     <div>
-      <UserProvider value={{ name, setName }}>
+      <CurrencyProvider value={{ currency, setCurrency }}>
         <Header />
         <Switch>
           <Redirect exact from="/" to="/restaurants" />
           <Route path="/checkout" component={Basket} />
           <Route path="/restaurants" component={Restaurants} />
-          <Route path="/error" component={() => <h2>Error Page!</h2>} />
+          <Route path="/error" component={Error} />
+          <Route path="/success" component={() => <h2 style={{ 'text-align': 'center' }}>Thanks for your order!</h2>} />
           <Route component={() => <h2>404 - Not found :(</h2>} />
         </Switch>
-      </UserProvider>
-    </div>
+      </CurrencyProvider>
+    </div >
   );
 };
 

src/components/basket/basket-item/basket-item.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import cn from 'classnames';
+
 import { Link } from 'react-router-dom';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
+import Currency from '../../currency/'
 
 function BasketItem({
   product,
@@ -25,7 +26,7 @@ function BasketItem({
           <span className={styles.count}>{amount}</span>
           <Button onClick={increment} icon="plus" secondary small />
         </div>
-        <p className={cn(styles.count, styles.price)}>{subtotal} $</p>
+        <Currency cost={subtotal} />
         <Button onClick={remove} icon="delete" secondary small />
       </div>
     </div>

src/components/basket/basket.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link, Route, Switch } from 'react-router-dom';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import styles from './basket.module.css';
@@ -8,11 +8,16 @@ import itemStyles from './basket-item/basket-item.module.css';
 import BasketItem from './basket-item';
 import Button from '../button';
 import { orderProductsSelector, totalSelector } from '../../redux/selectors';
-import { UserConsumer } from '../../contexts/user-context';
+import { placeOrder } from '../../redux/actions';
+import Currency from '../currency/currency';
 
-function Basket({ title = 'Basket', total, orderProducts }) {
+function Basket({ title = 'Basket', total, orderProducts, placeOrder }) {
   // const { name } = useContext(userContext);
 
+  // function placeOrder() {
+  //   console.log(orderProducts)
+  // }
+
   if (!total) {
     return (
       <div className={styles.basket}>
@@ -23,9 +28,7 @@ function Basket({ title = 'Basket', total, orderProducts }) {
 
   return (
     <div className={styles.basket}>
-      <h4 className={styles.title}>
-        <UserConsumer>{({ name }) => `${name}'s ${title}`}</UserConsumer>
-      </h4>
+      <h4 className={styles.title}>{title}</h4>
       {/* <h4 className={styles.title}>{`${name}'s ${title}`}</h4> */}
       <TransitionGroup>
         {orderProducts.map(({ product, amount, subtotal, restId }) => (
@@ -49,14 +52,24 @@ function Basket({ title = 'Basket', total, orderProducts }) {
           <p>Total</p>
         </div>
         <div className={itemStyles.info}>
-          <p>{`${total} $`}</p>
+          <Currency cost={total} />
+
         </div>
       </div>
-      <Link to="/checkout">
-        <Button primary block>
-          checkout
-        </Button>
-      </Link>
+      <Switch>
+        <Route path="/checkout">
+          <Button primary block onClick={placeOrder}>
+            place an order
+          </Button>
+        </Route>
+        <Route>
+          <Link to="/checkout">
+            <Button primary block>
+              go to cart
+            </Button>
+          </Link>
+        </Route>
+      </Switch>
     </div>
   );
 }
@@ -68,4 +81,6 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps)(Basket);
+const mapDispatchToProps = { placeOrder }
+
+export default connect(mapStateToProps, mapDispatchToProps)(Basket);

src/components/currency/currency.js

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { currencyContext } from '../../contexts/currency-context';
+import cn from 'classnames';
+import styles from '../basket/basket-item/basket-item.module.css';
+
+
+export default function Currency({ cost }) {
+  const { currency } = useContext(currencyContext);
+
+  const getConvertedCost = (value) => {
+    if (currency === '₽') {
+      return value * 71
+    } else if (currency === '₴') {
+      return value * 26
+    } else return cost
+  }
+
+  return (
+    <p className={cn(styles.count, styles.price)}>{getConvertedCost(cost)} {currency}</p>
+  )
+}

src/components/currency/index.js

@@ -0,0 +1,3 @@
+
+
+export { default } from './currency';

src/components/error/error.js

@@ -0,0 +1,21 @@
+
+import { connect } from 'react-redux';
+import { errorSelector } from '../../redux/selectors';
+import styles from './error.module.css';
+
+function Error({ errorMessage }) {
+  return (
+    <div className={styles.container}>
+      <h1>Error!</h1>
+      <p>{errorMessage}</p>
+    </div>
+  )
+}
+
+const mapStateToProps = (state) => {
+  return {
+    errorMessage: errorSelector(state),
+  };
+}
+
+export default connect(mapStateToProps)(Error);

src/components/error/error.module.css

@@ -0,0 +1,4 @@
+
+.container {
+  text-align: center;
+}

src/components/error/index.js

@@ -0,0 +1,2 @@
+
+export { default } from './error';

src/components/header/header.js

@@ -1,18 +1,30 @@
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { userContext } from '../../contexts/user-context';
+import { currencyContext } from '../../contexts/currency-context';
 import { ReactComponent as Logo } from '../../icons/logo.svg';
 import styles from './header.module.css';
 
 const Header = () => {
-  const { name, setName } = useContext(userContext);
+  const { currency, setCurrency } = useContext(currencyContext);
+  const currencies = ['$', '₽', '₴']
 
   return (
-    <header className={styles.header} onClick={() => setName('Igor')}>
-      <Link to="/restaurants">
+    <header className={styles.header} >
+
+      <Link className={styles.link} to="/restaurants">
         <Logo />
       </Link>
-      <h2>{name}</h2>
+
+      <div className={styles.currencies}>
+        {currencies.map((curr, id) =>
+        (<h2
+          key={id}
+          className={curr === currency && styles.active}
+          onClick={() => setCurrency(curr)}
+        >{curr}</h2>))
+        }
+      </div>
+
     </header>
   );
 };

src/components/header/header.module.css

@@ -1,15 +1,32 @@
+
 .header {
-  display: flex;
+  display: grid;
+  grid: 1fr / 1fr 1fr 1fr;
   align-items: center;
   justify-content: center;
   height: 60px;
   background: var(--black);
   position: relative;
 }
 
+.link {
+  grid-column-start: 2;
+  justify-self: center;
+}
+
+.currencies {
+  grid-column-start: 3;
+  justify-self: end;
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+
 .header h2 {
-  position: absolute;
-  color: var(--white);
-  right: 20px;
-  top: 0;
+  color: white;
+  margin: 0 10px;
 }
+
+.active {
+  border-bottom: 1px solid var(--white);
+}

src/components/product/product.js

@@ -4,6 +4,7 @@ import styles from './product.module.css';
 import Button from '../button';
 import { decrement, increment } from '../../redux/actions';
 import { amountSelector, productSelector } from '../../redux/selectors';
+import Currency from '../currency/currency'
 
 function Product({ product, amount, decrement, increment }) {
   return (
@@ -12,7 +13,10 @@ function Product({ product, amount, decrement, increment }) {
         <div>
           <h4 className={styles.title}>{product.name}</h4>
           <p className={styles.description}>{product.ingredients.join(', ')}</p>
-          <div className={styles.price}>{product.price} $</div>
+          <div className={styles.price}>
+            <Currency cost={product.price} />
+
+          </div>
         </div>
         <div>
           <div className={styles.counter}>

src/components/reviews/reviews.js

@@ -5,6 +5,7 @@ import Review from './review';
 import Loader from '../loader';
 import ReviewForm from './review-form';
 import styles from './reviews.module.css';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { loadReviews, loadUsers } from '../../redux/actions';
 import {
@@ -29,9 +30,17 @@ const Reviews = ({
 
   return (
     <div className={styles.reviews}>
-      {reviews.map((id) => (
-        <Review key={id} id={id} />
-      ))}
+      <TransitionGroup>
+        {reviews.map((id) => (
+          <CSSTransition
+            key={id}
+            timeout={500}
+            classNames='review'
+          >
+            <Review id={id} />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
       <ReviewForm restId={restId} />
     </div>
   );

src/components/reviews/reviews.module.css

@@ -4,3 +4,24 @@
   max-width: 884px;
   width: 100%;
 }
+
+.review-enter {
+  opacity: 1;
+  transform: scale(0.9);
+}
+
+.review-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 500ms, transform 500ms;
+}
+
+.review-exit {
+  opacity: 1;
+}
+
+.review-exit-active {
+  opacity: 1;
+  transform: scale(0.9);
+  transition: opacity 500ms, transform 500ms;
+}

src/contexts/currency-context.js

@@ -0,0 +1,7 @@
+
+import { createContext } from 'react';
+
+export const currencyContext = createContext('Default currency');
+
+export const CurrencyProvider = currencyContext.Provider;
+export const CurrencyConsumer = currencyContext.Consumer;