umami/components/pages/settings/teams/TeamWebsites.js

65 lines
1.8 KiB
JavaScript
Raw Normal View History

import {
ActionForm,
Button,
Icon,
Icons,
Loading,
Modal,
ModalTrigger,
Text,
useToast,
} from 'react-basics';
2023-03-22 22:05:55 +01:00
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
2023-04-10 01:04:28 +02:00
import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
2023-03-22 22:05:55 +01:00
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
2023-01-25 16:42:46 +01:00
export default function TeamWebsites({ teamId }) {
const { toast, showToast } = useToast();
2023-03-22 22:05:55 +01:00
const { formatMessage, labels, messages } = useMessages();
2023-01-25 16:42:46 +01:00
const { get, useQuery } = useApi();
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
2023-01-25 16:42:46 +01:00
get(`/teams/${teamId}/websites`),
);
const hasData = data && data.length !== 0;
if (isLoading) {
return <Loading icon="dots" position="block" />;
}
const handleSave = async () => {
await refetch();
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const addButton = (
<ModalTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<Modal title={formatMessage(labels.addWebsite)}>
2023-04-10 01:04:28 +02:00
{close => <TeamAddWebsiteForm teamId={teamId} onSave={handleSave} onClose={close} />}
</Modal>
</ModalTrigger>
);
2023-01-25 16:42:46 +01:00
return (
<div>
{toast}
{hasData && (
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
)}
{hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noTeamWebsites)}>
{addButton}
</EmptyPlaceholder>
)}
2023-01-25 16:42:46 +01:00
</div>
);
}