page before order done

shop/src/App.css

@@ -268,6 +268,19 @@ button {
   justify-content: center;
   flex-wrap: wrap;
 }
+.order {
+  padding-left: 10px;
+  padding-right: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background-color: rgb(10, 10, 10);
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 5%;
+  width: 400px;
+  height: 250px;
+}
 /* .basketInner .oneGood {
   height: 320px;
 } */
@@ -345,7 +358,26 @@ button {
     width: 150px;
   }
 
-
+  .order {
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: rgb(10, 10, 10);
+    border: 2px solid;
+    font-size: 10px;
+    border-color:rgb(229, 229, 243);
+    border-radius: 5%;
+    width: 100%;
+    height: 250px;
+  }
+  .order h2 {
+    font-size: 22px;
+  }
+  .order h5 {
+    font-size: 13px;
+  }
 
   .catalog li{
     font-size: 10px;

shop/src/components/Main.js

@@ -6,7 +6,9 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
-import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile} from "./index";
+import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, 
+    SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile,
+    COrderPage} from "./index";
 
 
   
@@ -36,6 +38,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/catalog/:id" component= {({match}) => <CGoodsCategory id = {match.params.id} /> }/>
                         <Route path = "/search/:name" component = {({match}) => <CGoodsSearch name = {match.params.name}/>}/>
                         <Route path = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
+                        <Route path = "/order" component = {COrderPage}/>
                         <Route path = "/login" component = {LoginForm}/>
                         <Route path = "/profile/:login" component = {YourProfile}/>
                         <Route path = "/basket" component = {CBasketPage}/>

shop/src/components/basket.js

@@ -44,8 +44,10 @@ const mapStateToProps = state => ({
     state: state,
     basket: state.basket,
     GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
-    order: orderArr(arrFromObj(ObjFilter(state.basket, "price")))
-
+    order: orderArr(arrFromObj(ObjFilter(state.basket, "price"))),
+    orderDone: state.promiseRed && state.promiseRed.order && 
+    state.promiseRed.order.payload && 
+    state.promiseRed.order.payload.data.OrderUpsert
   });
 
 
@@ -58,14 +60,16 @@ const mapStateToProps = state => ({
   }, dispatch);
   
 
-const BasketPage = ({state, orderDeal, basket, GoodsArr, onAdd, onDel, onClear, onOrder, order}) => {
+const BasketPage = ({state, orderDeal, orderDone, basket, GoodsArr, onAdd, onDel, onClear, onOrder, order}) => {
     const history = useHistory();
+    console.log(state)
+    console.log(orderDone)
 
-    if(!basket.price){
+    if(!basket.price && !orderDone){
         return(
             <div>Зайдіть у каталог щоб замовити, та повертайтесь</div>
         )
-    }
+    } else if(basket.price) {
     return (
         <>
             <div className = "basketInner">
@@ -90,7 +94,7 @@ const BasketPage = ({state, orderDeal, basket, GoodsArr, onAdd, onDel, onClear,
                                             if(localStorage.authToken) {
                                                 onOrder(order);
                                                 onClear(basket);
-                                                history.push("./well")
+                                                // history.push("./order")
                                             } else{
                                                 history.push("./login")
                                             }
@@ -101,7 +105,11 @@ const BasketPage = ({state, orderDeal, basket, GoodsArr, onAdd, onDel, onClear,
                 </div>
             </div>
         </>
-    )
+    )} else if(orderDone) {
+        return(
+            <>{ history.push("./order")}</>
+        )
+    }
 }
 
 

shop/src/components/index.js

@@ -19,11 +19,12 @@ import CGoodCard from "./goodCard";
 import UpdateForm from "./updateForm";
 import YourProfile from "./profilePage";
 import CBasketPage from "./basket";
+import COrderPage from "./orderDonePage";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, UpdateForm, YourProfile, CBasketPage};
+LoginForm, CGoodCard, UpdateForm, YourProfile, CBasketPage, COrderPage};
 
 
 

shop/src/components/orderDonePage.js

@@ -0,0 +1,47 @@
+import { connect } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+
+const mapStateToProps = state => ({
+    
+    state: state,
+    order: state.promiseRed && state.promiseRed.order && 
+        state.promiseRed.order.payload && 
+        state.promiseRed.order.payload.data.OrderUpsert 
+    // GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
+    // order: orderArr(arrFromObj(ObjFilter(state.basket, "price")))
+
+  });
+
+
+const OrderPage = ({order = false,state}) => {
+    const history = useHistory();
+    console.log(state)
+    console.log(order)
+    //debugger
+    const date =  order ? new Date(+order.createdAt) : 0;
+    console.log(date)
+    if(order) {
+    return(
+        <>
+            <div className = "order">
+                <h2>Дякуємо за замовлення</h2>
+                <span>Номер замовлення: {order._id}</span>
+                <div> Створено: {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}</div>
+                <div>Сума замовлення: {order.total}грн</div>
+            <h5>Чекайте на дзвінок оператора, цьомки ;)</h5>
+            </div>
+        </>
+    )} else {
+        return (
+            <>
+        {history.push("/error")}
+        </>
+        )
+    }
+
+}
+
+const COrderPage = connect(mapStateToProps, {})(OrderPage);
+
+export default COrderPage;