homework - 2021-12-21

src/components/app/app.js

@@ -15,6 +15,11 @@ const App = () => {
           <Redirect exact from="/" to="/restaurants" />
           <Route path="/checkout" component={Basket} />
           <Route path="/restaurants" component={Restaurants} />
+          <Route
+            path="/order-success"
+            component={() => <h2>Ваш заказ успешно оформлен.</h2>}
+          />
+          <Route path="/order-error" component={() => <h2>Ошибка</h2>} />
           <Route path="/error" component={() => <h2>Error Page!</h2>} />
           <Route path="/" component={() => <h2>404 - Page Not Found :(</h2>} />
         </Switch>

src/components/basket/basket.js

@@ -9,9 +9,10 @@ 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 { sendOrder } from '../../redux/actions';
 import { UserConsumer } from '../../contexts/user-context';
 
-function Basket({ title = 'Basket', total, orderProducts }) {
+function Basket({ title = 'Basket', total, orderProducts, sendOrder }) {
   // const { name } = useContext(userContext);
 
   if (!total) {
@@ -54,7 +55,7 @@ function Basket({ title = 'Basket', total, orderProducts }) {
         </div>
       </div>
       <Link to="/checkout">
-        <Button primary block>
+        <Button primary block onClick={sendOrder}>
           checkout
         </Button>
       </Link>
@@ -69,4 +70,8 @@ const mapStateToProps = (state) => {
   };
 };
 
-export default connect(mapStateToProps)(Basket);
+const mapDispatchToProps = (dispatch) => ({
+  sendOrder: () => dispatch(sendOrder()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Basket);

src/redux/actions.js

@@ -19,6 +19,7 @@ import {
   usersLoadedSelector,
   reviewsLoadingSelector,
   reviewsLoadedSelector,
+  sendOrderSelector,
 } from './selectors';
 
 export const increment = (id) => ({ type: INCREMENT, id });
@@ -77,3 +78,17 @@ export const loadUsers = () => async (dispatch, getState) => {
 
   dispatch(_loadUsers());
 };
+
+export const sendOrder = () => async (dispatch, getState) => {
+  const state = getState();
+  const order = sendOrderSelector(state);
+  try {
+    const data = fetch('/api/order', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(order),
+    }).then((res) => res.json());
+  } catch (error) {
+    dispatch(replace('/error'));
+  }
+};

src/redux/selectors.js

@@ -86,3 +86,11 @@ export const averageRatingSelector = createSelector(
     );
   }
 );
+
+export const sendOrderSelector = (state) =>
+  Object.entries(state.order).map((entry) => {
+    return {
+      id: entry[0],
+      amount: entry[1],
+    };
+  });