Replaced useAxios with useQuery and useMutation hooks on CategoryDropdown container

src/components/app-button-menu/AppButtonMenu.tsx

@@ -10,25 +10,24 @@ import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import CircleIcon from '@mui/icons-material/Circle'
 
-import useAxios from '~/hooks/use-axios'
+import useQuery from '~/hooks/use-query'
 import useMenu from '~/hooks/use-menu'
 import Loader from '~/components/loader/Loader'
 import AppButton from '~/components/app-button/AppButton'
 import AppMenuButton from '~/components/app-menu-button/AppMenuButton'
 import AppSelectButton from '~/components/app-select-button/AppSelectButton'
 
-import { defaultResponses } from '~/constants'
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/app-button-menu/AppButtonMenu.styles'
 import {
   ButtonVariantEnum,
   CategoryNameInterface,
-  ServiceFunction
+  ServiceFunctionNew
 } from '~/types'
 
 interface AppButtonMenuProps<T> extends Omit<MenuProps, 'open'> {
   title: string
-  service: ServiceFunction<T[]>
+  service: ServiceFunctionNew<T[]>
   selectedItems: string[]
   setSelectedItems: (value: string[]) => void
   position?: PopoverOrigin['horizontal']
@@ -65,12 +64,15 @@ const AppButtonMenu = <T extends Pick<CategoryNameInterface, '_id'>>({
     setSelectedItems([])
   }
 
-  const { loading, response } = useAxios<T[]>({
-    service,
-    defaultResponse: defaultResponses.array
+  const { data: response, isLoading } = useQuery({
+    queryKey: [title],
+    queryFn: service
   })
 
   const filteredItems = useMemo(() => {
+    if (!response) {
+      return []
+    }
     const noneItem = {
       _id: 'null',
       [valueField as string]: 'No category'
@@ -115,7 +117,7 @@ const AppButtonMenu = <T extends Pick<CategoryNameInterface, '_id'>>({
     </Box>
   )
 
-  const itemsLoad = !response.length && loading
+  const itemsLoad = !response || isLoading
   const chosenFiltersText = selectedNames.length
     ? selectedNames.join(', ')
     : t('cooperationsPage.tabs.all')

src/containers/category-dropdown/CategoryDropdown.tsx

@@ -4,9 +4,10 @@ import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import AddIcon from '@mui/icons-material/Add'
 
-import useAxios from '~/hooks/use-axios'
 import { useModalContext } from '~/context/modal-context'
 import { useAppDispatch } from '~/hooks/use-redux'
+import useQuery from '~/hooks/use-query'
+import useMutation from '~/hooks/use-mutation'
 import { ResourceService } from '~/services/resource-service'
 import AddCategoriesModal from '~/containers/my-resources/add-categories-modal/AddCategoriesModal'
 import DropdownButton from '~/components/dropdown-add-btn/DropdownButton'
@@ -16,7 +17,6 @@ import {
   Categories,
   CategoryNameInterface,
   ComponentEnum,
-  CreateCategoriesParams,
   ErrorResponse
 } from '~/types'
 import { styles } from '~/containers/category-dropdown/CategoryDropdown.styles'
@@ -44,21 +44,22 @@ const CategoryDropdown = ({
   const dispatch = useAppDispatch()
   const { openModal, closeModal } = useModalContext()
 
-  const handleResponseError = (error?: ErrorResponse) => {
-    dispatch(
-      openAlert({
-        severity: snackbarVariants.error,
-        message: getErrorKey(error)
-      })
-    )
-  }
+  const handleResponseError = useCallback(
+    (error?: ErrorResponse) => {
+      dispatch(
+        openAlert({
+          severity: snackbarVariants.error,
+          message: getErrorKey(error)
+        })
+      )
+    },
+    [dispatch]
+  )
 
-  const { response: allCategoriesNames, fetchData: fetchAllCategoriesNames } =
-    useAxios<CategoryNameInterface[]>({
-      service: ResourceService.getResourcesCategoriesNames,
-      defaultResponse: [],
-      fetchOnMount: true
-    })
+  const { data: allCategoriesNames = [] } = useQuery({
+    queryKey: ['categoriesNames'],
+    queryFn: ResourceService.getResourcesCategoriesName
+  })
 
   const onCreateCategory = () => {
     openModal({
@@ -72,14 +73,8 @@ const CategoryDropdown = ({
     })
   }
 
-  const createCategory = useCallback(
-    (params?: CreateCategoriesParams) =>
-      ResourceService.createResourceCategory(params),
-    []
-  )
-
   const onResponseCategory = useCallback(
-    async (response: Categories | null) => {
+    (response: Categories | null) => {
       const categoryName = response ? response.name : ''
 
       dispatch(
@@ -93,18 +88,15 @@ const CategoryDropdown = ({
           }
         })
       )
-
-      await fetchAllCategoriesNames()
     },
-    [dispatch, fetchAllCategoriesNames]
+    [dispatch]
   )
 
-  const { fetchData: handleCreateCategory } = useAxios({
-    service: createCategory,
-    defaultResponse: null,
-    fetchOnMount: false,
-    onResponse: onResponseCategory,
-    onResponseError: handleResponseError
+  const { mutate: handleCreateCategory } = useMutation({
+    queryKey: ['categoriesNames'],
+    mutationFn: ResourceService.createResourceCategory,
+    onSuccess: onResponseCategory,
+    onError: handleResponseError
   })
 
   const optionsList = (

src/containers/my-resources/add-categories-modal/AddCategoriesModal.tsx

@@ -21,7 +21,7 @@ import {
 
 interface AddCategoriesModalProps {
   closeModal: () => void
-  createCategories: (params?: CreateCategoriesParams) => Promise<void>
+  createCategories: (params: CreateCategoriesParams) => void
   existingCategoriesNames: string[]
 }
 
@@ -37,9 +37,9 @@ const AddCategoriesModal: FC<AddCategoriesModalProps> = ({
     useForm<CreateCategoriesParams>({
       initialValues: initialValues,
       validations: validations(existingCategoriesNames),
-      onSubmit: async () => {
+      onSubmit: () => {
         setLoading(true)
-        await createCategories({ name: data.name.trim() })
+        createCategories({ name: data.name.trim() })
         setLoading(false)
         closeModal()
       }

src/containers/my-resources/add-resource-modal/AddResourceModal.tsx

@@ -89,7 +89,7 @@ const AddResourceModal = <T extends TableItem>({
         />
         <AppButtonMenu<CategoryNameInterface>
           selectedItems={selectedItems}
-          service={ResourceService.getResourcesCategoriesNames}
+          service={ResourceService.getResourcesCategoriesName}
           setSelectedItems={setSelectedItems}
           showNoneProperty
           title={t('myResourcesPage.categories.category')}

src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx

@@ -87,7 +87,7 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
           }}
           position={PositionEnum.Right}
           selectedItems={selectedItems}
-          service={ResourceService.getResourcesCategoriesNames}
+          service={ResourceService.getResourcesCategoriesName}
           setSelectedItems={setItems}
           showNoneProperty
           title={t('myResourcesPage.categories.category')}

src/containers/my-resources/categories-container/CategoriesContainer.tsx

@@ -13,6 +13,8 @@ import {
 } from '~/services/resource-service'
 import MyResourcesTable from '~/containers/my-resources/my-resources-table/MyResourcesTable'
 import useAxios from '~/hooks/use-axios'
+import useMutation from '~/hooks/use-mutation'
+import useQuery from '~/hooks/use-query'
 import useSort from '~/hooks/table/use-sort'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import usePagination from '~/hooks/table/use-pagination'
@@ -31,9 +33,7 @@ import {
   ItemsWithCount,
   GetResourcesCategoriesParams,
   ErrorResponse,
-  ResourcesTabsEnum,
-  CreateCategoriesParams,
-  CategoryNameInterface
+  ResourcesTabsEnum
 } from '~/types'
 import { adjustColumns, getScreenBasedLimit } from '~/utils/helper-functions'
 
@@ -98,12 +98,6 @@ const CategoriesContainer = () => {
     [page, itemsPerPage, sort, searchTitle]
   )
 
-  const createCategory = useCallback(
-    (params?: CreateCategoriesParams) =>
-      ResourceService.createResourceCategory(params),
-    []
-  )
-
   const deleteCategory = useCallback(
     (id?: string) => ResourceService.deleteResourceCategory(id ?? ''),
     []
@@ -118,12 +112,10 @@ const CategoriesContainer = () => {
     onResponseError
   })
 
-  const { response: allCategoriesNames, fetchData: fetchAllCategoriesNames } =
-    useAxios<CategoryNameInterface[]>({
-      service: ResourceService.getResourcesCategoriesNames,
-      defaultResponse: [],
-      onResponseError,
-      fetchOnMount: true
+  const { data: allCategoriesNames = [], refetch: fetchAllCategoriesNames } =
+    useQuery({
+      queryKey: ['categoriesNames'],
+      queryFn: ResourceService.getResourcesCategoriesName
     })
 
   const onCategoryUpdate = useCallback(async () => {
@@ -138,14 +130,11 @@ const CategoriesContainer = () => {
     [fetchData, fetchAllCategoriesNames, onResponse]
   )
 
-  const { fetchData: handleCreateCategory } = useAxios({
-    service: createCategory,
-    defaultResponse: null,
-    fetchOnMount: false,
-    onResponseError,
-    onResponse: onCategoryCreate
+  const { mutate: handleCreateCategory } = useMutation({
+    mutationFn: ResourceService.createResourceCategory,
+    onSuccess: onCategoryCreate,
+    onError: onResponseError
   })
-
   const existingCategoriesNames = allCategoriesNames?.map((item) => item.name)
 
   const onAdd = () => {

src/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer.tsx

@@ -58,7 +58,7 @@ const ResourcesToolBarDrawer: FC<ResourcesToolBarDrawerProps> = ({
     handleNonInputValueChange('sortBy', value)
 
   const onApplyFilters = () => {
-    setCategories(data.categories)
+    setCategories(data.categories ?? [])
     setSearch(data.name)
     onRequestSort(data.sortBy)
     closeDrawer()
@@ -84,8 +84,8 @@ const ResourcesToolBarDrawer: FC<ResourcesToolBarDrawerProps> = ({
           <FiltersToggle handleToggle={onToggle} />
           <AppButtonMenu<CategoryNameInterface>
             customSx={styles.filter}
-            selectedItems={data.categories}
-            service={ResourceService.getResourcesCategoriesNames}
+            selectedItems={data.categories ?? []}
+            service={ResourceService.getResourcesCategoriesName}
             setSelectedItems={onCategoryChange}
             showNoneProperty
             slotProps={{ paper: styles.filterPaper(isMobile) }}

src/services/resource-service.ts

@@ -158,10 +158,21 @@ export const ResourceService = {
   getResourcesCategoriesNames: (): Promise<
     AxiosResponse<CategoryNameInterface[]>
   > => axiosClient.get(URLs.resources.resourcesCategories.getNames),
+  getResourcesCategoriesName: () => {
+    return baseService.request<CategoryNameInterface[]>({
+      method: 'GET',
+      url: URLs.resources.resourcesCategories.getNames
+    })
+  },
   createResourceCategory: async (
-    params?: CreateCategoriesParams
-  ): Promise<AxiosResponse<Categories>> =>
-    await axiosClient.post(URLs.resources.resourcesCategories.post, params),
+    params: CreateCategoriesParams
+  ): Promise<Categories> => {
+    return await baseService.request<Categories>({
+      method: 'POST',
+      url: URLs.resources.resourcesCategories.post,
+      data: params
+    })
+  },
   deleteResourceCategory: async (id: string): Promise<AxiosResponse> =>
     await axiosClient.delete(
       createUrlPath(URLs.resources.resourcesCategories.delete, id)

src/types/services/types/services.types.ts

@@ -18,9 +18,12 @@ export type ServiceFunction<Response, Params = undefined> = (
   params: Params extends undefined ? undefined : Params
 ) => Promise<AxiosResponse<Response>>
 
-export type ServiceFunctionNew<Response, Params = undefined> = (
-  params: Params extends undefined ? undefined : Params
-) => Promise<Response>
+export type ServiceFunctionNew<
+  Response,
+  Params = undefined
+> = Params extends undefined
+  ? () => Promise<Response>
+  : (params: Params) => Promise<Response>
 
 export interface AxiosResponseError extends AxiosError<ErrorResponse> {
   config: InternalAxiosRequestConfig & { _isRetry: boolean }

tests/unit/components/app-button-menu/AppButtonMenu.spec.jsx

@@ -1,5 +1,6 @@
-import { render, screen, fireEvent } from '@testing-library/react'
+import { screen, fireEvent } from '@testing-library/react'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
+import { renderWithProviders } from '~tests/test-utils'
 
 vi.mock('simplebar-react', () => {
   return {
@@ -20,11 +21,10 @@ vi.mock('react-i18next', () => ({
     }
   })
 }))
-
 beforeEach(() => {
   const selectedItems = []
 
-  render(<AppButtonMenu selectedItems={selectedItems} />)
+  renderWithProviders(<AppButtonMenu selectedItems={selectedItems} />)
 })
 
 describe('AppButtonMenu', () => {
@@ -33,16 +33,6 @@ describe('AppButtonMenu', () => {
 
     expect(buttonEl).toBeInTheDocument()
   })
-
-  it('renders no items message after clicking if there are no selected items', () => {
-    const buttonEl = screen.getByRole('button')
-
-    fireEvent.click(buttonEl)
-
-    const el = screen.getByText('No items found')
-
-    expect(el).toBeInTheDocument()
-  })
   it('input field should be in the component after clicking on a button', () => {
     const buttonEl = screen.getByRole('button')
 

tests/unit/containers/category-dropdown/CategoryDropdown.spec.jsx

@@ -66,4 +66,4 @@ describe('CategoryDropdown test', () => {
       expect(newCategory).toBeInTheDocument()
     })
   })
-})
+})