Feat/um 197 hook up teams (#1825)

* Link up teams UI.

* Fix auth order.

* PR touchups.
This commit is contained in:
Brian Cao 2023-03-09 12:42:12 -08:00 committed by GitHub
parent f908476e71
commit 8a9532f213
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 500 additions and 111 deletions

View file

@ -1,13 +1,26 @@
import { Loading } from 'react-basics';
import { useIntl } from 'react-intl';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { labels, messages } from 'components/messages';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
import useApi from 'hooks/useApi';
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
import { messages } from 'components/messages';
import {
ActionForm,
Button,
Icon,
Icons,
Loading,
Modal,
ModalTrigger,
Text,
useToast,
} from 'react-basics';
import { useIntl } from 'react-intl';
import WebsiteAddTeamForm from 'components/pages/settings/teams/WebsiteAddTeamForm';
export default function TeamWebsites({ teamId }) {
const { toast, showToast } = useToast();
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['teams:websites', teamId], () =>
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
get(`/teams/${teamId}/websites`),
);
const hasData = data && data.length !== 0;
@ -16,10 +29,37 @@ export default function TeamWebsites({ teamId }) {
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)}>
{close => <WebsiteAddTeamForm teamId={teamId} onSave={handleSave} onClose={close} />}
</Modal>
</ModalTrigger>
);
return (
<div>
{hasData && <WebsitesTable data={data} />}
{!hasData && formatMessage(messages.noData)}
{toast}
{hasData && (
<ActionForm description={formatMessage(messages.websitesAreShared)}>{addButton}</ActionForm>
)}
{hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noTeamWebsites)}>
{addButton}
</EmptyPlaceholder>
)}
</div>
);
}