add info pannel

src/redux/slices/articles.ts

@@ -34,6 +34,12 @@ interface ArticlesState {
         status: Status;
         error?: string;
     };
+    fetchNewArticles: {
+        articles: Article[];
+        hasNextPage: boolean;
+        status: Status;
+        error?: string;
+    };
     fetchArticleById: {
         article?: Article;
         status: Status;
@@ -67,6 +73,12 @@ const initialState: ArticlesState = {
         status: 'idle',
         error: undefined,
     },
+    fetchNewArticles: {
+        articles: [],
+        hasNextPage: false,
+        status: 'idle',
+        error: undefined,
+    },
     fetchArticleById: {
         article: undefined,
         status: 'idle',
@@ -97,13 +109,42 @@ const initialState: ArticlesState = {
 // Async Thunks
 // =====================
 
+// Новые статьи
+export const fetchNewArticles = createAsyncThunk(
+    'articles/fetchNewArticles',
+    async (
+        {
+            page = 0,
+            pageSize = 5,
+            tags,
+        }: { page?: number; pageSize?: number; tags?: string[] } = {},
+        { rejectWithValue },
+    ) => {
+        try {
+            const params: any = { page, pageSize };
+            if (tags && tags.length > 0) params.tags = tags;
+
+            const response = await axios.get<ArticlesResponse>('/articles', {
+                params,
+                paramsSerializer: {
+                    indexes: null,
+                },
+            });
+
+            return response.data;
+        } catch (err: any) {
+            return rejectWithValue(err.response?.data);
+        }
+    },
+);
+
 // Все статьи
 export const fetchArticles = createAsyncThunk(
     'articles/fetchArticles',
     async (
         {
             page = 0,
-            pageSize = 10,
+            pageSize = 100,
             tags,
         }: { page?: number; pageSize?: number; tags?: string[] } = {},
         { rejectWithValue },
@@ -259,6 +300,29 @@ const articlesSlice = createSlice({
             });
         });
 
+        // fetchNewArticles
+        builder.addCase(fetchNewArticles.pending, (state) => {
+            state.fetchNewArticles.status = 'loading';
+            state.fetchNewArticles.error = undefined;
+        });
+        builder.addCase(
+            fetchNewArticles.fulfilled,
+            (state, action: PayloadAction<ArticlesResponse>) => {
+                state.fetchNewArticles.status = 'successful';
+                state.fetchNewArticles.articles = action.payload.articles;
+                state.fetchNewArticles.hasNextPage = action.payload.hasNextPage;
+            },
+        );
+        builder.addCase(fetchNewArticles.rejected, (state, action: any) => {
+            state.fetchNewArticles.status = 'failed';
+            const errors = action.payload.errors as Record<string, string[]>;
+            Object.values(errors).forEach((messages) => {
+                messages.forEach((msg) => {
+                    toastError(msg);
+                });
+            });
+        });
+
         // fetchMyArticles
         builder.addCase(fetchMyArticles.pending, (state) => {
             state.fetchMyArticles.status = 'loading';