Refactor database queries.

components/AccountSettings.js

@@ -5,7 +5,6 @@ import Button from 'components/common/Button';
 import Icon from 'components/common/Icon';
 import Table from 'components/common/Table';
 import Modal from 'components/common/Modal';
-import WebsiteEditForm from 'components/forms/WebsiteEditForm';
 import AccountEditForm from 'components/forms/AccountEditForm';
 import Pen from 'assets/pen.svg';
 import Plus from 'assets/plus.svg';
@@ -16,33 +15,36 @@ import styles from './AccountSettings.module.css';
 import DeleteForm from './forms/DeleteForm';
 
 export default function AccountSettings() {
-  const user = useSelector(state => state.user);
   const [data, setData] = useState();
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
   const [saved, setSaved] = useState(0);
 
+  const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
+
+  const Buttons = row =>
+    row.username !== 'admin' ? (
+      <>
+        <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
+          <div>Edit</div>
+        </Button>
+        <Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
+          <div>Delete</div>
+        </Button>
+      </>
+    ) : null;
+
   const columns = [
     { key: 'username', label: 'Username' },
     {
       key: 'is_admin',
       label: 'Administrator',
-      render: ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null),
+      render: Checkmark,
     },
     {
       className: styles.buttons,
-      render: row =>
-        row.username !== 'admin' ? (
-          <>
-            <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
-              <div>Edit</div>
-            </Button>
-            <Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
-              <div>Delete</div>
-            </Button>
-          </>
-        ) : null,
+      render: Buttons,
     },
   ];
 
@@ -58,7 +60,7 @@ export default function AccountSettings() {
   }
 
   async function loadData() {
-    setData(await get(`/api/account`));
+    setData(await get(`/api/accounts`));
   }
 
   useEffect(() => {

components/ProfileSettings.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
-import PageHeader from './layout/PageHeader';
-import Button from './common/Button';
+import PageHeader from 'components/layout/PageHeader';
+import Button from 'components/common/Button';
 import ChangePasswordForm from './forms/ChangePasswordForm';
-import Modal from './common/Modal';
+import Modal from 'components/common/Modal';
 
 export default function ProfileSettings() {
   const user = useSelector(state => state.user);

components/WebsiteDetails.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import WebsiteChart from './charts/WebsiteChart';
-import RankingsChart from './charts/RankingsChart';
-import WorldMap from './common/WorldMap';
-import Page from './layout/Page';
-import PageHeader from './layout/PageHeader';
-import MenuLayout from './layout/MenuLayout';
-import Button from './common/Button';
+import WebsiteChart from 'components/charts/WebsiteChart';
+import RankingsChart from 'components/charts/RankingsChart';
+import WorldMap from 'components/common/WorldMap';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import MenuLayout from 'components/layout/MenuLayout';
+import Button from 'components/common/Button';
 import { getDateRange } from 'lib/date';
 import { get } from 'lib/web';
 import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';

components/WebsiteList.js

@@ -1,22 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { get } from 'lib/web';
-import Link from './common/Link';
-import WebsiteChart from './charts/WebsiteChart';
-import Page from './layout/Page';
-import Icon from './common/Icon';
-import Button from './common/Button';
-import PageHeader from './layout/PageHeader';
+import Link from 'components/common/Link';
+import WebsiteChart from 'components/charts/WebsiteChart';
+import Page from 'components/layout/Page';
+import Button from 'components/common/Button';
+import PageHeader from 'components/layout/PageHeader';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Arrow from 'assets/arrow-right.svg';
+import { get } from 'lib/web';
 import styles from './WebsiteList.module.css';
-import EmptyPlaceholder from './common/EmptyPlaceholder';
 
 export default function WebsiteList() {
   const [data, setData] = useState();
   const router = useRouter();
 
   async function loadData() {
-    setData(await get(`/api/website`));
+    setData(await get(`/api/websites`));
   }
 
   useEffect(() => {

components/WebsiteSettings.js

@@ -1,19 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import Table from './common/Table';
-import Button from './common/Button';
-import PageHeader from './layout/PageHeader';
+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 './forms/WebsiteEditForm';
+import DeleteForm from './forms/DeleteForm';
+import WebsiteCodeForm from './forms/WebsiteCodeForm';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 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 DeleteForm from './forms/DeleteForm';
-import WebsiteCodeForm from './forms/WebsiteCodeForm';
 import styles from './WebsiteSettings.module.css';
-import EmptyPlaceholder from './common/EmptyPlaceholder';
-import Arrow from '../assets/arrow-right.svg';
 
 export default function WebsiteSettings() {
   const [data, setData] = useState();
@@ -23,25 +22,27 @@ export default function WebsiteSettings() {
   const [showCode, setShowCode] = useState();
   const [saved, setSaved] = useState(0);
 
+  const Buttons = row => (
+    <>
+      <Button icon={<Code />} size="small" onClick={() => setShowCode(row)}>
+        <div>Get Code</div>
+      </Button>
+      <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
+        <div>Edit</div>
+      </Button>
+      <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
+        <div>Delete</div>
+      </Button>
+    </>
+  );
+
   const columns = [
     { key: 'name', label: 'Name', className: styles.col },
     { key: 'domain', label: 'Domain', className: styles.col },
     {
       key: 'action',
       className: styles.buttons,
-      render: row => (
-        <>
-          <Button icon={<Code />} size="small" onClick={() => setShowCode(row)}>
-            <div>Get Code</div>
-          </Button>
-          <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
-            <div>Edit</div>
-          </Button>
-          <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
-            <div>Delete</div>
-          </Button>
-        </>
-      ),
+      render: Buttons,
     },
   ];
 
@@ -58,7 +59,7 @@ export default function WebsiteSettings() {
   }
 
   async function loadData() {
-    setData(await get(`/api/website`));
+    setData(await get(`/api/websites`));
   }
 
   useEffect(() => {

components/forms/LoginForm.js

@@ -2,8 +2,16 @@ import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import Router from 'next/router';
 import { post } from 'lib/web';
-import Button from '../common/Button';
-import FormLayout, { FormButtons, FormError, FormMessage, FormRow } from '../layout/FormLayout';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import Icon from 'components/common/Icon';
+import Logo from 'assets/logo.svg';
+import styles from './LoginForm.module.css';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -32,7 +40,7 @@ export default function LoginForm() {
   };
 
   return (
-    <FormLayout>
+    <FormLayout className={styles.login}>
       <Formik
         initialValues={{
           username: '',
@@ -43,6 +51,7 @@ export default function LoginForm() {
       >
         {() => (
           <Form>
+            <Icon icon={<Logo />} size="xlarge" className={styles.icon} />
             <h1 className="center">umami</h1>
             <FormRow>
               <label htmlFor="username">Username</label>

components/forms/LoginForm.module.css

@@ -0,0 +1,11 @@
+.login {
+  display: flex;
+  flex-direction: column;
+  margin-top: 80px;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}