Added tracking code form.

components/Settings.js

@@ -1,22 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import Page from './layout/Page';
 import Table from './common/Table';
-import Button from './interface/Button';
+import Button from './common/Button';
 import PageHeader from './layout/PageHeader';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
+import Code from 'assets/code.svg';
 import { get } from 'lib/web';
 import Modal from './common/Modal';
 import WebsiteEditForm from './forms/WebsiteEditForm';
 import styles from './Settings.module.css';
 import WebsiteDeleteForm from './forms/WebsiteDeleteForm';
+import WebsiteCodeForm from './forms/WebsiteCodeForm';
 
 export default function Settings() {
   const [data, setData] = useState();
   const [edit, setEdit] = useState();
   const [del, setDelete] = useState();
   const [add, setAdd] = useState();
+  const [code, setCode] = useState();
   const [saved, setSaved] = useState(0);
 
   const columns = [
@@ -29,6 +32,9 @@ export default function Settings() {
       },
       render: row => (
         <>
+          <Button icon={<Code />} size="S" onClick={() => setCode(row)}>
+            <div>Get Code</div>
+          </Button>
           <Button icon={<Pen />} size="S" onClick={() => setEdit(row)}>
             <div>Edit</div>
           </Button>
@@ -49,6 +55,7 @@ export default function Settings() {
     setAdd(null);
     setEdit(null);
     setDelete(null);
+    setCode(null);
   }
 
   async function loadData() {
@@ -74,13 +81,13 @@ export default function Settings() {
       <Table columns={columns} rows={data} />
       {edit && (
         <Modal title="Edit website">
-          <WebsiteEditForm initialValues={edit} onSave={handleSave} onClose={handleClose} />
+          <WebsiteEditForm values={edit} onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
       {add && (
         <Modal title="Add website">
           <WebsiteEditForm
-            initialValues={{ name: '', domain: '' }}
+            values={{ name: '', domain: '' }}
             onSave={handleSave}
             onClose={handleClose}
           />
@@ -88,7 +95,12 @@ export default function Settings() {
       )}
       {del && (
         <Modal title="Delete website">
-          <WebsiteDeleteForm initialValues={del} onSave={handleSave} onClose={handleClose} />
+          <WebsiteDeleteForm values={del} onSave={handleSave} onClose={handleClose} />
+        </Modal>
+      )}
+      {code && (
+        <Modal title="Tracking code">
+          <WebsiteCodeForm values={code} onClose={handleClose} />
         </Modal>
       )}
     </Page>