+ status filter adminOrders

src/actions/actionOrdersAll.js

@@ -2,18 +2,24 @@ import { actionPromise } from '../reducers';
 import { gql } from '../helpers';
 
 export const actionOrdersAll =
-    ({ limit = 0, skip = 0, promiseName = 'adminOrdersAll', orderBy = '' } = {}) =>
+    ({ limit = 0, skip = 0, promiseName = 'adminOrdersAll', orderBy = '', status = 0 } = {}) =>
     async (dispatch, getState) => {
+        console.log(status);
         dispatch(
             actionPromise(
                 promiseName,
-                fetch(`/orders/?limit=${limit}&skip=${skip}${orderBy && `&orderBy=` + orderBy}`, {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        ...(localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {}),
-                    },
-                })
+                fetch(
+                    `/orders/?limit=${limit}&skip=${skip}${orderBy && `&orderBy=` + orderBy}${
+                        status ? `&status=` + status : ''
+                    }`,
+                    {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            ...(localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {}),
+                        },
+                    }
+                )
                     .then((res) => res.json())
                     .then((data) => {
                         if (data.errors) {

src/components/admin/AdminLayoutPage/index.js

@@ -129,16 +129,17 @@ const AdminOrdersPageContainer = ({ orders }) => {
     const dispatch = useDispatch();
     const [searchParams] = useSearchParams();
     const orderBy = searchParams.get('orderBy') || '_id';
+    const status = searchParams.get('status') || 0;
 
     useEffect(() => {
         dispatch(actionFeedClear());
         dispatch(actionPromiseClear('feedOrdersAll'));
         dispatch(actionPromiseClear('orderUpsert'));
-        dispatch(actionFeedOrders({ skip: 0, orderBy }));
-    }, [orderBy]);
+        dispatch(actionFeedOrders({ skip: 0, orderBy, status }));
+    }, [orderBy, status]);
 
     useEffect(() => {
-        dispatch(actionFeedOrders({ skip: orders?.length || 0, orderBy }));
+        dispatch(actionFeedOrders({ skip: orders?.length || 0, orderBy, status }));
         window.onscroll = (e) => {
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                 const {
@@ -147,7 +148,7 @@ const AdminOrdersPageContainer = ({ orders }) => {
                 } = store.getState();
 
                 if (feedOrdersAll.status !== 'PENDING') {
-                    dispatch(actionFeedOrders({ skip: feed.payload?.length || 0, orderBy }));
+                    dispatch(actionFeedOrders({ skip: feed.payload?.length || 0, orderBy, status }));
                 }
             }
         };

src/components/admin/AdminOrdersPage/AdminOrderList.js

@@ -6,7 +6,7 @@ import { actionOrdersFind } from '../../../actions/actionOrdersFind';
 import { actionPromiseClear } from '../../../reducers';
 import { Box, Table, TableBody, TableHead } from '@mui/material';
 import { AdminOrderItem } from './AdminOrderItem';
-import { createSearchParams, useLocation, useNavigate } from 'react-router-dom';
+import { createSearchParams, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 const CSearchBar = connect(null, {
     onSearch: (text) => actionOrdersFind({ promiseName: 'adminOrdersFind', text, limit: 5 }),
@@ -16,8 +16,7 @@ const CSearchBar = connect(null, {
 const CSearchResults = connect((state) => ({ items: state.promise.adminOrdersFind?.payload || [] }))(SearchResults);
 
 const AdminOrderList = ({ orders, orderBy = '_id' }) => {
-    const navigate = useNavigate();
-    const location = useLocation();
+    const [searchParams, setSearchParams] = useSearchParams();
 
     return (
         <Box className="AdminOrderList">
@@ -33,12 +32,8 @@ const AdminOrderList = ({ orders, orderBy = '_id' }) => {
                     <AdminOrderListHeader
                         sort={orderBy}
                         onSortChange={(orderBy) => {
-                            navigate({
-                                pathname: location.pathname,
-                                search: createSearchParams({
-                                    orderBy,
-                                }).toString(),
-                            });
+                            searchParams.set('orderBy', orderBy);
+                            setSearchParams(searchParams);
                         }}
                     />
                 </TableHead>

src/components/layout/Aside/StatusOptions.js

@@ -0,0 +1,28 @@
+import { Box, Divider, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import { createSearchParams, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+export const StatusOptions = ({ options }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    return (
+        <Box className="StatusOptions">
+            <List>
+                {[{ value: 0, label: 'Всі' }, ...(options || [])].map((option) => (
+                    <Box key={option.value}>
+                        <ListItem disablePadding>
+                            <ListItemButton
+                                onClick={() => {
+                                    searchParams.set('status', option.value);
+                                    setSearchParams(searchParams);
+                                }}
+                            >
+                                <ListItemText primary={option.label || ''} />
+                            </ListItemButton>
+                        </ListItem>
+                        <Divider />
+                    </Box>
+                ))}
+            </List>
+        </Box>
+    );
+};

src/components/layout/Aside/index.js

@@ -1,8 +1,10 @@
 import { Box } from '@mui/material';
 import { Route, Routes } from 'react-router-dom';
+import { statusOptions } from '../../../helpers';
 import { AdminCategories } from './AdminCategories';
 
 import { CCategories } from './CCategories';
+import { StatusOptions } from './StatusOptions';
 
 const Aside = ({ children }) => (
     <Box className="Aside">
@@ -11,8 +13,21 @@ const Aside = ({ children }) => (
                 <Route path="/admin/*" element={<AdminCategories />} />
                 <Route path="/*" element={<CCategories />} />
             </Routes>
+
             {children}
         </Box>
+
+        <Routes>
+            <Route
+                path="/admin/orders"
+                exact
+                element={
+                    <Box className="body" mt={4}>
+                        <StatusOptions options={statusOptions}></StatusOptions>
+                    </Box>
+                }
+            />
+        </Routes>
     </Box>
 );
 

src/reducers/feedReducer.js

@@ -48,9 +48,9 @@ const actionFeedCats =
     };
 
 const actionFeedOrders =
-    ({ skip = 0, orderBy = '_id' }) =>
+    ({ skip = 0, orderBy = '_id', status = 0 }) =>
     async (dispatch, getState) => {
-        await dispatch(actionOrdersAll({ skip, limit: 20, promiseName: 'feedOrdersAll', orderBy }));
+        await dispatch(actionOrdersAll({ skip, limit: 20, promiseName: 'feedOrdersAll', orderBy, status }));
     };
 
 const actionFeedOrdersFind =