Refactored dashboard sort logic.

components/pages/Dashboard.js

@@ -40,8 +40,8 @@ export default function Dashboard() {
         <div>{formatMessage(messages.dashboard)}</div>
         {!editing && <DashboardSettingsButton />}
       </PageHeader>
-      {editing && <DashboardEdit data={data} />}
-      {!editing && <WebsiteList data={data} showCharts={showCharts} limit={max} />}
+      {editing && <DashboardEdit websites={data} />}
+      {!editing && <WebsiteList websites={data} showCharts={showCharts} limit={max} />}
       {max < data.length && (
         <Button className={styles.button} onClick={handleMore}>
           {formatMessage(messages.more)}

components/pages/DashboardEdit.js

@@ -1,12 +1,11 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import useDashboard, { saveDashboard } from 'store/dashboard';
-import Button from 'components/common/Button';
-import { useMemo } from 'react';
-import { orderByWebsiteMap } from 'lib/format';
-import styles from './DashboardEdit.module.css';
 import classNames from 'classnames';
+import Button from 'components/common/Button';
+import { sortArrayByMap } from 'lib/array';
+import useDashboard, { saveDashboard } from 'store/dashboard';
+import styles from './DashboardEdit.module.css';
 
 const messages = defineMessages({
   save: { id: 'label.save', defaultMessage: 'Save' },
@@ -16,13 +15,13 @@ const messages = defineMessages({
 
 const dragId = 'dashboard-website-ordering';
 
-export default function DashboardEdit({ data: websites }) {
+export default function DashboardEdit({ websites }) {
   const settings = useDashboard();
   const { websiteOrder } = settings;
   const { formatMessage } = useIntl();
-  const [order, setOrder] = useState(websiteOrder);
+  const [order, setOrder] = useState(websiteOrder || []);
 
-  const ordered = useMemo(() => orderByWebsiteMap(websites, order), [websites, order]);
+  const ordered = useMemo(() => sortArrayByMap(websites, order, 'website_id'), [websites, order]);
 
   console.log({ order, ordered });
 
@@ -33,9 +32,7 @@ export default function DashboardEdit({ data: websites }) {
     const [removed] = orderedWebsites.splice(source.index, 1);
     orderedWebsites.splice(destination.index, 0, removed);
 
-    setOrder(
-      orderedWebsites.map((i, k) => ({ [i.website_uuid]: k })).reduce((a, b) => ({ ...a, ...b })),
-    );
+    setOrder(orderedWebsites.map(({ website_id }) => website_id));
   }
 
   function handleSave() {
@@ -50,7 +47,7 @@ export default function DashboardEdit({ data: websites }) {
   }
 
   function handleReset() {
-    setOrder({});
+    setOrder([]);
   }
 
   return (
@@ -94,6 +91,7 @@ export default function DashboardEdit({ data: websites }) {
                     )}
                   </Draggable>
                 ))}
+                {provided.placeholder}
               </div>
             )}
           </Droppable>

components/pages/WebsiteList.js

@@ -6,7 +6,7 @@ import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
 import useDashboard from 'store/dashboard';
-import { orderByWebsiteMap } from 'lib/format';
+import { sortArrayByMap } from 'lib/array';
 import { useMemo } from 'react';
 
 const messages = defineMessages({
@@ -20,11 +20,16 @@ const messages = defineMessages({
   },
 });
 
-export default function WebsiteList({ data, showCharts, limit }) {
+export default function WebsiteList({ websites, showCharts, limit }) {
   const { websiteOrder } = useDashboard();
   const { formatMessage } = useIntl();
 
-  const websites = useMemo(() => orderByWebsiteMap(data, websiteOrder), [data, websiteOrder]);
+  console.log({ websiteOrder });
+
+  const ordered = useMemo(
+    () => sortArrayByMap(websites, websiteOrder, 'website_id'),
+    [websites, websiteOrder],
+  );
 
   if (websites.length === 0) {
     return (
@@ -40,7 +45,7 @@ export default function WebsiteList({ data, 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

components/settings/DashboardSettingsButton.js

@@ -25,11 +25,7 @@ export default function DashboardSettingsButton() {
 
   function handleSelect(value) {
     if (value === 'charts') {
-      saveDashboard(state => {
-        const bs = { showCharts: !state.showCharts };
-        console.log('WTF', { state, bs });
-        return bs;
-      });
+      saveDashboard(state => ({ showCharts: !state.showCharts }));
     }
     if (value === 'order') {
       saveDashboard({ editing: true });