Progress
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { Tabs } from "antd";
|
||||
import React, { useEffect } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import queryString from "query-string";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
|
||||
import ShopInfoContainer from "../../components/shop-info/shop-info.container";
|
||||
@@ -26,8 +25,9 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
|
||||
export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
|
||||
const { t } = useTranslation();
|
||||
const history = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { tab } = Object.fromEntries(searchParams);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("titles.shop");
|
||||
@@ -41,29 +41,32 @@ export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
|
||||
}, [t, setSelectedHeader, setBreadcrumbs, bodyshop.shopname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!search.tab) history.push({ search: "?tab=info" });
|
||||
}, [history, search]);
|
||||
if (!tab) navigate({ search: "?tab=info" });
|
||||
}, [navigate, tab]);
|
||||
|
||||
return (
|
||||
<RbacWrapper action="shop:config">
|
||||
<Tabs
|
||||
defaultActiveKey={search.tab}
|
||||
onChange={(key) => history.push({ search: `?tab=${key}` })}
|
||||
>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
|
||||
<ShopInfoContainer />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
|
||||
<ShopEmployeesContainer />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
|
||||
<ShopInfoUsersComponent />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.csiq")} key="csiq">
|
||||
<ShopCsiConfig />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</RbacWrapper>
|
||||
<RbacWrapper action="shop:config">
|
||||
<Tabs
|
||||
defaultActiveKey={tab}
|
||||
onChange={(key) => {
|
||||
searchParams.set("tab", key);
|
||||
navigate({ search: searchParams.toString() });
|
||||
}}
|
||||
>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
|
||||
<ShopInfoContainer />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
|
||||
<ShopEmployeesContainer />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
|
||||
<ShopInfoUsersComponent />
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab={t("bodyshop.labels.csiq")} key="csiq">
|
||||
<ShopCsiConfig />
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</RbacWrapper>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);
|
||||
Reference in New Issue
Block a user