[ht7] post reviews, context & animations

.gitignore

@@ -21,3 +21,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/

src/components/app/app.js

@@ -1,23 +1,32 @@
 import React, { useState } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, Redirect } from 'react-router-dom';
 import Header from '../header';
 import Basket from '../basket';
 import RestaurantsPage from '../../pages/restaurants-page';
 import { UserProvider } from '../../contexts/user-context';
+import { CurrencyProvider, USD } from '../../contexts/currency-context';
+import ErrorPage from '../../pages/error-page';
+import OrderSuccessPage from '../../pages/order-success-page';
 
 const App = () => {
   const [name, setName] = useState('Igor');
+  const [currency, setCurrency] = useState(USD);
+
   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>
-      </UserProvider>
+      <CurrencyProvider value={{ currency, setCurrency }}>
+        <UserProvider value={{ name, setName }}>
+          <Header />
+          <Switch>
+            <Route path="/checkout" component={Basket} />
+            <Route path="/restaurants" component={RestaurantsPage} />
+            <Route path="/error" component={ErrorPage} />
+            <Route path="/order-success" component={OrderSuccessPage} />
+            <Redirect from="/" to="/restaurants" exact />
+            <Route path="/" component={() => '404 - not found'} />
+          </Switch>
+        </UserProvider>
+      </CurrencyProvider>
     </div>
   );
 };

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

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { increment, decrement, remove } from '../../../redux/actions';
 import Button from '../../button';
 import styles from './basket-item.module.css';
+import { convert, CurrencyConsumer } from '../../../contexts/currency-context';
 
 function BasketItem({
   product,
@@ -14,6 +15,7 @@ function BasketItem({
   increment,
   decrement,
   remove,
+  disabled,
 }) {
   return (
     <div className={styles.basketItem}>
@@ -29,21 +31,28 @@ function BasketItem({
             icon="minus"
             secondary
             small
+            disabled={disabled}
           />
           <span className={styles.count}>{amount}</span>
           <Button
             onClick={() => increment(product.id)}
             icon="plus"
             secondary
             small
+            disabled={disabled}
           />
         </div>
-        <p className={cn(styles.count, styles.price)}>{subtotal} $</p>
+        <p className={cn(styles.count, styles.price)}>
+          <CurrencyConsumer>
+            {({ currency }) => convert(subtotal, currency)}
+          </CurrencyConsumer>
+        </p>
         <Button
           onClick={() => remove(product.id)}
           icon="delete"
           secondary
           small
+          disabled={disabled}
         />
       </div>
     </div>

src/components/basket/basket.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { createStructuredSelector } from 'reselect';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
@@ -10,11 +9,25 @@ import './basket.css';
 import BasketRow from './basket-row';
 import BasketItem from './basket-item';
 import Button from '../button';
-import { orderProductsSelector, totalSelector } from '../../redux/selectors';
+import {
+  orderProductsSelector,
+  postOrderLoadingSelector,
+  totalSelector,
+} from '../../redux/selectors';
 import { UserConsumer } from '../../contexts/user-context';
+import { checkoutOrder } from '../../redux/actions';
+import Loader from '../loader';
+import currencyContext, { convert } from '../../contexts/currency-context';
 
-function Basket({ title = 'Basket', total, orderProducts }) {
+function Basket({
+  title = 'Basket',
+  total,
+  orderProducts,
+  checkoutOrder,
+  loading,
+}) {
   // const { name } = useContext(userContext);
+  const { currency } = useContext(currencyContext);
 
   if (!total) {
     return (
@@ -26,7 +39,7 @@ function Basket({ title = 'Basket', total, orderProducts }) {
 
   return (
     <div className={styles.basket}>
-      {/* <h4 className={styles.title}>{`${name}'s ${title}`}</h4> */}
+      {loading && <Loader />}
       <h4 className={styles.title}>
         <UserConsumer>{({ name }) => `${name}'s ${title}`}</UserConsumer>
       </h4>
@@ -42,26 +55,30 @@ function Basket({ title = 'Basket', total, orderProducts }) {
               amount={amount}
               subtotal={subtotal}
               restaurantId={restaurantId}
+              disabled={loading}
             />
           </CSSTransition>
         ))}
       </TransitionGroup>
       <hr className={styles.hr} />
-      <BasketRow label="Sub-total" content={`${total} $`} />
+      <BasketRow label="Sub-total" content={convert(total, currency)} />
       <BasketRow label="Delivery costs:" content="FREE" />
-      <BasketRow label="total" content={`${total} $`} bold />
-      <Link to="/checkout">
-        <Button primary block>
-          checkout
-        </Button>
-      </Link>
+      <BasketRow label="total" content={convert(total, currency)} bold />
+      <Button primary block onClick={checkoutOrder} disabled={loading}>
+        checkout
+      </Button>
     </div>
   );
 }
 
 const mapStateToProps = createStructuredSelector({
   total: totalSelector,
   orderProducts: orderProductsSelector,
+  loading: postOrderLoadingSelector,
 });
 
-export default connect(mapStateToProps)(Basket);
+const mapDispatchToProps = (dispatch) => ({
+  checkoutOrder: () => dispatch(checkoutOrder()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Basket);

src/components/basket/basket.module.css

@@ -22,6 +22,17 @@
   margin-top: 22px;
 }
 
+.basket button:disabled,
+.basket button:disabled:hover {
+  cursor: default;
+  background: var(--grey);
+  border-color: var(--grey);
+}
+
+.basket [data-id='loader'] {
+  margin: 10px auto;
+}
+
 @media all and (max-width: 767px) {
   .basket {
     padding: 20px 24px;

src/components/header/header.js

@@ -2,15 +2,30 @@ import React, { useContext } from 'react';
 
 import Logo from './logo';
 import styles from './header.module.css';
-import userContext from '../../contexts/user-context';
+import currencyContext, {
+  USD,
+  EUR,
+  GBP,
+} from '../../contexts/currency-context';
+import cn from 'classnames';
 
 const Header = () => {
-  const { name, setName } = useContext(userContext);
+  const { currency, setCurrency } = useContext(currencyContext);
+
+  const buttons = [USD, EUR, GBP].map((curr) => (
+    <button
+      key={curr}
+      className={cn(curr === currency && styles.active, 'block', 'small')}
+      onClick={() => setCurrency(curr)}
+    >
+      {curr}
+    </button>
+  ));
 
   return (
-    <header className={styles.header} onClick={() => setName('Ivan')}>
+    <header className={styles.header}>
       <Logo />
-      <h2>{name}</h2>
+      <div className={styles.currency}>{buttons}</div>
     </header>
   );
 };

src/components/header/header.module.css

@@ -13,3 +13,26 @@
   right: 20px;
   top: 0;
 }
+
+.currency {
+  position: absolute;
+  right: 0;
+  display: flex;
+}
+
+button {
+  height: 30px;
+  padding: 5px;
+  font-size: 12px;
+  background: var(--yellow-light);
+  border: 1px solid var(--yellow-light);
+  margin: 1px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+button.active {
+  background: var(--orange-light);
+  border: 1px solid var(--orange-light);
+  outline: none;
+}

src/components/loader/loader.js

@@ -3,7 +3,7 @@ import styles from './loader.module.css';
 
 function Loader() {
   return (
-    <div className={styles.loader}>
+    <div className={styles.loader} data-id="loader">
       <div className={styles.bounce1} />
       <div className={styles.bounce2} />
     </div>

src/components/product/product.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import styles from './product.module.css';
+import { convert, CurrencyConsumer } from '../../contexts/currency-context';
 
 import { decrement, increment } from '../../redux/actions';
 
@@ -18,7 +19,11 @@ const Product = ({ product, amount = 0, increment, decrement }) => {
         <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}>
+            <CurrencyConsumer>
+              {({ currency }) => convert(product.price, currency)}
+            </CurrencyConsumer>
+          </div>
         </div>
         <div>
           <div className={styles.counter}>

src/components/reviews/reviews.js

@@ -13,6 +13,7 @@ import {
 } from '../../redux/selectors';
 
 import Loader from '../loader';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 const Reviews = ({
   reviews,
@@ -31,9 +32,22 @@ 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={{
+              enterActive: styles.reviewsAnimationEnterActive,
+              enter: styles.reviewsAnimationEnter,
+              exitActive: styles.reviewsAnimationExitActive,
+              exit: styles.reviewsAnimationExit,
+            }}
+          >
+            <Review id={id} />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
       <ReviewForm restaurantId={restaurantId} />
     </div>
   );

src/components/reviews/reviews.module.css

@@ -4,3 +4,23 @@
   max-width: 884px;
   width: 100%;
 }
+
+.reviewsAnimationEnter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.reviewsAnimationEnterActive {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 500ms, transform 500ms;
+}
+
+.reviewsAnimationExit {
+  opacity: 1;
+}
+
+.reviewsAnimationExitActive {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 500ms, transform 500ms;
+}

src/contexts/currency-context.js

@@ -0,0 +1,32 @@
+import { createContext } from 'react';
+
+export const USD = 'USD';
+export const EUR = 'EUR';
+export const GBP = 'GBP';
+
+const exchangeMultiplier = {
+  USD: 1,
+  EUR: 0.8,
+  GBP: 0.75,
+};
+
+const exchangeSign = {
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+};
+
+const currencyContext = createContext({
+  currency: USD,
+});
+
+export const CurrencyConsumer = currencyContext.Consumer;
+export const CurrencyProvider = currencyContext.Provider;
+
+export const convert = (price, curr) => {
+  return `${(price * exchangeMultiplier[curr]).toFixed(1)} ${
+    exchangeSign[curr]
+  }`;
+};
+
+export default currencyContext;

src/pages/error-page.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import styles from './error-page.module.css';
+import { errorSelector } from '../redux/selectors';
+
+function ErrorPage({ error }) {
+  return <h1 className={styles.error}>Error{error && `: ${error}`}</h1>;
+}
+
+const mapStateToProps = createStructuredSelector({
+  error: errorSelector,
+});
+
+export default connect(mapStateToProps)(ErrorPage);