pilotwings/frontend/views/Home.vue

<template>
  <Loading class="container" :loading="loading" :message="error" type="danger">
    <div class="block">
      <router-link class="button" to="/new">
        <Icon name="plus">New container</Icon>
      </router-link>
    </div>
    <div class="block">
      <ul>
        <li v-for="container in containers" :key="container.id">
          <router-link :to="`/container/${container.name}`">
            {{ container.name }}
          </router-link>
        </li>
      </ul>
    </div>
  </Loading>
</template>

<script lang="ts">
import axios, { AxiosError } from 'axios'
import type { Container } from '../types'
import Icon from '../components/Icon.vue'
import Loading from '../components/Loading.vue'

export default {
  name: 'Home',
  components: {
    Icon,
    Loading,
  },
  data() {
    return {
      containers: [] as Container[],
      error: '',
      loading: true,
    }
  },
  async mounted() {
    try {
      const response = await axios.get<Container[]>('/api/containers')
      this.containers = response.data
    } catch (error) {
      console.error(error)
      this.error =
        error instanceof AxiosError ? error.message : 'Error loading containers'
    } finally {
      this.loading = false
    }
  },
}
</script>