Link up teams UI.

components/pages/settings/teams/WebsiteAddTeamForm.js

@@ -0,0 +1,62 @@
+import { labels } from 'components/messages';
+import useApi from 'hooks/useApi';
+import { useRef, useState } from 'react';
+import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
+import { useIntl } from 'react-intl';
+import WebsiteTags from './WebsiteTags';
+
+export default function WebsiteAddTeamForm({ teamId, onSave, onClose }) {
+  const { formatMessage } = useIntl();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
+  const { data: websites } = useQuery(['websites'], () => get('/websites'));
+  const [newWebsites, setNewWebsites] = useState([]);
+  const formRef = useRef();
+
+  const handleSubmit = () => {
+    mutate(
+      { websiteIds: newWebsites },
+      {
+        onSuccess: async () => {
+          onSave();
+          onClose();
+        },
+      },
+    );
+  };
+
+  const handleAddWebsite = value => {
+    if (!newWebsites.some(a => a === value)) {
+      const nextValue = [...newWebsites];
+
+      nextValue.push(value);
+
+      setNewWebsites(nextValue);
+    }
+  };
+
+  const handleRemoveWebsite = value => {
+    const newValue = newWebsites.filter(a => a !== value);
+
+    setNewWebsites(newValue);
+  };
+
+  return (
+    <>
+      <Form onSubmit={handleSubmit} error={error} ref={formRef}>
+        <FormRow label={formatMessage(labels.websites)}>
+          <Dropdown items={websites} onChange={handleAddWebsite}>
+            {({ id, name }) => <Item key={id}>{name}</Item>}
+          </Dropdown>
+        </FormRow>
+        <WebsiteTags items={websites} websites={newWebsites} onClick={handleRemoveWebsite} />
+        <FormButtons flex>
+          <SubmitButton disabled={newWebsites && newWebsites.length === 0}>
+            {formatMessage(labels.addWebsites)}
+          </SubmitButton>
+          <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}