From 9f2a499e268a7abb439c1d48b25992e4a4433c10 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Thu, 26 Nov 2020 17:01:10 -0600
Subject: [PATCH] Fix kind sorting differently on client and build

---
 components/search.vue |  4 ++++
 helpers/sort-list.js  | 21 +++++++++++++++++++++
 pages/index.vue       | 20 ++------------------
 pages/kind/_slug.vue  | 13 ++++++++++---
 4 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 helpers/sort-list.js

diff --git a/components/search.vue b/components/search.vue
index f1dd41e..0314579 100644
--- a/components/search.vue
+++ b/components/search.vue
@@ -69,6 +69,7 @@
                     :data-app-slug="app.slug"
                     class="relative"
                 >
+                    <!-- app.endpoint: {{ app.endpoint }} -->
                     <a
                         :href="app.endpoint"
                         class="flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-2 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-6 "
@@ -79,6 +80,7 @@
                             <div class="text-sm leading-5 font-bold">
                                 {{ app.text }}
                             </div>
+                            <!-- app.endpoint: {{ app.endpoint }} -->
                         </template>
                         <template v-else>
                             <client-only>
@@ -118,6 +120,8 @@
                                     <use href="#chevron-right" />
                                 </svg>
                             </client-only>
+
+                            <!-- app.endpoint: {{ app.endpoint }} -->
                         </template>
 
                     </a>
diff --git a/helpers/sort-list.js b/helpers/sort-list.js
new file mode 100644
index 0000000..3c47d27
--- /dev/null
+++ b/helpers/sort-list.js
@@ -0,0 +1,21 @@
+export function byTimeThenNull (appA, appB) {
+    // console.log('appA.lastUpdated', appA.lastUpdated)
+
+    // equal items sort equally
+    if (appA.lastUpdated === appB.lastUpdated) {
+        return 0;
+    }
+    // nulls sort after anything else
+    else if (appA.lastUpdated === null) {
+        return 1;
+    }
+    else if (appB.lastUpdated === null) {
+        return -1;
+    }
+
+    return appB.lastUpdated.timestamp - appA.lastUpdated.timestamp
+}
+
+export default function (appList) {
+    return  appList.sort(byTimeThenNull)
+}
diff --git a/pages/index.vue b/pages/index.vue
index e54ba15..6d1900c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -37,30 +37,14 @@
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 
+import { byTimeThenNull } from '~/helpers/sort-list.js'
+
 import appList from '~/static/app-list.json'
 import gameList from '~/game-list.json'
 
 // console.log('appList.length', appList.length)
 // console.log('gameList.length', gameList.length)
 
-function byTimeThenNull (appA, appB) {
-    // console.log('appA.lastUpdated', appA.lastUpdated)
-
-    // equal items sort equally
-    if (appA.lastUpdated === appB.lastUpdated) {
-        return 0;
-    }
-    // nulls sort after anything else
-    else if (appA.lastUpdated === null) {
-        return 1;
-    }
-    else if (appB.lastUpdated === null) {
-        return -1;
-    }
-
-    return appB.lastUpdated.timestamp - appA.lastUpdated.timestamp
-}
-
 const sortedAppList = appList.sort(byTimeThenNull)
 
 const mergedList = [
diff --git a/pages/kind/_slug.vue b/pages/kind/_slug.vue
index 8204852..064ef37 100644
--- a/pages/kind/_slug.vue
+++ b/pages/kind/_slug.vue
@@ -41,14 +41,16 @@
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 
+import { byTimeThenNull } from '~/helpers/sort-list.js'
+
 import appList from '~/static/app-list.json'
 
 export default {
     async asyncData ({ params: { slug } }) {
-
+        // Maybe I could import() here to reduce client script size
         return {
             slug,
-            app: appList.find(app => (app.slug === slug))
+            // app: appList.find(app => (app.slug === slug))
         }
     },
     components: {
@@ -67,9 +69,14 @@ export default {
             }).section
         },
         sectionAppList () {
-            return appList.filter(app => {
+
+            const list = appList.filter(app => {
                 return app.section.slug === this.slug
             })
+
+            const sortedList  = list.sort(byTimeThenNull)
+
+            return sortedList
         },
         supportedAppList () {
             return this.sectionAppList.filter(app => {