136 lines
3.1 KiB
JavaScript
136 lines
3.1 KiB
JavaScript
import { lazy, useEffect, useState } from "react";
|
|
import { isDevelopmentEnv, myFetch } from "../../../utils";
|
|
import { useParams } from "react-router-dom";
|
|
import MyCenteredContainer from "../../../Components/MyContainer";
|
|
import { Button, Card, Result, Spin, Tabs } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import { MySupsenseFallback } from "../../../Components/MySupsenseFallback";
|
|
import PageInDevelopment from "../../PageInDevelopment";
|
|
|
|
const General = lazy(() => import("./General"));
|
|
const Banner = lazy(() => import("./Banner"));
|
|
const ColorPalette = lazy(() => import("./ColorPalette"));
|
|
|
|
function SuspenseFallback({ children }) {
|
|
return (
|
|
<MySupsenseFallback spinnerCentered={false}>{children}</MySupsenseFallback>
|
|
);
|
|
}
|
|
|
|
export default function Website() {
|
|
const { storeId } = useParams();
|
|
const { t } = useTranslation();
|
|
|
|
const [isRequesting, setIsRequesting] = useState(true);
|
|
const [website, setWebsite] = useState({});
|
|
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
|
|
const tabItems = [
|
|
{
|
|
label: t("storeWebsite.tabs.general"),
|
|
children: <General />,
|
|
},
|
|
{
|
|
label: t("storeWebsite.tabs.banner"),
|
|
children: <Banner />,
|
|
},
|
|
{
|
|
label: t("storeWebsite.tabs.colorPalette"),
|
|
children: <ColorPalette />,
|
|
},
|
|
].map((item, index) => {
|
|
return {
|
|
key: index,
|
|
...item,
|
|
children: <SuspenseFallback>{item.children}</SuspenseFallback>,
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
myFetch(`/website/${storeId}`, "GET")
|
|
.then((res) => {
|
|
setIsRequesting(false);
|
|
})
|
|
.catch((err) => {
|
|
setIsRequesting(false);
|
|
|
|
if (err === 404) setWebsite(null);
|
|
|
|
console.log(err);
|
|
});
|
|
}, []);
|
|
|
|
if (!isDevelopmentEnv()) return <PageInDevelopment />;
|
|
|
|
if (isRequesting) {
|
|
return (
|
|
<MyCenteredContainer>
|
|
<Spin size="large" />
|
|
</MyCenteredContainer>
|
|
);
|
|
}
|
|
|
|
if (!website) {
|
|
return <NoWebsiteCreateOne setWebsite={setWebsite} />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Card>
|
|
<Tabs
|
|
type="card"
|
|
defaultActiveKey={0}
|
|
items={tabItems}
|
|
activeKey={activeTab}
|
|
onChange={(key) => setActiveTab(key)}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NoWebsiteCreateOne({ setWebsite }) {
|
|
const { t } = useTranslation();
|
|
const { storeId } = useParams();
|
|
|
|
const [isRequesting, setIsRequesting] = useState(false);
|
|
|
|
const handleCreateWebsite = () => {
|
|
setIsRequesting(true);
|
|
|
|
myFetch("/website", "POST", {
|
|
storeId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
|
|
setWebsite({});
|
|
})
|
|
.catch((err) => {
|
|
setIsRequesting(false);
|
|
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<MyCenteredContainer>
|
|
<Result
|
|
status="404"
|
|
title={t("storeWebsite.noWebsite.title")}
|
|
subTitle={t("storeWebsite.noWebsite.subTitle")}
|
|
extra={
|
|
<Button
|
|
type="primary"
|
|
loading={isRequesting}
|
|
onClick={handleCreateWebsite}
|
|
>
|
|
{t("storeWebsite.noWebsite.button")}
|
|
</Button>
|
|
}
|
|
/>
|
|
</MyCenteredContainer>
|
|
);
|
|
}
|