More refactoring, cleaned up icons, nav buttons, add messages.

components/pages/settings/websites/WebsiteAddForm.js

@@ -25,6 +25,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
     mutate(data, {
       onSuccess: async () => {
         onSave();
+        onClose();
       },
     });
   };

components/pages/settings/websites/WebsiteDeleteForm.js

@@ -22,6 +22,7 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
     mutate(data, {
       onSuccess: async () => {
         onSave();
+        onClose();
       },
     });
   };

components/pages/settings/websites/WebsiteReset.js

@@ -1,6 +1,4 @@
-import { useRouter } from 'next/router';
-import { useState } from 'react';
-import { Button, Form, FormRow, Modal } from 'react-basics';
+import { Button, Form, FormRow, Modal, ModalTrigger } from 'react-basics';
 import { useIntl } from 'react-intl';
 import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
 import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
@@ -8,43 +6,39 @@ import { labels, messages } from 'components/messages';
 
 export default function WebsiteReset({ websiteId, onSave }) {
   const { formatMessage } = useIntl();
-  const [modal, setModal] = useState(null);
-  const router = useRouter();
 
   const handleReset = async () => {
-    setModal(null);
-    onSave();
+    onSave('reset');
   };
 
   const handleDelete = async () => {
-    onSave();
-    await router.push('/websites');
+    onSave('delete');
   };
 
-  const handleClose = () => setModal(null);
-
   return (
     <Form>
       <FormRow label={formatMessage(labels.resetWebsite)}>
         <p>{formatMessage(messages.resetWebsiteWarning)}</p>
-        <Button onClick={() => setModal('reset')}>{formatMessage(labels.reset)}</Button>
+        <ModalTrigger>
+          <Button>{formatMessage(labels.reset)}</Button>
+          <Modal title={formatMessage(labels.resetWebsite)}>
+            {close => (
+              <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
       </FormRow>
       <FormRow label={formatMessage(labels.deleteWebsite)}>
         <p>{formatMessage(messages.deleteWebsiteWarning)}</p>
-        <Button onClick={() => setModal('delete')}>Delete</Button>
+        <ModalTrigger>
+          <Button>Delete</Button>
+          <Modal title={formatMessage(labels.deleteWebsite)}>
+            {close => (
+              <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
+            )}
+          </Modal>
+        </ModalTrigger>
       </FormRow>
-      {modal === 'reset' && (
-        <Modal title={formatMessage(labels.resetWebsite)} onClose={handleClose}>
-          {close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
-        </Modal>
-      )}
-      {modal === 'delete' && (
-        <Modal title={formatMessage(labels.deleteWebsite)} onClose={handleClose}>
-          {close => (
-            <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
-          )}
-        </Modal>
-      )}
     </Form>
   );
 }

components/pages/settings/websites/WebsiteResetForm.js

@@ -22,6 +22,7 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
     mutate(data, {
       onSuccess: async () => {
         onSave();
+        onClose();
       },
     });
   };

components/pages/settings/websites/WebsiteSettings.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
 import { useIntl } from 'react-intl';
+import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -11,9 +12,8 @@ import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import useApi from 'hooks/useApi';
 import { labels, messages } from 'components/messages';
 
-const { External } = Icons;
-
 export default function WebsiteSettings({ websiteId }) {
+  const router = useRouter();
   const { formatMessage } = useIntl();
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
@@ -34,6 +34,12 @@ export default function WebsiteSettings({ websiteId }) {
     setValues(state => ({ ...state, ...data }));
   };
 
+  const handleReset = async value => {
+    if (value === 'delete') {
+      await router.push('/websites');
+    }
+  };
+
   useEffect(() => {
     if (data) {
       setValues(data);
@@ -54,7 +60,7 @@ export default function WebsiteSettings({ websiteId }) {
           <a>
             <Button variant="primary">
               <Icon>
-                <External />
+                <Icons.External />
               </Icon>
               <Text>{formatMessage(labels.view)}</Text>
             </Button>
@@ -72,7 +78,7 @@ export default function WebsiteSettings({ websiteId }) {
       )}
       {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
       {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
-      {tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
+      {tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleReset} />}
     </Page>
   );
 }

components/pages/settings/websites/WebsitesList.js

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
+import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
 import { useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -10,10 +9,7 @@ import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
 import { labels, messages } from 'components/messages';
 
-const { Plus } = Icons;
-
 export default function WebsitesList() {
-  const [edit, setEdit] = useState(false);
   const { user } = useUser();
   const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(
@@ -27,21 +23,21 @@ export default function WebsitesList() {
 
   const handleSave = async () => {
     await refetch();
-    setEdit(false);
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const handleAdd = () => setEdit(true);
-
-  const handleClose = () => setEdit(false);
-
   const addButton = (
-    <Button variant="primary" onClick={handleAdd}>
-      <Icon>
-        <Plus />
-      </Icon>
-      <Text>{formatMessage(labels.addWebsite)}</Text>
-    </Button>
+    <ModalTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.addWebsite)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.addWebsite)}>
+        {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+      </Modal>
+    </ModalTrigger>
   );
 
   return (
@@ -54,11 +50,6 @@ export default function WebsitesList() {
           {addButton}
         </EmptyPlaceholder>
       )}
-      {edit && (
-        <Modal title={formatMessage(labels.addWebsite)} onClose={handleClose}>
-          {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
-        </Modal>
-      )}
     </Page>
   );
 }

components/pages/settings/websites/WebsitesTable.js

@@ -13,8 +13,6 @@ import {
 } from 'react-basics';
 import { defineMessages, useIntl } from 'react-intl';
 
-const { ArrowRight, External } = Icons;
-
 const messages = defineMessages({
   name: { id: 'label.name', defaultMessage: 'Name' },
   domain: { id: 'label.domain', defaultMessage: 'Domain' },
@@ -50,7 +48,7 @@ export default function WebsitesTable({ data = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <ArrowRight />
+                      <Icons.ArrowRight />
                     </Icon>
                     Settings
                   </Button>
@@ -60,7 +58,7 @@ export default function WebsitesTable({ data = [] }) {
                 <a>
                   <Button>
                     <Icon>
-                      <External />
+                      <Icons.External />
                     </Icon>
                     View
                   </Button>