HT-7 1 and 3 Kostenevich

src/components/app/app.js

@@ -4,21 +4,31 @@ import Header from '../header';
 import Basket from '../basket';
 import { UserProvider } from '../../contexts/user-context';
 import { useState } from 'react';
+import orderErrorPage from '../orderErrorPage';
+import { MoneyProvider } from '../../contexts/money-context';
 
 const App = () => {
+  const [money, setMoney] = useState('USD');
   const [name, setName] = useState('Andrey');
   return (
     <div>
-      <UserProvider value={{ name, setName }}>
-        <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 component={() => <h2>404 - Not found :(</h2>} />
-        </Switch>
-      </UserProvider>
+      <MoneyProvider value={{ money, setMoney }}>
+        <UserProvider value={{ name, setName }}>
+          <Header />
+          <Switch>
+            <Redirect exact from="/" to="/restaurants" />
+            <Route path="/checkout" component={Basket} />
+            <Route path="/restaurants" component={Restaurants} />
+            <Route path="/failedOrder" component={orderErrorPage} />
+            <Route path="/error" component={() => <h2>Error Page!</h2>} />
+            <Route
+              path="/successOrder"
+              component={() => <h2>Спасибо за заказ!</h2>}
+            />
+            <Route component={() => <h2>404 - Not found :(</h2>} />
+          </Switch>
+        </UserProvider>
+      </MoneyProvider>
     </div>
   );
 };

src/components/basket/basket.js

@@ -1,16 +1,26 @@
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-
+import { sendOrderRequest } from '../../redux/actions';
 import styles from './basket.module.css';
 import './basket.css';
 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 {
+  sendingBasketSelector,
+  orderProductsSelector,
+  totalSelector,
+} from '../../redux/selectors';
 import { UserConsumer } from '../../contexts/user-context';
 
-function Basket({ title = 'Basket', total, orderProducts }) {
+function Basket({
+  title = 'Basket',
+  total,
+  orderProducts,
+  sendOrderRequest,
+  sendingBasket,
+}) {
   // const { name } = useContext(userContext);
 
   if (!total) {
@@ -20,9 +30,8 @@ function Basket({ title = 'Basket', total, orderProducts }) {
       </div>
     );
   }
-
   return (
-    <div className={styles.basket}>
+    <div className={sendingBasket ? styles.basketDisabled : styles.basket}>
       <h4 className={styles.title}>
         <UserConsumer>{({ name }) => `${name}'s ${title}`}</UserConsumer>
       </h4>
@@ -53,7 +62,7 @@ function Basket({ title = 'Basket', total, orderProducts }) {
         </div>
       </div>
       <Link to="/checkout">
-        <Button primary block>
+        <Button onClick={sendOrderRequest} primary block>
           checkout
         </Button>
       </Link>
@@ -65,7 +74,10 @@ const mapStateToProps = (state) => {
   return {
     total: totalSelector(state),
     orderProducts: orderProductsSelector(state),
+    sendingBasket: sendingBasketSelector(state),
   };
 };
-
-export default connect(mapStateToProps)(Basket);
+const mapDispatchToProps = {
+  sendOrderRequest,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Basket);

src/components/basket/basket.module.css

@@ -4,6 +4,14 @@
   position: relative;
 }
 
+.basketDisabled {
+  padding: 13px 16px 20px;
+  background-color: var(--pink);
+  position: relative;
+  pointer-events: none;
+  opacity: 0.4;
+}
+
 .hr {
   margin: 14px 0;
 }

src/components/orderErrorPage/index.js

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

src/components/orderErrorPage/orderErrorPage.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { orderErrorSelector } from '../../redux/selectors';
+
+function orderErrorPage({ orderError }) {
+  return <h2>{orderError}</h2>;
+}
+
+const mapStateToProps = (state) => ({
+  orderError: orderErrorSelector(state),
+});
+export default connect(mapStateToProps)(orderErrorPage);

src/components/reviews/reviews.js

@@ -11,6 +11,7 @@ import {
   reviewsLoadedSelector,
   usersLoadedSelector,
 } from '../../redux/selectors';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 const Reviews = ({
   reviews,
@@ -29,9 +30,13 @@ 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={{ ...styles }}>
+            <Review id={id} />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
       <ReviewForm restId={restId} />
     </div>
   );

src/components/reviews/reviews.module.css

@@ -4,3 +4,11 @@
   max-width: 884px;
   width: 100%;
 }
+
+.enter {
+  opacity: 0;
+}
+.enterActive {
+  opacity: 1;
+  transition: opacity 500ms, transform 500ms;
+}

src/contexts/money-context.js

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+
+export const moneyContext = createContext('default');
+
+export const rateList = {
+  USD: 1,
+  EUR: 0.87,
+  RUB: 71.45,
+};
+
+export const signList = {
+  USD: '$',
+  EUR: '€',
+  RUB: '₽',
+};
+
+export function moneyRate(moneyName, amount) {
+  return (moneyName * amount).toFixed(3);
+}
+
+export const MoneyProvider = moneyContext.Provider;
+export const MoneyConsumer = moneyContext.Consumer;

src/redux/actions.js

@@ -12,13 +12,15 @@ import {
   REQUEST,
   SUCCESS,
   FAILURE,
+  SEND_ORDER,
 } from './constants';
 
 import {
   usersLoadingSelector,
   usersLoadedSelector,
   reviewsLoadingSelector,
   reviewsLoadedSelector,
+  productsToOrderSelector,
 } from './selectors';
 
 export const increment = (id) => ({ type: INCREMENT, id });
@@ -77,3 +79,36 @@ export const loadUsers = () => async (dispatch, getState) => {
 
   dispatch(_loadUsers());
 };
+
+export const sendOrderRequest = () => async (dispatch, getState) => {
+  const state = getState();
+  if (state.router.location.pathname === '/checkout') {
+    dispatch({ type: SEND_ORDER + REQUEST });
+    try {
+      const result = await fetch('/api/order', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(productsToOrderSelector(state)),
+      });
+
+      const data = await result.json();
+
+      if (result.status === 400) {
+        const error = data;
+        dispatch({ type: SEND_ORDER + FAILURE, error });
+        dispatch(replace('/failedOrder'));
+      } else {
+        if (data === 'ok') {
+          dispatch({
+            type: SEND_ORDER + SUCCESS,
+            data,
+          });
+          dispatch(replace('/successOrder'));
+        }
+      }
+    } catch (error) {
+      dispatch({ type: SEND_ORDER + FAILURE, error });
+      dispatch(replace('/error'));
+    }
+  }
+};

src/redux/constants.js

@@ -13,3 +13,5 @@ export const LOAD_USERS = 'LOAD_USERS';
 export const REQUEST = '_REQUEST';
 export const SUCCESS = '_SUCCESS';
 export const FAILURE = '_FAILURE';
+
+export const SEND_ORDER = 'SEND_ORDER';

src/redux/reducer/order.js

@@ -1,16 +1,52 @@
-import { DECREMENT, INCREMENT, REMOVE } from '../constants';
+import produce from 'immer';
+import {
+  DECREMENT,
+  FAILURE,
+  INCREMENT,
+  REMOVE,
+  REQUEST,
+  SEND_ORDER,
+  SUCCESS,
+} from '../constants';
 
-// { [productId]: amount }
-export default function (state = {}, action) {
-  const { type, id } = action;
+const initialState = {
+  entities: {},
+  sending: false,
+  error: null,
+  text: '',
+};
+
+export default produce((draft = initialState, action) => {
+  const { type, id, data, error } = action;
   switch (type) {
     case INCREMENT:
-      return { ...state, [id]: (state[id] || 0) + 1 };
+      draft.entities[id] = (draft.entities[id] || 0) + 1;
+      break;
     case DECREMENT:
-      return { ...state, [id]: state[id] > 0 ? (state[id] || 0) - 1 : 0 };
+      draft.entities[id] =
+        draft.entities[id] > 0 ? (draft.entities[id] || 0) - 1 : 0;
+      break;
     case REMOVE:
-      return { ...state, [id]: 0 };
+      draft.entities[id] = 0;
+      break;
+    case SEND_ORDER + REQUEST:
+      draft.sending = true;
+      draft.error = null;
+      console.log(draft.sending);
+      break;
+    case SEND_ORDER + SUCCESS:
+      draft.sending = false;
+      draft.entities = {};
+      draft.error = null;
+      draft.text = data;
+      console.log(draft.sending);
+
+      break;
+    case SEND_ORDER + FAILURE:
+      draft.sending = false;
+      draft.error = error;
+      break;
     default:
-      return state;
+      return draft;
   }
-}
+});

src/redux/selectors.js

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect';
 
 const restaurantsSelector = (state) => state.restaurants.entities;
 const productsSelector = (state) => state.products.entities;
-const orderSelector = (state) => state.order;
+const orderSelector = (state) => state.order.entities;
 const reviewsSelector = (state) => state.reviews.entities;
 const usersSelector = (state) => state.users.entities;
 
@@ -88,3 +88,20 @@ export const averageRatingSelector = createSelector(
     );
   }
 );
+
+export const productsToOrderSelector = createSelector(
+  orderSelector,
+  (order) => {
+    const productsToOrderArray = Object.keys(order).map((key) => ({
+      id: key,
+      amount: order[key],
+    }));
+    return productsToOrderArray;
+  }
+);
+
+export const orderErrorSelector = (state) => {
+  return state.order.error;
+};
+
+export const sendingBasketSelector = (state) => state.order.sending;