Merge branch 'master' into feat/tv

# Conflicts:
#	README.md
#	helpers/get-list.js

pages/index.vue

@@ -12,8 +12,19 @@
                 :app-list="allList"
                 :quick-buttons="quickButtons"
                 :initial-limit="200"
-                @update:query="query = $event"
-            />
+                @update:query="onQueryUpdate"
+            >
+                <template v-slot:before-search>
+                    <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
+
+                        <ListSummary
+                            :custom-numbers="customSummaryNumbers"
+                            class="max-w-4xl"
+                        />
+
+                    </div>
+                </template>
+            </Search>
 
             <div class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
                 <LinkButton
@@ -46,29 +57,50 @@
 </template>
 
 <script>
+import axios from 'axios'
+
+import getListSummaryNumbers from '~/helpers/get-list-summary-numbers.js'
+
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
+import ListSummary from '~/components/list-summary.vue'
 
 export default {
     async asyncData () {
         // const { default: appList } = await import('~/static/app-list.json')
         // const { default: gamelist } = await import('~/static/game-list.json')
 
-        const { allList } = await import('~/helpers/get-list.js')
+        const { sortedAppList, allList } = await import('~/helpers/get-list.js')
+
+
 
         return {
-            allList
+            // Filter app list to leave out data not needed for search
+            initialAppList: sortedAppList.map( app => {
+                return {
+                    name: app.name,
+                    status: app.status,
+                    slug: app.slug,
+                    // endpoint: app.endpoint,
+                    text: app.text,
+                    lastUpdated: app.lastUpdated,
+                    category: app.category,
+                }
+            }),
+            customSummaryNumbers: getListSummaryNumbers(allList)
         }
     },
     components: {
         Search,
         LinkButton,
-        AllUpdatesSubscribe
+        AllUpdatesSubscribe,
+        ListSummary
     },
     data: function () {
         return {
             query: '',
+            fetchedAppList: [],
             quickButtons: [
                 {
                     label: '✅ Full Native Support',
@@ -112,6 +144,45 @@ export default {
                 },
             ]
         }
+    },
+    computed: {
+        allList () {
+            return [
+                ...this.initialAppList,
+                ...this.fetchedAppList
+            ]
+        }
+    },
+    methods: {
+        async onQueryUpdate ( $event ) {
+            // console.log('$event', $event)
+            this.query = $event
+
+            // If fetched lists have already been loaded in
+            // OR if there's no query
+            // then stop
+            if (this.fetchedAppList.length !== 0 || this.query.trim().length === 0) return
+
+            const fetchedListUrls = [
+                '/game-list.json',
+                '/homebrew-list.json'
+            ]
+
+            const fetchedLists = await Promise.all(fetchedListUrls.map( async listUrl => {
+                // Fetch List
+                const response = await axios.get(listUrl)
+                // Extract apps from response data
+                const fetchedApps = response.data
+
+                return fetchedApps
+            }))
+
+            // console.log('fetchedLists', fetchedLists)
+
+            this.fetchedAppList = fetchedLists.flat(1)
+
+            return
+        }
     }
 }
 </script>