Replaced use axios with use query on GeneralIntoStep container

src/constants/request.ts

@@ -19,6 +19,7 @@ export const URLs = {
   },
   users: {
     get: '/users',
+    getUserById: '/users/:id',
     update: '/users',
     delete: '/users/delete',
     deactivate: '/users/deactivate',

src/containers/tutor-home-page/general-info-step/GeneralInfoStep.tsx

@@ -11,7 +11,7 @@
 import { validations } from '~/components/user-steps-wrapper/constants'
 import { styles } from '~/containers/tutor-home-page/general-info-step/GeneralInfoStep.styles'
 import { useStepContext } from '~/context/step-context'
-import useAxios from '~/hooks/use-axios'
+import useQuery from '~/hooks/use-query'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import useForm from '~/hooks/use-form'
 import { useAppSelector } from '~/hooks/use-redux'
@@ -20,17 +20,11 @@
 
 interface GeneralInfoStepProps {
   btnsBox: ReactNode
-  isUserFetched: boolean
-  setIsUserFetched: (isUserFetched: boolean) => void
 }
 
 type UserName = { firstName: string; lastName: string }
 
-const GeneralInfoStep = ({
-  btnsBox,
-  isUserFetched,
-  setIsUserFetched
-}: GeneralInfoStepProps) => {
+const GeneralInfoStep = ({ btnsBox }: GeneralInfoStepProps) => {
   const { t } = useTranslation()
   const { isLaptopAndAbove, isMobile } = useBreakpoints()
   const { stepData, handleGeneralInfo } = useStepContext()
@@ -56,31 +50,31 @@
   })
 
   const getUserById = useCallback(
-    () => userService.getUserById(userId, userRole as UserRole),
+    () => userService.getUserByIdWithBaseService(userId, userRole as UserRole),
     [userId, userRole]
   )
 
   const updateUserName = useCallback(
     (user: UserName) => {
       handleNonInputValueChange('firstName', user.firstName)
       handleNonInputValueChange('lastName', user.lastName)
-
-      setIsUserFetched(true)
     },
-    [handleNonInputValueChange, setIsUserFetched]
+    [handleNonInputValueChange]
   )
 
-  const { loading: userLoading, fetchData: fetchUser } = useAxios({
-    service: getUserById,
-    defaultResponse: { firstName: '', lastName: '' },
-    fetchOnMount: false,
-    onResponse: updateUserName
+  const { isLoading: userLoading, data: userResponse } = useQuery({
+    queryFn: getUserById,
+    queryKey: ['user', userId],
+    options: {
+      staleTime: Infinity
+    }
   })
 
   useEffect(() => {
-    !isUserFetched && void fetchUser()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (userResponse) {
+      updateUserName(userResponse)
+    }
+  }, [userResponse])
 
   useEffect(() => {
     handleGeneralInfo({ data, errors })

src/services/course-service.ts

@@ -1,8 +1,10 @@
 import { AxiosResponse } from 'axios'
 import { URLs } from '~/constants/request'
 import { axiosClient } from '~/plugins/axiosClient'
-import { Course, CourseForm, GetCoursesParams } from '~/types'
+import { Course, CourseForm, GetCoursesParams, ItemsWithCount } from '~/types'
 import { createUrlPath } from '~/utils/helper-functions'
+import { getFullUrl } from '~/utils/get-full-url'
+import { baseService } from './base-service'
 
 export interface Resource {
   _id: string
@@ -23,6 +25,16 @@ export interface ResourceData {
 export const CourseService = {
   getCourses: async (params?: GetCoursesParams): Promise<AxiosResponse> =>
     await axiosClient.get(URLs.courses.get, { params }),
+
+  getCoursesWithBaseService: (params?: GetCoursesParams) => {
+    return baseService.request<ItemsWithCount<Course>>({
+      method: 'GET',
+      url: getFullUrl({
+        pathname: URLs.courses.get,
+        searchParameters: params
+      })
+    })
+  },
   addCourse: async (data?: CourseForm): Promise<AxiosResponse> =>
     await axiosClient.post(URLs.courses.create, data),
   getCourse: async (id?: string): Promise<AxiosResponse<Course>> =>

src/services/user-service.tsx

@@ -2,6 +2,8 @@ import { AxiosResponse } from 'axios'
 import { axiosClient } from '~/plugins/axiosClient'
 import { URLs } from '~/constants/request'
 import { createUrlPath } from '~/utils/helper-functions'
+import { getFullUrl } from '~/utils/get-full-url'
+import { baseService } from './base-service'
 import {
   GetUsersParams,
   UpdateUserParams,
@@ -25,6 +27,24 @@ export const userService = {
       createUrlPath(URLs.users.get, userId, { role: userRole, isEdit })
     )
   },
+
+  getUserByIdWithBaseService: (
+    id: string,
+    userRole: UserRole,
+    isEdit?: boolean
+  ) => {
+    return baseService.request<UserResponse>({
+      method: 'GET',
+      url: getFullUrl({
+        pathname: URLs.users.getUserById,
+        parameters: { id },
+        searchParameters: {
+          role: userRole,
+          isEdit: isEdit !== undefined ? isEdit.toString() : undefined
+        }
+      })
+    })
+  },
   updateUser: (
     userId: string,
     params: UpdateUserParams

src/types/course/interfaces/course.interface.ts

@@ -51,7 +51,7 @@ export interface CourseFilters extends Pick<Course, 'proficiencyLevel'> {
   page?: string | number
 }
 
-export interface GetCoursesParams extends Partial<RequestParams> {
+export type GetCoursesParams = Partial<RequestParams> & {
   title?: string
   fileName?: string
 }

tests/unit/components/user-steps-wrapper/UserStepsWrapper.spec.jsx

@@ -39,8 +39,8 @@ describe('UserStepsWrapper test', () => {
     })
   })
 
-  it('should render first tab', () => {
-    const firstTab = screen.getByText(/becomeTutor.generalInfo.title/i)
+  it('should render first tab', async () => {
+    const firstTab = await screen.findByText(/becomeTutor.generalInfo.title/i)
 
     expect(firstTab).toBeInTheDocument()
   })

tests/unit/containers/tutor-home-page/general-info-step/GeneralInfoStep.spec.jsx

@@ -38,7 +38,7 @@ describe('GeneralInfoStep test', () => {
   beforeEach(async () => {
     await waitFor(() => {
       mockAxiosClient
-        .onGet(`${URLs.users.get}/${userId}?role=${userRole}`)
+        .onGet(new RegExp(URLs.users.getUserById.replace(':id', userId)))
         .reply(200, userDataMock)
       mockAxiosClient
         .onGet(URLs.location.getCountries)
@@ -67,14 +67,13 @@ describe('GeneralInfoStep test', () => {
     })
   })
 
-  it('should change firstName input', () => {
-    const firstNameInput = screen.getByLabelText(/common.labels.firstName/i)
-
-    act(() => {
-      fireEvent.change(firstNameInput, { target: { value: 'testName' } })
-    })
-
-    expect(firstNameInput.value).toBe('testName')
+  it('should change firstName input', async () => {
+      const firstNameInput = await screen.findByLabelText(/common.labels.firstName/i)
+      act(() => {
+        fireEvent.change(firstNameInput, { target: { value: 'testName' } })
+      })
+
+      expect(firstNameInput.value).toBe('testName')
   })
 
   it('should choose option in countries autocomplete', () => {

tests/unit/pages/student-home/StudentHome.spec.jsx

@@ -2,7 +2,9 @@ import { screen, waitFor } from '@testing-library/react'
 
 import StudentHome from '~/pages/student-home/StudentHome'
 
-import { renderWithProviders } from '~tests/test-utils'
+import { renderWithProviders, mockAxiosClient } from '~tests/test-utils'
+import { URLs } from '~/constants/request'
+import { beforeAll } from 'vitest'
 
 const userId = '63f5d0ebb'
 
@@ -13,7 +15,14 @@ const secondLoginState = {
   appMain: { isFirstLogin: false, userRole: 'student', userId }
 }
 
+const userDataMock = { _id: userId, firstName: 'test', lastName: 'test' }
+
 describe('StudentsHome component', () => {
+  beforeAll( async () => {
+    mockAxiosClient
+            .onGet(new RegExp(URLs.users.getUserById.replace(':id', userId)))
+            .reply(200, userDataMock)
+  })
   it('should render modal when logging in for the first time', async () => {
     renderWithProviders(<StudentHome />, {
       preloadedState: firstLoginState