<template>
    <h1 class="mb-4 font-semibold text-xl">Favorites</h1>

    <ListItem v-for="item in items" :key="item.id" :item="item" />
    <div v-if="items.length==0">Empty...</div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { favoriteMessages } from '../request';
import ListItem from '../components/ListItem.vue';

const route = useRoute();

const items = ref([])

onMounted(() => {
    favoriteMessages().then(resp => {
        let data = resp.data
        data.map(item => {
            item.Media = JSON.parse(item.Media).filter(item => {
                return Object.keys(item).length > 0
            })
        })
        items.value = data
    })
})
</script>