Fix #1109; extract a composable

components/ui/Pagination.vue

@@ -50,70 +50,54 @@
   </div>
 </template>
 
-<script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
-
-export default {
-  components: {
-    GapIcon,
-    LeftArrowIcon,
-    RightArrowIcon,
-  },
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-    },
-    count: {
-      type: Number,
-      default: 1,
-    },
-    linkFunction: {
-      type: Function,
-      default() {
-        return () => '/'
-      },
-    },
-  },
-  emits: ['switch-page'],
-  computed: {
-    pages() {
-      let pages = []
-
-      if (this.count > 4) {
-        if (this.page + 3 >= this.count) {
-          pages = [
-            1,
-            '-',
-            this.count - 4,
-            this.count - 3,
-            this.count - 2,
-            this.count - 1,
-            this.count,
-          ]
-        } else if (this.page > 4) {
-          pages = [1, '-', this.page - 1, this.page, this.page + 1, '-', this.count]
-        } else {
-          pages = [1, 2, 3, 4, 5, '-', this.count]
-        }
-      } else {
-        pages = Array.from({ length: this.count }, (_, i) => i + 1)
-      }
-
-      return pages
-    },
-  },
-  methods: {
-    switchPage(newPage) {
-      this.$emit('switch-page', newPage)
-    },
-  },
+<script lang="ts" setup>
+import GapIcon from "~/assets/images/utils/gap.svg";
+import LeftArrowIcon from "~/assets/images/utils/left-arrow.svg";
+import RightArrowIcon from "~/assets/images/utils/right-arrow.svg";
+
+const props = withDefaults(defineProps<{
+  page: number,
+  count: number,
+  linkFunction: (page: number) => string
+}>(), {
+  page: 1,
+  count: 1,
+  linkFunction: (_: number) => "/"
+});
+
+const pages = computed((): any[] => {
+  if (props.count <= 4) {
+    return Array.from({ length: props.count }, (_, i) => i + 1);
+  }
+
+  if (props.page + 3 >= props.count) {
+    return [
+      1,
+      "-",
+      props.count - 4,
+      props.count - 3,
+      props.count - 2,
+      props.count - 1,
+      props.count
+    ];
+  }
+
+  if (props.page > 4) {
+    return [1, "-", props.page - 1, props.page, props.page + 1, "-", props.count];
+  }
+
+  return [1, 2, 3, 4, 5, "-", props.count];
+});
+
+
+const emits = defineEmits(["switch-page"]);
+
+function switchPage(newPage: number) {
+  emits("switch-page", Math.min(Math.max(newPage, 1), props.count));
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 a {
   color: var(--color-button-text);
   box-shadow: var(--shadow-raised), var(--shadow-inset);
@@ -123,38 +107,41 @@ a {
   border-radius: 2rem;
   background: var(--color-raised-bg);
 
-  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
-    outline 0.2s ease-in-out;
+  transition: opacity 0.5s ease-in-out,
+  filter 0.2s ease-in-out,
+  transform 0.05s ease-in-out,
+  outline 0.2s ease-in-out;
+}
 
-  &.page-number.current {
-    background: var(--color-brand);
-    color: var(--color-brand-inverted);
-    cursor: default;
-  }
+a.page-number.current {
+  background: var(--color-brand);
+  color: var(--color-brand-inverted);
+  cursor: default;
+}
 
-  &.paginate.disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-    filter: grayscale(50%);
-    opacity: 0.5;
-  }
+a.paginate.disabled {
+  background-color: transparent;
+  cursor: not-allowed;
+  filter: grayscale(50%);
+  opacity: 0.5;
+}
 
-  &:hover:not(&:disabled) {
-    filter: brightness(0.85);
-  }
+a:hover:not(:disabled) {
+  filter: brightness(0.85);
+}
 
-  &:active:not(&:disabled) {
-    transform: scale(0.95);
-    filter: brightness(0.8);
-  }
+a:active:not(:disabled) {
+  transform: scale(0.95);
+  filter: brightness(0.8);
 }
 
 .has-icon {
   display: flex;
   align-items: center;
-  svg {
-    width: 1em;
-  }
+}
+
+.has-icon svg {
+  width: 1em;
 }
 
 .page-number-container,
@@ -168,10 +155,11 @@ a,
 .paginates {
   height: 2em;
   margin: 0.5rem 0;
-  > div,
-  .has-icon {
-    margin: 0 0.3em;
-  }
+}
+
+.paginates > div,
+.paginates .has-icon {
+  margin: 0 0.3em;
 }
 
 .left-arrow {

composables/arrays.ts

@@ -0,0 +1,12 @@
+type query = string | null
+export function arrayFromQuery(x?: query | query[] | undefined): string[] {
+  if (typeof x === 'string') {
+    return [x]
+  } else {
+    return (x ?? []) as string[]
+  }
+}
+
+export function intersection(A: any[], B: any[]): any[] {
+  return A.filter((x) => B.includes(x))
+}

composables/useFilteredVersions.ts

@@ -0,0 +1,37 @@
+import { Ref } from 'vue'
+
+interface Version {
+  game_versions: any[]
+  loaders: any[]
+  version_type: any
+}
+
+export default (unfilteredVersions: Ref<Version[]> | Version[], onQueryChange: () => void) => {
+  const route = useRoute()
+
+  watch(
+    () => `${route.query.g}, ${route.query.l}, ${route.query.c}`,
+    (_) => onQueryChange()
+  )
+
+  return computed((): Version[] => {
+    let filteredVersions = unref(unfilteredVersions)
+
+    const selectedGameVersions = arrayFromQuery(route.query.g)
+    if (selectedGameVersions.length > 0) {
+      filteredVersions = filteredVersions.filter(v => intersection(selectedGameVersions, v.game_versions).length > 0)
+    }
+
+    const selectedLoaders = arrayFromQuery(route.query.l)
+    if (selectedLoaders.length > 0) {
+      filteredVersions = filteredVersions.filter((v) => intersection(selectedLoaders, v.loaders).length > 0)
+    }
+
+    const selectedVersionTypes = arrayFromQuery(route.query.c)
+    if (selectedVersionTypes.length > 0) {
+      filteredVersions = filteredVersions.filter((v) => selectedVersionTypes.includes(v.version_type))
+    }
+
+    return filteredVersions
+  })
+}

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

@@ -12,7 +12,7 @@
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
       class="pagination-before"
-      :link-function="(page) => `?page=${page}`"
+      :link-function="(page) => `?p=${page}`"
       @switch-page="switchPage"
     />
     <div class="card">
@@ -68,7 +68,7 @@
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
       class="pagination-before"
-      :link-function="(page) => `?page=${page}`"
+      :link-function="(page) => `?p=${page}`"
       @switch-page="switchPage"
     />
   </div>
@@ -106,24 +106,7 @@ const metaDescription = computed(
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
-const filteredVersions = computed(() => {
-  const selectedGameVersions = getArrayOrString(route.query.g) ?? []
-  const selectedLoaders = getArrayOrString(route.query.l) ?? []
-  const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
-
-  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))
-  )
-})
+const filteredVersions = useFilteredVersions(props.versions, () => switchPage(1))
 
 function switchPage(page) {
   currentPage.value = page

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

@@ -27,7 +27,7 @@
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
       class="pagination-before"
-      :link-function="(page) => `?page=${page}`"
+      :link-function="(page) => `?p=${page}`"
       @switch-page="switchPage"
     />
     <div v-if="filteredVersions.length > 0" id="all-versions" class="universal-card all-versions">
@@ -98,7 +98,7 @@
       :page="currentPage"
       :count="Math.ceil(filteredVersions.length / 20)"
       class="pagination-before"
-      :link-function="(page) => `?page=${page}`"
+      :link-function="(page) => `?p=${page}`"
       @switch-page="switchPage"
     />
   </div>
@@ -153,24 +153,7 @@ const metaDescription = computed(
 
 const route = useRoute()
 const currentPage = ref(Number(route.query.p ?? 1))
-const filteredVersions = computed(() => {
-  const selectedGameVersions = getArrayOrString(route.query.g) ?? []
-  const selectedLoaders = getArrayOrString(route.query.l) ?? []
-  const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
-
-  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))
-  )
-})
+const filteredVersions = useFilteredVersions(props.versions, () => switchPage(1))
 
 function switchPage(page) {
   currentPage.value = page