<script setup lang="ts">
import BookInfoCard from '~/components/dashboard/BookInfoCard.vue'

definePageMeta({ middleware: ['auth'] })

const bookRecommendationStore = useBookRecommendationStore()
const authStore = useAuthStore()
const { $echo } = useNuxtApp()

bookRecommendationStore.fetchActiveRecommendations()

onMounted(() => {
  $echo.private(`BookRecommendation`)
    .listen('.BookRecommendationUpdated', (e) => {
      bookRecommendationStore.updateRecommendationWS(e.bookRecommendation)
    })
    .listen('.BookRecommendationDeleted', (e) => {
      bookRecommendationStore.deleteRecommendationWS(e.bookRecommendation)
    })
    .listen('.BookRecommendationCreated', (e) => {
      bookRecommendationStore.createRecommendationWS(e.bookRecommendation)
    })
  authStore.socketId = $echo.socketId()
})
</script>

<template>
  <div v-if="bookRecommendationStore.fetchActiveRecommendationsStatus !== 'pending'">
    <BookInfoCard v-for="book in bookRecommendationStore.recommendations" :key="book.id" :book="book" />
  </div>
</template>
