safetwitch/src/views/HomepageView.vue

<script lang="ts">
import { ref, type Ref } from 'vue'

export default {
  async setup() {
    const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover`)
    let data: Ref<any[] | undefined> = ref()
    let frontend_url = import.meta.env.VITE_INSTANCE_URL
    data.value = await res.json()


    return {
      data,
      frontend_url,
      filterTags: ''
    }
  },
  methods: {
    abbreviate(text: number) {
      return Intl.NumberFormat('en-US', {
        //@ts-ignore
        notation: 'compact',
        maximumFractionDigits: 1
      }).format(text)
    },

    filterSearches(toFilter: string) {
      const categories = this.$refs.categoryItem
      const wantedTags = toFilter.split(',').filter((v) => v.toLowerCase())

      for (let category of categories as any) {
        let tagElements = category.getElementsByTagName("span")
        let tags = []

        for (let tag of tagElements) {
          tags.push(tag.innerText.toLowerCase())
        }

        // Create sets from the arrays
        const [set1, set2] = [new Set(wantedTags), new Set(tags)]
        const common = [...set1].filter(x => set2.has(x));
        
        console.log(wantedTags)

        if(common.length === wantedTags.length) {
          category.style.display = ""
        } else if (wantedTags[0] === "") {
          category.style.display = ""
          console.log('ok')
        } else {
          category.style.display = "none"
        }
      }
    },
    getNextCategory() {
      window.onscroll = async () => {
        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
        if (bottomOfWindow && this.data) {
          const cursor = this.data[this.data.length - 1].cursor
          if(!cursor) return
          const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/?cursor=${cursor}`)
          const data = await res.json()

          for (let category of data) {
            this.data.push(category)
          }

        } 
      }
    }
  },
  mounted() {
    this.getNextCategory()
  }
}
</script>

<template>
  <div class="max-w-5xl mx-auto">
    <div class="p-2">
      <h1 class="font-bold text-5xl text-white">Discover</h1>
      <p class="text-xl text-white">Sort through popular categories</p>

      <div class="pt-5 inline-flex text-white">
        <p class="mr-2 font-bold text-white">Filter by tag</p>
        <form class="relative">
          <label for="searchBar" class="hidden">Search</label>
          <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
          <input
            type="text"
            id="searchBar"
            name="searchBar"
            placeholder="Search"
            v-model="filterTags"
            @keyup="filterSearches(filterTags)"
            class="rounded-md p-1 pl-8 text-black bg-neutral-500 placeholder:text-white"
          />
        </form>
      </div>
    </div>

    <ul ref="categoryList">
      <li
        v-for="category in data"
        :key="category"
        ref="categoryItem"
        class="inline-flex m-2 hover:scale-105 transition-transform"
      >
        <div class="bg-ctp-crust max-w-[13.5rem] rounded-lg">
          <router-link :to="`/game/${category.name}`">
            <img :src="category.image" class="rounded-lg rounded-b-none" />
          </router-link>

          <div class="p-2">
            <div>
              <p class="font-bold text-white text-xl">{{ category.displayName }}</p>
              <p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p>
            </div>

            <ul class="h-8 overflow-hidden">
              <li v-for="tag in category.tags" :key="tag" class="inline-flex">
                <span
                  class="p-2.5 py-1.5 bg-ctp-surface0 rounded-md m-0.5 text-xs font-bold text-white"
                  >{{ tag }}</span
                >
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>