feat: Realtime for Votes + Deadlines

nuxt/components/book-recommendations/BookRecommendationTable.vue

@@ -83,6 +83,12 @@ onMounted(() => {
       bookRecommendationStore.createRecommendationWS(e.bookRecommendation)
     })
   authStore.socketId = $echo.socketId()
+
+  $echo.private(`Vote`)
+    .listen('.VoteCreated', (e) => {
+      console.log(e)
+      bookRecommendationStore.createVoteWS(e.vote)
+    })
 })
 </script>
 

nuxt/components/deadline/DeadlineTable.vue

@@ -4,6 +4,8 @@ import ConfirmUserDeadline from '~/components/modal/ConfirmUserDeadline.vue'
 const props = defineProps<{
   bookRecommendationId: number
 }>()
+const { $echo } = useNuxtApp()
+const authStore = useAuthStore()
 
 const { refresh: deadlineRefresh, status: deadlineStatus, data: deadlines } = useFetch(() => `book-recommendations/${props.bookRecommendationId}/deadlines`)
 
@@ -40,6 +42,13 @@ const rows = computed(() => {
     }
   })
 })
+
+onMounted(() => {
+  $echo.private(`Deadline`)
+    .listen('.DeadlineCreated', (e) => {
+      deadlineRefresh()
+    })
+})
 </script>
 
 <template>

nuxt/plugins/app.ts

@@ -43,7 +43,6 @@ export default defineNuxtPlugin({
 
       // Conditionally add X-Socket-ID header if socket is connected
       if (auth.isLoggedIn && auth.socketId) {
-        console.log('auth.socketId', auth.socketId)
         const socketHeaders = {
           'X-Socket-ID': auth.socketId,
         }

nuxt/stores/book-recommendations.ts

@@ -123,6 +123,17 @@ export const useBookRecommendationStore = defineStore('bookRecommendations', ()
     })
   }
 
+  const createVoteWS = async (data: Partial<Vote>) => {
+    const index = recommendations.value.findIndex(r => r.id === data.book_recommendation_id)
+    // check if vote already exists otherwise add an empty array
+    if (index !== -1) {
+      if (!recommendations.value[index]?.votes) {
+        recommendations.value[index].votes = []
+      }
+      recommendations.value[index].votes.push(data)
+    }
+  }
+
   function resetRecommendations() {
     recommendations.value = []
   }
@@ -133,6 +144,7 @@ export const useBookRecommendationStore = defineStore('bookRecommendations', ()
     updateRecommendationWS,
     deleteRecommendationWS,
     createRecommendationWS,
+    createVoteWS,
     statusOptions,
     fetchRecommendations,
     fetchRecommendationsStatus,