A bunch of different tasks related to the admin page

src/app/api/streetcode/streetcodes.api.ts

@@ -2,7 +2,7 @@ import Agent from '@api/agent.api';
 import { API_ROUTES } from '@constants/api-routes.constants';
 import Streetcode,
 {
-    EventStreetcode, PersonStreetcode, StreetcodeCatalogRecord,
+    StreetcodeCatalogRecord,
     StreetcodeCreate, StreetcodeFavourite, StreetcodeMainPage, StreetcodeShort, StreetcodeUpdate,
 } from '@models/streetcode/streetcode-types.model';
 
@@ -58,9 +58,20 @@ const StreetcodesApi = {
         Agent.get<number>(`${API_ROUTES.STREETCODES.GET_COUNT}?onlyPublished=${onlyPublished}`)
     ),
 
-    getAllShort: () => (
-        Agent.get<Streetcode[]>(`${API_ROUTES.STREETCODES.GET_ALL_SHORT}`)
-    ),
+    getAllShort: (page?: number, pageSize?: number) => {
+        const params = Object.entries({
+            page: page?.toString() ?? '',
+            pageSize: pageSize?.toString() ?? '',
+        });
+
+        const queryParams = params.filter((p) => !!p[1]);
+
+        const searchParams = new URLSearchParams(queryParams);
+        return Agent.get<{ totalAmount: number, streetcodesShort: StreetcodeShort[] }>(
+            `${API_ROUTES.STREETCODES.GET_ALL_SHORT}`,
+            searchParams,
+        );
+    },
 
     create: (streetcode: StreetcodeCreate) => Agent
         .post<StreetcodeCreate>(`${API_ROUTES.STREETCODES.CREATE}`, streetcode),

src/app/api/streetcode/text-content/terms.api.ts

@@ -7,9 +7,17 @@ const TermsApi = {
         Agent.get<Term>(`${API_ROUTES.TERMS.GET}/${id}`)
     ),
 
-    getAll: () => (
-        Agent.get<Term[]>(`${API_ROUTES.TERMS.GET_ALL}`)
-    ),
+    getAll: (page?: number, pageSize?: number) => {
+        const params = Object.entries({
+            page: page?.toString() ?? '',
+            pageSize: pageSize?.toString() ?? '',
+        });
+
+        const queryParams = params.filter((p) => !!p[1]);
+
+        const searchParams = new URLSearchParams(queryParams);
+        return Agent.get<{ totalAmount: number, terms: Term[] }>(`${API_ROUTES.TERMS.GET_ALL}`, searchParams);
+    },
 
     create: (term: Term) => (
         Agent.post<Term>(`${API_ROUTES.TERMS.CREATE}`, term)

src/app/common/components/modals/HeaderLogin/HeaderLoginModal.component.tsx

@@ -22,19 +22,19 @@ const HeaderLoginModal = () => {
     const [hasVacancies, setHasVacancies] = useState(false);
     const SURVEY_LINK = 'https://forms.gle/eWwX5RP84X7dymLR6';
     const { modalStore: { setModal, modalsState: { login } } } = useModalContext();
+
     const handleClick = () => login.isOpen = false;
+
     useEffect(() => {
-        JobApi.getActive()
-            .then(
-                (result) => {
+        if (login.isOpen) {
+            JobApi.getActive()
+                .then((result) => {
                     setHasVacancies(result.length > 0);
-                },
-            )
-            .catch(
-                (e) => {
-                    console.error(e);
-                },
-            );
+                })
+                .catch((error) => {
+                    console.error(error);
+                });
+        }
     }, [login.isOpen]);
 
     const becomePartnerHandler = () => {

src/app/layout/footer/Footer.component.tsx

@@ -11,6 +11,7 @@ import Youtube from '@images/footer/You.svg';
 import { useEffect, useState } from 'react';
 import { HashLink as Link } from 'react-router-hash-link';
 import useWindowSize from '@hooks/stateful/useWindowSize.hook';
+import { useQuery } from '@tanstack/react-query';
 
 import JobApi from '@/app/api/job/Job.api';
 import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component';
@@ -23,15 +24,17 @@ const Footer = () => {
     const [hasVacancies, setHasVacancies] = useState(false);
     const REPORTS = 'https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link';
 
+    const { data } = useQuery({
+        queryKey: ['jobsActive'],
+        queryFn: () => JobApi.getActive(),
+    });
+
     useEffect(() => {
-        JobApi.getActive()
-            .then(
-                (result) => {
-                    setHasVacancies(result.length > 0);
-                },
-            )
-            .catch();
-    }, []);
+        if (data) {
+            setHasVacancies(data.length > 0);
+        }
+    }, [data]);
+
     return (
         <>
             {windowSize.width > 1024 && (

src/app/stores/news-store/news-store.ts

@@ -101,15 +101,15 @@ export default class NewsStore {
             });
     };
 
+    // eslint-disable-next-line class-methods-use-this
     public createNews = async (news: News) => {
         await NewsApi.create(news)
-            .then(() => this.getAll(this.PaginationInfo.PageSize))
             .catch((error) => console.error(error));
     };
 
+    // eslint-disable-next-line class-methods-use-this
     public updateNews = async (news: News) => {
         await NewsApi.update(news)
-            .then(() => this.getAll(this.PaginationInfo.PageSize))
             .catch((error) => console.error(error));
     };
 

src/app/stores/streetcodeshort-store.ts

@@ -1,24 +1,53 @@
 /* eslint-disable no-restricted-imports */
-import { action, makeAutoObservable, observable } from 'mobx';
+import { makeAutoObservable } from 'mobx';
+import { PaginationInfo } from '@models/pagination/pagination.model';
+import { StreetcodeShort } from '@models/streetcode/streetcode-types.model';
 
-import { StreetcodeShort } from '../../models/streetcode/streetcode-types.model';
 import StreetcodesApi from '../api/streetcode/streetcodes.api';
 
 export default class StreetcodeShortStore {
-    public streetcodes = new Array<StreetcodeShort>();
+    public StreetcodesShortMap = new Map<number, StreetcodeShort>();
+
+    private defaultPageSize = 10;
+
+    private paginationInfo: PaginationInfo = {
+        PageSize: this.defaultPageSize,
+        TotalPages: 1,
+        TotalItems: 1,
+        CurrentPage: 1,
+    };
 
     public constructor() {
         makeAutoObservable(this);
     }
 
-    public fetchStreetcodesAll = async () => {
-        StreetcodesApi.getAllShort()
-            .then((value) => {
-                this.streetcodes = value.map((s) => ({ id: s.id, title: s.title, index: s.index }));
-            }).catch((error) => {});
+    public setInternalMap(streetcodesShort: StreetcodeShort[]) {
+        this.StreetcodesShortMap.clear();
+        streetcodesShort.forEach(this.setItem);
+    }
+
+    public setItem = (streetcodesShort: StreetcodeShort) => {
+        this.StreetcodesShortMap.set(streetcodesShort.id, streetcodesShort);
     };
 
-    public addItemToArray = (item: StreetcodeShort) => {
-        this.streetcodes.push(item);
+    public setCurrentPage(currPage: number) {
+        this.paginationInfo.CurrentPage = currPage;
+    }
+
+    public set PaginationInfo(paginationInfo: PaginationInfo) {
+        this.paginationInfo = paginationInfo;
+    }
+
+    public get PaginationInfo(): PaginationInfo {
+        return this.paginationInfo;
+    }
+
+    public fetchStreetcodesAll = async (pageSize?: number) => {
+        StreetcodesApi.getAllShort(this.PaginationInfo.CurrentPage, pageSize ?? this.paginationInfo.PageSize)
+            .then((response) => {
+                this.paginationInfo.TotalItems = response.totalAmount;
+                this.setInternalMap(response.streetcodesShort);
+            })
+            .catch((error) => console.error(error));
     };
 }

src/app/stores/tags-store.ts

@@ -132,7 +132,7 @@ export default class TagsStore {
         try {
             await tagsApi.delete(tagId);
             runInAction(() => {
-                this.TagMap.delete(tagId);
+                this.AllTagsMap.delete(tagId);
             });
         } catch (error: unknown) { /* empty */ }
     };

src/app/stores/term-store.ts

@@ -1,15 +1,26 @@
 import { makeAutoObservable, runInAction } from 'mobx';
 import termsApi from '@api/streetcode/text-content/terms.api';
+import { PaginationInfo } from '@models/pagination/pagination.model';
 import { Term } from '@models/streetcode/text-contents.model';
 
 export default class TermStore {
     public TermMap = new Map<number, Term>();
 
+    private defaultPageSize = 10;
+
+    private paginationInfo: PaginationInfo = {
+        PageSize: this.defaultPageSize,
+        TotalPages: 1,
+        TotalItems: 1,
+        CurrentPage: 1,
+    };
+
     public constructor() {
         makeAutoObservable(this);
     }
 
     public setInternalMap = (terms: Term[]) => {
+        this.TermMap.clear();
         terms.forEach(this.setItem);
     };
 
@@ -21,11 +32,25 @@ export default class TermStore {
         return Array.from(this.TermMap.values());
     }
 
-    public fetchTerms = async () => {
-        try {
-            const terms = await termsApi.getAll();
-            this.setInternalMap(terms);
-        } catch (error: unknown) {}
+    public setCurrentPage(currPage: number) {
+        this.paginationInfo.CurrentPage = currPage;
+    }
+
+    public set PaginationInfo(paginationInfo: PaginationInfo) {
+        this.paginationInfo = paginationInfo;
+    }
+
+    public get PaginationInfo(): PaginationInfo {
+        return this.paginationInfo;
+    }
+
+    public getAll = async (pageSize?: number) => {
+        await termsApi.getAll(this.PaginationInfo.CurrentPage, pageSize ?? this.paginationInfo.PageSize)
+            .then((response) => {
+                this.PaginationInfo.TotalItems = response.totalAmount;
+                this.setInternalMap(response.terms);
+            })
+            .catch((error) => console.error(error));
     };
 
     public createTerm = async (term: Term) => {

src/features/AdminPage/CategoriesPage/CategoriesPage.component.tsx

@@ -1,11 +1,10 @@
 import './CategoriesPage.style.scss';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import BUTTON_LABELS from '@constants/buttonLabels';
 import CONFIRMATION_MESSAGES from '@constants/confirmationMessages';
-import ImageStore from '@stores/image-store';
 import useMobx, { useModalContext } from '@stores/root-store';
 import { useQuery } from '@tanstack/react-query';
 
@@ -25,34 +24,11 @@ const CategoriesMainPage: React.FC = observer(() => {
     const [modalEditOpened, setModalEditOpened] = useState<boolean>(false);
     const [categoryToEdit, setSourcesToEdit] = useState<SourceCategoryAdmin>();
 
-    const { isLoading } = useQuery({
+    const { isLoading, refetch } = useQuery({
         queryKey: ['categories', sourcesStore.PaginationInfo.CurrentPage],
         queryFn: () => sourcesStore.fetchSrcCategoriesAll(),
     });
 
-    const updatedCategories = () => {
-        Promise.all([
-            sourcesStore.fetchSrcCategoriesAll(),
-        ]).then(() => {
-            sourcesStore?.srcCategoriesMap.forEach((val, key) => {
-                if (!!val.imageId && !val.image) {
-                    ImageStore.getImageById(val.imageId!).then((image) => {
-                        sourcesStore.srcCategoriesMap.set(
-                            key,
-                            { ...val, image },
-                        );
-                    });
-                }
-            });
-        }).then(() => {
-            sourcesStore.setInternalCategoriesMap(sourcesStore.getSrcCategoriesArray);
-        });
-    };
-
-    useEffect(() => {
-        updatedCategories();
-    }, [modalAddOpened, modalEditOpened]);
-
     const handleDeleteCategory = (categoryId: number | undefined) => {
         modalStore.setConfirmationModal(
             'confirmation',
@@ -127,6 +103,7 @@ const CategoriesMainPage: React.FC = observer(() => {
             ),
         },
     ];
+
     return (
         <div className="categories-page">
             <div className="categories-page-container">
@@ -174,11 +151,13 @@ const CategoriesMainPage: React.FC = observer(() => {
             <CategoryAdminModal
                 isModalVisible={modalAddOpened}
                 setIsModalOpen={setModalAddOpened}
+                afterSubmit={refetch}
             />
             <CategoryAdminModal
                 isModalVisible={modalEditOpened}
                 setIsModalOpen={setModalEditOpened}
                 initialData={categoryToEdit}
+                afterSubmit={refetch}
             />
         </div>
 

src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.spec.tsx

@@ -133,6 +133,10 @@ describe('CategoryAdminModal', () => {
             userEvent.upload(uploader, new File(['(⌐□_□)'], 'new-image.jpg', { type: 'image/jpg' }));
         });
 
+        await waitFor(() => {
+            expect(saveButton).not.toBeDisabled();
+        });
+
         await waitFor(() => userEvent.click(saveButton));
 
         await waitFor(() => {

src/features/AdminPage/CategoriesPage/CategoriesPage/CategoryAdminModal.component.tsx

@@ -10,7 +10,6 @@ import ImagesApi from '@api/media/images.api';
 import FileUploader from '@components/FileUploader/FileUploader.component';
 import combinedImageValidator, { checkFile } from '@components/modals/validators/combinedImageValidator';
 import BUTTON_LABELS from '@constants/buttonLabels';
-import { useAsync } from '@hooks/stateful/useAsync.hook';
 import Audio from '@models/media/audio.model';
 import Image from '@models/media/image.model';
 import { SourceCategoryAdmin } from '@models/sources/sources.model';
@@ -34,13 +33,15 @@ interface SourceModalProps {
     setIsModalOpen: Dispatch<SetStateAction<boolean>>;
     initialData?: SourceCategoryAdmin;
     isNewCategory?: (data: boolean) => void;
+    afterSubmit?: () => void;
 }
 
 const SourceModal: React.FC<SourceModalProps> = ({
     isModalVisible,
     setIsModalOpen,
     initialData,
     isNewCategory,
+    afterSubmit,
 }) => {
     const { sourcesAdminStore } = useMobx();
     const [form] = Form.useForm();
@@ -52,8 +53,6 @@ const SourceModal: React.FC<SourceModalProps> = ({
     const [fileList, setFileList] = useState<UploadFile[]>([]);
     const [isSaveButtonDisabled, setIsSaveButtonDisabled] = useState(true);
 
-    useAsync(() => sourcesAdminStore.fetchSourceCategories(), []);
-
     const createFileListData = (img: Image) => {
         if (!initialData) {
             return [];
@@ -125,6 +124,10 @@ const SourceModal: React.FC<SourceModalProps> = ({
         if (isNewCategory !== undefined) {
             isNewCategory(true);
         }
+
+        if (afterSubmit) {
+            afterSubmit();
+        }
     };
 
     const handlePreview = async (file: UploadFile) => {