feat: Realtime Functionality

nuxt/stores/auth.ts

@@ -24,6 +24,7 @@ export const useAuthStore = defineStore('auth', () => {
     maxAge: 60 * 60 * 24 * 365,
   })
   const isLoggedIn = computed(() => !!token.value)
+  const socketId = ref('')
 
   const { refresh: logout } = useFetch<any>('logout', {
     method: 'POST',
@@ -49,5 +50,5 @@ export const useAuthStore = defineStore('auth', () => {
     },
   })
 
-  return { user, isLoggedIn, logout, fetchUser, token }
+  return { user, isLoggedIn, socketId, logout, fetchUser, token }
 })

nuxt/stores/book-recommendations.ts

@@ -21,11 +21,20 @@ export interface BookRecommendation {
     email: string
     avatar: string
   }
+  votes?: Vote[]
   status: BookRecommendationStatusEnum
   cover_image?: string
   published_at?: string
 }
 
+export interface Vote {
+  book_recommendation_id: number
+  id: number
+  user_id: number
+  created_at: string
+  updated_at: string
+}
+
 export const useBookRecommendationStore = defineStore('bookRecommendations', () => {
   const recommendations = ref<BookRecommendation[]>([])
 
@@ -72,6 +81,48 @@ export const useBookRecommendationStore = defineStore('bookRecommendations', ()
     },
   })
 
+  const updateRecommendationWS = async (data: Partial<BookRecommendation>) => {
+    // This data can be Partial, the id should always be present. We need to only update the properties that are present in the data object.
+    // We also have a special case for activeRecommendations, in this case we could have a new recommendation that needs to be added to the list. This should only happen if the status is ACTIVE.
+    // If the Status is not ACTIVE, we need to remove the recommendation from the list.
+    const index = recommendations.value.findIndex(r => r.id === data.id)
+    if (index !== -1) {
+      recommendations.value[index] = { ...recommendations.value[index], ...data }
+    }
+    switch (data.status) {
+      case BookRecommendationStatusEnum.ACTIVE:
+        const activeIndex = recommendations.value.findIndex(r => r.id === data.id)
+        if (activeIndex === -1) {
+          await createRecommendationWS(data)
+        }
+        break
+      default:
+        const inactiveIndex = recommendations.value.findIndex(r => r.id === data.id)
+        if (inactiveIndex !== -1) {
+          recommendations.value.splice(inactiveIndex, 1)
+        }
+        break
+    }
+  }
+
+  const deleteRecommendationWS = async (data: Partial<BookRecommendation>) => {
+    const index = recommendations.value.findIndex(r => r.id === data.id)
+    if (index !== -1) {
+      recommendations.value.splice(index, 1)
+    }
+  }
+
+  const createRecommendationWS = async (data: Partial<BookRecommendation>) => {
+    // Here we need to get the missing with data from the server
+    await useFetch<BookRecommendation>(`book-recommendations/${data.id}?with=recommender,votes`, {
+      onResponse({ response }) {
+        if (response.status === 200) {
+          recommendations.value.push(response._data)
+        }
+      },
+    })
+  }
+
   function resetRecommendations() {
     recommendations.value = []
   }
@@ -79,6 +130,9 @@ export const useBookRecommendationStore = defineStore('bookRecommendations', ()
   return {
     recommendations,
     resetRecommendations,
+    updateRecommendationWS,
+    deleteRecommendationWS,
+    createRecommendationWS,
     statusOptions,
     fetchRecommendations,
     fetchRecommendationsStatus,