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 classNames from 'classnames';
 import Button from 'components/common/Button';
-import { useMemo } from 'react';
-import { orderByWebsiteMap } from 'lib/format';
+import { sortArrayByMap } from 'lib/array';
+import useDashboard, { saveDashboard } from 'store/dashboard';
 import styles from './DashboardEdit.module.css';
-import classNames from 'classnames';
 
 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 });

lib/array.js

@@ -9,3 +9,10 @@ export function chunk(arr, size) {
 
   return chunks;
 }
+
+export function sortArrayByMap(arr, map = [], key) {
+  if (!arr) return [];
+  if (map.length === 0) return arr;
+
+  return map.map(id => arr.find(item => item[key] === id));
+}

lib/format.js

@@ -78,14 +78,3 @@ 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;
-}

lib/web.js

@@ -69,8 +69,6 @@ export const getItem = (key, session) => {
       return JSON.parse(value);
     }
   }
-
-  return null;
 };
 
 export const removeItem = (key, session) => {

store/dashboard.js

@@ -5,15 +5,14 @@ import { getItem, setItem } from 'lib/web';
 export const initialState = {
   showCharts: true,
   limit: DEFAULT_WEBSITE_LIMIT,
-  websiteOrder: {},
+  websiteOrder: [],
   editing: false,
 };
 
 const store = create(() => ({ ...initialState, ...getItem(DASHBOARD_CONFIG) }));
 
 export function saveDashboard(settings) {
-  const state = typeof settings === 'function' ? settings(store.getState()) : settings;
-  store.setState(state);
+  store.setState(settings);
 
   setItem(DASHBOARD_CONFIG, store.getState());
 }