From 3926d3fe93fc850fab8bea80ac3b78fd93f0532a Mon Sep 17 00:00:00 2001
From: Chris Walsh <christianywalsh@gmail.com>
Date: Sat, 23 Jul 2022 23:01:59 -0700
Subject: [PATCH] Add website ordering to state and settings page

---
 components/settings/WebsiteSettings.js | 36 ++++++++++++++++++++++++--
 lib/format.js                          | 11 ++++++++
 store/app.js                           |  1 +
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 257876be..4c39cf0c 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -24,8 +24,12 @@ import Code from 'assets/code.svg';
 import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import useUser from 'hooks/useUser';
+import { orderByWebsiteMap } from 'lib/format';
+import useStore, { setDashboard } from 'store/app';
 import styles from './WebsiteSettings.module.css';
 
+const selector = state => state.dashboard;
+
 export default function WebsiteSettings() {
   const { user } = useUser();
   const [editWebsite, setEditWebsite] = useState();
@@ -36,8 +40,14 @@ export default function WebsiteSettings() {
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
+
+  const store = useStore(selector);
+  const { websiteOrdering } = store;
+
   const { data } = useFetch('/websites', { params: { include_all: !!user?.is_admin } }, [saved]);
 
+  const ordered = useMemo(() => orderByWebsiteMap(data, websiteOrdering), [data, websiteOrdering]);
+
   const Buttons = row => (
     <ButtonLayout align="right">
       {row.share_id && (
@@ -157,6 +167,21 @@ export default function WebsiteSettings() {
     setShowUrl(null);
   }
 
+  function handleWebsiteDrag({ destination, source }) {
+    if (!destination || destination.index === source.index) return;
+
+    const orderedWebsites = [...ordered];
+    const [removed] = orderedWebsites.splice(source.index, 1);
+    orderedWebsites.splice(destination.index, 0, removed);
+
+    setDashboard({
+      ...store,
+      websiteOrdering: orderedWebsites
+        .map((i, k) => ({ [i.website_uuid]: k }))
+        .reduce((a, b) => ({ ...a, ...b })),
+    });
+  }
+
   if (!data) {
     return null;
   }
@@ -186,7 +211,14 @@ export default function WebsiteSettings() {
           <FormattedMessage id="label.add-website" defaultMessage="Add website" />
         </Button>
       </PageHeader>
-      <Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
+      <Table
+        columns={user.is_admin ? adminColumns : columns}
+        rows={ordered}
+        empty={empty}
+        isDraggable
+        onDragEnd={handleWebsiteDrag}
+        dragId={'website-settings-list'}
+      />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
diff --git a/lib/format.js b/lib/format.js
index a336c1c4..26f02f3b 100644
--- a/lib/format.js
+++ b/lib/format.js
@@ -78,3 +78,14 @@ export function stringToColor(str) {
   }
   return color;
 }
+
+export function orderByWebsiteMap(websites, orderMap) {
+  if (!websites) return [];
+
+  let ordered = [...websites];
+  for (let website of websites) {
+    ordered[orderMap[website.website_uuid]] = website;
+  }
+
+  return ordered;
+}
diff --git a/store/app.js b/store/app.js
index 65295fd0..0b2abd47 100644
--- a/store/app.js
+++ b/store/app.js
@@ -12,6 +12,7 @@ import { getItem, setItem } from 'lib/web';
 export const defaultDashboardConfig = {
   showCharts: true,
   limit: DEFAULT_WEBSITE_LIMIT,
+  websiteOrdering: {},
 };
 
 const initialState = {