<template>
    <div>
        <v-progress-circular
            v-if="loading && notes.length === 0"
            :size="100"
            :width="7"
            color="purple"
            indeterminate
        ></v-progress-circular>
        <v-row>
            <v-col
                v-for="note in notes"
                :key="note.uuid"
                cols="12"
                md="6"
                lg="4"
                xl="3"
            >
                <NoteCard
                    :uuid="note.uuid"
                    :title="note.title"
                    :updated-at="note.updatedAt"
                    :tags="note.tags"
                />
            </v-col>
        </v-row>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import NoteCard from '@/components/NoteCard.vue'

export default {
    name: 'Notes',
    components: { NoteCard },
    data: () => ({
        loading: true,
    }),
    computed: {
        ...mapState('notes', { notes: (state) => state.notes }),
    },
    mounted() {
        this.$store.dispatch('notes/load').then(() => (this.loading = false))
    },
    head: () => ({
        title: 'My notes',
    }),
}
</script>
