111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
import { Button, Modal, ModalProps, TextInput } from '@mantine/core';
|
|
import { useForm, zodResolver } from '@mantine/form';
|
|
import _ from 'lodash';
|
|
import { useEffect, useRef } from 'react';
|
|
import { z } from 'zod';
|
|
import { updateBid } from '../../apis/bid';
|
|
import { createWebBid, updateWebBid } from '../../apis/web-bid';
|
|
import { useConfirmStore } from '../../lib/zustand/use-confirm';
|
|
import { IWebBid } from '../../system/type';
|
|
import { extractDomain } from '../../utils';
|
|
export interface IWebBidModelProps extends ModalProps {
|
|
data: IWebBid | null;
|
|
onUpdated?: () => void;
|
|
}
|
|
|
|
const schema = {
|
|
url: z.string({ message: 'Url is required' }).url('Invalid url format'),
|
|
};
|
|
|
|
export default function WebBidModal({ data, onUpdated, ...props }: IWebBidModelProps) {
|
|
const form = useForm({
|
|
validate: zodResolver(z.object(schema)),
|
|
});
|
|
|
|
const prevData = useRef<IWebBid | null>(data);
|
|
|
|
const { setConfirm } = useConfirmStore();
|
|
|
|
const handleSubmit = async (values: typeof form.values) => {
|
|
if (data) {
|
|
setConfirm({
|
|
title: 'Update ?',
|
|
message: `This web will be update`,
|
|
handleOk: async () => {
|
|
const result = await updateWebBid(values);
|
|
|
|
if (!result) return;
|
|
|
|
props.onClose();
|
|
|
|
if (onUpdated) {
|
|
onUpdated();
|
|
}
|
|
},
|
|
okButton: {
|
|
color: 'blue',
|
|
value: 'Update',
|
|
},
|
|
});
|
|
} else {
|
|
const { url, origin_url } = values;
|
|
|
|
const result = await createWebBid({ url, origin_url } as IWebBid);
|
|
|
|
if (!result) return;
|
|
|
|
props.onClose();
|
|
|
|
if (onUpdated) {
|
|
onUpdated();
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
form.reset();
|
|
if (!data) return;
|
|
|
|
form.setValues(data);
|
|
|
|
prevData.current = data;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
if (!props.opened) {
|
|
form.reset();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [props.opened]);
|
|
|
|
useEffect(() => {
|
|
if (form.values?.url) {
|
|
form.setFieldValue('origin_url', extractDomain(form.values.url));
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [form.values]);
|
|
|
|
return (
|
|
<Modal
|
|
classNames={{
|
|
header: '!flex !item-center !justify-center w-full',
|
|
}}
|
|
{...props}
|
|
size={'xl'}
|
|
title={<span className="text-xl font-bold">Web</span>}
|
|
centered
|
|
>
|
|
<form onSubmit={form.onSubmit(handleSubmit)} className="grid grid-cols-2 gap-2.5">
|
|
<TextInput className="col-span-2" size="sm" label="Domain" {...form.getInputProps('origin_url')} />
|
|
<TextInput className="col-span-2" size="sm" label="Tracking url" {...form.getInputProps('url')} />
|
|
|
|
<Button disabled={_.isEqual(form.getValues(), prevData.current)} className="col-span-2" type="submit" fullWidth size="sm" mt="md">
|
|
{data ? 'Update' : 'Create'}
|
|
</Button>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|