rtk_order yepp

src/App.js

@@ -5,7 +5,7 @@ import { createBrowserHistory } from "history";
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import { authReducer, promiseReducer, actionAuthLogin, frontEndReducer, actionRootCats, goodsReducer } from './reducers';
-import { CGoodsList, CLoginForm, CMainAppBar, COrdersList, goodsExample, GoodsList } from "./Components";
+import { CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList, exampleOrder, goodsExample, GoodsList, Order } from "./Components";
 import { CLogout } from './Components';
 import { CSidebar } from './Components/Sidebar';
 import thunk from 'redux-thunk';
@@ -62,6 +62,7 @@ function App() {
               <Route path="/orders" component={COrdersList} />
               <Route path="/goods" component={CGoodsList} />
               <Route path="/category/:_id" component={CCategory} />
+              <Route path="/order/:_id" component={COrder} />
               <Route path="/login" component={CLoginForm} />
               <Route path="/logout" component={CLogout} />
               <Route path="*" component={NotFound} />

src/Components/Order.js

@@ -1,6 +1,10 @@
+import React, { useEffect } from 'react';
 import { Typography } from "@mui/material"
 import { Box, Container } from "@mui/system"
+import { connect } from "react-redux"
+import { actionOrderFindOne, getCurrentOrder } from "../reducers/ordersReducer"
 import { OrderGoodsList } from "./OrderGoodsList"
+import { useParams } from 'react-router-dom/cjs/react-router-dom';
 
 let exampleOrder = {
     "_id": "62cdc9b3b74e1f5f2ec1a0e9",
@@ -56,7 +60,11 @@ let exampleOrder = {
         }
     ]
 }
-const Order = ({ order }) => {
+const Order = ({ order = {}, loadData }) => {
+    const { _id: currentOrderId } = useParams();
+    useEffect(() => {
+        loadData(currentOrderId);
+    }, [currentOrderId, loadData]);
     return (
         <>
             <Container>
@@ -67,10 +75,13 @@ const Order = ({ order }) => {
                     <Typography gutterBottom variant='body2' color='textSecondary' component='p'>
                         {`Created at: ${new Date(+order.createdAt).toLocaleString()}`}
                     </Typography>
-                    <OrderGoodsList orderGoods={order.orderGoods} />
+                    <OrderGoodsList orderGoods={order?.orderGoods} />
                 </Box>
             </Container>
         </>
     )
 }
-export { Order, exampleOrder }
+const COrder = connect(state => ({ order: getCurrentOrder(state) }),
+    { loadData: actionOrderFindOne })(Order);
+
+export { COrder };

src/Components/OrderGoodsList.js

@@ -145,7 +145,7 @@ let exampleOrderGoodsList = [
     },
 ];
 
-const OrderGoodsList = ({ orderGoods, tax_rate = 0 }) => {
+const OrderGoodsList = ({ orderGoods = [], tax_rate = 0 }) => {
     function ccyFormat(num) {
         return `${num.toFixed(2)}`;
     }
@@ -178,20 +178,20 @@ const OrderGoodsList = ({ orderGoods, tax_rate = 0 }) => {
                                 )
                             })
                         }
-                            <TableRow>
-                                <TableCell rowSpan={3} colSpan={3} />
-                                <TableCell colSpan={2}>Subtotal</TableCell>
-                                <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableCell>Tax</TableCell>
-                                <TableCell align="right">{`${(tax_rate * 100).toFixed(0)} %`}</TableCell>
-                                <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
-                            </TableRow>
-                            <TableRow>
-                                <TableCell colSpan={2}>Total</TableCell>
-                                <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
-                            </TableRow>
+                        <TableRow>
+                            <TableCell rowSpan={3} colSpan={3} />
+                            <TableCell colSpan={2}>Subtotal</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell>Tax</TableCell>
+                            <TableCell align="right">{`${(tax_rate * 100).toFixed(0)} %`}</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell colSpan={2}>Total</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
+                        </TableRow>
                     </TableBody>
                 </Table>
             </TableContainer>

src/Components/OrderList.js

@@ -6,6 +6,7 @@ import { COrdersPagination } from './Pagination';
 import { actionFindOrders, actionOrdersCount } from '../reducers';
 import { connect } from 'react-redux';
 import { COrdersSearchInput } from './SearchInput';
+import { MyLink } from '.';
 
 /*function stableSort(array, comparator) {
     const stabilizedThis = array.map((el, index) => [el, index]);
@@ -140,11 +141,11 @@ const OrderList = ({ orders, searchStr, fromPage = 0, pageSize = 5, loadData, lo
                                                     {new Date(+order.createdAt).toLocaleString()}
                                                 </StyledTableCell>
                                                 <StyledTableCell  >
-                                                    <Link href='#'>
+                                                    <MyLink to={`/order/${order._id}`}>
                                                         <Typography >
                                                             {order._id}
                                                         </Typography>
-                                                    </Link>
+                                                    </MyLink>
                                                 </StyledTableCell>
                                                 <StyledTableCell align="right" >
                                                     <Typography >

src/Components/index.js

@@ -3,7 +3,7 @@ export { Good, GoodExample } from './Good';
 export { CGoodsList } from './GoodsList';
 export { OrderGood, exampleOrderGood } from './OrderGood';
 export { OrderGoodsList, exampleOrderGoodsList } from './OrderGoodsList'
-export { Order, exampleOrder } from './Order';
+export { COrder } from './Order';
 export { COrdersList } from './OrderList';
 export { MyLink } from './MyLink';
 export { CLogout } from './Logout';

src/jql/gqlOrders.js

@@ -43,9 +43,26 @@ export const actionOrderFullUpsert = (then) =>
 
 const getOrderSearchParams = query => ({ searchStr: query, searchFieldNames: ["_id"] });
 
+export const gqlOrderFindOne = (_id) => {
+    let params = createFullQuery({ queryExt: { _id } });
+    const gqlQuery = `query OrderFindOne($q: String) {
+        OrderFindOne(query: $q) {
+            _id total createdAt
+            orderGoods {
+                _id price count total createdAt
+                good {
+                    name 
+                    images { url }
+                }
+            }
+        }
+        }`;
+    return gql(gqlQuery, params);
+}
+
 export const gqlFindOrders = (fromPage, pageSize, query = '') => {
     let params = createFullQuery(getOrderSearchParams(query), { fromPage, pageSize });
-    const findOrdersQuery = `query OrderFind($q: String) {
+    const gqlQuery = `query OrderFind($q: String) {
                             OrderFind(query: $q) {
                                 _id total
                                 orderGoods {
@@ -57,7 +74,7 @@ export const gqlFindOrders = (fromPage, pageSize, query = '') => {
                                 }
                             }
                             }`;
-    return gql(findOrdersQuery, params);
+    return gql(gqlQuery, params);
 }
 
 export const gqlOrdersCount = (query = '') => {

src/jql/index.js

@@ -1,3 +1,3 @@
 export { actionAuthUpsert, actionLogin, actionFullLogin } from './gqlAuth';
 export { gqlGoodFind, gqlGoodFindOne } from './gqlGoods';
-export { actionOrderFullUpsert, actionOrderUpsert } from './gqlOrders';
+export { actionOrderFullUpsert, actionOrderUpsert , gqlOrderFindOne, gqlFindOrders, gqlOrdersCount } from './gqlOrders';

src/reducers/goodsReducer.js

@@ -2,7 +2,7 @@ import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../jql/gqlGoods';
 import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
 
 const actionGoodFindOne = (id) =>
-    actionPromiseGoods('selectedGood', gqlGoodFindOne(id));
+    actionPromiseGoods('currentGood', gqlGoodFindOne(id));
 const actionGoodFind = (fromPage = 0, pageSize = undefined, searchStr = null, queryExt = {}) =>
     actionPromiseGoods('goods', gqlGoodFind(fromPage, pageSize, searchStr, queryExt));
 const actionGoodsCount = (searchStr = null, queryExt = {}) =>

src/reducers/ordersReducer.js

@@ -1,4 +1,4 @@
-import { gqlFindOrders, gqlOrdersCount } from "../jql/gqlOrders";
+import { gqlFindOrders, gqlOrderFindOne, gqlOrdersCount } from "../jql/gqlOrders";
 import { actionPromiseGeneric, createPromiseReducerSlice } from "./promiseReducer";
 
 const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>
@@ -7,9 +7,16 @@ const actionFindOrders = (fromPage = 0, pageSize = undefined, query = null) =>
 const actionOrdersCount = (query = null) =>
     actionPromiseOrders('ordersCount', gqlOrdersCount(query));
 
+const currentOrder = 'currentOrder';
+const actionOrderFindOne = (id) =>
+    actionPromiseOrders(currentOrder, gqlOrderFindOne(id));
+const getCurrentOrder = state => (
+    state.orders[currentOrder]?.payload
+)
+
 const ordersReducerSlice = createPromiseReducerSlice('orders');
 const actionPromiseOrders = (name, promise) =>
     actionPromiseGeneric(ordersReducerSlice, name, promise);
 
 let ordersReducer = ordersReducerSlice.reducer;
-export { ordersReducer, actionOrdersCount, actionFindOrders }
+export { ordersReducer, actionOrdersCount, actionFindOrders, actionOrderFindOne, getCurrentOrder }