From fb39ce882226feaf25506c79e5c8626543e390ff Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 29 Aug 2022 20:57:34 -0700
Subject: [PATCH] Fixed dashboard ordering issue. Closes #1414

---
 components/pages/DashboardEdit.js | 10 ++++++++--
 components/pages/WebsiteList.js   |  7 +++++--
 lib/auth.js                       | 10 ++++++++--
 lib/security.js                   |  8 --------
 4 files changed, 21 insertions(+), 14 deletions(-)
 delete mode 100644 lib/security.js

diff --git a/components/pages/DashboardEdit.js b/components/pages/DashboardEdit.js
index d231a8fb..42e4cd66 100644
--- a/components/pages/DashboardEdit.js
+++ b/components/pages/DashboardEdit.js
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
-import { sortArrayByMap } from 'lib/array';
+import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
 import styles from './DashboardEdit.module.css';
 
@@ -21,7 +21,13 @@ export default function DashboardEdit({ websites }) {
   const { formatMessage } = useIntl();
   const [order, setOrder] = useState(websiteOrder || []);
 
-  const ordered = useMemo(() => sortArrayByMap(websites, order, 'website_id'), [websites, order]);
+  const ordered = useMemo(
+    () =>
+      websites
+        .map(website => ({ ...website, order: order.indexOf(website.website_id) }))
+        .sort(firstBy('order')),
+    [websites, order],
+  );
 
   function handleWebsiteDrag({ destination, source }) {
     if (!destination || destination.index === source.index) return;
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index 2c19c167..5e1f71bb 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -6,8 +6,8 @@ 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 { sortArrayByMap } from 'lib/array';
 import { useMemo } from 'react';
+import { firstBy } from 'thenby';
 
 const messages = defineMessages({
   noWebsites: {
@@ -25,7 +25,10 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   const { formatMessage } = useIntl();
 
   const ordered = useMemo(
-    () => sortArrayByMap(websites, websiteOrder, 'website_id'),
+    () =>
+      websites
+        .map(website => ({ ...website, order: websiteOrder.indexOf(website.website_id) || 0 }))
+        .sort(firstBy('order')),
     [websites, websiteOrder],
   );
 
diff --git a/lib/auth.js b/lib/auth.js
index 816a73ff..b50a923f 100644
--- a/lib/auth.js
+++ b/lib/auth.js
@@ -1,5 +1,5 @@
-import { parseSecureToken, parseToken } from 'next-basics';
-import { SHARE_TOKEN_HEADER } from './constants';
+import { parseSecureToken, parseToken, getItem } from 'next-basics';
+import { AUTH_TOKEN, SHARE_TOKEN_HEADER } from './constants';
 import { getWebsiteById } from 'queries';
 import { secret } from './crypto';
 
@@ -13,6 +13,12 @@ export async function getAuthToken(req) {
   }
 }
 
+export function getAuthHeader() {
+  const token = getItem(AUTH_TOKEN);
+
+  return token ? { authorization: `Bearer ${token}` } : {};
+}
+
 export async function isValidToken(token, validation) {
   try {
     const result = parseToken(token, secret());
diff --git a/lib/security.js b/lib/security.js
deleted file mode 100644
index 9a2a9ca1..00000000
--- a/lib/security.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getItem } from 'next-basics';
-import { AUTH_TOKEN } from './constants';
-
-export function getAuthHeader() {
-  const token = getItem(AUTH_TOKEN);
-
-  return token ? { authorization: `Bearer ${token}` } : {};
-}