Add website ordering to state and settings page

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} />

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;
+}

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 = {