2020-08-07 08:02:24 +02:00
|
|
|
import React, { useState, useEffect } from 'react';
|
2020-08-07 11:27:12 +02:00
|
|
|
import Page from './layout/Page';
|
|
|
|
import Table from './common/Table';
|
2020-08-08 05:36:57 +02:00
|
|
|
import Button from './common/Button';
|
2020-08-07 11:27:12 +02:00
|
|
|
import PageHeader from './layout/PageHeader';
|
2020-08-07 09:24:01 +02:00
|
|
|
import Pen from 'assets/pen.svg';
|
|
|
|
import Trash from 'assets/trash.svg';
|
|
|
|
import Plus from 'assets/plus.svg';
|
2020-08-08 05:36:57 +02:00
|
|
|
import Code from 'assets/code.svg';
|
2020-08-07 08:02:24 +02:00
|
|
|
import { get } from 'lib/web';
|
2020-08-07 11:27:12 +02:00
|
|
|
import Modal from './common/Modal';
|
2020-08-08 02:19:42 +02:00
|
|
|
import WebsiteEditForm from './forms/WebsiteEditForm';
|
2020-08-07 11:27:12 +02:00
|
|
|
import styles from './Settings.module.css';
|
2020-08-08 02:19:42 +02:00
|
|
|
import WebsiteDeleteForm from './forms/WebsiteDeleteForm';
|
2020-08-08 05:36:57 +02:00
|
|
|
import WebsiteCodeForm from './forms/WebsiteCodeForm';
|
2020-08-07 08:02:24 +02:00
|
|
|
|
2020-08-05 07:45:05 +02:00
|
|
|
export default function Settings() {
|
2020-08-07 08:02:24 +02:00
|
|
|
const [data, setData] = useState();
|
2020-08-07 11:27:12 +02:00
|
|
|
const [edit, setEdit] = useState();
|
|
|
|
const [del, setDelete] = useState();
|
2020-08-08 02:19:42 +02:00
|
|
|
const [add, setAdd] = useState();
|
2020-08-08 05:36:57 +02:00
|
|
|
const [code, setCode] = useState();
|
2020-08-07 11:27:12 +02:00
|
|
|
const [saved, setSaved] = useState(0);
|
2020-08-07 08:02:24 +02:00
|
|
|
|
2020-08-07 09:24:01 +02:00
|
|
|
const columns = [
|
|
|
|
{ key: 'name', label: 'Name' },
|
|
|
|
{ key: 'domain', label: 'Domain' },
|
|
|
|
{
|
|
|
|
key: 'action',
|
2020-08-07 11:27:12 +02:00
|
|
|
cell: {
|
|
|
|
className: styles.buttons,
|
|
|
|
},
|
|
|
|
render: row => (
|
2020-08-07 09:24:01 +02:00
|
|
|
<>
|
2020-08-08 05:36:57 +02:00
|
|
|
<Button icon={<Code />} size="S" onClick={() => setCode(row)}>
|
|
|
|
<div>Get Code</div>
|
|
|
|
</Button>
|
2020-08-07 11:27:12 +02:00
|
|
|
<Button icon={<Pen />} size="S" onClick={() => setEdit(row)}>
|
2020-08-07 09:24:01 +02:00
|
|
|
<div>Edit</div>
|
|
|
|
</Button>
|
2020-08-07 11:27:12 +02:00
|
|
|
<Button icon={<Trash />} size="S" onClick={() => setDelete(row)}>
|
2020-08-07 09:24:01 +02:00
|
|
|
<div>Delete</div>
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2020-08-07 11:27:12 +02:00
|
|
|
function handleSave() {
|
|
|
|
setSaved(state => state + 1);
|
|
|
|
handleClose();
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleClose() {
|
2020-08-08 02:19:42 +02:00
|
|
|
setAdd(null);
|
2020-08-07 11:27:12 +02:00
|
|
|
setEdit(null);
|
|
|
|
setDelete(null);
|
2020-08-08 05:36:57 +02:00
|
|
|
setCode(null);
|
2020-08-07 11:27:12 +02:00
|
|
|
}
|
|
|
|
|
2020-08-07 08:02:24 +02:00
|
|
|
async function loadData() {
|
|
|
|
setData(await get(`/api/website`));
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
loadData();
|
2020-08-07 11:27:12 +02:00
|
|
|
}, [saved]);
|
2020-08-07 08:02:24 +02:00
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2020-08-05 07:45:05 +02:00
|
|
|
return (
|
2020-08-06 04:04:02 +02:00
|
|
|
<Page>
|
2020-08-07 09:24:01 +02:00
|
|
|
<PageHeader>
|
2020-08-07 11:27:12 +02:00
|
|
|
<div>Websites</div>
|
2020-08-08 02:19:42 +02:00
|
|
|
<Button icon={<Plus />} size="S" onClick={() => setAdd(true)}>
|
2020-08-07 09:24:01 +02:00
|
|
|
<div>Add website</div>
|
|
|
|
</Button>
|
|
|
|
</PageHeader>
|
2020-08-07 11:27:12 +02:00
|
|
|
<Table columns={columns} rows={data} />
|
|
|
|
{edit && (
|
|
|
|
<Modal title="Edit website">
|
2020-08-08 05:36:57 +02:00
|
|
|
<WebsiteEditForm values={edit} onSave={handleSave} onClose={handleClose} />
|
2020-08-08 02:19:42 +02:00
|
|
|
</Modal>
|
|
|
|
)}
|
|
|
|
{add && (
|
|
|
|
<Modal title="Add website">
|
|
|
|
<WebsiteEditForm
|
2020-08-08 05:36:57 +02:00
|
|
|
values={{ name: '', domain: '' }}
|
2020-08-08 02:19:42 +02:00
|
|
|
onSave={handleSave}
|
|
|
|
onClose={handleClose}
|
|
|
|
/>
|
|
|
|
</Modal>
|
|
|
|
)}
|
|
|
|
{del && (
|
|
|
|
<Modal title="Delete website">
|
2020-08-08 05:36:57 +02:00
|
|
|
<WebsiteDeleteForm values={del} onSave={handleSave} onClose={handleClose} />
|
|
|
|
</Modal>
|
|
|
|
)}
|
|
|
|
{code && (
|
|
|
|
<Modal title="Tracking code">
|
|
|
|
<WebsiteCodeForm values={code} onClose={handleClose} />
|
2020-08-07 11:27:12 +02:00
|
|
|
</Modal>
|
|
|
|
)}
|
2020-08-06 04:04:02 +02:00
|
|
|
</Page>
|
2020-08-05 07:45:05 +02:00
|
|
|
);
|
|
|
|
}
|