Rename website column. Table component.

assets/pen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z"/></svg>

components/Settings.js

@@ -1,10 +1,32 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Page from './Page';
+import Table from './Table';
+import { get } from 'lib/web';
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'domain', label: 'Domain' },
+];
 
 export default function Settings() {
+  const [data, setData] = useState();
+
+  async function loadData() {
+    setData(await get(`/api/website`));
+  }
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  if (!data) {
+    return null;
+  }
+
   return (
     <Page>
       <h2>Settings</h2>
+      <Table columns={columns} rows={data.websites} />
     </Page>
   );
 }

components/Table.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './Table.module.css';
+
+export default function Table({ columns, rows }) {
+  return (
+    <table className={styles.table}>
+      <thead>
+        <tr>
+          {columns.map(({ key, label }) => (
+            <th key={key}>{label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr key={rowIndex}>
+            {columns.map(({ key }) => (
+              <td key={`${rowIndex}${key}`}>{row[key]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

components/Table.module.css

@@ -0,0 +1,7 @@
+.table {
+  width: 100%;
+}
+
+.table th {
+  text-align: left;
+}

components/WebsiteDetails.js

@@ -45,7 +45,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
-          <h2>{data.label}</h2>
+          <h2>{data.name}</h2>
           <WebsiteChart
             websiteId={websiteId}
             onDataLoad={handleDataLoad}

components/WebsiteList.js

@@ -21,27 +21,27 @@ export default function WebsiteList() {
   return (
     <Page>
       {data &&
-        data.websites.map(({ website_id, label }) => (
+        data.websites.map(({ website_id, name }) => (
           <div key={website_id} className={styles.website}>
             <div className={styles.header}>
               <h2>
                 <Link
                   href="/website/[...id]"
-                  as={`/website/${website_id}/${label}`}
+                  as={`/website/${website_id}/${name}`}
                   className={styles.title}
                 >
-                  {label}
+                  {name}
                 </Link>
               </h2>
               <Link
                 href="/website/[...id]"
-                as={`/website/${website_id}/${label}`}
+                as={`/website/${website_id}/${name}`}
                 className={styles.details}
               >
                 <Icon icon={<Arrow />} /> View details
               </Link>
             </div>
-            <WebsiteChart key={website_id} title={label} websiteId={website_id} />
+            <WebsiteChart key={website_id} title={name} websiteId={website_id} />
           </div>
         ))}
     </Page>

prisma/schema.prisma

@@ -71,9 +71,10 @@ model session {
 model website {
   website_id   Int        @default(autoincrement()) @id
   website_uuid String     @unique
-  label        String
+  name         String
   created_at   DateTime?  @default(now())
   user_id      Int
+  domain       String?
   account      account    @relation(fields: [user_id], references: [user_id])
   event        event[]
   pageview     pageview[]

sql/schema.postgresql.sql

@@ -11,7 +11,8 @@ create table website (
     website_id serial primary key,
     website_uuid uuid unique not null,
     user_id int not null references account(user_id) on delete cascade,
-    label varchar(100) not null,
+    name varchar(100) not null,
+    domain varchar(500),
     created_at timestamp with time zone default current_timestamp
 );