Refactored website ordering feature.

components/pages/Dashboard.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -7,19 +7,24 @@ import WebsiteList from 'components/pages/WebsiteList';
 import Button from 'components/common/Button';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
 import useFetch from 'hooks/useFetch';
-import useStore from 'store/app';
+import useDashboard from 'store/dashboard';
+import DashboardEdit from './DashboardEdit';
 import styles from './WebsiteList.module.css';
 
-const selector = state => state.dashboard;
+const messages = defineMessages({
+  dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
+  more: { id: 'label.more', defaultMessage: 'More' },
+});
 
 export default function Dashboard() {
   const router = useRouter();
   const { id } = router.query;
   const userId = id?.[0];
-  const store = useStore(selector);
-  const { showCharts, limit } = store;
+  const dashboard = useDashboard();
+  const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);
   const { data } = useFetch('/websites', { params: { user_id: userId } });
+  const { formatMessage } = useIntl();
 
   function handleMore() {
     setMax(max + limit);
@@ -32,15 +37,14 @@ export default function Dashboard() {
   return (
     <Page>
       <PageHeader>
-        <div>
-          <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-        </div>
-        <DashboardSettingsButton />
+        <div>{formatMessage(messages.dashboard)}</div>
+        {!editing && <DashboardSettingsButton />}
       </PageHeader>
-      <WebsiteList websites={data} showCharts={showCharts} limit={max} />
+      {editing && <DashboardEdit data={data} />}
+      {!editing && <WebsiteList data={data} showCharts={showCharts} limit={max} />}
       {max < data.length && (
         <Button className={styles.button} onClick={handleMore}>
-          <FormattedMessage id="label.more" defaultMessage="More" />
+          {formatMessage(messages.more)}
         </Button>
       )}
     </Page>

components/pages/DashboardEdit.js

@@ -0,0 +1,100 @@
+import { useState } 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';
+
+const messages = defineMessages({
+  save: { id: 'label.save', defaultMessage: 'Save' },
+  reset: { id: 'label.reset', defaultMessage: 'Reset' },
+  cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
+});
+
+const dragId = 'dashboard-website-ordering';
+
+export default function DashboardEdit({ data: websites }) {
+  const settings = useDashboard();
+  const { websiteOrder } = settings;
+  const { formatMessage } = useIntl();
+  const [order, setOrder] = useState(websiteOrder);
+
+  const ordered = useMemo(() => orderByWebsiteMap(websites, order), [websites, order]);
+
+  console.log({ order, ordered });
+
+  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);
+
+    setOrder(
+      orderedWebsites.map((i, k) => ({ [i.website_uuid]: k })).reduce((a, b) => ({ ...a, ...b })),
+    );
+  }
+
+  function handleSave() {
+    saveDashboard({
+      editing: false,
+      websiteOrder: order,
+    });
+  }
+
+  function handleCancel() {
+    saveDashboard({ editing: false });
+  }
+
+  function handleReset() {
+    setOrder({});
+    saveDashboard({ websiteOrder: {} });
+  }
+
+  return (
+    <>
+      <div className={styles.buttons}>
+        <Button onClick={handleSave} size="small">
+          {formatMessage(messages.save)}
+        </Button>
+        <Button onClick={handleCancel} size="small">
+          {formatMessage(messages.cancel)}
+        </Button>
+        <Button onClick={handleReset} size="small">
+          {formatMessage(messages.reset)}
+        </Button>
+      </div>
+      <div className={styles.dragActive}>
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
+                {ordered.map(({ website_id, name, domain }, index) => (
+                  <Draggable key={website_id} draggableId={`${dragId}-${website_id}`} index={index}>
+                    {provided => (
+                      <div
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        className={styles.item}
+                      >
+                        <h1>{name}</h1>
+                        <h2>{domain}</h2>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </>
+  );
+}

components/pages/DashboardEdit.module.css

@@ -0,0 +1,34 @@
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.item {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid var(--gray300);
+}
+
+.item + .item {
+  margin-top: 10px;
+}
+
+.item h1 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.item h2 {
+  font-size: 14px;
+  color: var(--gray700);
+}
+
+.dragActive {
+  cursor: grab;
+}
+
+.dragActive:active {
+  cursor: grabbing;
+}

components/pages/WebsiteList.js

@@ -1,4 +1,3 @@
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import WebsiteChart from 'components/metrics/WebsiteChart';
@@ -6,37 +5,14 @@ import Page from 'components/layout/Page';
 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 { useMemo } from 'react';
-import useStore, { setDashboard } from 'store/app';
 
-const selector = state => state.dashboard;
+export default function WebsiteList({ data, showCharts, limit }) {
+  const { websiteOrder } = useDashboard();
 
-export default function WebsiteList({ websites, showCharts, limit }) {
-  const store = useStore(selector);
-  const { websiteOrdering, changeOrderMode } = store;
-
-  const ordered = useMemo(
-    () => orderByWebsiteMap(websites, websiteOrdering),
-    [websites, websiteOrdering],
-  );
-
-  const dragId = 'dashboard-website-ordering';
-
-  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 })),
-    });
-  }
+  const websites = useMemo(() => orderByWebsiteMap(data, websiteOrder), [data, websiteOrder]);
 
   if (websites.length === 0) {
     return (
@@ -58,60 +34,19 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   }
 
   return (
-    <div className={changeOrderMode && styles.websiteDragActive}>
-      {changeOrderMode ? (
-        <DragDropContext onDragEnd={handleWebsiteDrag}>
-          <Droppable droppableId={dragId}>
-            {(provided, snapshot) => (
-              <div
-                {...provided.droppableProps}
-                ref={provided.innerRef}
-                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
-              >
-                {ordered.map(({ website_id, name, domain }, index) =>
-                  index < limit ? (
-                    <Draggable
-                      key={website_id}
-                      draggableId={`${dragId}-${website_id}`}
-                      index={index}
-                    >
-                      {provided => (
-                        <div
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                          {...provided.dragHandleProps}
-                          className={styles.website}
-                        >
-                          <WebsiteChart
-                            websiteId={website_id}
-                            title={name}
-                            domain={domain}
-                            showChart={changeOrderMode ? false : showCharts}
-                            showLink
-                          />
-                        </div>
-                      )}
-                    </Draggable>
-                  ) : null,
-                )}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-      ) : (
-        ordered.map(({ website_id, name, domain }, index) =>
-          index < limit ? (
-            <div key={website_id} className={styles.website}>
-              <WebsiteChart
-                websiteId={website_id}
-                title={name}
-                domain={domain}
-                showChart={showCharts}
-                showLink
-              />
-            </div>
-          ) : null,
-        )
+    <div>
+      {websites.map(({ website_id, name, domain }, index) =>
+        index < limit ? (
+          <div key={website_id} className={styles.website}>
+            <WebsiteChart
+              websiteId={website_id}
+              title={name}
+              domain={domain}
+              showChart={showCharts}
+              showLink
+            />
+          </div>
+        ) : null,
       )}
     </div>
   );

components/pages/WebsiteList.module.css

@@ -9,12 +9,3 @@
   border-bottom: 0;
   margin-bottom: 20px;
 }
-
-.websiteDragActive {
-  opacity: 0.6;
-  cursor: grab;
-}
-
-.websiteDragActive:active {
-  cursor: grabbing;
-}

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