88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
|
import { Button, Form, Input, message } from 'antd';
|
||
|
import React from 'react';
|
||
|
import { useParams } from 'react-router';
|
||
|
import {
|
||
|
updateWorkspaceWebsiteInfo,
|
||
|
useWorkspaceWebsiteInfo,
|
||
|
} from '../api/model/website';
|
||
|
import { useRequest } from '../hooks/useRequest';
|
||
|
import { useCurrentWorkspaceId } from '../store/user';
|
||
|
import { ErrorTip } from './ErrorTip';
|
||
|
import { Loading } from './Loading';
|
||
|
import { NoWorkspaceTip } from './NoWorkspaceTip';
|
||
|
|
||
|
export const WebsiteInfo: React.FC = React.memo(() => {
|
||
|
const { websiteId } = useParams<{
|
||
|
websiteId: string;
|
||
|
}>();
|
||
|
const currentWorkspaceId = useCurrentWorkspaceId();
|
||
|
const { website, isLoading } = useWorkspaceWebsiteInfo(
|
||
|
currentWorkspaceId!,
|
||
|
websiteId!
|
||
|
);
|
||
|
|
||
|
const [, handleSave] = useRequest(
|
||
|
async (values: { name: string; domain: string }) => {
|
||
|
await updateWorkspaceWebsiteInfo(currentWorkspaceId!, websiteId!, {
|
||
|
name: values.name,
|
||
|
domain: values.domain,
|
||
|
});
|
||
|
|
||
|
message.success('Save Success');
|
||
|
}
|
||
|
);
|
||
|
|
||
|
if (!currentWorkspaceId) {
|
||
|
return <NoWorkspaceTip />;
|
||
|
}
|
||
|
|
||
|
if (!websiteId) {
|
||
|
return <ErrorTip />;
|
||
|
}
|
||
|
|
||
|
if (isLoading) {
|
||
|
return <Loading />;
|
||
|
}
|
||
|
|
||
|
if (!website) {
|
||
|
return <ErrorTip />;
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<div className="h-24 flex items-center">
|
||
|
<div className="text-2xl flex-1">Website Info</div>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<Form
|
||
|
layout="vertical"
|
||
|
initialValues={{
|
||
|
id: website.id,
|
||
|
name: website.name,
|
||
|
domain: website.domain,
|
||
|
}}
|
||
|
onFinish={handleSave}
|
||
|
>
|
||
|
<Form.Item label="Website ID" name="id">
|
||
|
<Input size="large" disabled={true} />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Name" name="name" rules={[{ required: true }]}>
|
||
|
<Input size="large" />
|
||
|
</Form.Item>
|
||
|
<Form.Item label="Domain" name="domain" rules={[{ required: true }]}>
|
||
|
<Input size="large" />
|
||
|
</Form.Item>
|
||
|
|
||
|
<Form.Item>
|
||
|
<Button size="large" htmlType="submit">
|
||
|
Save
|
||
|
</Button>
|
||
|
</Form.Item>
|
||
|
</Form>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
});
|
||
|
WebsiteInfo.displayName = 'WebsiteInfo';
|