split AdminLayout into files

src/components/admin/AdminLayoutPage/AdminCategoryLayout/AdminCategoriesPageContainer.js

@@ -0,0 +1,53 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminCategoriesPage } from "../../../../actions/actionAdminCategoriesPage";
+import { actionAdminCategoriesPageClear } from "../../../../actions/actionAdminCategoriesPageClear";
+import { actionFeedAdd, actionFeedCats } from "../../../../reducers";
+import { AdminCategoriesPage } from "../../AdminCategoriesPage";
+
+const AdminCategoriesPageContainer = ({ feed, cats, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const dispatch = useDispatch();
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+
+    useEffect(() => {
+        onLoad({ orderBy });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy]);
+
+    useEffect(() => {
+        window.onscroll = (e) => {
+            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
+                if (promiseStatus !== "PENDING") {
+                    onScroll({ feed, orderBy });
+                }
+            }
+        };
+        return () => {
+            window.onscroll = null;
+        };
+    }, [feed, promiseStatus]);
+
+    useEffect(() => {
+        if (cats.length) dispatch(actionFeedAdd(cats));
+    }, [cats]);
+
+    return <AdminCategoriesPage orderBy={orderBy} />;
+};
+
+export const CAdminCategoriesPageContainer = connect(
+    (state) => ({
+        cats: state.promise?.feedCatAll?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedCatAll?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminCategoriesPageClear(),
+        onLoad: ({ orderBy }) => actionAdminCategoriesPage({ orderBy }),
+        onScroll: ({ feed, orderBy }) => actionFeedCats({ skip: feed?.length || 0, orderBy }),
+    }
+)(AdminCategoriesPageContainer);

src/components/admin/AdminLayoutPage/AdminCategoryLayout/AdminCategoriesSearchPageContainer.js

@@ -0,0 +1,54 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminCategoriesSearchPage } from "../../../../actions/actionAdminCategoriesSearchPage";
+import { actionAdminCategoriesSearchPageClear } from "../../../../actions/actionAdminCategoriesSearchPageClear";
+import { actionFeedAdd, actionFeedCatsFind } from "../../../../reducers";
+import { AdminCategoriesPage } from "../../AdminCategoriesPage";
+
+const AdminCategoriesSearchPageContainer = ({ feed, cats, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const dispatch = useDispatch();
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+    const text = searchParams.get("text") || "";
+
+    useEffect(() => {
+        onLoad({ orderBy, text });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy, text]);
+
+    useEffect(() => {
+        window.onscroll = (e) => {
+            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
+                if (promiseStatus !== "PENDING") {
+                    onScroll({ feed, orderBy, text });
+                }
+            }
+        };
+        return () => {
+            window.onscroll = null;
+        };
+    }, [promiseStatus, feed, text]);
+
+    useEffect(() => {
+        if (cats?.length) dispatch(actionFeedAdd(cats));
+    }, [cats]);
+
+    return <AdminCategoriesPage orderBy={orderBy} />;
+};
+
+export const CAdminCategoriesSearchPageContainer = connect(
+    (state) => ({
+        cats: state.promise?.feedCatsFind?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedCatsFind?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminCategoriesSearchPageClear(),
+        onLoad: ({ orderBy, text }) => actionAdminCategoriesSearchPage({ orderBy, text }),
+        onScroll: ({ feed, orderBy, text }) => actionFeedCatsFind({ text, skip: feed?.length || 0, orderBy }),
+    }
+)(AdminCategoriesSearchPageContainer);

src/components/admin/AdminLayoutPage/AdminCategoryLayout/AdminCategoryPageContainer.js

@@ -0,0 +1,24 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { actionAdminCategoryPage } from "../../../../actions/actionAdminCategoryPage";
+import { actionAdminCategoryPageClear } from "../../../../actions/actionAdminCategoryPageClear";
+import { CAdminCategoryPage } from "../../AdminCategoryPage";
+
+const AdminCategoryPageContainer = ({ onUnmount, onLoad }) => {
+    const params = useParams();
+
+    useEffect(() => {
+        onLoad(params._id);
+        return () => {
+            onUnmount();
+        };
+    }, []);
+
+    return <CAdminCategoryPage />;
+};
+
+export const CAdminCategoryPageContainer = connect(null, {
+    onUnmount: () => actionAdminCategoryPageClear(),
+    onLoad: (_id) => actionAdminCategoryPage({ _id }),
+})(AdminCategoryPageContainer);

src/components/admin/AdminLayoutPage/AdminCategoryLayout/index.js

@@ -0,0 +1,5 @@
+import { CAdminCategoryPageContainer } from "./AdminCategoryPageContainer";
+import { CAdminCategoriesPageContainer } from "./AdminCategoriesPageContainer";
+import { CAdminCategoriesSearchPageContainer } from "./AdminCategoriesSearchPageContainer";
+
+export { CAdminCategoryPageContainer, CAdminCategoriesPageContainer, CAdminCategoriesSearchPageContainer };

src/components/admin/AdminLayoutPage/AdminGoodLayout/AdminGoodPageContainer.js

@@ -0,0 +1,24 @@
+import { CAdminGoodPage } from "../../AdminGoodPage";
+import { actionAdminGoodPage } from "../../../../actions/actionAdminGoodPage";
+import { actionAdminGoodPageClear } from "../../../../actions/actionAdminGoodPageClear";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { connect } from "react-redux";
+
+const AdminGoodPageContainer = ({ onUnmount, onLoad }) => {
+    const params = useParams();
+
+    useEffect(() => {
+        onLoad(params._id);
+        return () => {
+            onUnmount();
+        };
+    }, []);
+
+    return <CAdminGoodPage />;
+};
+
+export const CAdminGoodPageContainer = connect(null, {
+    onUnmount: () => actionAdminGoodPageClear(),
+    onLoad: (_id) => actionAdminGoodPage({ _id }),
+})(AdminGoodPageContainer);

src/components/admin/AdminLayoutPage/AdminGoodLayout/AdminGoodsPageContainer.js

@@ -0,0 +1,43 @@
+import { actionAdminGoodsPageClear } from "../../../../actions/actionAdminGoodsPageClear";
+import { actionAdminGoodsPage } from "../../../../actions/actionAdminGoodsPage";
+import { useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminGoodsPage } from "../../AdminGoodsPage";
+import { connect } from "react-redux";
+import { actionFeedGoods } from "../../../../reducers";
+
+const AdminGoodsPageContainer = ({ feed, goods, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+
+    useEffect(() => {
+        onLoad({ orderBy });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy]);
+
+    return (
+        <InfScroll
+            items={goods}
+            component={AdminGoodsPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminGoodsPageContainer = connect(
+    (state) => ({
+        goods: state.promise?.feedGoodsAll?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedGoodsAll?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminGoodsPageClear(),
+        onLoad: ({ orderBy }) => actionAdminGoodsPage({ orderBy }),
+        onScroll: ({ feed, orderBy }) => actionFeedGoods({ skip: feed?.length || 0, orderBy }),
+    }
+)(AdminGoodsPageContainer);

src/components/admin/AdminLayoutPage/AdminGoodLayout/AdminGoodsSearchPageContainer.js

@@ -0,0 +1,44 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminGoodsSearchPage } from "../../../../actions/actionAdminGoodsSearchPage";
+import { actionAdminGoodsSearchPageClear } from "../../../../actions/actionAdminGoodsSearchPageClear";
+import { actionFeedGoodsFind } from "../../../../reducers";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminGoodsPage } from "../../AdminGoodsPage";
+
+const AdminGoodsSearchPageContainer = ({ feed, goods, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+    const text = searchParams.get("text") || "";
+
+    useEffect(() => {
+        onLoad({ orderBy, text });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy, text]);
+
+    return (
+        <InfScroll
+            items={goods}
+            component={AdminGoodsPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy, text })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminGoodsSearchPageContainer = connect(
+    (state) => ({
+        goods: state.promise?.feedGoodsFind?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedGoodsFind?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminGoodsSearchPageClear(),
+        onLoad: ({ orderBy, text }) => actionAdminGoodsSearchPage({ orderBy, text }),
+        onScroll: ({ feed, orderBy, text }) => actionFeedGoodsFind({ text, skip: feed?.length || 0, orderBy }),
+    }
+)(AdminGoodsSearchPageContainer);

src/components/admin/AdminLayoutPage/AdminGoodLayout/index.js

@@ -0,0 +1,5 @@
+import { CAdminGoodPageContainer } from "./AdminGoodPageContainer";
+import { CAdminGoodsPageContainer } from "./AdminGoodsPageContainer";
+import { CAdminGoodsSearchPageContainer } from "./AdminGoodsSearchPageContainer";
+
+export { CAdminGoodPageContainer, CAdminGoodsPageContainer, CAdminGoodsSearchPageContainer };

src/components/admin/AdminLayoutPage/AdminOrderLayout/AdminOrderPageContainer.js

@@ -0,0 +1,24 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { actionAdminOrderPage } from "../../../../actions/actionAdminOrderPage";
+import { actionAdminOrderPageClear } from "../../../../actions/actionAdminOrderPageClear";
+import { CAdminOrderPage } from "../../AdminOrderPage";
+
+const AdminOrderPageContainer = ({ onLoad, onUnmount }) => {
+    const params = useParams();
+
+    useEffect(() => {
+        onLoad(params._id);
+        return () => {
+            onUnmount();
+        };
+    }, []);
+
+    return <CAdminOrderPage />;
+};
+
+export const CAdminOrderPageContainer = connect(null, {
+    onUnmount: () => actionAdminOrderPageClear(),
+    onLoad: (_id) => actionAdminOrderPage({ _id }),
+})(AdminOrderPageContainer);

src/components/admin/AdminLayoutPage/AdminOrderLayout/AdminOrdersPageContainer.js

@@ -0,0 +1,44 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminOrdersPage } from "../../../../actions/actionAdminOrdersPage";
+import { actionAdminOrdersPageClear } from "../../../../actions/actionAdminOrdersPageClear";
+import { actionFeedOrders } from "../../../../reducers";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminOrdersPage } from "../../AdminOrdersPage";
+
+const AdminOrdersPageContainer = ({ feed, orders, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+    const status = searchParams.get("status") || 0;
+
+    useEffect(() => {
+        onLoad({ orderBy, status });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy, status]);
+
+    return (
+        <InfScroll
+            items={orders}
+            component={AdminOrdersPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminOrdersPageContainer = connect(
+    (state) => ({
+        orders: state.promise?.feedOrdersAll?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedOrdersAll?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminOrdersPageClear(),
+        onLoad: ({ orderBy, status }) => actionAdminOrdersPage({ orderBy, status }),
+        onScroll: ({ feed, orderBy, status }) => actionFeedOrders({ skip: feed?.length || 0, orderBy, status }),
+    }
+)(AdminOrdersPageContainer);

src/components/admin/AdminLayoutPage/AdminOrderLayout/AdminOrdersSearchPageContainer.js

@@ -0,0 +1,44 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminOrdersSearchPageClear } from "../../../../actions/actionAdminOrdersSearchPageClear";
+import { actionFeedOrdersFind } from "../../../../reducers";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminOrdersPage } from "../../AdminOrdersPage";
+
+const AdminOrdersSearchPageContainer = ({ feed, orders, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+    const text = searchParams.get("text") || "";
+    const status = searchParams.get("status") || 0;
+
+    useEffect(() => {
+        onLoad({ orderBy, text });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy, text, status]);
+
+    return (
+        <InfScroll
+            items={orders}
+            component={AdminOrdersPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminOrdersSearchPageContainer = connect(
+    (state) => ({
+        orders: state.promise?.feedOrdersFind?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedOrdersFind?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminOrdersSearchPageClear(),
+        onLoad: ({ orderBy, text, status }) => actionAdminOrdersSearchPageClear({ orderBy, text, status }),
+        onScroll: ({ feed, orderBy, text, status }) => actionFeedOrdersFind({ text, skip: feed?.length || 0, orderBy, status }),
+    }
+)(AdminOrdersSearchPageContainer);

src/components/admin/AdminLayoutPage/AdminOrderLayout/index.js

@@ -0,0 +1,5 @@
+import { CAdminOrderPageContainer } from "./AdminOrderPageContainer";
+import { CAdminOrdersPageContainer } from "./AdminOrdersPageContainer";
+import { CAdminOrdersSearchPageContainer } from "./AdminOrdersSearchPageContainer";
+
+export { CAdminOrderPageContainer, CAdminOrdersPageContainer, CAdminOrdersSearchPageContainer };

src/components/admin/AdminLayoutPage/AdminUserLayout/AdminUserPageContainer.js

@@ -0,0 +1,26 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { actionAdminUserPage } from "../../../../actions/actionAdminUserPage";
+import { actionAdminUserPageClear } from "../../../../actions/actionAdminUserPageClear";
+import { CAdminUserPage } from "../../AdminUserPage.js";
+
+const AdminUserPageContainer = ({ onLoad, onUnmount }) => {
+    const params = useParams();
+
+    useEffect(() => {
+        return () => {
+            onUnmount();
+        };
+    }, []);
+
+    useEffect(() => {
+        onLoad(params._id);
+    }, [params._id]);
+    return <CAdminUserPage />;
+};
+
+export const CAdminUserPageContainer = connect(null, {
+    onUnmount: () => actionAdminUserPageClear(),
+    onLoad: (_id) => actionAdminUserPage({ _id }),
+})(AdminUserPageContainer);

src/components/admin/AdminLayoutPage/AdminUserLayout/AdminUsersPageContainer.js

@@ -0,0 +1,43 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminUsersPage } from "../../../../actions/actionAdminUsersPage";
+import { actionAdminUsersPageClear } from "../../../../actions/actionAdminUsersPageClear";
+import { actionFeedUsers } from "../../../../reducers";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminUsersPage } from "../../AdminUsersPage";
+
+const AdminUsersPageContainer = ({ feed, users, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+
+    useEffect(() => {
+        onLoad({ orderBy });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy]);
+
+    return (
+        <InfScroll
+            items={users}
+            component={AdminUsersPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminUsersPageContainer = connect(
+    (state) => ({
+        users: state.promise?.feedUsersAll?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedUsersAll?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminUsersPageClear(),
+        onLoad: ({ orderBy }) => actionAdminUsersPage({ orderBy }),
+        onScroll: ({ feed, orderBy }) => actionFeedUsers({ skip: feed?.length || 0, orderBy }),
+    }
+)(AdminUsersPageContainer);

src/components/admin/AdminLayoutPage/AdminUserLayout/AdminUsersSearchPageContainer.js

@@ -0,0 +1,44 @@
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { actionAdminUsersSearchPage } from "../../../../actions/actionAdminUsersSearchPage";
+import { actionAdminUsersSearchPageClear } from "../../../../actions/actionAdminUsersSearchPageClear";
+import { actionFeedUsersFind } from "../../../../reducers";
+import { InfScroll } from "../../../common/InfScroll";
+import { AdminUsersPage } from "../../AdminUsersPage";
+
+const AdminUsersSearchPageContainer = ({ feed, users, promiseStatus, onLoad, onUnmount, onScroll }) => {
+    const [searchParams] = useSearchParams();
+    const orderBy = searchParams.get("orderBy") || "_id";
+    const text = searchParams.get("text") || "";
+
+    useEffect(() => {
+        onLoad({ orderBy, text });
+        return () => {
+            onUnmount();
+        };
+    }, [orderBy, text]);
+
+    return (
+        <InfScroll
+            items={users}
+            component={AdminUsersPage}
+            promiseStatus={promiseStatus}
+            onScroll={() => onScroll({ feed, orderBy, text })}
+            orderBy={orderBy}
+        />
+    );
+};
+
+export const CAdminUsersSearchPageContainer = connect(
+    (state) => ({
+        users: state.promise?.feedUsersFind?.payload || [],
+        feed: state.feed?.payload || [],
+        promiseStatus: state.promise?.feedUsersFind?.status || null,
+    }),
+    {
+        onUnmount: () => actionAdminUsersSearchPageClear(),
+        onLoad: ({ orderBy, text }) => actionAdminUsersSearchPage({ orderBy, text }),
+        onScroll: ({ feed, orderBy, text }) => actionFeedUsersFind({ text, skip: feed?.length || 0, orderBy }),
+    }
+)(AdminUsersSearchPageContainer);

src/components/admin/AdminLayoutPage/AdminUserLayout/index.js

@@ -0,0 +1,5 @@
+import { CAdminUserPageContainer } from "./AdminUserPageContainer";
+import { CAdminUsersPageContainer } from "./AdminUsersPageContainer";
+import { CAdminUsersSearchPageContainer } from "./AdminUsersSearchPageContainer";
+
+export { CAdminUserPageContainer, CAdminUsersPageContainer, CAdminUsersSearchPageContainer };

src/components/admin/AdminLayoutPage/index.js

@@ -1,43 +1,14 @@
 import { Box } from "@mui/material";
 import { useEffect } from "react";
-import { connect, useDispatch } from "react-redux";
-import { Navigate, Route, Routes, useParams, useSearchParams } from "react-router-dom";
-import { actionPromiseClear, actionFeedCats, actionFeedGoodsFind, actionFeedOrdersFind, actionFeedCatsFind } from "../../../reducers";
-import { actionFeedAdd, actionFeedGoods, actionFeedOrders, actionFeedUsers, actionFeedUsersFind } from "../../../reducers/feedReducer";
-import { CAdminGoodPage } from "../AdminGoodPage";
-import { AdminGoodsPage } from "../AdminGoodsPage";
-import { AdminCategoriesPage } from "../AdminCategoriesPage";
-import { CAdminCategoryPage } from "../AdminCategoryPage";
-import { AdminOrdersPage } from "../AdminOrdersPage";
-import { CAdminOrderPage } from "../AdminOrderPage";
+import { connect } from "react-redux";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { actionPromiseClear } from "../../../reducers";
 import { actionCatAll } from "../../../actions/actionCatAll";
 import { CAdminCategoryTree } from "../AdminCategoryTree";
-import { AdminUsersPage } from "../AdminUsersPage";
-import { CAdminUserPage } from "../AdminUserPage.js";
-import { actionAdminCategoryPage } from "../../../actions/actionAdminCategoryPage";
-import { actionAdminCategoryPageClear } from "../../../actions/actionAdminCategoryPageClear";
-import { actionAdminCategoriesPage } from "../../../actions/actionAdminCategoriesPage";
-import { actionAdminCategoriesPageClear } from "../../../actions/actionAdminCategoriesPageClear";
-import { actionAdminCategoriesSearchPageClear } from "../../../actions/actionAdminCategoriesSearchPageClear";
-import { actionAdminCategoriesSearchPage } from "../../../actions/actionAdminCategoriesSearchPage";
-import { actionAdminGoodsPageClear } from "../../../actions/actionAdminGoodsPageClear";
-import { actionAdminGoodsPage } from "../../../actions/actionAdminGoodsPage";
-import { actionAdminGoodPage } from "../../../actions/actionAdminGoodPage";
-import { actionAdminGoodPageClear } from "../../../actions/actionAdminGoodPageClear";
-import { actionAdminGoodsSearchPageClear } from "../../../actions/actionAdminGoodsSearchPageClear";
-import { actionAdminGoodsSearchPage } from "../../../actions/actionAdminGoodsSearchPage";
-import { actionAdminOrdersPageClear } from "../../../actions/actionAdminOrdersPageClear";
-import { actionAdminOrdersPage } from "../../../actions/actionAdminOrdersPage";
-import { actionAdminOrdersSearchPageClear } from "../../../actions/actionAdminOrdersSearchPageClear";
-import { actionAdminOrderPage } from "../../../actions/actionAdminOrderPage";
-import { actionAdminOrderPageClear } from "../../../actions/actionAdminOrderPageClear";
-import { actionAdminUsersSearchPageClear } from "../../../actions/actionAdminUsersSearchPageClear";
-import { actionAdminUsersSearchPage } from "../../../actions/actionAdminUsersSearchPage";
-import { actionAdminUsersPageClear } from "../../../actions/actionAdminUsersPageClear";
-import { actionAdminUsersPage } from "../../../actions/actionAdminUsersPage";
-import { actionAdminUserPageClear } from "../../../actions/actionAdminUserPageClear";
-import { actionAdminUserPage } from "../../../actions/actionAdminUserPage";
-import { InfScroll } from "../../common/InfScroll";
+import { CAdminGoodPageContainer, CAdminGoodsPageContainer, CAdminGoodsSearchPageContainer } from "./AdminGoodLayout";
+import { CAdminCategoriesPageContainer, CAdminCategoriesSearchPageContainer, CAdminCategoryPageContainer } from "./AdminCategoryLayout";
+import { CAdminOrderPageContainer, CAdminOrdersPageContainer, CAdminOrdersSearchPageContainer } from "./AdminOrderLayout";
+import { CAdminUserPageContainer, CAdminUsersPageContainer, CAdminUsersSearchPageContainer } from "./AdminUserLayout";
 
 const AdminCategoryTreePageContainer = ({ onLoad, onUnmount }) => {
     useEffect(() => {
@@ -55,439 +26,6 @@ const CAdminCategoryTreePageContainer = connect(null, {
     onLoad: () => actionPromiseClear("catAll"),
 })(AdminCategoryTreePageContainer);
 
-const AdminCategoryPageContainer = ({ onUnmount, onLoad }) => {
-    const params = useParams();
-
-    useEffect(() => {
-        return () => {
-            onUnmount();
-        };
-    }, []);
-
-    useEffect(() => {
-        onLoad(params._id);
-    }, [params._id]);
-
-    return <CAdminCategoryPage />;
-};
-
-const CAdminCategoryPageContainer = connect(null, {
-    onUnmount: () => actionAdminCategoryPageClear(),
-    onLoad: (_id) => actionAdminCategoryPage({ _id }),
-})(AdminCategoryPageContainer);
-
-const AdminCategoriesPageContainer = ({ feed, cats, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-
-    useEffect(() => {
-        onLoad({ orderBy });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [feed, promiseStatus]);
-
-    useEffect(() => {
-        if (cats.length) dispatch(actionFeedAdd(cats));
-    }, [cats]);
-
-    return <AdminCategoriesPage orderBy={orderBy} />;
-};
-
-const CAdminCategoriesPageContainer = connect(
-    (state) => ({
-        cats: state.promise?.feedCatAll?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedCatAll?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminCategoriesPageClear(),
-        onLoad: ({ orderBy }) => actionAdminCategoriesPage({ orderBy }),
-        onScroll: ({ feed, orderBy }) => actionFeedCats({ skip: feed?.length || 0, orderBy }),
-    }
-)(AdminCategoriesPageContainer);
-
-const AdminCategoriesSearchPageContainer = ({ feed, cats, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-    const text = searchParams.get("text") || "";
-
-    useEffect(() => {
-        onLoad({ orderBy, text });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy, text]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy, text });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed, text]);
-
-    useEffect(() => {
-        if (cats?.length) dispatch(actionFeedAdd(cats));
-    }, [cats]);
-
-    return <AdminCategoriesPage orderBy={orderBy} />;
-};
-
-const CAdminCategoriesSearchPageContainer = connect(
-    (state) => ({
-        cats: state.promise?.feedCatsFind?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedCatsFind?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminCategoriesSearchPageClear(),
-        onLoad: ({ orderBy, text }) => actionAdminCategoriesSearchPage({ orderBy, text }),
-        onScroll: ({ feed, orderBy, text }) => actionFeedCatsFind({ text, skip: feed?.length || 0, orderBy }),
-    }
-)(AdminCategoriesSearchPageContainer);
-
-const AdminGoodPageContainer = ({ onUnmount, onLoad }) => {
-    const params = useParams();
-
-    useEffect(() => {
-        onLoad(params._id);
-        return () => {
-            onUnmount();
-        };
-    }, []);
-
-    return <CAdminGoodPage />;
-};
-
-const CAdminGoodPageContainer = connect(null, {
-    onUnmount: () => actionAdminGoodPageClear(),
-    onLoad: (_id) => actionAdminGoodPage({ _id }),
-})(AdminGoodPageContainer);
-
-const AdminGoodsPageContainer = ({ feed, goods, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-
-    useEffect(() => {
-        onLoad({ orderBy });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy]);
-
-    return (
-        <InfScroll
-            items={goods}
-            component={AdminGoodsPage}
-            promiseStatus={promiseStatus}
-            onScroll={() => onScroll({ feed, orderBy })}
-            orderBy={orderBy}
-        />
-    );
-};
-
-const CAdminGoodsPageContainer = connect(
-    (state) => ({
-        goods: state.promise?.feedGoodsAll?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedGoodsAll?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminGoodsPageClear(),
-        onLoad: ({ orderBy }) => actionAdminGoodsPage({ orderBy }),
-        onScroll: ({ feed, orderBy }) => actionFeedGoods({ skip: feed?.length || 0, orderBy }),
-    }
-)(AdminGoodsPageContainer);
-
-const AdminGoodsSearchPageContainer = ({ feed, goods, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-    const text = searchParams.get("text") || "";
-
-    useEffect(() => {
-        onLoad({ orderBy, text });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy, text]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy, text });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed, text]);
-
-    useEffect(() => {
-        if (goods?.length) dispatch(actionFeedAdd(goods));
-    }, [goods]);
-    return <AdminGoodsPage orderBy={orderBy} />;
-};
-
-const CAdminGoodsSearchPageContainer = connect(
-    (state) => ({
-        goods: state.promise?.feedGoodsFind?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedGoodsFind?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminGoodsSearchPageClear(),
-        onLoad: ({ orderBy, text }) => actionAdminGoodsSearchPage({ orderBy, text }),
-        onScroll: ({ feed, orderBy, text }) => actionFeedGoodsFind({ text, skip: feed?.length || 0, orderBy }),
-    }
-)(AdminGoodsSearchPageContainer);
-
-const AdminOrdersPageContainer = ({ feed, orders, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-    const status = searchParams.get("status") || 0;
-
-    useEffect(() => {
-        onLoad({ orderBy, status });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy, status]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy, status });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed, status]);
-
-    useEffect(() => {
-        if (orders?.length) dispatch(actionFeedAdd(orders));
-    }, [orders]);
-
-    return <AdminOrdersPage orderBy={orderBy} />;
-};
-
-const CAdminOrdersPageContainer = connect(
-    (state) => ({
-        orders: state.promise?.feedOrdersAll?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedOrdersAll?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminOrdersPageClear(),
-        onLoad: ({ orderBy, status }) => actionAdminOrdersPage({ orderBy, status }),
-        onScroll: ({ feed, orderBy, status }) => actionFeedOrders({ skip: feed?.length || 0, orderBy, status }),
-    }
-)(AdminOrdersPageContainer);
-
-const AdminOrdersSearchPageContainer = ({ feed, orders, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-    const text = searchParams.get("text") || "";
-    const status = searchParams.get("status") || 0;
-
-    useEffect(() => {
-        onLoad({ orderBy, text });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy, text, status]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy, text, status });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed, text, status]);
-
-    useEffect(() => {
-        if (orders?.length) dispatch(actionFeedAdd(orders));
-    }, [orders]);
-
-    return <AdminOrdersPage orderBy={orderBy} />;
-};
-
-const CAdminOrdersSearchPageContainer = connect(
-    (state) => ({
-        orders: state.promise?.feedOrdersFind?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedOrdersFind?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminOrdersSearchPageClear(),
-        onLoad: ({ orderBy, text, status }) => actionAdminOrdersSearchPageClear({ orderBy, text, status }),
-        onScroll: ({ feed, orderBy, text, status }) => actionFeedOrdersFind({ text, skip: feed?.length || 0, orderBy, status }),
-    }
-)(AdminOrdersSearchPageContainer);
-
-const AdminOrderPageContainer = ({ onLoad, onUnmount }) => {
-    const params = useParams();
-
-    useEffect(() => {
-        return () => {
-            onUnmount();
-        };
-    }, []);
-
-    useEffect(() => {
-        onLoad(params._id);
-    }, [params._id]);
-    return <CAdminOrderPage />;
-};
-
-const CAdminOrderPageContainer = connect(null, {
-    onUnmount: () => actionAdminOrderPageClear(),
-    onLoad: (_id) => actionAdminOrderPage({ _id }),
-})(AdminOrderPageContainer);
-
-const AdminUsersSearchPageContainer = ({ feed, users, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-    const text = searchParams.get("text") || "";
-
-    useEffect(() => {
-        onLoad({ orderBy, text });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy, text]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy, text });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed, text]);
-
-    useEffect(() => {
-        if (users?.length) dispatch(actionFeedAdd(users));
-    }, [users]);
-
-    return <AdminUsersPage orderBy={orderBy} />;
-};
-
-const CAdminUsersSearchPageContainer = connect(
-    (state) => ({
-        users: state.promise?.feedUsersFind?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedUsersFind?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminUsersSearchPageClear(),
-        onLoad: ({ orderBy, text }) => actionAdminUsersSearchPage({ orderBy, text }),
-        onScroll: ({ feed, orderBy, text }) => actionFeedUsersFind({ text, skip: feed?.length || 0, orderBy }),
-    }
-)(AdminUsersSearchPageContainer);
-
-const AdminUsersPageContainer = ({ feed, users, promiseStatus, onLoad, onUnmount, onScroll }) => {
-    const dispatch = useDispatch();
-    const [searchParams] = useSearchParams();
-    const orderBy = searchParams.get("orderBy") || "_id";
-
-    useEffect(() => {
-        onLoad({ orderBy });
-        return () => {
-            onUnmount();
-        };
-    }, [orderBy]);
-
-    useEffect(() => {
-        window.onscroll = (e) => {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
-                if (promiseStatus !== "PENDING") {
-                    onScroll({ feed, orderBy });
-                }
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [promiseStatus, feed]);
-
-    useEffect(() => {
-        if (users?.length) dispatch(actionFeedAdd(users));
-    }, [users]);
-    return <AdminUsersPage orderBy={orderBy} />;
-};
-
-const CAdminUsersPageContainer = connect(
-    (state) => ({
-        users: state.promise?.feedUsersAll?.payload || [],
-        feed: state.feed?.payload || [],
-        promiseStatus: state.promise?.feedUsersAll?.status || null,
-    }),
-    {
-        onUnmount: () => actionAdminUsersPageClear(),
-        onLoad: ({ orderBy }) => actionAdminUsersPage({ orderBy }),
-        onScroll: ({ feed, orderBy }) => actionFeedUsers({ skip: feed?.length || 0, orderBy }),
-    }
-)(AdminUsersPageContainer);
-
-const AdminUserPageContainer = ({ onLoad, onUnmount }) => {
-    const params = useParams();
-
-    useEffect(() => {
-        return () => {
-            onUnmount();
-        };
-    }, []);
-
-    useEffect(() => {
-        onLoad(params._id);
-    }, [params._id]);
-    return <CAdminUserPage />;
-};
-
-const CAdminUserPageContainer = connect(null, {
-    onUnmount: () => actionAdminUserPageClear(),
-    onLoad: (_id) => actionAdminUserPage({ _id }),
-})(AdminUserPageContainer);
-
 const AdminLayoutPage = () => {
     return (
         <Box className="AdminLayoutPage">