80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import useApi from 'components/hooks/useApi';
|
|
import { useState } from 'react';
|
|
import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
|
|
import useMessages from 'components/hooks/useMessages';
|
|
import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
|
|
import Empty from 'components/common/Empty';
|
|
import { setValue } from 'store/cache';
|
|
import { useUser } from 'components/hooks';
|
|
|
|
export function TeamWebsiteAddForm({
|
|
teamId,
|
|
onSave,
|
|
onClose,
|
|
}: {
|
|
teamId: string;
|
|
onSave: () => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const { user } = useUser();
|
|
const { formatMessage, labels } = useMessages();
|
|
const { get, post, useQuery, useMutation } = useApi();
|
|
const { mutate, error } = useMutation({
|
|
mutationFn: (data: any) => post(`/teams/${teamId}/websites`, data),
|
|
});
|
|
const { data: websites, isLoading } = useQuery({
|
|
queryKey: ['websites'],
|
|
queryFn: () => get('/websites'),
|
|
});
|
|
const [selected, setSelected] = useState([]);
|
|
const hasData = websites && websites.data.length > 0;
|
|
|
|
const handleSubmit = () => {
|
|
mutate(
|
|
{ websiteIds: selected },
|
|
{
|
|
onSuccess: async () => {
|
|
setValue('team:websites', Date.now());
|
|
onSave?.();
|
|
onClose?.();
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
const handleSelect = id => {
|
|
setSelected(state => (state.includes(id) ? state.filter(n => n !== id) : state.concat(id)));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{isLoading && !hasData && <Loading icon="dots" position="center" />}
|
|
{!isLoading && !hasData && <Empty />}
|
|
{hasData && (
|
|
<Form onSubmit={handleSubmit} error={error}>
|
|
<WebsitesDataTable userId={user.id} showActions={false}>
|
|
<GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
|
|
{row => (
|
|
<Toggle
|
|
key={row.id}
|
|
value={row.id}
|
|
checked={selected?.includes(row.id)}
|
|
onChange={handleSelect.bind(null, row.id)}
|
|
/>
|
|
)}
|
|
</GridColumn>
|
|
</WebsitesDataTable>
|
|
<FormButtons flex>
|
|
<SubmitButton variant="primary" disabled={selected?.length === 0}>
|
|
{formatMessage(labels.addWebsite)}
|
|
</SubmitButton>
|
|
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
|
</FormButtons>
|
|
</Form>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default TeamWebsiteAddForm;
|