Alisa/web/src/components/MainPage.vue

<template>
  <div>
    <HeaderBar />
    <div class="ma-8">
      <div v-if="isPending">Loading...</div>
      <div v-else-if="isError">Error: {{ error?.message }}</div>
      <ul v-else-if="data">
        <li v-for="group in data" :key="group.id">
          <CategoryContainer :licenseGroupName="group.name" :licenses="group.licenses" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeaderBar from "./HeaderBar.vue";
import CategoryContainer from "./CategoryContainer.vue";
import { useQuery } from "@tanstack/vue-query";
import axios from "axios";
import { store } from "@/store";

interface LicenseGroup {
  id: string,
  name: string,
  licenses: License[]
}

interface License {
  name: string;
  id: string;
  start?: Date,
  end?: Date,
  key: string,
  amount?: number,
}

const {isPending, isError, data, error} = useQuery({
  queryKey: ["licenses"],
  queryFn: async () => {
    const res = await axios.get<LicenseGroup[]>(import.meta.env.VITE_BACKEND_URL + "/licenses", {
      headers: {
        Authorization: `Bearer ${store.token}`
      }
    })
    return res.data
  }
})
</script>

<style scoped>
li, ul {
  list-style-type: none;
}
</style>