From 5bd83b8127e12bcb2e6e4ce93cb7a52d46a5ce9a Mon Sep 17 00:00:00 2001
From: Chris Walsh <christianywalsh@gmail.com>
Date: Sat, 23 Jul 2022 23:02:47 -0700
Subject: [PATCH] Change dashboard websites to use ordered list

---
 components/pages/WebsiteList.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index e2cba6b2..9e3c641a 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -5,8 +5,21 @@ import Page from 'components/layout/Page';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
+import { orderByWebsiteMap } from 'lib/format';
+import { useMemo } from 'react';
+import useStore from 'store/app';
+
+const selector = state => state.dashboard;
 
 export default function WebsiteList({ websites, showCharts, limit }) {
+  const store = useStore(selector);
+  const { websiteOrdering } = store;
+
+  const ordered = useMemo(
+    () => orderByWebsiteMap(websites, websiteOrdering),
+    [websites, websiteOrdering],
+  );
+
   if (websites.length === 0) {
     return (
       <Page>
@@ -28,7 +41,7 @@ export default function WebsiteList({ websites, showCharts, limit }) {
 
   return (
     <div>
-      {websites.map(({ website_id, name, domain }, index) =>
+      {ordered.map(({ website_id, name, domain }, index) =>
         index < limit ? (
           <div key={website_id} className={styles.website}>
             <WebsiteChart