fix(KUI-1378): the json.stringify is now removed and more memorizatio…

…n has been used

public/js/app/hooks/__tests__/useApi.test.js

@@ -39,9 +39,10 @@ describe('useApi', () => {
   })
 
   test('calls apiToCall with given parameters', async () => {
-    const { result } = renderHook(() => useApi(apiToCall, { one: 'one', two: 2 }, null, null))
+    const apiParams1 = { one: 'one', two: 2 }
+    const { result } = renderHook(() => useApi(apiToCall, apiParams1, null, null))
 
-    expect(apiToCall).toHaveBeenLastCalledWith({ one: 'one', two: 2 })
+    expect(apiToCall).toHaveBeenLastCalledWith(apiParams1)
 
     await waitFor(() => expect(result.current.data).toStrictEqual('somePlannedModules'))
 
@@ -50,15 +51,18 @@ describe('useApi', () => {
       data: 'someData',
     })
 
-    const { result: result2 } = renderHook(() => useApi(anotherApiToCall, { two: 'two', three: 3 }, null, null))
+    const apiParams2 = { two: 'two', three: 3 }
 
-    expect(anotherApiToCall).toHaveBeenLastCalledWith({ two: 'two', three: 3 })
+    const { result: result2 } = renderHook(() => useApi(anotherApiToCall, apiParams2, null, null))
+
+    expect(anotherApiToCall).toHaveBeenLastCalledWith(apiParams2)
 
     await waitFor(() => expect(result2.current.data).toStrictEqual('someData'))
   })
 
   test('returns data from apiToCall', async () => {
-    const { result } = renderHook(() => useApi(apiToCall, {}, null, null))
+    const params = {}
+    const { result } = renderHook(() => useApi(apiToCall, params, null, null))
 
     await waitFor(() => expect(result.current.data).toStrictEqual('somePlannedModules'))
   })
@@ -192,9 +196,8 @@ describe('useApi', () => {
 
       await waitFor(() => expect(firstResult.current.isError).toStrictEqual(true))
 
-      const { result: secodResult } = renderHook(() =>
-        useApi(apiToCall, { ...defaultParams, applicationCode: 54321 }, null, null)
-      )
+      const newParams = { ...defaultParams, applicationCode: 54321 }
+      const { result: secodResult } = renderHook(() => useApi(apiToCall, newParams, null, null))
 
       await waitFor(() => expect(secodResult.current.isError).toStrictEqual(false))
       jest.advanceTimersByTime(100)

public/js/app/hooks/useApi.js

@@ -28,7 +28,7 @@ export const useApi = (apiToCall, apiParams, defaultValue, defaulValueIfNullResp
     // we do not want to react on defaultValue and defaulValueIfNullResponse, because otherwise
     // we cannot use empty objects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiToCall, JSON.stringify(apiParams)])
+  }, [apiToCall, apiParams])
 
   return {
     data,

public/js/app/hooks/useCourseEmployees.js

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useWebContext } from '../context/WebContext'
 import { useApi } from './useApi'
 import { getCourseEmployees } from './api/getCourseEmployees'
@@ -7,12 +8,17 @@ export const useCourseEmployees = ({ courseCode, selectedSemester, applicationCo
 
   const { uri } = context.paths.api.employees
 
-  const { data, isError, isLoading } = useApi(getCourseEmployees, {
-    uri,
-    courseCode,
-    selectedSemester,
-    applicationCode,
-  })
+  const requestData = useMemo(
+    () => ({
+      uri,
+      courseCode,
+      selectedSemester,
+      applicationCode,
+    }),
+    [uri, courseCode, selectedSemester, applicationCode]
+  )
+
+  const { data, isError, isLoading } = useApi(getCourseEmployees, requestData)
 
   return {
     courseRoundEmployees: data,

public/js/app/hooks/usePlannedModules.js

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useWebContext } from '../context/WebContext'
 import { getPlannedModules } from './api/getPlannedModules'
 import { useApi } from './useApi'
@@ -11,13 +12,18 @@ export const usePlannedModules = ({ courseCode, semester, applicationCode }) =>
 
   const basePath = context.paths.api.plannedSchemaModules.uri
 
-  const { data, isError, isLoading } = useApi(
-    getPlannedModules,
-    { basePath, courseCode, semester, applicationCode },
-    null,
-    MISSING_INFO
+  const requestData = useMemo(
+    () => ({
+      basePath,
+      courseCode,
+      semester,
+      applicationCode,
+    }),
+    [basePath, courseCode, semester, applicationCode]
   )
 
+  const { data, isError, isLoading } = useApi(getPlannedModules, requestData, null, MISSING_INFO)
+
   const plannedModules = data === MISSING_INFO ? missingInfoLabel : data
 
   return {