orders on page

shop/src/App.css

@@ -309,6 +309,69 @@ button {
   width: 250px;
 }
 
+.ordersList {
+  background: rgba(10, 10, 10, 0.5);
+  margin-bottom: 50px;
+}
+.ordersList h4 {
+  display: flex;
+  justify-content: center;
+}
+
+.oneOrder {
+  border:2px dotted rgba(248, 238, 238, 0.9);
+  padding-top: 10px;
+
+}
+.oneOrder h5{
+  display: flex;
+  justify-content: center;
+}
+
+ .oneOrderInner {
+  display: flex;
+  justify-content: space-between;
+  padding: 30px;
+  align-items: center;
+  width: 100%;
+} 
+
+.oneOrderGoods {
+  width: 50%;
+
+}
+
+.oneOrderGood {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.noOrders {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.goodInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 200px;
+}
+
+
+
+.goodInner p {
+  text-align: center;
+}
+.oneOrderGood img {
+  width: 50px;
+}
 .usersList {
   display: flex;
   width: 40%;
@@ -414,7 +477,7 @@ button {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  height: 550px;
+  min-height: 550px;
 
 }
 
@@ -491,6 +554,37 @@ button {
   .usersList {
     width: 100%;
   }
+
+.oneOrderInner {
+  padding: 5px;
+  
+}
+
+.oneOrderInner h5 {
+  font-size: 10px;
+}
+.oneOrder .oneOrderInner h5 {
+  font-size: 10px;
+}
+.oneOrderInner {
+
+}
+
+
+  .oneOrder h5 {
+    font-size: 14px;
+  }
+  .oneOrderGood {
+    padding: 5px;
+    font-size: 12px;
+    flex-direction: column;
+    border: 2px solid rgb(229, 229, 243);
+  }
+  .goodInner {
+    font-size: 10px;
+    width: 100px;
+  }
+
   .order {
     padding-left: 10px;
     padding-right: 10px;

shop/src/components/Main.js

@@ -8,7 +8,7 @@ import store from "../reducers";
 import Catalog from "./catalog";
 import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, 
     SearchInput, CGoodsSearch, LoginForm, CGoodCard, CYourProfile,
-    COrderPage, CUsersList} from "./index";
+    COrderPage, CUsersList, COrdersList} from "./index";
 
 
   
@@ -54,7 +54,10 @@ const Main = ({className = "MainImg" }) => {
             </div>
         </div>
         <div className = "bottom">
-
+                    <Switch>
+                        <Route path = "/profile/" component = {COrdersList}/>
+                        <Route path = "/user/:_id" component = {COrdersList}/>
+                    </Switch>
         </div>
         </>
     )

shop/src/components/goodsListSearch.js

@@ -7,6 +7,7 @@ import {GoodsNotFound } from "./index";
 const mapStateToProps = state => ({
     state: state,
     search: getData(state, "search"),
+
     status: state.promiseRed && state.promiseRed.search &&
     state.promiseRed.search.payload && state.promiseRed.search &&
     state.promiseRed.search.status,
@@ -19,7 +20,7 @@ const mapStateToProps = state => ({
 
 
 const GoodsListSearch = ({status, search = [], className = "goods"}) => {
-    console.log(status)
+
     if(search.length == 0) {
         return(
             <>

shop/src/components/index.js

@@ -21,11 +21,12 @@ import CYourProfile from "./profilePage";
 import CBasketPage from "./basket";
 import COrderPage from "./orderDonePage";
 import CUsersList from "./usersList";
+import COrdersList from "./ordersList";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, CYourProfile, CBasketPage, COrderPage, CUsersList, SearchUserInput};
+LoginForm, CGoodCard, CYourProfile, CBasketPage, COrdersList, COrderPage, CUsersList, SearchUserInput};
 
 
 

shop/src/components/ordersList.js

@@ -0,0 +1,146 @@
+import { actionOrdersFind, urlUpload} from "../reducers";
+import { connect } from "react-redux";
+import { useEffect, useState, useRef } from "react";
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+
+
+const OneOrderGood = ({img, name, count, price}) => {
+
+    return(
+        <div className = "oneOrderGood">
+            <div className = "goodInner">
+            <img src={img ? `${urlUpload}/${img}`: 'https://pngicon.ru/file/uploads/picca-1.png'} />
+                <p>{name}</p>
+                <span>{price}грн</span>
+            </div>
+            <div>
+                <h5>{count}шт</h5>
+            </div>
+        </div>
+    )
+}
+
+
+
+const OneOrder = ({price, total, _id, img, goodsArr = [],count,  createdAt}) => {
+    const date =  new Date(+createdAt);
+
+    return(
+
+        <div key = {_id} className = "oneOrder">
+            <div>
+                <h5>
+                Створено: {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}
+                </h5>
+                <div className = "oneOrderInner">
+                    <div className = "oneOrderGoods">
+                        {(!goodsArr || goodsArr.length == 0) && <div>Замовлення скасовано</div>}
+                        {goodsArr && goodsArr.map((good) =>  { 
+                             if(good.good == null || good.good.name == null) {
+                                 return(
+                                    <div>Товар відмінено</div>
+                                 )
+                             } else {
+                                 
+                                 return(
+                                     <>
+                             <OneOrderGood name = {good.good ? good.good.name : "товар"} count = {good.count} price = {good.good ? good.good.price : "0"} img = {good.good && good.good.images && good.good.images[0].url ? `${good.good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
+
+                             </>
+                                 ) 
+                            }
+                        })}
+                    </div>
+                    <div> {<h5>{(total && total > 0) ? `Сума замовлення: ${total}грн` : ""}</h5>}</div>
+                </div>
+
+
+            </div>
+            
+        </div>
+    )
+}
+
+
+
+const OrdersList = ({orders = [], status, ordersFind, owner, isAdmin, match:{params:{_id}}}) => {
+    const history = useHistory();
+
+    function ordersOnPage(arr) {
+        let newArr = arr.slice();
+        newArr.reverse()
+
+        return newArr.map((order) => <OneOrder _id = {order._id} createdAt = {order.createdAt} goodsArr = {order.orderGoods} total = {order.total}/>)}
+    
+
+    useEffect(() =>   {
+        if(history.location.pathname.includes(`/profile/`)) {
+
+            ordersFind(`${owner.id}`) ;
+        }
+        if(isAdmin) {
+            ordersFind(`${_id}`) ;
+        }
+    },[])
+
+
+    return(
+        <>
+        { (status == "RESOLVED" && orders) &&
+        
+        <div className = "ordersList">
+                    <h4>Попередні замовлення</h4>
+                    {orders.length == 0 && 
+                    <div className = "noOrders" onClick = {() => history.push("/catalog/")}>
+                    <p>Ще немає жодного замовлення. Саме час це змінити</p>
+                    <button>В каталог</button></div>}
+                    {ordersOnPage(orders)}
+            {/* {orders.reverse().map((order) => <OneOrder _id = {order._id} createdAt = {order.createdAt} goodsArr = {order.orderGoods} total = {order.total}/>)} */}
+
+        </div>
+        }
+        </>
+    )
+}
+
+
+
+const mapStateToProps = state => ({
+    state: state,
+
+    orders: state.promiseRed && state.promiseRed.ordersFind &&
+    state.promiseRed.ordersFind.payload && state.promiseRed.ordersFind.payload.data &&
+    state.promiseRed.ordersFind.payload.data.OrderFind,
+    
+    token: state.auth && state.auth.token,
+
+    status: state.promiseRed && state.promiseRed.ordersFind &&
+    state.promiseRed.ordersFind.payload && state.promiseRed.ordersFind &&
+    state.promiseRed.ordersFind.status,
+
+    isUserAdmin: state.promiseRed && state.promiseRed.user &&
+    state.promiseRed.user.payload && state.promiseRed.user.payload.data &&
+    state.promiseRed.user.payload.data.UserFindOne && 
+    state.promiseRed.user.payload.data.UserFindOne.acl &&
+    state.promiseRed.user.payload.data.UserFindOne.acl.indexOf("admin") > -1,
+
+    owner: state.auth && state.auth.payload && state.auth.payload.sub &&
+    state.auth.payload.sub,
+
+    isAdmin: state.auth && state.auth.payload && state.auth.payload.sub &&
+    state.auth.payload.sub.acl && state.auth.payload.sub.acl.indexOf("admin") > -1,
+
+    
+ });
+
+
+ 
+ const mapDispatchToProps = dispatch => bindActionCreators({
+
+   ordersFind: actionOrdersFind
+ }, dispatch);
+
+ const COrdersList = connect(mapStateToProps, mapDispatchToProps)(OrdersList);
+
+ export default COrdersList;

shop/src/components/profilePage.js

@@ -32,7 +32,9 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
        }
        else {
         getData(`${_id}`);
+        if(isAdmin) {
         orders(`${_id}`) ;
+        }
        }
     },[history.location.pathname])
 

shop/src/reducers/actionOrdersFind.js

@@ -15,7 +15,7 @@ const actionOrdersFind = (data) => {
                 OrderFind(query: $query){
                   total
                   _id
-                  orderGoods {count, _id, price, good {name, price}}
+                  orderGoods {count, _id, price, good {name, price, images {url}}}
                   createdAt
                   owner {
                     login