orderUpdatePage

shop/src/App.css

@@ -459,7 +459,6 @@ button {
   display: flex;
   justify-content: center;
   background-color: rgb(58, 58, 65);
-  border-radius: 10%;
   padding: 10px;
   align-items: center;
 }

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, COrdersList} from "./index";
+    COrderPage, CUsersList, COrdersList, COrderUpdate, CGoodsList} from "./index";
 
 
   
@@ -18,7 +18,10 @@ const Main = ({className = "MainImg" }) => {
 
         <div className = {className}>
             <div className = "catalogHead">
+                <Switch>
+                    <Route path = "/orderPage/" component = {MainCatalog}/>
                 <SearchInput/>
+                </Switch>
             </div>
                 <div className = "catalogInput">
 
@@ -27,6 +30,7 @@ const Main = ({className = "MainImg" }) => {
                             <Route path = "/catalog/" component={Catalog} />
                             <Route path = "/search/"component={Catalog} />
                             <Route path = "/good/:id" component={(window.innerWidth > 900) && Catalog} />
+                            <Route path = "/orderPage/" component = {Catalog}/>
                         </Switch>
                     </aside>
 
@@ -38,14 +42,15 @@ 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 = "/order/" component = {COrderPage} exact/>
                         <Route path = "/login/" component = {LoginForm}/>
                         <Route path = "/searchUser/:users" component = {CUsersList}/>
                         <Route path = "/profile/" component = {CYourProfile}/>
                         <Route path = "/user/:_id" component = {CYourProfile}/>
                         <Route path = "/basket" component = {CBasketPage}/>
                         <Route path="/about" component = {About} exact/>
-                        {/* <Route path = "/post" component = {Post} exact/> */}
+                        <Route path = "/orderPage/" component = {MainCatalog} exact/>
+                        <Route path = "/orderPage/:id" component = {({match}) => <CGoodsCategory id = {match.params.id}/>}/>
                         <Route path = "/contacts" component = {Contacts} />
                         <Route path = "/loginError" component={LoginError} />
                         <Route component = { NotFound } exact/>
@@ -57,6 +62,7 @@ const Main = ({className = "MainImg" }) => {
                     <Switch>
                         <Route path = "/profile/" component = {COrdersList}/>
                         <Route path = "/user/:_id" component = {COrdersList}/>
+                        <Route path = "/orderPage/:_id" component = {COrderUpdate}/>
                     </Switch>
         </div>
         </>

shop/src/components/basket.js

@@ -72,11 +72,11 @@ const BasketPage = ({state, orderDeal, orderDone, basket, GoodsArr, onAdd, onDel
         )
     } else if(basket.price) {
     return (
-        <>
-            <div className = "basketInner">
+        
+            <div  className = "basketInner">
                 <div className = "basketgoodsInner">
                     {GoodsArr.map((good) => 
-                    <div className = "oneGood"><OneGood key = {good._id} id = {good.id}
+                    <div key = {Math.random()} className = "oneGood"><OneGood id = {good.id}
                     name = {good.name} price = {good.price} image = {good.image ? `${urlUpload}/${good.image[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
                     <div className = "basketButoons">
                         <button onClick = {
@@ -107,12 +107,12 @@ const BasketPage = ({state, orderDeal, orderDone, basket, GoodsArr, onAdd, onDel
                     <button onClick = {() => onClear(basket)}>ТаНуНафіг</button>
                 </div>
             </div>
-        </>
+        
     )} else if(orderDone) {
         return(
             <>
-                <COrderPage/>
-                <div className = "basketNoGoods"><h2>Ой, у кошику порожно =( </h2><button  onClick = {() => history.push("/catalog/")}>В каталог</button></div>
+                <COrderPage key = {Math.random()}/>
+                <div key = {Math.random()} className = "basketNoGoods"><h2>Ой, у кошику порожно =( </h2><button  onClick = {() => history.push("/catalog/")}>В каталог</button></div>
 
             </>
         )

shop/src/components/catalog.js

@@ -4,6 +4,7 @@ import { Header, Footer, MainImg, Links } from "./index"
 import thunk from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 import actionCatalogCard from './../reducers/reducerCat';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 
 
 const CatalogSubLink = ({name, arr}) => {
@@ -18,7 +19,7 @@ const CatalogSubLink = ({name, arr}) => {
 
 const Catalog = ({ state, status, categories = [], getData = () => console.log("no") }) => {
     useEffect(() => categories.length == 0 && getData(), []);
-
+    const history = useHistory();
 
     return (
             <>
@@ -28,7 +29,10 @@ const Catalog = ({ state, status, categories = [], getData = () => console.log("
                 
                     category.subCategories == null ?
                     
-                        <Links key={`${category._id}${Math.random()}`} url={`/catalog/` + category._id} text={category.name}> </Links> :
+                        <Links 
+                        key={`${category._id}${Math.random()}`} 
+                        url={history.location.pathname.includes(`/catalog`) ? `/catalog/` + category._id : `/orderPage/` + category._id }
+                         text={category.name}> </Links> :
 
                          <CatalogSubLink name = {category.name} key = {`${category.subCategories._id}${Math.random()}`}arr = {category.subCategories}/>
 

shop/src/components/goodsCategory.js

@@ -11,6 +11,9 @@ import {OneGood, CGoodsList} from "./index";
   const mapStateToProps = state => ({
     state: state,
     goods: getData(state, "goods", "GoodFind"),
+    status: state.promiseRed && state.promiseRed.goods &&
+    state.promiseRed.goods.payload && state.promiseRed.goods &&
+    state.promiseRed.goods.status,
 
   });
   
@@ -22,9 +25,11 @@ import {OneGood, CGoodsList} from "./index";
 
 
 const GoodsCategory = ({goods, id, tittle = "Товари", getData, onAdd}) => {
+
   useEffect(() =>  getData(id), [id])
   return(
       <>
+        
         <div className = "goodsWrapper">
             <CGoodsList arr = {goods} onAdd = {onAdd}/>
         </div>

shop/src/components/goodsList.js

@@ -2,6 +2,7 @@ import {OneGood, GoodsNotFound} from "./index";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import {getData, actionGoods, urlUpload} from "../reducers/index";
 import {Provider, connect} from 'react-redux';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
 
 
   const mapStateToProps = state => ({
@@ -18,6 +19,7 @@ import {Provider, connect} from 'react-redux';
 
 
 const GoodsList = ({arr = [], className = "goods", onAdd}) => {
+  const history = useHistory();
   // console.log(arr)
   if(arr.length == 0) {
     return(
@@ -35,7 +37,8 @@ const GoodsList = ({arr = [], className = "goods", onAdd}) => {
         image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}
         />
         <div>
-            <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>
+           {(history.location.pathname.includes(`/catalog/`) || history.location.pathname.includes(`/search/`)) && <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>В кошик</button>}
+           {history.location.pathname.includes(`/orderPage/`) && <button onClick = {() => onAdd(good.name, good.price, good._id,  good.description, good.images)}>Додати до замовлення</button>}
         </div>
       </div>
       

shop/src/components/index.js

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

shop/src/components/orderUpdate.js

@@ -0,0 +1,60 @@
+import { actionOrdersFind, actionOrderFindOne, 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 OrderUpdate = ({orderFind, state, match:{params:{_id}}}) => {
+    useEffect(() => orderFind(_id), [])
+    console.log(state)
+
+    return (
+        <>
+        </>
+    )
+}
+
+
+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({
+
+   orderFind: actionOrderFindOne
+ }, dispatch);
+
+
+ const COrderUpdate = connect(mapStateToProps, mapDispatchToProps)(OrderUpdate);
+
+
+ export default COrderUpdate;
+

shop/src/components/ordersList.js

@@ -5,10 +5,10 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 
 
-const OneOrderGood = ({img, name, count, price}) => {
+const OneOrderGood = ({img, name, count, keyprop, price}) => {
 
     return(
-        <div className = "oneOrderGood">
+        <div key = {keyprop} className = "oneOrderGood">
             <div className = "goodInner">
             <img src={img ? `${urlUpload}/${img}`: 'https://pngicon.ru/file/uploads/picca-1.png'} />
                 <p>{name}</p>
@@ -23,36 +23,39 @@ const OneOrderGood = ({img, name, count, price}) => {
 
 
 
-const OneOrder = ({price, total, _id, img, goodsArr = [],count,  createdAt}) => {
+const OneOrder = ({price, total, _id, img, isAdmin, keyprop, goodsArr = [],count,  createdAt}) => {
     const date =  new Date(+createdAt);
-
+    const history = useHistory();
     return(
 
-        <div key = {_id} className = "oneOrder">
-            <div>
+        <div key = {keyprop} className = "oneOrder">
+            <div key = {Math.random()}>
                 <h5>
                 Створено: {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}
                 </h5>
-                <div className = "oneOrderInner">
+                <div key = {Math.random()} className = "oneOrderInner">
                     <div className = "oneOrderGoods">
-                        {(!goodsArr || goodsArr.length == 0) && <div>Замовлення скасовано</div>}
+                        {(!goodsArr || goodsArr.length == 0) && <div key = {`${_id}${Math.random}`}>Замовлення скасовано</div>}
                         {goodsArr && goodsArr.map((good) =>  { 
                              if(good.good == null || good.good.name == null) {
                                  return(
-                                    <div>Товар відмінено</div>
+                                    <div key = {`${Math.random()}`}>Товар відмінено</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`}/>
+                                     
+                             <OneOrderGood key = {Math.random()} name = {good.good ? good.good.name : "товар"} count = {good.count} price = {good.good ? good.good.price : ""} 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> {<h5>{(total && total > 0 && total != 0) ? `Сума замовлення: ${total}грн` : ""}</h5>}
+                    {isAdmin && goodsArr &&  total > 0 && <button onClick = {() => history.push(`/orderPage/${_id}`)}>Редагувати</button>}
+                    
+                    </div>
                 </div>
 
 
@@ -70,8 +73,8 @@ const OrdersList = ({orders = [], status, ordersFind, owner, isAdmin, match:{par
     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}/>)}
+        console.log(newArr)
+        return newArr.map((order) => <OneOrder isAdmin = {isAdmin} key = {order._id} _id = {order._id} createdAt = {order.createdAt} goodsArr = {order.orderGoods} total = {order.total}/>)}
     
 
     useEffect(() =>   {
@@ -86,10 +89,10 @@ const OrdersList = ({orders = [], status, ordersFind, owner, isAdmin, match:{par
 
 
     return(
-        <>
+        <div key = "ordersDiv">
         { (status == "RESOLVED" && orders) &&
         
-        <div className = "ordersList">
+        <div key = {Math.random} className = "ordersList">
                     <h4>Попередні замовлення</h4>
                     {orders.length == 0 && 
                     <div className = "noOrders" onClick = {() => history.push("/catalog/")}>
@@ -100,7 +103,7 @@ const OrdersList = ({orders = [], status, ordersFind, owner, isAdmin, match:{par
 
         </div>
         }
-        </>
+        </div>
     )
 }
 

shop/src/reducers/actionGoods.js

@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 
 
 const actionGoods = (_id) => {
+
   return async dispatch => { 
     const queryJson = JSON.stringify([{
       "categories._id": `${_id}`

shop/src/reducers/actionOrdersFind.js

@@ -15,7 +15,7 @@ const actionOrdersFind = (data) => {
                 OrderFind(query: $query){
                   total
                   _id
-                  orderGoods {count, _id, price, good {name, price, images {url}}}
+                  orderGoods {count, _id, price, good {name, _id, price, images {url}}}
                   createdAt
                   owner {
                     login
@@ -27,4 +27,27 @@ const actionOrdersFind = (data) => {
     }
 }
 
-export default actionOrdersFind;
+const actionOrderFindOne = (_id) => {
+    return async dispatch => {
+        const queryJson = JSON.stringify([{
+            "_id": `${_id}`
+
+          }]);
+
+
+          await dispatch(actionPromise("oneOrder", gql(
+              `query oneOrder($query: String) {
+                  OrderFindOne(query: $query) {
+                    total
+                    _id
+                    orderGoods {count, _id, price, good {name, _id, price, images {url}}}
+                    createdAt
+                  }
+              }`, {query: queryJson}
+          )))
+    }
+}
+
+
+
+export {actionOrdersFind, actionOrderFindOne};

shop/src/reducers/index.js

@@ -17,7 +17,7 @@ import actionUserFindOne from "./actionFindOneUser";
 import actionUserUpdate from "./actionUserUpdate";
 import actionSearchUser from "./actionSearchUser";
 import actionGoodUpdate from "./actionGoodUpdate";
-import actionOrdersFind from "./actionOrdersFind";
+import {actionOrdersFind, actionOrderFindOne} from "./actionOrdersFind";
 
 
 function promiseReducer(state={}, action){
@@ -43,7 +43,7 @@ function promiseReducer(state={}, action){
 export {actionPromise, actionOrdersFind,  gql, actionGoods, getData, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
    updateImgAction, actionCartAdd, actionCartDelete, actionCartClear, actionOrder,
-    actionReg, actionUserFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};
+    actionReg, actionUserFindOne, actionOrderFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};