Fixed dashboard ordering issue. Closes #1414

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;

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],
   );
 

lib/auth.js

@@ -1,5 +1,5 @@
-import { parseSecureToken, parseToken } from 'next-basics';
+import { parseSecureToken, parseToken, getItem } from 'next-basics';
-import { SHARE_TOKEN_HEADER } from './constants';
+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());

lib/security.js

@@ -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}` } : {};
-}