rtk_guery_goodsList

src/App.js

@@ -3,15 +3,15 @@ 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, actionAuthLogin, frontEndReducer, actionRootCats, goodsReducer, cartReducer, actionRestoreCart, cartGoodsReducer } from './reducers';
-import { CGood, CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList, exampleOrder, goodsExample, GoodsList, MyLink, Order } from "./Components";
+import { promiseReducer, frontEndReducer, cartReducer, actionRestoreCart, cartGoodsReducer, goodsApi } from './reducers';
+import { CGood, CGoodsList, CLoginForm, CMainAppBar, COrder, COrdersList } from "./Components";
 import { CLogout } from './Components';
 import { CSidebar } from './Components/Sidebar';
 import { CRootCats } from './Components';
 
 import './App.css';
 import { CCategory } from './Components/Category';
-import { categoryApi, categoryReducer } from './reducers/categoryReducer';
+import { categoryApi } from './reducers/categoryReducer';
 import { ordersReducer } from './reducers/ordersReducer';
 import { CCart } from './Components/Cart';
 import { authApiReducer, authReducer, authApiReducerPath, loginApi, authReducerPath } from './reducers';
@@ -38,7 +38,7 @@ const rootReducer = combineReducers({
   frontend: frontEndReducer,
   [categoryApi.reducerPath]: categoryApi.reducer,
   orders: ordersReducer,
-  goods: goodsReducer,
+  [goodsApi.reducerPath]: goodsApi.reducer,
   cart: cartReducer,
   cartData: cartGoodsReducer
 });
@@ -47,18 +47,16 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) => [
     ...getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER] } }),
     categoryApi.middleware,
+    goodsApi.middleware,
     loginApi.middleware],
   reducer: rootReducer
 });
 store.subscribe(() => console.log(store.getState()))
 const persistor = persistStore(store)
 
-//console.log(useParams)
 //store.dispatch(actionAuthLogin(localStorage.authToken));
 //store.dispatch(actionRootCats());
 store.dispatch(actionRestoreCart());
-console.log('TTTTT' + performance.now())
-
 
 const NotFound = () =>
   <div>
@@ -100,52 +98,5 @@ function App() {
 
   );
 }
-{/*    <div className="App">
-      
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-  </div>
-*/}
-
-{/*<Route path="/" component={Main} exact />*/ }
-{/*<CCatMenu />
-              <Route path="*" component={NotFound} />
-            <LoginForm onLogin={(l, p) => console.log(l, p)} />
-            <CLoginForm />
-            <MyLink to="/" activeClassName='activeLink'>Главная</MyLink>
-            <MyLink to="/aboutus" activeClassName='activeLink'>О нас</MyLink>
-            <MyLink to="/add/2/3" activeClassName='activeLink'>2 + 3</MyLink>
-            <MyLink to="/add/20/50" activeClassName='activeLink'>20 + 50</MyLink>
-
-            <h1>Этот текст будет всегда в независимости от роутинга</h1>
-            <Switch>
-              <Route path="/" component={Main} exact />
-              <Route path="/aboutus" component={AboutUs} />
-              <Route path="/add/:a/:b" component={Add} />
-              <Route path="*" component={NotFound} />
-            </Switch>
-            <h1>Роутинг выше</h1>*/}
-
-{/*
-      <GoodsList goods={goodsExample} />
-      <GoodExample />
-      <Category category={exampleCategory} />
-      <OrderGood orderGood={exampleOrderGood}/>
-      <Order order={exampleOrder} />
-      <OrderList orders={exampleOrderList} />
-      <OrderGoodsList orderGoods={exampleOrderGoodsList} />
-      */}
 
 export default App;

src/Components/Good.js

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import { Container, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton } from '@mui/material';
 import { getFullImageUrl } from "./../utills";
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { AvatarAnimated } from './AvatarAnimated';
-import { actionAddGoodToCart, actionGoodFindOne } from '../reducers';
-import { connect } from 'react-redux';
-import { getCurrentGood } from '../reducers/goodsReducer';
+import { actionAddGoodToCart } from '../reducers';
+import { connect, useDispatch } from 'react-redux';
+import { useGetGoodByIdQuery } from '../reducers';
 import { useParams } from 'react-router-dom';
-import { MyLink } from './MyLink';
-import { GoodItem } from './GoodItem';
+import { actionSetCurrentGood } from '../reducers/frontEndReducer';
+
 
 export const ExpandMore = styled(props => {
     const { expand, ...other } = props;
@@ -37,13 +37,12 @@ export const AvatarGroupOriented = styled((props) => {
     },
     ".MuiAvatar-root": { /*width: 20, height: 20,*/ marginLeft: 1 }
 }));
-const Good = ({ good = {}, maxWidth = 'md', showAddToCard = true, loadData = undefined, addToCart = undefined }) => {
-    const params = useParams();
-    const currentGoodId = params._id;
-    useEffect(() => {
-        if (loadData && currentGoodId)
-            loadData(currentGoodId);
-    }, [currentGoodId, loadData]);
+const Good = ({ /*good = {},*/ maxWidth = 'md', showAddToCard = true, addToCart = undefined }) => {
+    const { _id } = useParams();
+    const { isLoading, data } = useGetGoodByIdQuery(_id);
+    let good = isLoading ? { name: 'loading', goods: [] } : data?.GoodFindOne;
+    const dispatch = useDispatch();
+    dispatch(actionSetCurrentGood(_id));
     let [currentImageIndex, setCurrentImageIndex] = useState(0);
     let [expanded, setExpanded] = useState(false);
     const handleExpandClick = () => setExpanded(!expanded);
@@ -120,7 +119,7 @@ const Good = ({ good = {}, maxWidth = 'md', showAddToCard = true, loadData = und
     )
 }
 
-const CGood = connect(state => ({ good: getCurrentGood(state) }),
-    { loadData: actionGoodFindOne, addToCart: actionAddGoodToCart })(Good);
+const CGood = connect(state => ({}),
+    { addToCart: actionAddGoodToCart })(Good);
 
 export { CGood };

src/Components/GoodsList.js

@@ -1,26 +1,13 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Container, Box } from '@mui/material';
 import { CGoodItem } from './GoodItem';
-import { connect, useSelector } from 'react-redux';
-import { actionGoodFind, actionGoodsCount } from '../reducers';
+import { useSelector } from 'react-redux';
+import { useGetGoodsCountQuery, useGetGoodsQuery } from '../reducers';
 import { CGoodsSearchInput } from './SearchInput';
 import { CGoodsPagination } from './Pagination';
 import { getCurrentCategory } from '../reducers/frontEndReducer';
 
-const GoodsList = ({ loadData, loadGoodsCount}) => {
-    let state = useSelector(state => state);
-    const currentCategory = getCurrentCategory(state);
-    const goods = state.goods?.goods?.payload;
-    const searchStr = state.frontend.goodsSearchStr;
-    const fromPage = state.frontend.goodsPaging.fromPage;
-    const pageSize = state.frontend.goodsPaging.pageSize;
-
-    useEffect(() => {
-        let categoryFilter = currentCategory ? { "categories._id": currentCategory } : {};
-        loadData(fromPage, pageSize, searchStr, categoryFilter);
-        loadGoodsCount(searchStr, categoryFilter);
-    }, [fromPage, pageSize, searchStr, currentCategory]);
-    
+const GoodsList = ({ goods }) => {
     return (
         <Container maxWidth='lg'>
             <CGoodsSearchInput />
@@ -36,8 +23,22 @@ const GoodsList = ({ loadData, loadGoodsCount}) => {
         </Container>
     )
 }
-const CGoodsList = connect(
-    state => { },
-    { loadData: actionGoodFind, loadGoodsCount: actionGoodsCount })(GoodsList);
+
+const CGoodsList = () => {
+    let state = useSelector(state => state);
+    const currentCategory = getCurrentCategory(state);
+    const searchStr = state.frontend.goodsSearchStr;
+    const fromPage = state.frontend.goodsPaging.fromPage;
+    const pageSize = state.frontend.goodsPaging.pageSize;
+
+    let categoryFilter = currentCategory ? { "categories._id": currentCategory } : {};
+    const goodsResult = useGetGoodsQuery({ fromPage, pageSize, searchStr, queryExt: categoryFilter });
+    const goodsCountResult = useGetGoodsCountQuery({ searchStr, queryExt: categoryFilter });
+    let isLoading = goodsResult.isLoading || goodsCountResult.isLoading;
+
+    let goods = goodsResult.data?.GoodFind;
+    return !isLoading && goods && <GoodsList goods={goods} />
+}
+
 
 export { CGoodsList };

src/Components/Pagination.js

@@ -1,8 +1,8 @@
 import { TablePagination } from '@mui/material';
 import { useState } from 'react';
-import { connect } from 'react-redux';
-import { actionFindOrders, actionGoodFind, actionGoodsCount, actionOrdersCount } from '../reducers';
-import { actionSetGoodsPaging, actionSetOrdersPaging } from '../reducers/frontEndReducer';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import { actionFindOrders, useGetGoodsQuery } from '../reducers';
+import { actionSetGoodsPaging, actionSetOrdersPaging, getCurrentCategory } from '../reducers/frontEndReducer';
 
 const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerPage, changeRowsPerPageFE }) => {
     allEntitiesCount = allEntitiesCount ?? 0;
@@ -10,15 +10,17 @@ const Pagination = ({ allEntitiesCount, changePage, changePageFE, changeRowsPerP
     const [rowsPerPage, setRowsPerPage] = useState(5);
     const handleChangePage = (event, newPage) => {
         setPage(newPage);
-        changePage(newPage, rowsPerPage);
+        if (changePage)
+            changePage(newPage, rowsPerPage);
         changePageFE(newPage, rowsPerPage);
     };
     const handleChangeRowsPerPage = (event) => {
-        let newpageSize = parseInt(event.target.value, 10);
-        setRowsPerPage(newpageSize);
+        let newPageSize = parseInt(event.target.value, 10);
+        setRowsPerPage(newPageSize);
         setPage(0);
-        changeRowsPerPage(newpageSize);
-        changeRowsPerPageFE(newpageSize);
+        if (changeRowsPerPage)
+            changeRowsPerPage(newPageSize);
+        changeRowsPerPageFE(newPageSize);
     };
     return (
         <TablePagination
@@ -44,7 +46,19 @@ export const COrdersPagination = connect(
         changeRowsPerPageFE: pageSize => actionSetOrdersPaging({ fromPage: 0, pageSize }),
         changeRowsPerPage: pageSize => actionFindOrders(0, pageSize),
     })(Pagination);
-export const CGoodsPagination = connect(
+
+
+
+export const CGoodsPagination = () => {
+    let state = useSelector(state => state);
+    let allEntitiesCount = state.frontend.goods.goodsCount?.payload ?? 0;
+    let dispatch = useDispatch();
+    let changePageFE = (fromPage, pageSize) => dispatch(actionSetGoodsPaging({ fromPage, pageSize }));
+    let changeRowsPerPageFE = pageSize => dispatch(actionSetGoodsPaging({ fromPage: 0, pageSize }));
+    return <Pagination allEntitiesCount={allEntitiesCount} changePageFE={changePageFE} changeRowsPerPageFE={changeRowsPerPageFE} />
+}
+
+/*export const CGoodsPagination = connect(
     state => (
         {
             allEntitiesCount: state.goods.goodsCount?.payload ?? 0,
@@ -55,4 +69,4 @@ export const CGoodsPagination = connect(
         changeRowsPerPageFE: pageSize => actionSetGoodsPaging({ fromPage: 0, pageSize }),
         changeRowsPerPage: pageSize => actionGoodFind(0, pageSize),
     })(Pagination);
-
+*/

src/reducers/BAK/goodsReducer.js

@@ -0,0 +1,21 @@
+import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../gql/gqlGoods';
+import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
+
+const currentGood = 'currentGood';
+const actionGoodFindOne = (id) =>
+    actionPromiseGoods(currentGood, gqlGoodFindOne(id));
+const getCurrentGood = state => (
+    
+    state.goods[currentGood]?.payload
+)
+
+const actionGoodFind = (fromPage = 0, pageSize = undefined, searchStr = null, queryExt = {}) =>
+    actionPromiseGoods('goods', gqlGoodFind(fromPage, pageSize, searchStr, queryExt));
+const actionGoodsCount = (searchStr = null, queryExt = {}) =>
+    actionPromiseGoods('goodsCount', gqlGoodsCount(searchStr, queryExt));
+
+const goodsReducerSlice = createPromiseReducerSlice('goods');
+const actionPromiseGoods = (name, promise) =>
+    actionPromiseGeneric(goodsReducerSlice, name, promise);
+let goodsReducer = goodsReducerSlice.reducer;
+export { goodsReducer, actionGoodFindOne, actionGoodFind, actionGoodsCount,  getCurrentGood }

src/reducers/frontEndReducer.js

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit"
+import { goodsApi } from "./goodsReducer";
 
 const frontEndReducerSlice = createSlice({ //promiseReducer
     name: 'frontend', //префикс типа наподобие AUTH_
@@ -32,8 +33,17 @@ const frontEndReducerSlice = createSlice({ //promiseReducer
             setCurrentCategory(state, action.payload._id);
             return state;
         },
+        setCurrentGood(state, action) {
+            setCurrentGood(state, action.payload._id);
+            return state;
+        },
+    },
+    extraReducers: builder =>
+        builder.addMatcher(goodsApi.endpoints.getGoodsCount.matchFulfilled,
+            (state, { payload }) => {
+                state.goods = { goodsCount: { payload: payload.GoodCount } }
+            })
 
-    }
 })
 
 let frontEndReducer = frontEndReducerSlice.reducer;
@@ -52,11 +62,17 @@ let actionSetOrderSearch = (searchStr) =>
         dispatch(frontEndReducerSlice.actions.setOrdersSearch({ searchStr }))
     }
 
+
 let actionSetCurrentCategory = (_id) =>
     async dispatch => {
         dispatch(frontEndReducerSlice.actions.setCurrentCategory({ _id }))
     }
 
+let actionSetCurrentGood = (_id) =>
+    async dispatch => {
+        dispatch(frontEndReducerSlice.actions.setCurrentGood({ _id }))
+    }
+
 let actionSetGoodsPaging = ({ fromPage, pageSize }) =>
     async dispatch => {
         dispatch(frontEndReducerSlice.actions.setGoodsPaging({ page: { fromPage, pageSize } }))
@@ -75,9 +91,19 @@ const getCurrentCategory = state => {
 }
 
 const setCurrentCategory = (state, id) => {
-    return state[currentCategory] = { payload: id } ;
+    return state[currentCategory] = { payload: id };
+}
+const currentGood = 'currentGood';
+
+const getCurrentGood = state => {
+    let result = state.frontend[currentGood]?.payload
+    return result;
+}
+
+const setCurrentGood = (state, id) => {
+    return state[currentGood] = { payload: id };
 }
 
 
-export { frontEndReducer, actionSetSidebar, actionSetOrdersPaging, actionSetOrderSearch, actionSetGoodsPaging, actionSetGoodsSearch, actionSetCurrentCategory };
-export { getCurrentCategory }
+export { frontEndReducer, actionSetSidebar, actionSetOrdersPaging, actionSetOrderSearch, actionSetGoodsPaging, actionSetGoodsSearch };
+export { getCurrentCategory, getCurrentGood, actionSetCurrentCategory, actionSetCurrentGood }

src/reducers/goodsReducer.js

@@ -1,21 +1,78 @@
-import { gqlGoodFind, gqlGoodFindOne, gqlGoodsCount } from '../gql/gqlGoods';
-import { createPromiseReducerSlice, actionPromiseGeneric } from './promiseReducer';
+import { createApi } from '@reduxjs/toolkit/query/react'
+import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query"
+import { gql } from "graphql-request";
+import { createFullQuery } from '../gql';
+//import { prepareHeaders } from "./index";
 
-const currentGood = 'currentGood';
-const actionGoodFindOne = (id) =>
-    actionPromiseGoods(currentGood, gqlGoodFindOne(id));
-const getCurrentGood = state => (
-    
-    state.goods[currentGood]?.payload
-)
+export const prepareHeaders = (headers, { getState }) => {
+    const token = getState().auth.token;
+    if (token) {
+        headers.set("Authorization", `Bearer ${token}`);
+    }
+    return headers;
+}
+const getGoodsSearchParams = (searchStr, queryExt) => (
+    {
+        searchStr: searchStr, 
+        searchFieldNames: ["name", "description"],
+        queryExt
+    });
 
-const actionGoodFind = (fromPage = 0, pageSize = undefined, searchStr = null, queryExt = {}) =>
-    actionPromiseGoods('goods', gqlGoodFind(fromPage, pageSize, searchStr, queryExt));
-const actionGoodsCount = (searchStr = null, queryExt = {}) =>
-    actionPromiseGoods('goodsCount', gqlGoodsCount(searchStr, queryExt));
+export const goodsApi = createApi({
+    reducerPath: 'goods',
+    baseQuery: graphqlRequestBaseQuery({
+        url: '/graphql',
+        prepareHeaders
+    }),
+    endpoints: (builder) => ({
+        getGoods: builder.query({
+            query: ({ fromPage, pageSize, searchStr = '', queryExt = {} }) => {
+                let params = createFullQuery(
+                    getGoodsSearchParams(searchStr, queryExt),
+                    { fromPage, pageSize });
+                return {
+                    document: gql`
+                        query GoodFind($q: String) {
+                            GoodFind(query: $q) {
+                                _id name  price description
+                                images { url }
+                            }
+                        }
+                `,
+                    variables: params
+                }
+            },
+        }),
+        getGoodsCount: builder.query({
+            query: ({ searchStr = '', queryExt = {} }) => {
+                let params = createFullQuery(
+                    getGoodsSearchParams(searchStr, queryExt));
+                return {
+                    document: gql`
+                        query GoodsCount($q: String) { GoodCount(query: $q) }
+                    `,
+                    variables: params
+                }
+            },
+        }),
+        getGoodById: builder.query({
+            query: (_id) => {
+                let params = createFullQuery({ searchStr: _id, searchFieldNames: ["_id"] });
+                return {
+                    document: gql`
+                        query GoodFindOne($q: String) {
+                            GoodFindOne(query: $q) {
+                                _id name  price description
+                                images { url }
+                            }
+                        }
+                    `,
+                    variables: params
+                }
+            },
+        }),
+    }),
+})
+
+export const { useGetGoodsQuery, useGetGoodsCountQuery, useGetGoodByIdQuery } = goodsApi;
 
-const goodsReducerSlice = createPromiseReducerSlice('goods');
-const actionPromiseGoods = (name, promise) =>
-    actionPromiseGeneric(goodsReducerSlice, name, promise);
-let goodsReducer = goodsReducerSlice.reducer;
-export { goodsReducer, actionGoodFindOne, actionGoodFind, actionGoodsCount,  getCurrentGood }

src/reducers/index.js

@@ -3,9 +3,9 @@ export { authApiReducer, authReducer, authApiReducerPath, loginApi, authReducerP
 export { cartReducer, actionAddGoodToCart, actionDeleteGoodFromCart, actionRestoreCart, actionClearCart, getCart, } from "./cartReducer";
 export { cartGoodsReducer, actionLoadCart } from "./cartGoodsReducer";
 export { localStoredReducer, } from "./localStoredReducer";
-export { frontEndReducer, } from "./frontEndReducer";
-export { useGetRootCategoriesQuery, useGetCategoryByIdQuery  } from './categoryReducer';
+export { frontEndReducer, getCurrentCategory, getCurrentGood } from "./frontEndReducer";
+export { useGetRootCategoriesQuery, useGetCategoryByIdQuery } from './categoryReducer';
 export { actionFindOrders, actionOrdersCount, actionPlaceOrder } from './ordersReducer';
-export { goodsReducer, actionGoodFind, actionGoodFindOne, actionGoodsCount } from './goodsReducer';
+export { goodsApi, useGetGoodByIdQuery, useGetGoodsCountQuery, useGetGoodsQuery } from './goodsReducer';