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';

src/redux/slices/contests.ts

@@ -490,7 +490,7 @@ export const fetchContestMembers = createAsyncThunk(
         {
             contestId,
             page = 0,
-            pageSize = 25,
+            pageSize = 100,
         }: { contestId: number; page?: number; pageSize?: number },
         { rejectWithValue },
     ) => {

src/redux/slices/missions.ts

@@ -28,6 +28,7 @@ export interface Mission {
 
 interface MissionsState {
     missions: Mission[];
+    newMissions: Mission[];
     currentMission: Mission | null;
     hasNextPage: boolean;
     create: {
@@ -47,6 +48,7 @@ interface MissionsState {
 
 const initialState: MissionsState = {
     missions: [],
+    newMissions: [],
     currentMission: null,
     hasNextPage: false,
     create: {},
@@ -65,6 +67,33 @@ const initialState: MissionsState = {
 // GET /missions
 export const fetchMissions = createAsyncThunk(
     'missions/fetchMissions',
+    async (
+        {
+            page = 0,
+            pageSize = 100,
+            tags = [],
+        }: { page?: number; pageSize?: number; tags?: string[] },
+        { rejectWithValue },
+    ) => {
+        try {
+            const params: any = { page, pageSize };
+            if (tags.length) params.tags = tags;
+            const response = await axios.get('/missions', {
+                params,
+                paramsSerializer: {
+                    indexes: null,
+                },
+            });
+            return response.data; // { missions, hasNextPage }
+        } catch (err: any) {
+            return rejectWithValue(err.response?.data);
+        }
+    },
+);
+
+// GET /missions
+export const fetchNewMissions = createAsyncThunk(
+    'missions/fetchNewMissions',
     async (
         {
             page = 0,
@@ -211,6 +240,42 @@ const missionsSlice = createSlice({
             },
         );
 
+        // ─── FETCH NEW MISSIONS ───
+        builder.addCase(fetchNewMissions.pending, (state) => {
+            state.statuses.fetchList = 'loading';
+            state.error = null;
+        });
+        builder.addCase(
+            fetchNewMissions.fulfilled,
+            (
+                state,
+                action: PayloadAction<{
+                    missions: Mission[];
+                    hasNextPage: boolean;
+                }>,
+            ) => {
+                state.statuses.fetchList = 'successful';
+                state.newMissions = action.payload.missions;
+                state.hasNextPage = action.payload.hasNextPage;
+            },
+        );
+        builder.addCase(
+            fetchNewMissions.rejected,
+            (state, action: PayloadAction<any>) => {
+                state.statuses.fetchList = 'failed';
+
+                const errors = action.payload.errors as Record<
+                    string,
+                    string[]
+                >;
+                Object.values(errors).forEach((messages) => {
+                    messages.forEach((msg) => {
+                        toastError(msg);
+                    });
+                });
+            },
+        );
+
         // ─── FETCH MISSION BY ID ───
         builder.addCase(fetchMissionById.pending, (state) => {
             state.statuses.fetchById = 'loading';

src/redux/slices/profile.ts

@@ -197,9 +197,9 @@ export const fetchProfileMissions = createAsyncThunk(
         {
             username,
             recentPage = 0,
-            recentPageSize = 15,
+            recentPageSize = 100,
             authoredPage = 0,
-            authoredPageSize = 25,
+            authoredPageSize = 100,
         }: {
             username: string;
             recentPage?: number;
@@ -237,7 +237,7 @@ export const fetchProfileArticles = createAsyncThunk(
         {
             username,
             page = 0,
-            pageSize = 25,
+            pageSize = 100,
         }: { username: string; page?: number; pageSize?: number },
         { rejectWithValue },
     ) => {
@@ -262,11 +262,11 @@ export const fetchProfileContests = createAsyncThunk(
         {
             username,
             upcomingPage = 0,
-            upcomingPageSize = 10,
+            upcomingPageSize = 100,
             pastPage = 0,
-            pastPageSize = 10,
+            pastPageSize = 100,
             minePage = 0,
-            minePageSize = 10,
+            minePageSize = 100,
         }: {
             username: string;
             upcomingPage?: number;

src/views/home/account/missions/MyMissionItem.tsx

@@ -42,9 +42,12 @@ const MissionItem: React.FC<MissionItemProps> = ({
     setDeleteModalActive,
 }) => {
     const navigate = useNavigate();
-    const difficultyItems = ['Easy', 'Medium', 'Hard'];
+    const calcDifficulty = (d: number) => {
-    const difficultyString =
+        if (d <= 1200) return 'Easy';
-        difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
+        if (d <= 2000) return 'Medium';
+        return 'Hard';
+    };
+    const difficultyString = calcDifficulty(difficulty);
     const deleteStatus = useAppSelector(
         (state) => state.missions.statuses.delete,
     );

src/views/home/missions/Missions.tsx

@@ -36,6 +36,12 @@ const Missions = () => {
         (state) => state.store.articles.articleTagFilter,
     );
 
+    const calcDifficulty = (d: number) => {
+        if (d <= 1200) return 'Easy';
+        if (d <= 2000) return 'Medium';
+        return 'Hard';
+    };
+
     useEffect(() => {
         dispatch(setMenuActivePage('missions'));
         dispatch(fetchMissions({ tags: tagsFilter }));
@@ -83,7 +89,7 @@ const Missions = () => {
                                 id={v.id}
                                 authorId={v.authorId}
                                 name={v.name}
-                                difficulty={'Easy'}
+                                difficulty={calcDifficulty(v.difficulty)}
                                 tags={v.tags}
                                 timeLimit={1000}
                                 memoryLimit={256 * 1024 * 1024}

src/views/home/rightpanel/Articles.tsx

@@ -1,40 +1,63 @@
-import { FC, Fragment } from 'react';
+import { FC, Fragment, useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { fetchNewArticles } from '../../../redux/slices/articles';
 
 export const ArticlesRightPanel: FC = () => {
-    const items = [
+    const dispatch = useAppDispatch();
-        {
+
-            name: 'Энтузиаст создал карточки с NFC-метками для знакомства ребёнка с музыкой',
+    const articles = useAppSelector(
-        },
+        (state) => state.articles.fetchNewArticles.articles,
-        {
+    );
-            name: 'Алгоритм Древа Силы, Космический Сортировщик',
+
-        },
+    useEffect(() => {
-        {
+        dispatch(fetchNewArticles({ pageSize: 10 }));
-            name: 'Космический Сортировщик',
+    }, []);
-        },
+
-        {
+    const getDaysAgo = (dateString: string) => {
-            name: 'Зеркала Многомерности',
+        const updatedDate = new Date(dateString);
-        },
+        const today = new Date();
-    ];
+        // Сбрасываем время для точного сравнения по дням
+        updatedDate.setHours(0, 0, 0, 0);
+        today.setHours(0, 0, 0, 0);
+
+        const diffTime = today.getTime() - updatedDate.getTime();
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+        if (diffDays === 0) return 'Сегодня';
+        if (diffDays === 1) return '1 день назад';
+        return `${diffDays} дня назад`;
+    };
     return (
         <div className="h-screen w-full  overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
-            <div className="text-liquid-white font-bold text-[18px]">
+            <div className="text-liquid-white font-bold text-[24px] mb-[10px]">
-                Попоулярные статьи
+                Новые статьи
             </div>
 
-            {items.map((v, i) => {
+            {articles &&
-                return (
+                articles
-                    <Fragment key={i}>
+                    .filter((v) => {
-                        {
+                        const updatedDate = new Date(v.updatedAt);
-                            <div className="font-bold  text-liquid-light text-[16px]">
+                        const threeDaysAgo = new Date();
-                                {v.name}
+                        threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
-                            </div>
+                        return updatedDate >= threeDaysAgo;
-                        }
+                    })
-                        {i + 1 != items.length && (
+                    .map((v, i) => {
-                            <div className="h-[1px] w-full bg-liquid-lighter"></div>
+                        return (
-                        )}
+                            <Fragment key={i}>
-                    </Fragment>
+                                {
-                );
+                                    <div className="font-bold  text-liquid-white text-[16px]">
-            })}
+                                        {v.name}
+                                        <div className="text-sm text-liquid-light">
+                                            {getDaysAgo(v.updatedAt)}
+                                        </div>
+                                    </div>
+                                }
+                                {i + 1 != articles.length && (
+                                    <div className="h-[1px] w-full bg-liquid-lighter"></div>
+                                )}
+                            </Fragment>
+                        );
+                    })}
         </div>
     );
 };

src/views/home/rightpanel/Missions.tsx

@@ -1,5 +1,7 @@
-import { FC, Fragment } from 'react';
+import { FC, Fragment, useEffect } from 'react';
 import { cn } from '../../../lib/cn';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { fetchNewMissions } from '../../../redux/slices/missions';
 
 export const MissionsRightPanel: FC = () => {
     const items = [
@@ -24,30 +26,61 @@ export const MissionsRightPanel: FC = () => {
             tags: ['matrix', 'geometry', 'simulation'],
         },
     ];
+
+    const dispatch = useAppDispatch();
+
+    const missions = useAppSelector((state) => state.missions.newMissions);
+
+    useEffect(() => {
+        dispatch(fetchNewMissions({ pageSize: 10 }));
+    }, []);
+
+    const getDaysAgo = (dateString: string) => {
+        const updatedDate = new Date(dateString);
+        const today = new Date();
+        // Сбрасываем время для точного сравнения по дням
+        updatedDate.setHours(0, 0, 0, 0);
+        today.setHours(0, 0, 0, 0);
+
+        const diffTime = today.getTime() - updatedDate.getTime();
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+        if (diffDays === 0) return 'Сегодня';
+        if (diffDays === 1) return '1 день назад';
+        return `${diffDays} дня назад`;
+    };
+
+    const calcDifficulty = (d: number) => {
+        if (d <= 1200) return 'Easy';
+        if (d <= 2000) return 'Medium';
+        return 'Hard';
+    };
     return (
         <div className="h-screen w-full  overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[10px] flex flex-col">
             <div className="text-liquid-white font-bold text-[18px]">
                 Новые задачи
             </div>
 
-            {items.map((v, i) => {
+            {missions.map((v, i) => {
                 return (
                     <Fragment key={i}>
                         {
                             <div className="text-liquid-light text-[16px]">
-                                <div className="font-bold ">{v.name}</div>
+                                <div className="font-bold text-liquid-white">
+                                    {v.name}
+                                </div>
                                 <div
                                     className={cn(
                                         '',
-                                        v.difficulty == 'Hard' &&
+                                        calcDifficulty(v.difficulty) ==
-                                            'text-liquid-red',
+                                            'Hard' && 'text-liquid-red',
-                                        v.difficulty == 'Medium' &&
+                                        calcDifficulty(v.difficulty) ==
-                                            'text-liquid-orange',
+                                            'Medium' && 'text-liquid-orange',
-                                        v.difficulty == 'Easy' &&
+                                        calcDifficulty(v.difficulty) ==
-                                            'text-liquid-green',
+                                            'Easy' && 'text-liquid-green',
                                     )}
                                 >
-                                    {v.difficulty}
+                                    {calcDifficulty(v.difficulty)}
                                 </div>
                                 <div className="flex gap-[10px] overflow-hidden">
                                     {v.tags.slice(0, 2).map((v, i) => (
@@ -55,6 +88,9 @@ export const MissionsRightPanel: FC = () => {
                                     ))}
                                     {v.tags.length > 2 && '...'}
                                 </div>
+                                <div className="text-sm text-liquid-light">
+                                    {getDaysAgo(v.updatedAt)}
+                                </div>
                             </div>
                         }
                         {i + 1 != items.length && (