Initial commit

Created from https://vercel.com/new

components/settings/WebsiteSettings.js

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Link from 'components/common/Link';
+import Table from 'components/common/Table';
+import Button from 'components/common/Button';
+import PageHeader from 'components/layout/PageHeader';
+import Modal from 'components/common/Modal';
+import WebsiteEditForm from 'components/forms/WebsiteEditForm';
+import ResetForm from 'components/forms/ResetForm';
+import DeleteForm from 'components/forms/DeleteForm';
+import TrackingCodeForm from 'components/forms/TrackingCodeForm';
+import ShareUrlForm from 'components/forms/ShareUrlForm';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import ButtonLayout from 'components/layout/ButtonLayout';
+import Toast from 'components/common/Toast';
+import Favicon from 'components/common/Favicon';
+import Pen from 'assets/pen.svg';
+import Trash from 'assets/trash.svg';
+import Reset from 'assets/redo.svg';
+import Plus from 'assets/plus.svg';
+import Code from 'assets/code.svg';
+import LinkIcon from 'assets/link.svg';
+import useFetch from 'hooks/useFetch';
+import styles from './WebsiteSettings.module.css';
+
+export default function WebsiteSettings() {
+  const [editWebsite, setEditWebsite] = useState();
+  const [resetWebsite, setResetWebsite] = useState();
+  const [deleteWebsite, setDeleteWebsite] = useState();
+  const [addWebsite, setAddWebsite] = useState();
+  const [showCode, setShowCode] = useState();
+  const [showUrl, setShowUrl] = useState();
+  const [saved, setSaved] = useState(0);
+  const [message, setMessage] = useState();
+  const { data } = useFetch(`/api/websites`, {}, [saved]);
+
+  const Buttons = row => (
+    <ButtonLayout align="right">
+      {row.share_id && (
+        <Button
+          icon={<LinkIcon />}
+          size="small"
+          tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
+          tooltipId={`button-share-${row.website_id}`}
+          onClick={() => setShowUrl(row)}
+        />
+      )}
+      <Button
+        icon={<Code />}
+        size="small"
+        tooltip={
+          <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
+        }
+        tooltipId={`button-code-${row.website_id}`}
+        onClick={() => setShowCode(row)}
+      />
+      <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
+        <FormattedMessage id="label.edit" defaultMessage="Edit" />
+      </Button>
+      <Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
+        <FormattedMessage id="label.reset" defaultMessage="Reset" />
+      </Button>
+      <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
+        <FormattedMessage id="label.delete" defaultMessage="Delete" />
+      </Button>
+    </ButtonLayout>
+  );
+
+  const DetailsLink = ({ website_id, name, domain }) => (
+    <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      <Favicon domain={domain} />
+      {name}
+    </Link>
+  );
+
+  const columns = [
+    {
+      key: 'name',
+      label: <FormattedMessage id="label.name" defaultMessage="Name" />,
+      className: 'col-6 col-xl-4',
+      render: DetailsLink,
+    },
+    {
+      key: 'domain',
+      label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
+      className: 'col-6 col-xl-4',
+    },
+    {
+      key: 'action',
+      className: classNames(styles.buttons, 'col-12 col-xl-4 pt-2 pt-xl-0'),
+      render: Buttons,
+    },
+  ];
+
+  function handleSave() {
+    setSaved(state => state + 1);
+    setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
+    handleClose();
+  }
+
+  function handleClose() {
+    setAddWebsite(null);
+    setEditWebsite(null);
+    setResetWebsite(null);
+    setDeleteWebsite(null);
+    setShowCode(null);
+    setShowUrl(null);
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  const empty = (
+    <EmptyPlaceholder
+      msg={
+        <FormattedMessage
+          id="message.no-websites-configured"
+          defaultMessage="You don't have any websites configured."
+        />
+      }
+    >
+      <Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
+        <FormattedMessage id="label.add-website" defaultMessage="Add website" />
+      </Button>
+    </EmptyPlaceholder>
+  );
+
+  return (
+    <>
+      <PageHeader>
+        <div>
+          <FormattedMessage id="label.websites" defaultMessage="Websites" />
+        </div>
+        <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
+          <FormattedMessage id="label.add-website" defaultMessage="Add website" />
+        </Button>
+      </PageHeader>
+      <Table columns={columns} rows={data} empty={empty} />
+      {editWebsite && (
+        <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
+          <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
+        </Modal>
+      )}
+      {addWebsite && (
+        <Modal title={<FormattedMessage id="label.add-website" defaultMessage="Add website" />}>
+          <WebsiteEditForm onSave={handleSave} onClose={handleClose} />
+        </Modal>
+      )}
+      {resetWebsite && (
+        <Modal
+          title={<FormattedMessage id="label.reset-website" defaultMessage="Reset statistics" />}
+        >
+          <ResetForm
+            values={{ type: 'website', id: resetWebsite.website_id, name: resetWebsite.name }}
+            onSave={handleSave}
+            onClose={handleClose}
+          />
+        </Modal>
+      )}
+      {deleteWebsite && (
+        <Modal
+          title={<FormattedMessage id="label.delete-website" defaultMessage="Delete website" />}
+        >
+          <DeleteForm
+            values={{ type: 'website', id: deleteWebsite.website_id, name: deleteWebsite.name }}
+            onSave={handleSave}
+            onClose={handleClose}
+          />
+        </Modal>
+      )}
+      {showCode && (
+        <Modal title={<FormattedMessage id="label.tracking-code" defaultMessage="Tracking code" />}>
+          <TrackingCodeForm values={showCode} onClose={handleClose} />
+        </Modal>
+      )}
+      {showUrl && (
+        <Modal title={<FormattedMessage id="label.share-url" defaultMessage="Share URL" />}>
+          <ShareUrlForm values={showUrl} onClose={handleClose} />
+        </Modal>
+      )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
+    </>
+  );
+}