fix #423: invalidate following feed cache on follow/unfollow actions (#428)

* fix: invalidate following feed cache on follow/unfollow actions

- Show 'unverified' status for accounts without email verification in admin profiles
- Invalidate following-feed Vue Query cache when following/unfollowing users
- Updated profile store, video store, search store, and useFollowAccount composable

Fixes #423

* Prettier

---------

Co-authored-by: Your Name <you@example.com>

Author: shleeable

resources/js/composables/useFollowAccount.js

@@ -28,6 +28,8 @@ export function useFollowAccount() {
                 }
             })
 
+            // Invalidate following feed so it includes new follows
+            queryClient.invalidateQueries({ queryKey: ['following-feed'] })
             // Optionally update user's following count
             queryClient.invalidateQueries({ queryKey: ['user-profile'] })
         }
@@ -56,6 +58,8 @@ export function useFollowAccount() {
                 }
             })
 
+            // Invalidate following feed so it excludes unfollowed accounts
+            queryClient.invalidateQueries({ queryKey: ['following-feed'] })
             // Optionally update user's following count
             queryClient.invalidateQueries({ queryKey: ['user-profile'] })
         }

resources/js/stores/profile.js

@@ -3,6 +3,7 @@ import { nextTick } from 'vue'
 import axios from '@/plugins/axios'
 import { useAuthStore } from '@/stores/auth'
 import { useAlertModal } from '@/composables/useAlertModal.js'
+import { useQueryClient } from '@tanstack/vue-query'
 const { confirmModal } = useAlertModal()
 
 export const useProfileStore = defineStore('profile', {
@@ -284,6 +285,11 @@ export const useProfileStore = defineStore('profile', {
                 this.followerCount = res.follower_count
                 await nextTick()
                 await this.getProfileState(this.id)
+                try {
+                    const queryClient = useQueryClient()
+                    queryClient.invalidateQueries({ queryKey: ['following-feed'] })
+                } catch (e) {}
+
                 if (!prevState && this.isFollowingRequestPending) {
                     this.pollFollowRequestState().catch((err) => {
                         console.error('Error polling follow request state:', err)

resources/js/stores/search.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import axios from '~/plugins/axios'
 import { ref } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
 
 export const useSearchStore = defineStore('search', () => {
     const searchQuery = ref('')
@@ -185,6 +186,10 @@ export const useSearchStore = defineStore('search', () => {
                 user.is_following = true
                 user.follower_count = (user.follower_count || 0) + 1
             }
+            try {
+                const queryClient = useQueryClient()
+                queryClient.invalidateQueries({ queryKey: ['following-feed'] })
+            } catch (e) {}
 
             return { success: true }
         } catch (err) {
@@ -206,6 +211,10 @@ export const useSearchStore = defineStore('search', () => {
                 user.is_following = false
                 user.follower_count = Math.max(0, (user.follower_count || 0) - 1)
             }
+            try {
+                const queryClient = useQueryClient()
+                queryClient.invalidateQueries({ queryKey: ['following-feed'] })
+            } catch (e) {}
 
             return { success: true }
         } catch (err) {

resources/js/stores/video.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import axios from '~/plugins/axios'
+import { useQueryClient } from '@tanstack/vue-query'
 
 export const useVideoStore = defineStore('video', {
     state: () => ({
@@ -204,6 +205,10 @@ export const useVideoStore = defineStore('video', {
             const axiosInstance = axios.getAxiosInstance()
             try {
                 const res = await axiosInstance.post(`/api/v1/account/follow/${userId}`)
+                try {
+                    const queryClient = useQueryClient()
+                    queryClient.invalidateQueries({ queryKey: ['following-feed'] })
+                } catch (e) {}
                 return res.data
             } catch (error) {
                 console.error('Error following user:', error)
@@ -215,6 +220,10 @@ export const useVideoStore = defineStore('video', {
             const axiosInstance = axios.getAxiosInstance()
             try {
                 const res = await axiosInstance.post(`/api/v1/account/unfollow/${userId}`)
+                try {
+                    const queryClient = useQueryClient()
+                    queryClient.invalidateQueries({ queryKey: ['following-feed'] })
+                } catch (e) {}
                 return res.data
             } catch (error) {
                 console.error('Error unfollowing user:', error)