Refactored forms and pages.

2023-10-07 18:55:14 -07:00
parent 1325abe31d
commit 6253d55790
57 changed files with 209 additions and 208 deletions
--- a/src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js
+++ b/src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js
@@ -0,0 +1,60 @@
+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 '../../websites/WebsitesDataTable';
+
+export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
+  const { formatMessage, labels } = useMessages();
+  const { get, post, useQuery, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
+  const { data: websites } = useQuery(['websites'], () => get('/websites'));
+  const [selected, setSelected] = useState([]);
+  const hasData = websites && websites.data.length > 0;
+
+  const handleSubmit = () => {
+    mutate(
+      { websiteIds: selected },
+      {
+        onSuccess: async () => {
+          onSave();
+          onClose();
+        },
+      },
+    );
+  };
+
+  const handleSelect = id => {
+    setSelected(state => (state.includes(id) ? state.filter(n => n !== id) : state.concat(id)));
+  };
+
+  return (
+    <>
+      {!hasData && <Loading />}
+      {hasData && (
+        <Form onSubmit={handleSubmit} error={error}>
+          <WebsitesDataTable showHeader={false} 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 disabled={selected?.length === 0}>
+              {formatMessage(labels.addWebsite)}
+            </SubmitButton>
+            <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+          </FormButtons>
+        </Form>
+      )}
+    </>
+  );
+}
+
+export default TeamWebsiteAddForm;