Move reordering of websites onto dashboard

components/pages/WebsiteList.js

@@ -1,3 +1,4 @@
+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';
@@ -7,19 +8,36 @@ import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
 import { orderByWebsiteMap } from 'lib/format';
 import { useMemo } from 'react';
-import useStore from 'store/app';
+import useStore, { setDashboard } from 'store/app';
 
 const selector = state => state.dashboard;
 
 export default function WebsiteList({ websites, showCharts, limit }) {
   const store = useStore(selector);
-  const { websiteOrdering } = store;
+  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 })),
+    });
+  }
+
   if (websites.length === 0) {
     return (
       <Page>
@@ -40,19 +58,57 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   }
 
   return (
-    <div>
-      {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 className={changeOrderMode && styles.websiteDragActive}>
+      {changeOrderMode ? (
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {provided => (
+              <div {...provided.droppableProps} ref={provided.innerRef}>
+                {ordered.map(({ website_id, name, domain }, index) =>
+                  index < limit ? (
+                    <div key={website_id} className={styles.website}>
+                      <Draggable
+                        key={website_id}
+                        draggableId={`${dragId}-${website_id}`}
+                        index={index}
+                      >
+                        {provided => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                          >
+                            <WebsiteChart
+                              websiteId={website_id}
+                              title={name}
+                              domain={domain}
+                              showChart={showCharts}
+                              showLink
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    </div>
+                  ) : 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>
   );

components/pages/WebsiteList.module.css

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