Fix serverless crash + Version Filters on reload (#1050)

components/ui/VersionFilterControl.vue

@@ -18,7 +18,7 @@
       :show-labels="false"
       :allow-empty="true"
       placeholder="Filter loader..."
-      @update:model-value="updateVersionFilters()"
+      @update:model-value="updateQuery"
     />
     <Multiselect
       v-if="gameVersionFilters.length > 1"
@@ -36,7 +36,7 @@
       :hide-selected="true"
       :selectable="() => selectedGameVersions.length <= 6"
       placeholder="Filter versions..."
-      @update:model-value="updateVersionFilters()"
+      @update:model-value="updateQuery"
     />
     <Multiselect
       v-if="versionTypeFilters.length > 1"
@@ -51,7 +51,7 @@
       :show-labels="false"
       :allow-empty="true"
       placeholder="Filter channels..."
-      @update:model-value="updateVersionFilters()"
+      @update:model-value="updateQuery"
     />
     <Checkbox
       v-if="
@@ -73,7 +73,7 @@
           selectedLoaders = []
           selectedGameVersions = []
           selectedVersionTypes = []
-          updateVersionFilters()
+          updateQuery()
         }
       "
     >
@@ -88,7 +88,6 @@ import Multiselect from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 
-const emit = defineEmits(['updateVersions'])
 const props = defineProps({
   versions: {
     type: Array,
@@ -124,26 +123,9 @@ const gameVersionFilters = shallowRef(
 const versionTypeFilters = shallowRef(Array.from(tempReleaseChannels))
 const includeSnapshots = ref(route.query.s === 'true')
 
-const selectedGameVersions = shallowRef(route.query.g ?? [])
+const selectedGameVersions = shallowRef(getArrayOrString(route.query.g) ?? [])
-const selectedLoaders = shallowRef(route.query.l ?? [])
+const selectedLoaders = shallowRef(getArrayOrString(route.query.l) ?? [])
-const selectedVersionTypes = shallowRef(route.query.c ?? [])
+const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
-
-async function updateVersionFilters() {
-  const temp = props.versions.filter(
-    (projectVersion) =>
-      (selectedGameVersions.value.length === 0 ||
-        selectedGameVersions.value.some((gameVersion) =>
-          projectVersion.game_versions.includes(gameVersion)
-        )) &&
-      (selectedLoaders.value.length === 0 ||
-        selectedLoaders.value.some((loader) => projectVersion.loaders.includes(loader))) &&
-      (selectedVersionTypes.value.length === 0 ||
-        selectedVersionTypes.value.includes(projectVersion.version_type))
-  )
-
-  await updateQuery()
-  emit('updateVersions', temp)
-}
 
 async function updateQuery() {
   const router = useRouter()

composables/query.js

@@ -0,0 +1,7 @@
+export const getArrayOrString = (x) => {
+  if (typeof x === 'string' || x instanceof String) {
+    return [x]
+  } else {
+    return x
+  }
+}

pages/[type]/[id]/changelog.vue

@@ -7,15 +7,7 @@
       <Meta name="apple-mobile-web-app-title" :content="`${props.project.title} - Changelog`" />
       <Meta name="og:description" :content="metaDescription" />
     </Head>
-    <VersionFilterControl
+    <VersionFilterControl :versions="props.versions" />
-      :versions="props.versions"
-      @update-versions="
-        (v) => {
-          filteredVersions = v
-          switchPage(1)
-        }
-      "
-    />
     <Pagination
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
@@ -114,15 +106,32 @@ const metaDescription = computed(
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
-const filteredVersions = shallowRef(props.versions)
+const filteredVersions = computed(() => {
+  const selectedGameVersions = getArrayOrString(route.query.g) ?? []
+  const selectedLoaders = getArrayOrString(route.query.l) ?? []
+  const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
 
-async function switchPage(page) {
+  currentPage.value = 1
+  return props.versions.filter(
+    (projectVersion) =>
+      (selectedGameVersions.length === 0 ||
+        selectedGameVersions.some((gameVersion) =>
+          projectVersion.game_versions.includes(gameVersion)
+        )) &&
+      (selectedLoaders.length === 0 ||
+        selectedLoaders.some((loader) => projectVersion.loaders.includes(loader))) &&
+      (selectedVersionTypes.length === 0 ||
+        selectedVersionTypes.includes(projectVersion.version_type))
+  )
+})
+
+function switchPage(page) {
   currentPage.value = page
 
   const router = useRouter()
   const route = useRoute()
 
-  await router.replace({
+  router.replace({
     query: {
       ...route.query,
       p: currentPage.value !== 1 ? currentPage.value : undefined,

pages/[type]/[id]/versions.vue

@@ -22,15 +22,7 @@
       </span>
       <DropArea :accept="acceptFileFromProjectType(project.project_type)" @change="handleFiles" />
     </div>
-    <VersionFilterControl
+    <VersionFilterControl :versions="props.versions" />
-      :versions="props.versions"
-      @update-versions="
-        (v) => {
-          filteredVersions = v
-          switchPage(1)
-        }
-      "
-    />
     <Pagination
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
@@ -161,15 +153,32 @@ const metaDescription = computed(
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
-const filteredVersions = shallowRef(props.versions)
+const filteredVersions = computed(() => {
+  const selectedGameVersions = getArrayOrString(route.query.g) ?? []
+  const selectedLoaders = getArrayOrString(route.query.l) ?? []
+  const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
 
-async function switchPage(page) {
+  currentPage.value = 1
+  return props.versions.filter(
+    (projectVersion) =>
+      (selectedGameVersions.length === 0 ||
+        selectedGameVersions.some((gameVersion) =>
+          projectVersion.game_versions.includes(gameVersion)
+        )) &&
+      (selectedLoaders.length === 0 ||
+        selectedLoaders.some((loader) => projectVersion.loaders.includes(loader))) &&
+      (selectedVersionTypes.length === 0 ||
+        selectedVersionTypes.includes(projectVersion.version_type))
+  )
+})
+
+function switchPage(page) {
   currentPage.value = page
 
   const router = useRouter()
   const route = useRoute()
 
-  await router.replace({
+  router.replace({
     query: {
       ...route.query,
       p: currentPage.value !== 1 ? currentPage.value : undefined,

pages/search/[searchProjectType].vue

@@ -406,14 +406,6 @@ export default defineNuxtComponent({
     const currentPage = ref(1)
     const projectType = ref({ id: 'mod', display: 'mod', actual: 'mod' })
 
-    function getArrayOrString(x) {
-      if (typeof x === 'string' || x instanceof String) {
-        return [x]
-      } else {
-        return x
-      }
-    }
-
     if (route.query.q) {
       query.value = route.query.q
     }

plugins/scroll.client.js

@@ -2,6 +2,6 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
 
   nuxtApp.hooks.hook('page:transition:finish', () => {
-    document.querySelector('[data-scroll]')?.scrollTo({ top: 9 })
+    document.querySelector('[data-scroll]')?.scrollTo({ top: 0 })
   })
 })

server/plugins/theme.js

@@ -1,34 +1,38 @@
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
-    const cookies = parseCookies(event)
+    try {
+      const cookies = parseCookies(event)
 
-    if (cookies && cookies['color-mode']) {
+      if (cookies && cookies['color-mode']) {
-      const theme = JSON.parse(cookies['color-mode'])
+        const theme = JSON.parse(cookies['color-mode'])
 
-      html.htmlAttrs.push(`class="${theme.value}-mode"`)
+        html.htmlAttrs.push(`class="${theme.value}-mode"`)
-    } else {
+      } else {
-      html.htmlAttrs.push(`class="dark-mode"`)
+        html.htmlAttrs.push(`class="dark-mode"`)
-    }
-
-    // Reset cookie attributes to correct ones
-    if (cookies) {
-      const opts = {
-        maxAge: 60 * 60 * 24 * 365 * 10,
-        sameSite: 'lax',
-        secure: true,
-        httpOnly: false,
-        path: '/',
       }
 
-      if (cookies['auth-token']) {
+      // Reset cookie attributes to correct ones
-        setCookie(event, 'auth-token', cookies['auth-token'], opts)
+      if (cookies) {
-      }
+        const opts = {
-      if (cookies['color-mode']) {
+          maxAge: 60 * 60 * 24 * 365 * 10,
-        setCookie(event, 'color-mode', cookies['color-mode'], opts)
+          sameSite: 'lax',
-      }
+          secure: true,
-      if (cookies.cosmetics) {
+          httpOnly: false,
-        setCookie(event, 'cosmetics', cookies.cosmetics, opts)
+          path: '/',
+        }
+
+        if (cookies['auth-token']) {
+          setCookie(event, 'auth-token', cookies['auth-token'], opts)
+        }
+        if (cookies['color-mode']) {
+          setCookie(event, 'color-mode', cookies['color-mode'], opts)
+        }
+        if (cookies.cosmetics) {
+          setCookie(event, 'cosmetics', cookies.cosmetics, opts)
+        }
       }
+    } catch (err) {
+      console.error(err)
     }
   })
 })