Website edit functionality.

components/Account.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Page from './Page';
+import Page from './layout/Page';
 import styles from './Account.module.css';
 
 export default function Account() {

components/Footer.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Footer() {
-  return <footer className="container mt-5 mb-5">umami - deliciously simple web stats</footer>;
-}

components/Settings.js

@@ -1,30 +1,36 @@
 import React, { useState, useEffect } from 'react';
-import Page from './Page';
-import Table from './Table';
-import Button from './Button';
-import Icon from './Icon';
-import PageHeader from './PageHeader';
+import Page from './layout/Page';
+import Table from './common/Table';
+import Button from './interface/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 { get } from 'lib/web';
+import Modal from './common/Modal';
+import WebsiteForm from './forms/WebsiteForm';
+import styles from './Settings.module.css';
 
 export default function Settings() {
   const [data, setData] = useState();
+  const [edit, setEdit] = useState();
+  const [del, setDelete] = useState();
+  const [saved, setSaved] = useState(0);
 
   const columns = [
     { key: 'name', label: 'Name' },
     { key: 'domain', label: 'Domain' },
     {
       key: 'action',
-      label: '',
-      style: { flex: 0 },
-      render: ({ website_id }) => (
+      cell: {
+        className: styles.buttons,
+      },
+      render: row => (
         <>
-          <Button icon={<Pen />} size="S">
+          <Button icon={<Pen />} size="S" onClick={() => setEdit(row)}>
             <div>Edit</div>
           </Button>
-          <Button icon={<Trash />} size="S">
+          <Button icon={<Trash />} size="S" onClick={() => setDelete(row)}>
             <div>Delete</div>
           </Button>
         </>
@@ -32,13 +38,23 @@ export default function Settings() {
     },
   ];
 
+  function handleSave() {
+    setSaved(state => state + 1);
+    handleClose();
+  }
+
+  function handleClose() {
+    setEdit(null);
+    setDelete(null);
+  }
+
   async function loadData() {
     setData(await get(`/api/website`));
   }
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [saved]);
 
   if (!data) {
     return null;
@@ -47,13 +63,17 @@ export default function Settings() {
   return (
     <Page>
       <PageHeader>
-        <div>Settings</div>
-        <Button size="S">
-          <Icon icon={<Plus />} size="S" />
+        <div>Websites</div>
+        <Button icon={<Plus />} size="S">
           <div>Add website</div>
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data.websites} />
+      <Table columns={columns} rows={data} />
+      {edit && (
+        <Modal title="Edit website">
+          <WebsiteForm initialValues={edit} onSave={handleSave} onClose={handleClose} />
+        </Modal>
+      )}
     </Page>
   );
 }

components/Settings.module.css

@@ -0,0 +1,4 @@
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}

components/WebsiteDetails.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import WebsiteChart from './WebsiteChart';
-import RankingsChart from './RankingsChart';
-import WorldMap from './WorldMap';
-import Page from './Page';
+import WebsiteChart from './charts/WebsiteChart';
+import RankingsChart from './charts/RankingsChart';
+import WorldMap from './common/WorldMap';
+import Page from './layout/Page';
 import { getDateRange } from 'lib/date';
 import { get } from 'lib/web';
 import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
 import styles from './WebsiteDetails.module.css';
-import PageHeader from './PageHeader';
+import PageHeader from './layout/PageHeader';
 
 const pageviewClasses = 'col-md-12 col-lg-6';
 const sessionClasses = 'col-12 col-lg-4';

components/WebsiteList.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import Link from './Link';
-import WebsiteChart from './WebsiteChart';
-import Page from './Page';
-import Icon from './Icon';
-import Button from './Button';
-import PageHeader from './PageHeader';
+import Link from './interface/Link';
+import WebsiteChart from './charts/WebsiteChart';
+import Page from './layout/Page';
+import Icon from './interface/Icon';
+import Button from './interface/Button';
+import PageHeader from './layout/PageHeader';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
 
@@ -24,32 +24,31 @@ export default function WebsiteList() {
 
   return (
     <Page>
-      {data &&
-        data.websites.map(({ website_id, name }) => (
-          <div key={website_id} className={styles.website}>
-            <PageHeader>
-              <Link
-                href="/website/[...id]"
-                as={`/website/${website_id}/${name}`}
-                className={styles.title}
-              >
-                {name}
-              </Link>
-              <Button
-                icon={<Arrow />}
-                onClick={() =>
-                  router.push('/website/[...id]', `/website/${website_id}/${name}`, {
-                    shallow: true,
-                  })
-                }
-                size="S"
-              >
-                <div>View details</div>
-              </Button>
-            </PageHeader>
-            <WebsiteChart key={website_id} title={name} websiteId={website_id} />
-          </div>
-        ))}
+      {data?.map(({ website_id, name }) => (
+        <div key={website_id} className={styles.website}>
+          <PageHeader>
+            <Link
+              href="/website/[...id]"
+              as={`/website/${website_id}/${name}`}
+              className={styles.title}
+            >
+              {name}
+            </Link>
+            <Button
+              icon={<Arrow />}
+              onClick={() =>
+                router.push('/website/[...id]', `/website/${website_id}/${name}`, {
+                  shallow: true,
+                })
+              }
+              size="S"
+            >
+              <div>View details</div>
+            </Button>
+          </PageHeader>
+          <WebsiteChart key={website_id} title={name} websiteId={website_id} />
+        </div>
+      ))}
     </Page>
   );
 }

components/charts/QuickButtons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import Button from './Button';
+import Button from '../interface/Button';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 

components/charts/RankingsChart.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import CheckVisible from './CheckVisible';
+import CheckVisible from '../helpers/CheckVisible';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import styles from './RankingsChart.module.css';

components/charts/WebsiteChart.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
-import CheckVisible from './CheckVisible';
+import CheckVisible from '../helpers/CheckVisible';
 import MetricsBar from './MetricsBar';
 import QuickButtons from './QuickButtons';
-import DateFilter from './DateFilter';
-import StickyHeader from './StickyHeader';
+import DateFilter from '../common/DateFilter';
+import StickyHeader from '../helpers/StickyHeader';
 import { get } from 'lib/web';
 import { getDateArray, getDateRange, getTimezone } from 'lib/date';
 import styles from './WebsiteChart.module.css';

components/common/DropDown.js

@@ -1,10 +1,10 @@
 import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
-import Menu from './Menu';
+import Menu from '../interface/Menu';
 import useDocumentClick from 'hooks/useDocumentClick';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './Dropdown.module.css';
-import Icon from './Icon';
+import Icon from '../interface/Icon';
 
 export default function DropDown({
   value,

components/common/Modal.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSpring, animated } from 'react-spring';
+import styles from './Modal.module.css';
+
+export default function Modal({ title, children }) {
+  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
+
+  return (
+    <animated.div className={styles.modal} style={props}>
+      <div className={styles.content}>
+        {title && <div className={styles.header}>{title}</div>}
+        <div className={styles.body}>{children}</div>
+      </div>
+    </animated.div>
+  );
+}

components/common/Modal.module.css

@@ -0,0 +1,45 @@
+.modal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.modal:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background: var(--gray900);
+  opacity: 0.1;
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--gray50);
+  min-width: 200px;
+  min-height: 100px;
+  z-index: 1;
+  border: 1px solid var(--gray300);
+  padding: 30px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.header {
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+}

components/common/Table.js

@@ -6,8 +6,12 @@ export default function Table({ columns, rows }) {
   return (
     <div className={styles.table}>
       <div className={styles.header}>
-        {columns.map(({ key, label }) => (
-          <div key={key} className={styles.head}>
+        {columns.map(({ key, label, header }) => (
+          <div
+            key={key}
+            className={classNames(styles.head, header?.className)}
+            style={header?.style}
+          >
             {label}
           </div>
         ))}
@@ -15,11 +19,11 @@ export default function Table({ columns, rows }) {
       <div className={styles.body}>
         {rows.map((row, rowIndex) => (
           <div className={styles.row} key={rowIndex}>
-            {columns.map(({ key, render, className, style }) => (
+            {columns.map(({ key, render, cell }) => (
               <div
                 key={`${rowIndex}${key}`}
-                className={classNames(styles.cell, className)}
-                style={style}
+                className={classNames(styles.cell, cell?.className)}
+                style={cell?.style}
               >
                 {render ? render(row) : row[key]}
               </div>

components/common/Table.module.css

@@ -14,6 +14,11 @@
   flex: 1;
 }
 
+.body {
+  display: flex;
+  flex-direction: column;
+}
+
 .row {
   display: flex;
   border-bottom: 1px solid var(--gray300);

components/forms/LoginForm.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import Router from 'next/router';
 import { post } from 'lib/web';
-import Button from './Button';
-import FormLayout, { FormButtons, FormError, FormMessage, FormRow } from './FormLayout';
-import styles from './Login.module.css';
+import Button from '../interface/Button';
+import FormLayout, { FormButtons, FormError, FormMessage, FormRow } from '../layout/FormLayout';
+import styles from './LoginForm.module.css';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -19,7 +19,7 @@ const validate = ({ username, password }) => {
   return errors;
 };
 
-export default function Login() {
+export default function LoginForm() {
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ username, password }) => {

components/forms/WebsiteForm.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Formik, Form, Field } from 'formik';
+import Router from 'next/router';
+import { post } from 'lib/web';
+import Button from 'components/interface/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+
+const validate = ({ name, domain }) => {
+  const errors = {};
+
+  if (!name) {
+    errors.name = 'Required';
+  }
+  if (!domain) {
+    errors.domain = 'Required';
+  }
+
+  return errors;
+};
+
+export default function WebsiteForm({ initialValues, onSave, onClose }) {
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async values => {
+    const response = await post(`/api/website`, values);
+
+    if (response) {
+      onSave();
+    } else {
+      setMessage('Something went wrong.');
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik initialValues={initialValues} validate={validate} onSubmit={handleSubmit}>
+        {() => (
+          <Form>
+            <FormRow>
+              <label htmlFor="name">Name</label>
+              <Field name="name" type="text" />
+              <FormError name="name" />
+            </FormRow>
+            <FormRow>
+              <label htmlFor="domain">Domain</label>
+              <Field name="domain" type="text" />
+              <FormError name="domain" />
+            </FormRow>
+            <FormButtons>
+              <Button type="submit">Save</Button>
+              <Button onClick={onClose}>Cancel</Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}

components/layout/Footer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Footer.module.css';
+
+export default function Footer() {
+  return (
+    <footer className={classNames(styles.footer, 'container mt-5 mb-5')}>
+      umami - deliciously simple web stats
+    </footer>
+  );
+}

components/layout/Footer.module.css

@@ -0,0 +1,3 @@
+.footer {
+  font-size: var(--font-size-small);
+}

components/layout/FormLayout.module.css

@@ -33,11 +33,24 @@
   top: 0;
   left: 100%;
   bottom: 0;
-  margin-left: 10px;
-  padding: 4px 8px;
+  margin-left: 16px;
+  padding: 4px 10px;
   border-radius: 4px;
 }
 
+.error:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -5px;
+  bottom: 0;
+  margin: auto;
+  width: 10px;
+  height: 10px;
+  background: var(--color-error);
+  transform: rotate(45deg);
+}
+
 .message {
   text-align: center;
   margin: 20px 0;

components/layout/Header.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import Link from 'components/Link';
-import UserButton from './UserButton';
-import Icon from './Icon';
+import Link from 'components/interface/Link';
+import UserButton from '../interface/UserButton';
+import Icon from '../interface/Icon';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 

components/layout/Layout.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import Head from 'next/head';
-import Header from 'components/Header';
-import Footer from 'components/Footer';
+import Header from 'components/layout/Header';
+import Footer from 'components/layout/Footer';
 import styles from './Layout.module.css';
 
 export default function Layout({

lib/db.js

@@ -56,6 +56,20 @@ export async function getWebsites(user_id) {
       where: {
         user_id,
       },
+      orderBy: {
+        name: 'asc',
+      },
+    }),
+  );
+}
+
+export async function updateWebsite(website_id, data) {
+  return runQuery(
+    prisma.website.update({
+      where: {
+        website_id,
+      },
+      data,
     }),
   );
 }

pages/404.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 
 export default function Custom404() {
   return (

pages/account.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 import Account from 'components/Account';
 import useRequireLogin from 'hooks/useRequireLogin';
 

pages/api/website.js

@@ -1,12 +1,26 @@
-import { getWebsites } from 'lib/db';
+import { getWebsites, updateWebsite } from 'lib/db';
 import { useAuth } from 'lib/middleware';
 
 export default async (req, res) => {
   await useAuth(req, res);
 
   const { user_id } = req.auth;
+  const { website_id } = req.body;
 
-  const websites = await getWebsites(user_id);
+  if (req.method === 'GET') {
+    const websites = await getWebsites(user_id);
 
-  return res.status(200).json({ websites });
+    return res.status(200).json(websites);
+  }
+
+  if (req.method === 'POST') {
+    if (website_id) {
+      const { name, domain } = req.body;
+      const website = await updateWebsite(website_id, { name, domain });
+
+      return res.status(200).json(website);
+    }
+  }
+
+  return res.status(405).end();
 };

pages/dashboard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 import WebsiteList from 'components/WebsiteList';
 import useRequireLogin from 'hooks/useRequireLogin';
 

pages/login.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import Layout from 'components/Layout';
-import Login from 'components/Login';
-import Icon from 'components/Icon';
+import Layout from 'components/layout/Layout';
+import LoginForm from 'components/forms/LoginForm';
+import Icon from 'components/interface/Icon';
 import Logo from 'assets/logo.svg';
 
 export default function LoginPage() {
   return (
     <Layout title="login" header={false} footer={false} center middle>
       <Icon icon={<Logo />} size="XL" />
-      <Login />
+      <LoginForm />
     </Layout>
   );
 }

pages/settings.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 import Settings from 'components/Settings';
 import useRequireLogin from 'hooks/useRequireLogin';
 

pages/test.js

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import Link from 'next/link';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 
 export default function Test({ websiteId }) {
   return (

pages/website/[...id].js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import Layout from 'components/Layout';
+import Layout from 'components/layout/Layout';
 import WebsiteDetails from 'components/WebsiteDetails';
 import useRequireLogin from 'hooks/useRequireLogin';