refactor(blog): integrate useAsyncState for post loading and error handling

src/widgets/Blog/__tests__/context.test.ts

@@ -41,6 +41,8 @@ describe('blog Context', () => {
     const context = useProvidingPosts(mockLoader);
 
     expect(context.loading.value).toBe(true);
+
+    await nextTick();
     await nextTick();
 
     expect(mockLoader).toHaveBeenCalled();
@@ -115,6 +117,8 @@ describe('blog Context', () => {
 
   it('should return available tags from all posts', async () => {
     const context = useProvidingPosts(mockLoader);
+
+    await nextTick();
     await nextTick();
 
     const expectedTags = ['vue', 'javascript', 'frontend', 'typescript', 'react', 'comparison'];
@@ -158,6 +162,7 @@ describe('blog Context', () => {
 
     const context = useProvidingPosts(errorLoader);
     await nextTick();
+    await nextTick();
 
     expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to load posts:', expect.any(Error));
     expect(context.loading.value).toBe(false);

src/widgets/Blog/context.ts

@@ -1,7 +1,7 @@
 import type { PostComment } from '@/entities/Comment';
 import type { Post } from '@/entities/Post';
-import { useInjectionStore } from '@robonen/vue';
-import { computed, reactive, ref, shallowRef } from 'vue';
+import { useAsyncState, useInjectionStore } from '@robonen/vue';
+import { computed, reactive, shallowRef } from 'vue';
 import { kmpSearch } from '@/shared/utils';
 
 type PostItem = Post & {
@@ -16,8 +16,22 @@ export const {
   useProvidingState: useProvidingPosts,
   useInjectedState: useInjectedPosts,
 } = useInjectionStore((loader: () => Promise<any>) => {
-  const posts = shallowRef<PostItem[]>([]);
-  const loading = ref(false);
+  const {
+    state: posts,
+    isLoading: loading,
+    executeImmediately: loadPosts,
+  } = useAsyncState<PostItem[]>(
+    async () => {
+      const response = await loader();
+      return response.data as PostItem[];
+    },
+    [],
+    {
+      onError(error) {
+        console.error('Failed to load posts:', error);
+      },
+    },
+  );
 
   const selectedPost = shallowRef<PostItem | null>(null);
 
@@ -54,21 +68,6 @@ export const {
     return Array.from(tagsSet);
   });
 
-  const loadPosts = async () => {
-    loading.value = true;
-
-    try {
-      const data = await loader();
-      posts.value = data!.data as PostItem[];
-    }
-    catch (error) {
-      console.error('Failed to load posts:', error);
-    }
-    finally {
-      loading.value = false;
-    }
-  };
-
   function toggleTag(tag: string) {
     if (filters.tags.has(tag))
       filters.tags.delete(tag);
@@ -85,9 +84,6 @@ export const {
     filters.tags.clear();
   }
 
-  // Initial load
-  loadPosts();
-
   return {
     posts,
     loading,