Rename website column. Table component.

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>