feat(app): show random featured projects on home screen

apps/app-frontend/src/pages/Index.vue

@@ -7,7 +7,7 @@ import { profile_listener } from '@/helpers/events'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
-import { get_search_results } from '@/helpers/cache.js'
+import { useFeaturedProjects } from '@/store/featuredProjects.js'
 
 const featuredModpacks = ref({})
 const featuredMods = ref({})
@@ -51,36 +51,26 @@ const getInstances = async () => {
   filter.value = filters.join(' AND ')
 }
 
-const getFeaturedModpacks = async () => {
-  const response = await get_search_results(
-    `?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
-  )
+await getInstances()
 
-  if (response) {
-    featuredModpacks.value = response.result.hits
-  } else {
-    featuredModpacks.value = []
-  }
-}
-const getFeaturedMods = async () => {
-  const response = await get_search_results('?facets=[["project_type:mod"]]&limit=10&index=follows')
+let featuredProjects = useFeaturedProjects()
 
-  if (response) {
-    featuredMods.value = response.result.hits
-  } else {
-    featuredModpacks.value = []
-  }
+async function updateFeaturedProjects() {
+  let [modpacks, mods] = await Promise.all([
+    await featuredProjects.getFeaturedModpack(filter),
+    await featuredProjects.getFeaturedMods(),
+  ])
+  featuredModpacks.value = modpacks
+  featuredMods.value = mods
 }
 
-await getInstances()
-
-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+await updateFeaturedProjects()
 
 const unlistenProfile = await profile_listener(async (e) => {
   await getInstances()
 
   if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+    await updateFeaturedProjects()
   }
 })
 

apps/app-frontend/src/store/featuredProjects.js

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia'
+import { get_search_results } from '@/helpers/cache.js'
+
+export const useFeaturedProjects = defineStore('featuredProjects', {
+  state: () => ({
+    modpacks: undefined,
+    mods: undefined,
+  }),
+  actions: {
+    async getFeaturedModpack(filter) {
+      if (this.modpacks?.length) {
+        return this.modpacks
+      }
+
+      const offset = Math.floor(Math.random() * 100)
+
+      const response = await get_search_results(
+        `?facets=[["project_type:modpack"]]&limit=10&filters=${filter.value}&offset=${offset}`,
+      )
+
+      if (response) {
+        this.modpacks = response.result.hits
+      } else {
+        this.modpacks = []
+      }
+
+      return this.modpacks
+    },
+    async getFeaturedMods() {
+      if (this.mods?.length) {
+        return this.mods
+      }
+
+      const offset = Math.floor(Math.random() * 100)
+
+      const response = await get_search_results(
+        `?facets=[["project_type:mod"]]&limit=10&offset=${offset}`,
+      )
+
+      if (response) {
+        this.mods = response.result.hits
+      } else {
+        this.mods = []
+      }
+
+      return this.mods
+    },
+  },
+})