feat: Realtime Functionality

nuxt/components/book-recommendations/BookRecommendationTable.vue

@@ -6,6 +6,8 @@ import NewBookRecommendation from '~/components/modal/NewBookRecommendation.vue'
 import CastVote from '~/components/modal/CastVote.vue'
 
 const dayjs = useDayjs()
+const { $echo } = useNuxtApp()
+const authStore = useAuthStore()
 
 const bookRecommendationStore = useBookRecommendationStore()
 bookRecommendationStore.fetchRecommendations()
@@ -68,6 +70,20 @@ const sort = ref({
 function resolveStatus(status: string) {
   return bookRecommendationStore.statusOptions.find(option => option.value === status)
 }
+
+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>