pagination false

src/App.js

@@ -2,14 +2,16 @@
 import { Router, Route, Switch, useParams } from 'react-router-dom';
 import { createBrowserHistory } from "history";
 import { createStore, combineReducers, applyMiddleware } from 'redux';
-import { Provider} from 'react-redux';
-import { authReducer, promiseReducer, actionAuthLogin, frontEndReducer } from './reducers';
-import { CLoginForm, CMainAppBar } from "./Components";
+import { Provider } from 'react-redux';
+import { authReducer, promiseReducer, actionAuthLogin, frontEndReducer, actionRootCats } from './reducers';
+import { CLoginForm, CMainAppBar, COrdersList } from "./Components";
 import { CLogout } from './Components';
 import { CSidebar } from './Components/Sidebar';
 import thunk from 'redux-thunk';
+import { CRootCats } from './Components';
 
 import './App.css';
+import { CCategory } from './Components/Category';
 
 export const history = createBrowserHistory();
 
@@ -18,6 +20,7 @@ store.subscribe(() => console.log(store.getState()))
 
 //console.log(useParams)
 store.dispatch(actionAuthLogin(localStorage.authToken));
+store.dispatch(actionRootCats());
 console.log('TTTTT' + performance.now())
 
 
@@ -41,9 +44,11 @@ function App() {
         <Provider store={store}>
           <div className="App">
             <CMainAppBar />
-            <CSidebar menuComponent={() => <div>TEST!!!!!!</div>} />
+            <CSidebar menuComponent={() => <CRootCats />} />
             <Switch>
               <Route path="/" component={Main} exact />
+              <Route path="/orders" component={COrdersList} />
+              <Route path="/category/:_id" component={CCategory} />
               <Route path="/login" component={CLoginForm} />
               <Route path="/logout" component={CLogout} />
               <Route path="*" component={NotFound} />

src/Components/LoginForm.js

@@ -3,7 +3,7 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import Button from '@mui/material/Button';
 import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
 import { Box } from '@mui/system';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { actionFullLogin } from '../jql';
 import { MyLink } from './MyLink';
 

src/Components/MainAppBar.js

@@ -13,10 +13,6 @@ import { actionSetSidebar } from '../reducers/frontEndReducer';
 const MainAppBar = ({ token, openSidebar }) => {
     const theme = useTheme();
 
-    const handleDrawerOpen = () => {
-        openSidebar(true);
-    };
-
     let isLoggedIn = token && true;
     return (
         <Box sx={{ flexGrow: 1 }}>
@@ -27,7 +23,7 @@ const MainAppBar = ({ token, openSidebar }) => {
                         edge="start"
                         color="inherit"
                         aria-label="menu"
-                        onClick={handleDrawerOpen}
+                        onClick={() => openSidebar(true)}
                         sx={{ mr: 2 }}
                     >
                         <MenuIcon />
@@ -45,6 +41,7 @@ const MainAppBar = ({ token, openSidebar }) => {
                         isLoggedIn &&
                         <>
                             <MyLink to="/logout"><Button color="inherit">Logout</Button></MyLink>
+                            <MyLink to="/orders"><Button color="inherit">Orders</Button></MyLink>
                         </>
                     }
                     <Button color="inherit">Cart</Button>

src/Components/OrderList.js

@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react';
+import React, { Component, useEffect, useState } from 'react';
 import Button from '@mui/material/Button';
 import { alpha } from '@mui/material/styles';
 import { Container, Avatar, Typography, Grid, CardActionArea, Card, CardContent, CardMedia, AvatarGroup, CardActions, Collapse, IconButton, Paper, List, ListItem, Box, Link, TablePagination } from '@mui/material';
@@ -11,6 +11,9 @@ import { Table, TableBody, TableContainer, TableHead, TableRow, TableCell } from
 import { StyledTableCell, StyledTableRow } from './StyledTableElements';
 import { visuallyHidden } from '@mui/utils';
 import TableSortLabel from '@mui/material/TableSortLabel';
+import { COrdersPagination } from './Pagination';
+import { actionFindOrders } from '../reducers';
+import { connect } from 'react-redux';
 
 let exampleOrderList = [
     {
@@ -934,26 +937,16 @@ function descendingComparator(a, b, orderBy) {
     }
     return 0;
 }
-const OrderList = ({ orders }) => {
-    const [order, setOrder] = React.useState('asc');
+const OrderList = ({ orders, fromPage = 0, pageSize = 5, loadData }) => {
+    /*const [order, setOrder] = React.useState('asc');
     const [orderBy, setOrderBy] = React.useState('calories');
     const [page, setPage] = React.useState(0);
-    const [rowsPerPage, setRowsPerPage] = React.useState(5);
+    const [rowsPerPage, setRowsPerPage] = React.useState(5);*/
 
-    const handleRequestSort = (event, property) => {
-        const isAsc = orderBy === property && order === 'asc';
-        setOrder(isAsc ? 'desc' : 'asc');
-        setOrderBy(property);
-    };
+    useEffect(() => {
+        loadData(fromPage, pageSize)
+    }, [fromPage, pageSize]);
 
-    const handleChangePage = (event, newPage) => {
-        setPage(newPage);
-    };
-
-    const handleChangeRowsPerPage = (event) => {
-        setRowsPerPage(parseInt(event.target.value, 10));
-        setPage(0);
-    };
 
     let headCells = [
         {
@@ -1035,11 +1028,10 @@ const OrderList = ({ orders }) => {
                                 }
                             </TableRow>
                         </TableHead>
-                        <TableBody>
-                            {
-                                orders
-                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                    .map((order, index) => {
+                        {orders?.length > 0 && (
+                            <TableBody>
+                                {
+                                    orders.map((order, index) => {
                                         return (
                                             <StyledTableRow>
                                                 <StyledTableCell align="right" >
@@ -1077,21 +1069,39 @@ const OrderList = ({ orders }) => {
                                             </StyledTableRow>
                                         )
                                     })
-                            }
-                        </TableBody>
+                                }
+                            </TableBody>
+                        )}
+                        <COrdersPagination />
                     </Table>
                 </TableContainer>
-                <TablePagination
-                    rowsPerPageOptions={[5, 10, 25]}
-                    component="div"
-                    count={exampleOrderList.length}
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    onPageChange={handleChangePage}
-                    onRowsPerPageChange={handleChangeRowsPerPage}
-                />
             </Container>
         </>
     )
+
+    /*
+                    <TablePagination
+                        rowsPerPageOptions={[5, 10, 25]}
+                        component="div"
+                        count={exampleOrderList.length}
+                        rowsPerPage={rowsPerPage}
+                        page={page}
+                        onPageChange={handleChangePage}
+                        onRowsPerPageChange={handleChangeRowsPerPage}
+                    />
+    */
 }
-export { exampleOrderList, OrderList };
+
+const COrdersList = connect(
+    state => {
+        let a = '';
+        return (
+            {
+                orders: state.promise.orders?.payload,
+                fromPage: state.frontend.ordersPaging.fromPage,
+                pageSize: state.frontend.ordersPaging.pageSize,
+            })
+    },
+    { loadData: actionFindOrders })(OrderList);
+
+export { COrdersList };

src/Components/Pagination.js

@@ -0,0 +1,45 @@
+import { TablePagination } from '@mui/material';
+import { useState } from 'react';
+import { connect } from 'react-redux';
+import { actionFindOrders } from '../reducers';
+import { actionSetOrdersPaging } from '../reducers/frontEndReducer';
+
+const Pagination = ({ orders, changePage, changeRowsPerPage }) => {
+    let allEntitiesCount = 1000;
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+        changePage(newPage, rowsPerPage)
+    };
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+        changeRowsPerPage(parseInt(event.target.value, 10));
+    };
+    return (
+        <TablePagination
+            rowsPerPageOptions={[5, 10, 25]}
+            component="div"
+            count={allEntitiesCount}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+    )
+}
+
+export const COrdersPagination = connect(
+    state => ({ orders: state.promise.orders?.payload }),
+    {
+        changePage: (fromPage, pageSize) => {
+            actionFindOrders(fromPage, pageSize);
+            actionSetOrdersPaging({ fromPage, pageSize });
+        },
+        changeRowsPerPage: pageSize => {
+            actionFindOrders(0, pageSize);
+            actionSetOrdersPaging({ fromPage: 0, pageSize });
+        }
+    })(Pagination);
+

src/Components/RootCats.js

@@ -0,0 +1,28 @@
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { connect } from "react-redux";
+import { MyLink } from ".";
+import { actionCategoryFindOne } from "../reducers";
+
+export const CatsList = ({ cats = [] }) => {
+    return (
+        <List>
+            {cats.map(cat => (
+                <CatItem cat={cat} />
+            ))}
+        </List>
+    )
+};
+const CRootCats = connect(state => ({ cats: state.promise.rootCats?.payload }))(CatsList)
+
+const CatItem = ({ cat }) => {
+    return (
+        <ListItem key={cat._id} disablePadding>
+            <ListItemButton>
+                <MyLink to={`/category/${cat._id}`}>
+                    <ListItemText primary={cat.name} />
+                </MyLink>
+            </ListItemButton>
+        </ListItem>
+    )
+};
+export { CRootCats };

src/Components/index.js

@@ -1,11 +1,11 @@
 export { CLoginForm } from './LoginForm';
 export { Good, GoodExample } from './Good';
 export { goodsExample, GoodsList } from './GoodsList';
-export { Category, exampleCategory } from './Category';
 export { OrderGood, exampleOrderGood } from './OrderGood';
 export { OrderGoodsList, exampleOrderGoodsList } from './OrderGoodsList'
 export { Order, exampleOrder } from './Order';
-export { OrderList, exampleOrderList } from './OrderList';
+export { COrdersList } from './OrderList';
 export { MyLink } from './MyLink';
 export { CLogout } from './Logout';
-export { CMainAppBar } from './MainAppBar';
+export { CMainAppBar } from './MainAppBar';
+export { CRootCats } from './RootCats';

src/jql/gqlCategories.js

@@ -1,5 +1,5 @@
-import {gql} from "../utills/gql";
-import {actionPromise} from "../reducers";
+import { gql } from "../utills/gql";
+import { actionPromise } from "../reducers";
 
 export const gqlRootCats = () => {
     const catQuery = `query roots {
@@ -8,8 +8,6 @@ export const gqlRootCats = () => {
                             }}`;
     return gql(catQuery);
 }
-export const actionRootCats = () =>
-    actionPromise('rootCats', gqlRootCats());
 export const gqlCategoryFindOne = (id) => {
     const catQuery = `query CategoryFindOne($q: String) {
             CategoryFindOne(query: $q) {
@@ -23,5 +21,4 @@ export const gqlCategoryFindOne = (id) => {
         }`;
     return gql(catQuery, { q: `[{\"_id\": \"${id}\"}]` });
 }
-export const actionCategoryFindOne = (id) =>
-    actionPromise('catFindOne', gqlCategoryFindOne(id));
+

src/jql/gqlOrders.js

@@ -40,9 +40,11 @@ export const actionOrderFullUpsert = (then) =>
     actionPromise('orderUpsert', orderFullUpsert(then));
 
 
-const gqlFindOrders = () => {
-    const findOrdersQuery = `query OrderFind {
-                            OrderFind(query: "[{}]") {
+export const gqlFindOrders = (fromPage, pageSize) => {
+    
+    let params = { q: `[{}, {\"skip\":[${fromPage * pageSize}], \"limit\":[${pageSize}]}]` };
+    const findOrdersQuery = `query OrderFind($q: String) {
+                            OrderFind(query: $q) {
                                 _id total
                                 orderGoods {
                                     _id price count total createdAt
@@ -53,8 +55,24 @@ const gqlFindOrders = () => {
                                 }
                             }
                             }`;
-    return gql(findOrdersQuery);
+    return gql(findOrdersQuery, params);
 }
-export const actionFindOrders = () =>
-    actionPromise('orders', gqlFindOrders());
 
+
+/*
+    const gqlFindOrders = (fromPage, pageSize) => {
+        const findOrdersQuery = `query OrderFind {
+                                OrderFind(query: "[{}]") {
+                                    _id total
+                                    orderGoods {
+                                        _id price count total createdAt
+                                        good {
+                                            name 
+                                            images { url }
+                                        }
+                                    }
+                                }
+                                }`;
+        return gql(findOrdersQuery);
+    }
+*/    

src/jql/index.js

@@ -1,4 +1,3 @@
 export { actionAuthUpsert, actionLogin, actionFullLogin } from './gqlAuth';
-export { actionCategoryFindOne, actionRootCats } from './gqlCategories';
 export { actionGoodFind, actionGoodFindOne } from './gqlGoods';
-export { actionFindOrders, actionOrderFullUpsert, actionOrderUpsert } from './gqlOrders';
+export { actionOrderFullUpsert, actionOrderUpsert } from './gqlOrders';

src/reducers/categoryReducer.js

@@ -0,0 +1,9 @@
+import { gqlCategoryFindOne, gqlRootCats } from '../jql/gqlCategories';
+import { actionPromise } from './promiseReducer';
+const actionRootCats = () =>
+    actionPromise('rootCats', gqlRootCats());
+
+const actionCategoryFindOne = (id) =>
+    actionPromise('catFindOne', gqlCategoryFindOne(id));
+
+export { actionRootCats, actionCategoryFindOne }

src/reducers/frontEndReducer.js

@@ -1,9 +1,14 @@
-export function frontEndReducer(state = { sidebar: {} }, action) {                   // диспетчер обработки login
+export function frontEndReducer(state = { sidebar: {}, ordersPaging: { fromPage: 0, pageSize: 5 } }, action) {                   // диспетчер обработки login
     if (action) {
         if (action.type === 'SET_SIDE_BAR') {
             return { ...state, sidebar: { opened: action.open } };
         }
+        if (action.type === 'SET_ORDERS_PAGING') {
+            return { ...state, ordersPaging: { fromPage: action.page.fromPage, pageSize: action.page.pageSize } };
+        }
     }
     return state;
 }
-export const actionSetSidebar = open => ({ type: 'SET_SIDE_BAR', open });
+export const actionSetSidebar = open => ({ type: 'SET_SIDE_BAR', open });
+
+export const actionSetOrdersPaging = (page = { fromPage: 0, pageSize: 5 }) => ({ type: 'SET_ORDERS_PAGING', page });

src/reducers/index.js

@@ -3,3 +3,5 @@ export { authReducer, actionAuthLogin, actionAuthLogout, actionAuthLoginThunk }
 export { cartReducer, actionCartAdd, actionCartClear, actionCartDel, actionCartSet, actionCartShow, actionCartSub } from "./cartReducer";
 export { localStoredReducer, } from "./localStoredReducer";
 export { frontEndReducer, } from "./frontEndReducer";
+export { actionRootCats, actionCategoryFindOne } from './categoryReducer';
+export { actionFindOrders } from './ordersReducer';

src/reducers/ordersReducer.js

@@ -0,0 +1,5 @@
+import { gqlFindOrders } from "../jql/gqlOrders";
+import { actionPromise } from "./promiseReducer";
+
+export const actionFindOrders = (fromPage = 0, pageSize = undefined) =>
+    actionPromise('orders', gqlFindOrders(fromPage, pageSize));