Refactored settings components.

components/pages/settings/websites/ShareUrl.js

@@ -0,0 +1,87 @@
+import {
+  Form,
+  FormRow,
+  FormButtons,
+  Flexbox,
+  TextField,
+  SubmitButton,
+  Button,
+  Toggle,
+} from 'react-basics';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getRandomChars } from 'next-basics';
+import useApi from 'hooks/useApi';
+
+const generateId = () => getRandomChars(16);
+
+export default function ShareUrl({ websiteId, data, onSave }) {
+  const { name, shareId } = data;
+  const [id, setId] = useState(shareId);
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(({ shareId }) =>
+    post(`/websites/${websiteId}`, { shareId }),
+  );
+  const ref = useRef(null);
+  const url = useMemo(
+    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
+    [id, name],
+  );
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  const handleGenerate = () => {
+    const id = generateId();
+    ref.current.setValue('shareId', id, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setId(id);
+  };
+
+  const handleCheck = checked => {
+    const data = { shareId: checked ? generateId() : null };
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+      },
+    });
+    setId(data.shareId);
+  };
+
+  useEffect(() => {
+    if (id && id !== shareId) {
+      ref.current.setValue('shareId', id);
+    }
+  }, [id, shareId]);
+
+  return (
+    <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow>
+        <Toggle checked={Boolean(id)} onChecked={handleCheck}>
+          Enable share URL
+        </Toggle>
+      </FormRow>
+      {id && (
+        <>
+          <FormRow>
+            <p>Your website stats are publically available at the following URL:</p>
+            <Flexbox gap={10}>
+              <TextField value={url} readOnly allowCopy />
+              <Button onClick={handleGenerate}>Regenerate URL</Button>
+            </Flexbox>
+          </FormRow>
+          <FormButtons>
+            <SubmitButton variant="primary">Save</SubmitButton>
+          </FormButtons>
+        </>
+      )}
+    </Form>
+  );
+}

components/pages/settings/websites/TrackingCode.js

@@ -0,0 +1,16 @@
+import { TextArea } from 'react-basics';
+import { TRACKER_SCRIPT_URL } from 'lib/constants';
+
+export default function TrackingCode({ websiteId }) {
+  const code = `<script async src="${TRACKER_SCRIPT_URL}" data-website-id="${websiteId}"></script>`;
+
+  return (
+    <>
+      <p>
+        To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
+        section of your HTML.
+      </p>
+      <TextArea rows={4} value={code} readOnly allowCopy />
+    </>
+  );
+}

components/pages/settings/websites/WebsiteAddForm.js

@@ -0,0 +1,55 @@
+import { useRef } from 'react';
+import {
+  Form,
+  FormRow,
+  FormInput,
+  FormButtons,
+  TextField,
+  Button,
+  SubmitButton,
+} from 'react-basics';
+import useApi from 'hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+
+export default function WebsiteAddForm({ onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Domain">
+        <FormInput
+          name="domain"
+          rules={{
+            required: 'Required',
+            pattern: { value: DOMAIN_REGEX, message: 'Invalid domain' },
+          }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={false}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteDeleteForm.js

@@ -0,0 +1,46 @@
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'DELETE';
+
+export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+  const { del, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>
+        To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </div>
+      <FormRow label="Confirm">
+        <FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteDetails.js

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
+import useApi from 'hooks/useApi';
+import Link from 'next/link';
+import Page from 'components/layout/Page';
+import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
+import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
+import PageHeader from 'components/layout/PageHeader';
+import TrackingCode from 'components/pages/settings/websites/TrackingCode';
+import ShareUrl from 'components/pages/settings/websites/ShareUrl';
+import ExternalLink from 'assets/external-link.svg';
+
+export default function WebsiteDetails({ websiteId }) {
+  const [values, setValues] = useState(null);
+  const [tab, setTab] = useState('details');
+  const { get, useQuery } = useApi();
+  const { toast, showToast } = useToast();
+  const { data, isLoading } = useQuery(
+    ['website', websiteId],
+    () => {
+      if (websiteId) {
+        return get(`/websites/${websiteId}`);
+      }
+    },
+    { cacheTime: 0 },
+  );
+
+  const handleSave = data => {
+    showToast({ message: 'Saved successfully.', variant: 'success' });
+    setValues(state => ({ ...state, ...data }));
+  };
+
+  useEffect(() => {
+    if (data) {
+      setValues(data);
+    }
+  }, [data]);
+
+  return (
+    <Page loading={isLoading || !values}>
+      {toast}
+      <PageHeader>
+        <Breadcrumbs>
+          <Item>
+            <Link href="/settings/websites">Websites</Link>
+          </Item>
+          <Item>{values?.name}</Item>
+        </Breadcrumbs>
+        <Link href={`/analytics/websites/${websiteId}`}>
+          <a target="_blank">
+            <Button variant="primary">
+              <Icon>
+                <ExternalLink />
+              </Icon>
+              View
+            </Button>
+          </a>
+        </Link>
+      </PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="details">Details</Item>
+        <Item key="tracking">Tracking code</Item>
+        <Item key="share">Share URL</Item>
+        <Item key="actions">Actions</Item>
+      </Tabs>
+      {tab === 'details' && (
+        <WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
+      )}
+      {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
+      {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
+      {tab === 'actions' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
+    </Page>
+  );
+}

components/pages/settings/websites/WebsiteEditForm.js

@@ -0,0 +1,49 @@
+import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
+import { useRef } from 'react';
+import useApi from 'hooks/useApi';
+import { DOMAIN_REGEX } from 'lib/constants';
+
+export default function WebsiteEditForm({ websiteId, data, onSave }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        ref.current.reset(data);
+        onSave(data);
+      },
+    });
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+      <FormRow label="Website ID">
+        <TextField value={websiteId} readOnly allowCopy />
+      </FormRow>
+      <FormRow label="Name">
+        <FormInput name="name" rules={{ required: 'Required' }}>
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Domain">
+        <FormInput
+          name="domain"
+          rules={{
+            required: 'Required',
+            pattern: {
+              value: DOMAIN_REGEX,
+              message: 'Invalid domain',
+            },
+          }}
+        >
+          <TextField />
+        </FormInput>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary">Save</SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteReset.js

@@ -0,0 +1,49 @@
+import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
+import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Button, Form, FormRow, Modal } from 'react-basics';
+
+export default function WebsiteReset({ websiteId, onSave }) {
+  const [modal, setModal] = useState(null);
+  const router = useRouter();
+
+  const handleReset = async () => {
+    setModal(null);
+    onSave();
+  };
+
+  const handleDelete = async () => {
+    onSave();
+    await router.push('/websites');
+  };
+
+  const handleClose = () => setModal(null);
+
+  return (
+    <Form>
+      <FormRow label="Reset website">
+        <p>
+          All statistics for this website will be deleted, but your settings will remain intact.
+        </p>
+        <Button onClick={() => setModal('reset')}>Reset</Button>
+      </FormRow>
+      <FormRow label="Delete website">
+        <p>All website data will be deleted.</p>
+        <Button onClick={() => setModal('delete')}>Delete</Button>
+      </FormRow>
+      {modal === 'reset' && (
+        <Modal title="Reset website" onClose={handleClose}>
+          {close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
+        </Modal>
+      )}
+      {modal === 'delete' && (
+        <Modal title="Delete website" onClose={handleClose}>
+          {close => (
+            <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
+          )}
+        </Modal>
+      )}
+    </Form>
+  );
+}

components/pages/settings/websites/WebsiteResetForm.js

@@ -0,0 +1,48 @@
+import useApi from 'hooks/useApi';
+import {
+  Button,
+  Form,
+  FormRow,
+  FormButtons,
+  FormInput,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+
+const CONFIRM_VALUE = 'RESET';
+
+export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data =>
+    post(`/websites/${websiteId}/reset`, data),
+  );
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error}>
+      <div>
+        To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
+      </div>
+      <FormRow label="Confirmation">
+        <FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={isLoading}>
+          Save
+        </SubmitButton>
+        <Button disabled={isLoading} onClick={onClose}>
+          Cancel
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/websites/WebsitesList.js

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Button, Icon, Modal, useToast } from 'react-basics';
+import useApi from 'hooks/useApi';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
+import PageHeader from 'components/layout/PageHeader';
+import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
+import Page from 'components/layout/Page';
+import useUser from 'hooks/useUser';
+
+export default function WebsitesList() {
+  const [edit, setEdit] = useState(false);
+  const { get, useQuery } = useApi();
+  const { user } = useUser();
+  const { data, isLoading, error, refetch } = useQuery(['websites', user.id], () =>
+    get(`/users/${user.id}/websites`),
+  );
+  const hasData = data && data.length !== 0;
+  const { toast, showToast } = useToast();
+
+  const columns = [
+    { name: 'name', label: 'Name', style: { flex: 2 } },
+    { name: 'domain', label: 'Domain' },
+    { name: 'action', label: ' ' },
+  ];
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleSave = async () => {
+    await refetch();
+    setEdit(false);
+    showToast({ message: 'Website saved.', variant: 'success' });
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <Page loading={isLoading} error={error}>
+      {toast}
+      <PageHeader title="Websites">
+        <Button onClick={handleAdd}>
+          <Icon icon="plus" /> Add website
+        </Button>
+      </PageHeader>
+
+      {hasData && <WebsitesTable columns={columns} rows={data} />}
+      {!hasData && (
+        <EmptyPlaceholder message="You don't have any websites configured.">
+          <Button variant="primary" onClick={handleAdd}>
+            <Icon icon="plus" /> Add website
+          </Button>
+        </EmptyPlaceholder>
+      )}
+      {edit && (
+        <Modal title="Add website" onClose={handleClose}>
+          {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      )}
+    </Page>
+  );
+}

components/pages/settings/websites/WebsitesTable.js

@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumn,
+  Button,
+  Icon,
+} from 'react-basics';
+import ExternalLink from 'assets/external-link.svg';
+import styles from './WebsitesTable.module.css';
+
+export default function WebsitesTable({ columns = [], rows = [] }) {
+  return (
+    <Table className={styles.table} columns={columns} rows={rows}>
+      <TableHeader>
+        {(column, index) => {
+          return (
+            <TableColumn key={index} style={{ ...column.style }}>
+              {column.label}
+            </TableColumn>
+          );
+        }}
+      </TableHeader>
+      <TableBody>
+        {(row, keys, rowIndex) => {
+          const { id } = row;
+
+          row.action = (
+            <div className={styles.actions}>
+              <Link href={`/settings/websites/${id}`}>
+                <a>
+                  <Button>
+                    <Icon icon="arrow-right" />
+                    Settings
+                  </Button>
+                </a>
+              </Link>
+              <Link href={`/analytics/websites/${id}`}>
+                <a target="_blank">
+                  <Button>
+                    <Icon>
+                      <ExternalLink />
+                    </Icon>
+                    View
+                  </Button>
+                </a>
+              </Link>
+            </div>
+          );
+
+          return (
+            <TableRow key={rowIndex} data={row} keys={keys}>
+              {(data, key, colIndex) => {
+                return (
+                  <TableCell
+                    key={colIndex}
+                    className={styles.cell}
+                    style={{ ...columns[colIndex]?.style }}
+                  >
+                    {data[key]}
+                  </TableCell>
+                );
+              }}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+}

components/pages/settings/websites/WebsitesTable.module.css

@@ -0,0 +1,18 @@
+.table th,
+.table td {
+  flex: 2;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+}
+
+.cell:last-child {
+  justify-content: flex-end;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}