rtk_cart_false

src/App.js

@@ -3,7 +3,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { Router, Route, Switch } from 'react-router-dom';
 import { createBrowserHistory } from "history";
 import { Provider } from 'react-redux';
-import { promiseReducer, frontEndReducer, cartReducer, actionRestoreCart, cartGoodsReducer, goodsApi } from './reducers';
+import { promiseReducer, frontEndReducer, cartReducer, actionRestoreCart, goodsApi, cartGoodsApi } from './reducers';
 import { CGood, CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList } from "./Components";
 import { CLogout } from './Components';
 import { CSidebar } from './Components/Sidebar';
@@ -11,7 +11,7 @@ import { CRootCats } from './Components';
 import './App.css';
 import { CCategory } from './Components/Category';
 import { categoryApi } from './reducers/categoryReducer';
-import { ordersApi, ordersReducer } from './reducers/ordersReducer';
+import { ordersApi } from './reducers/ordersReducer';
 import { CCart } from './Components/Cart';
 import { authApiReducer, authReducer, authApiReducerPath, loginApi, authReducerPath } from './reducers';
 import storage from "redux-persist/lib/storage";
@@ -39,10 +39,10 @@ const rootReducer = combineReducers({
   [categoryApi.reducerPath]: categoryApi.reducer,
   [goodsApi.reducerPath]: goodsApi.reducer,
   [ordersApi.reducerPath]: ordersApi.reducer,
+  [cartGoodsApi.reducerPath]: cartGoodsApi.reducer,
   promise: promiseReducer,
   frontend: frontEndReducer,
   cart: cartReducer,
-  cartData: cartGoodsReducer
 });
 
 export const store = configureStore({
@@ -51,11 +51,12 @@ export const store = configureStore({
     categoryApi.middleware,
     goodsApi.middleware,
     ordersApi.middleware,
-    loginApi.middleware],
+    loginApi.middleware,
+    cartGoodsApi.middleware],
   reducer: rootReducer
 });
 store.subscribe(() => console.log(store.getState()))
-const persistor = persistStore(store)
+/*const persistor = */persistStore(store)
 
 //store.dispatch(actionAuthLogin(localStorage.authToken));
 //store.dispatch(actionRootCats());

src/Components/Cart.js

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Button, Typography } from "@mui/material"
 import { Box, Container } from "@mui/system"
-import { connect } from "react-redux"
-import { actionLoadCart, getCart, actionPlaceOrder, actionAddOrder } from "../reducers"
+import { connect, useDispatch, useSelector } from "react-redux"
+import { actionAddOrder, useAddOrderMutation, useGetCartGoodsQuery } from "../reducers"
 import { CartGoodsList } from "./CartGoodsList"
 import { findObjectIndexById } from '../utills';
 
@@ -14,13 +14,18 @@ const mapCountToGood = (goodData, goodsCounts) => {
     return count;
 }
 
-const Cart = ({ goods, goodsData, uniqueId, loadData }) => {
-    goodsData = goodsData?.map(gd => ({ ...gd, count: mapCountToGood(gd, goods) })) ?? [];
-
-    useEffect(() => {
-        loadData();
-    }, [uniqueId, loadData]);
-    return (
+const Cart = ({ uniqueId }) => {
+    let goods = useSelector(state => state.cart.goods) ?? [];
+    let { isLoading, data } = useGetCartGoodsQuery({ goods });
+    let goodsData = data?.GoodFind?.map(gd => ({ ...gd, count: mapCountToGood(gd, goods) })) ?? [];
+    let state = useSelector(state => state);
+    let order = [];
+    for (let good of Object.values(state.cart.goods)) {
+        order.push({ good: { _id: good._id }, count: good.count });
+    }
+    const [addOrderMutation, { isLoading: isOrderAdding, data: orderAddingData }] = useAddOrderMutation();
+    const dispatch = useDispatch();
+    return !isLoading && (
         <>
             <Container>
                 <Box>
@@ -28,8 +33,11 @@ const Cart = ({ goods, goodsData, uniqueId, loadData }) => {
                         Cart
                     </Typography>
                     <CartGoodsList goods={goodsData ?? []} />
-                    <Button size='small' color='primary'
-                        onClick={() => actionAddOrder()}
+                    <Button size='small' color='primary' disabled={isOrderAdding}
+                        onClick={() => {
+                            let a = '';
+                            addOrderMutation({ order });
+                        }}
                     >
                         Place Order
                     </Button>
@@ -42,9 +50,9 @@ const CCart = connect(state => ({
     /*goods: state.cart.goods,
     goodsData: state.goods?.goods?.payload,
     uniqueId: state.cart.uniqueId,*/
-    ...getCart(state) 
+    //...getCart(state)
     //cart: getCart(state) 
 }),
-    { loadData: actionLoadCart })(Cart);
+    {})(Cart);
 
 export { CCart };

src/Components/CartGood.js

@@ -23,8 +23,8 @@ const CartGood = ({ good, goodNum, addToCart = undefined }) => {
                         null}
                 </StyledTableCell>
                 <StyledTableCell item xs={3}>
-                    {good?.good?._id ?
-                        <MyLink to={`/good/${good?.good._id}`}>
+                    {good?._id ?
+                        <MyLink to={`/good/${good?._id}`}>
                             <Typography >
                                 {good.name}
                             </Typography>

src/reducers/BAK/cartGoodsReducer.js

@@ -0,0 +1,45 @@
+/*import { gqlGoodFind } from "../gql";
+import { actionClearCartData } from "./cartReducer";
+import { actionPromiseGeneric, createPromiseReducerSlice } from "./promiseReducer";
+
+let actionCartGoodsFindInt = (dispatch, goods) => {
+    return dispatch(
+        actionGetCartGoods({ _id: { "$in": goods.map(g => g._id) } }));
+}
+
+const goodsData = "goodsData";
+const actionGetCartGoods = (goodsQuery) => 
+    actionPromiseCartGoods(goodsData, gqlGoodFind(undefined, undefined, null, goodsQuery));
+
+let actionLoadCart = () =>
+    async (dispatch, getState) => {
+        let state = getState();
+        let goods = state.cart.goods;
+        if (goods?.length > 0)
+            actionCartGoodsFindInt(dispatch, goods);
+        else
+            dispatch(actionClearCartData());
+    }
+
+let getCartData = state => {
+    var cartData = state.cartData;
+    if (!cartData)
+        return [];
+    return cartData[goodsData]?.payload ?? [];
+}
+let clearCartData = state => {
+    let res = false;
+    let cartData = getCartData(state);
+    if (cartData?.length > 0) {
+        state.cartData = { [goodsData]: { payload: [] } };
+        res = true;
+    }
+    return res;
+}
+
+const cartGoodsReducerSlice = createPromiseReducerSlice('cartData');
+const actionPromiseCartGoods = (name, promise) =>
+    actionPromiseGeneric(cartGoodsReducerSlice, name, promise);
+let cartGoodsReducer = cartGoodsReducerSlice.reducer;
+export { cartGoodsReducer, actionLoadCart, getCartData, clearCartData }
+*/

src/reducers/cartGoodsReducer.js

@@ -0,0 +1,42 @@
+import { createApi } from "@reduxjs/toolkit/dist/query/react";
+import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query";
+import { gql } from "graphql-request";
+import { createFullQuery } from "../gql";
+
+const prepareHeaders = (headers, { getState }) => {
+    const token = getState().auth.token;
+    if (token) {
+        headers.set("Authorization", `Bearer ${token}`);
+    }
+    return headers;
+}
+
+
+const cartGoodsApi = createApi({
+    reducerPath: 'cartGoods',
+    baseQuery: graphqlRequestBaseQuery({
+        url: '/graphql',
+        prepareHeaders
+    }),
+    endpoints: (builder) => ({
+        getCartGoods: builder.query({
+            query: ({ goods }) => {
+                let params = createFullQuery({ queryExt: { _id: { "$in": goods.map(g => g._id) } } });
+                //JSON.stringify({ q: [{ _id: { "$in": goods.map(g => g._id) } }] });
+                return {
+                    document: gql`
+                        query GoodFind($q: String) {
+                            GoodFind(query: $q) {
+                                _id name  price description
+                                images { url }
+                            }
+                        }
+                    `,
+                    variables: params
+                }
+            },
+        }),
+    }),
+})
+export const { useGetCartGoodsQuery } = cartGoodsApi;
+export { cartGoodsApi };

src/reducers/cartReducer.js

@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit"
 import { v4 } from "uuid";
 import { findObjectIndexById } from "../utills";
-import { clearCartData, getCartData } from "./cartGoodsReducer";
+//import { clearCartData, getCartData } from "./cartGoodsReducer";
 
 const cartReducerSlice = createSlice({ //promiseReducer
     name: 'cart', //префикс типа наподобие AUTH_
@@ -9,11 +9,11 @@ const cartReducerSlice = createSlice({ //promiseReducer
         goods: []
     },
     reducers: {
-        cleanCartData(state, { payload: { commonState } }) {
+        /*cleanCartData(state, { payload: { commonState } }) {
             if (clearCartData(commonState))
                 state.uniqueId = v4();
             return state;
-        },
+        },*/
         restoreCart(state, action) {
             let goods = localStorage.cart.goods;
             if (!goods) {
@@ -86,20 +86,20 @@ let actionClearCart = () =>
         dispatch(cartReducerSlice.actions.cleanCart({}))
     }
 
-let actionClearCartData = () =>
+/*let actionClearCartData = () =>
     async (dispatch, useState) => {
         let commonState = useState();
         dispatch(cartReducerSlice.actions.cleanCartData({ commonState }))
-    }
+    }*/
 
-let getCart = state => {
+/*let getCart = state => {
     let res = {
         goods: state.cart.goods,
         goodsData: getCartData(state),
         uniqueId: state.cart.uniqueId,
     };
     return res;
-}
+}*/
 
 const setStateData = (state, goods, uniqueId = undefined) => {
     if (goods !== undefined)
@@ -111,7 +111,7 @@ const setStateData = (state, goods, uniqueId = undefined) => {
 
 
 export {
-    cartReducer, getCart,
+    cartReducer, /*getCart,*/
     actionAddGoodToCart, actionDeleteGoodFromCart, actionRestoreCart,
-    actionClearCart, actionClearCartData
+    actionClearCart/*, actionClearCartData*/
 };

src/reducers/index.js

@@ -1,11 +1,11 @@
 export { promiseReducer, actionPromise, actionFulfilled, actionPending, actionRejected } from "./promiseReducer";
 export { authApiReducer, authReducer, authApiReducerPath, loginApi, authReducerPath, actionAuthLogout } from './authReducer';
-export { cartReducer, actionAddGoodToCart, actionDeleteGoodFromCart, actionRestoreCart, actionClearCart, getCart, } from "./cartReducer";
-export { cartGoodsReducer, actionLoadCart } from "./cartGoodsReducer";
+export { cartReducer, actionAddGoodToCart, actionDeleteGoodFromCart, actionRestoreCart, actionClearCart, /*getCart,*/ } from "./cartReducer";
+export { cartGoodsApi, useGetCartGoodsQuery } from "./cartGoodsReducer";
 export { localStoredReducer, } from "./localStoredReducer";
 export { frontEndReducer, getCurrentCategory, actionSetGoodsPaging, actionSetOrdersPaging, getCurrentGood, getGoodsCount, getOrdersCount } from "./frontEndReducer";
 export { useGetRootCategoriesQuery, useGetCategoryByIdQuery } from './categoryReducer';
-export { ordersApi, useGetOrderByIdQuery, useGetOrdersCountQuery, useGetOrdersQuery, actionAddOrder } from './ordersReducer';
+export { ordersApi, useGetOrderByIdQuery, useGetOrdersCountQuery, useGetOrdersQuery, actionAddOrder, useAddOrderMutation } from './ordersReducer';
 export { goodsApi, useGetGoodByIdQuery, useGetGoodsCountQuery, useGetGoodsQuery } from './goodsReducer';
 
 

src/reducers/ordersReducer.js

@@ -1,8 +1,9 @@
 import { createApi } from '@reduxjs/toolkit/query/react'
 import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query"
 import { gql } from "graphql-request";
+import { useSelector } from 'react-redux';
 import { createFullQuery } from '../gql';
- 
+
 const getOrderSearchParams = query => ({ searchStr: query, searchFieldNames: ["_id"] });
 const prepareHeaders = (headers, { getState }) => {
     const token = getState().auth.token;
@@ -105,6 +106,7 @@ const actionAddOrder = () => {
     }
 }
 
-export const { useGetOrdersQuery, useGetOrdersCountQuery, useGetOrderByIdQuery } = ordersApi;
+
+export const { useGetOrdersQuery, useGetOrdersCountQuery, useGetOrderByIdQuery, useAddOrderMutation } = ordersApi;
 export { ordersApi, actionAddOrder };