Refactored website ordering feature.

components/settings/DashboardSettingsButton.js

@@ -1,57 +1,40 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import MenuButton from 'components/common/MenuButton';
 import Gear from 'assets/gear.svg';
-import useStore, { setDashboard } from 'store/app';
-import Button from 'components/common/Button';
-import Check from 'assets/check.svg';
-import styles from './DashboardSettingsButton.module.css';
+import { saveDashboard } from 'store/dashboard';
 
-const selector = state => state.dashboard;
+const messages = defineMessages({
+  toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
+  editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
+});
 
 export default function DashboardSettingsButton() {
-  const settings = useStore(selector);
+  const { formatMessage } = useIntl();
 
   const menuOptions = [
     {
-      label: <FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />,
+      label: formatMessage(messages.toggleCharts),
       value: 'charts',
     },
     {
-      label: <FormattedMessage id="message.edit-dashboard" defaultMessage="Edit dashboard" />,
+      label: formatMessage(messages.editDashboard),
       value: 'order',
     },
   ];
 
   function handleSelect(value) {
     if (value === 'charts') {
-      setDashboard({ ...settings, showCharts: !settings.showCharts });
+      saveDashboard(state => {
+        const bs = { showCharts: !state.showCharts };
+        console.log('WTF', { state, bs });
+        return bs;
+      });
     }
     if (value === 'order') {
-      setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
+      saveDashboard({ editing: true });
     }
-    //setDashboard(value);
   }
 
-  function handleExitChangeOrderMode() {
-    setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
-  }
-
-  function resetWebsiteOrder() {
-    setDashboard({ ...settings, websiteOrdering: {} });
-  }
-
-  if (settings.changeOrderMode)
-    return (
-      <div className={styles.buttonGroup}>
-        <Button onClick={resetWebsiteOrder} size="small">
-          <FormattedMessage id="label.reset-order" defaultMessage="Reset order" />
-        </Button>
-        <Button onClick={handleExitChangeOrderMode} size="small" icon={<Check />}>
-          <FormattedMessage id="label.done" defaultMessage="Done" />
-        </Button>
-      </div>
-    );
-
   return <MenuButton icon={<Gear />} options={menuOptions} onSelect={handleSelect} hideLabel />;
 }

components/settings/WebsiteSettings.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -24,12 +24,8 @@ 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 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();
@@ -41,13 +37,8 @@ export default function WebsiteSettings() {
   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 && (
@@ -196,7 +187,7 @@ export default function WebsiteSettings() {
           <FormattedMessage id="label.add-website" defaultMessage="Add website" />
         </Button>
       </PageHeader>
-      <Table columns={user.is_admin ? adminColumns : columns} rows={ordered} empty={empty} />
+      <Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />