refactor(admin): remove axios library use (#1525)

#1248

Author: kunalgaurav-bmw

package.json

@@ -44,7 +44,6 @@
     "@react-hook/cache": "^1.1.1",
     "@reduxjs/toolkit": "^2.2.8",
     "autosuggest-highlight": "^3.3.4",
-    "axios": "^1.8.4",
     "buffer": "^6.0.3",
     "dayjs": "^1.11.13",
     "i18next": "^23.15.2",

src/components/overlays/AddAppUserRoles/AppRoles.tsx

@@ -22,26 +22,25 @@ import { Checkbox, Alert } from '@catena-x/portal-shared-components'
 import { Box } from '@mui/material'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { rolesToAddSelector } from 'features/admin/userDeprecated/slice'
-import { setRolesToAdd } from 'features/admin/userDeprecated/actions'
+import { setRolesToAdd } from 'features/admin/userDeprecated/slice'
 import { useFetchAppRolesQuery } from 'features/admin/appuserApiSlice'
 import { useParams } from 'react-router-dom'
+import { type RootState } from 'features/store'
 
 export const AppRoles = () => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
-  const roles = useSelector(rolesToAddSelector)
   const { appId } = useParams()
   const { data } = useFetchAppRolesQuery(appId ?? '')
 
   const selectRole = (roleName: string, select: boolean) => {
+    const roles = useSelector((state: RootState) => state.admin.user.rolesToAdd)
     const isSelected = roles.includes(roleName)
     if (!isSelected && select) {
       dispatch(setRolesToAdd([...roles, roleName]))
     } else if (isSelected && !select) {
-      const oldRoles = [...roles]
-      oldRoles.splice(oldRoles.indexOf(roleName), 1)
-      dispatch(setRolesToAdd([...oldRoles]))
+      const updatedRoles = roles.filter((role) => role !== roleName)
+      dispatch(setRolesToAdd(updatedRoles))
     }
   }
 

src/components/overlays/AddAppUserRoles/UserListContent.tsx

@@ -27,7 +27,7 @@ import { useTranslation } from 'react-i18next'
 import uniqueId from 'lodash/uniqueId'
 import type { TenantUser } from 'features/admin/userApiSlice'
 import { updatePartnerSelector } from 'features/control/updates'
-import { setSelectedUserToAdd } from 'features/admin/userDeprecated/actions'
+import { setSelectedUserToAdd } from 'features/admin/userDeprecated/slice'
 import Patterns from 'types/Patterns'
 import { useFetchAppUsersSearchQuery } from 'features/admin/appuserApiSlice'
 

src/components/overlays/AddAppUserRoles/index.tsx

@@ -37,17 +37,15 @@ import './style.scss'
 import {
   rolesToAddSelector,
   selectedUserSelector,
+  setRolesToAdd,
+  setSelectedUserToAdd,
 } from 'features/admin/userDeprecated/slice'
 import {
   setUserRoleResp,
   useUpdateUserRolesMutation,
   type UserRoleRequest,
   SuccessErrorType,
 } from 'features/admin/appuserApiSlice'
-import {
-  setRolesToAdd,
-  setSelectedUserToAdd,
-} from 'features/admin/userDeprecated/actions'
 import { Box } from '@mui/material'
 import { useState } from 'react'
 
@@ -76,6 +74,7 @@ export default function AddAppUserRoles() {
         dispatch(setUserRoleResp(SuccessErrorType.SUCCESS))
         clearUsersAndRoles()
       } catch (err) {
+        console.error(err, 'ERROR WHILE FETCHING DOCUMENT')
         dispatch(setUserRoleResp(SuccessErrorType.ERROR))
       }
       dispatch(closeOverlay())

src/components/overlays/AddBPN/index.tsx

@@ -26,10 +26,10 @@ import {
   Input,
 } from '@catena-x/portal-shared-components'
 import {
-  deleteUserBpn,
-  fetchAny,
-  putBusinessPartnerNumber,
-} from 'features/admin/userOwn/actions'
+  useDeleteUserBpnMutation,
+  useFetchAnyQuery,
+  usePutBusinessPartnerNumberMutation,
+} from 'features/admin/userOwn/apiSlice'
 import { UserdetailSelector } from 'features/admin/userOwn/slice'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -51,10 +51,9 @@ export default function AddBPN({ id }: { id: string }) {
   const [inputBPN, setInputBPN] = useState('')
   const [bpnErrorMsg, setBpnErrorMessage] = useState('')
   const [hoverClass, setHoverClass] = useState<number>(-1)
-
-  useEffect(() => {
-    dispatch(fetchAny(id))
-  }, [dispatch, id])
+  const [deleteUserBpn] = useDeleteUserBpnMutation()
+  const [putBusinessPartnerNumber] = usePutBusinessPartnerNumberMutation()
+  useFetchAnyQuery(id)
 
   useEffect(() => {
     setBpnValues(userInfo.bpn)
@@ -73,18 +72,18 @@ export default function AddBPN({ id }: { id: string }) {
   const addBPN = async () => {
     try {
       if (!bpnErrorMsg) {
-        await dispatch(
-          putBusinessPartnerNumber({ companyUserId: id, inputBPN })
-        ).unwrap()
+        await putBusinessPartnerNumber({ companyUserId: id, inputBPN }).unwrap()
         setBpnValues([...bpnValues, inputBPN])
         setInputBPN('')
       }
-    } catch (error) {}
+    } catch (error) {
+      console.error(error, 'ERROR WHILE FETCHING DOCUMENT')
+    }
   }
 
   const onDeleteBpnHandler = (deleteBpnId: string) => {
     const params = { companyUserId: stateSelectorInfo.id, bpn: deleteBpnId }
-    dispatch(deleteUserBpn(params))
+    deleteUserBpn(params).unwrap()
   }
 
   const onHoverEvent = (index: number) => {

src/components/overlays/AddMultipleUser/index.tsx

@@ -45,12 +45,14 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import { OVERLAYS, PAGES } from 'types/Constants'
 import { show, closeOverlay } from 'features/control/overlay'
 import { Dropzone } from '../../shared/basic/Dropzone'
-import { rolesToAddSelector } from 'features/admin/userDeprecated/slice'
+import {
+  rolesToAddSelector,
+  setRolesToAdd,
+} from 'features/admin/userDeprecated/slice'
 import {
   type AppRole,
   useFetchCoreoffersRolesQuery,
 } from 'features/admin/appuserApiSlice'
-import { setRolesToAdd } from 'features/admin/userDeprecated/actions'
 import {
   type MultipleUsersResponse,
   useAddMutipleUsersMutation,

src/components/overlays/AddUser/AddUserContent.tsx

@@ -32,6 +32,8 @@ import { UserRoles } from './UserRoles'
 import {
   rolesToAddSelector,
   usersToAddSelector,
+  setRolesToAdd,
+  setUsersToAdd,
 } from 'features/admin/userDeprecated/slice'
 import { useDispatch, useSelector } from 'react-redux'
 import { closeOverlay } from 'features/control/overlay'
@@ -43,10 +45,6 @@ import {
   useAddTenantUsersMutation,
   useAddUserIdpMutation,
 } from 'features/admin/userApiSlice'
-import {
-  setRolesToAdd,
-  setUsersToAdd,
-} from 'features/admin/userDeprecated/actions'
 import { type IdentityProvider, IDPCategory } from 'features/admin/idpApiSlice'
 import type { IHashMap } from 'types/MainTypes'
 import { SuccessErrorType } from 'features/admin/appuserApiSlice'
@@ -131,6 +129,7 @@ export const AddUserContent = ({ idp }: { idp: IdentityProvider }) => {
         : await addTenantUsers([addUser]).unwrap()
       setStatus(AddUserState.SUCCESS)
     } catch (err) {
+      console.error(err, 'ERROR WHILE FETCHING DOCUMENT')
       setStatus(AddUserState.ERROR)
     }
     setTimeout(() => {

src/components/overlays/AddUser/UserRoles.tsx

@@ -30,8 +30,10 @@ import {
   type AppRole,
   useFetchCoreoffersRolesQuery,
 } from 'features/admin/appuserApiSlice'
-import { rolesToAddSelector } from 'features/admin/userDeprecated/slice'
-import { setRolesToAdd } from 'features/admin/userDeprecated/actions'
+import {
+  rolesToAddSelector,
+  setRolesToAdd,
+} from 'features/admin/userDeprecated/slice'
 import { PAGES } from 'types/Constants'
 
 export const UserRoles = () => {

src/components/overlays/UserInfo/index.tsx

@@ -19,23 +19,19 @@
  ********************************************************************************/
 
 import { DialogContent, DialogHeader } from '@catena-x/portal-shared-components'
-import { fetchAny } from 'features/admin/userOwn/actions'
+import { useFetchAnyQuery } from 'features/admin/userOwn/apiSlice'
 import { UserdetailSelector } from 'features/admin/userOwn/slice'
 import { show } from 'features/control/overlay'
 import type { AppDispatch } from 'features/store'
-import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { OVERLAYS } from 'types/Constants'
 
 export default function UserInfo({ id }: { id: string }) {
   const { t } = useTranslation()
   const dispatch = useDispatch<AppDispatch>()
-  const userInfo = useSelector(UserdetailSelector)
-
-  useEffect(() => {
-    dispatch(fetchAny(id))
-  }, [dispatch, id])
+  const storedUserInfo = useSelector(UserdetailSelector)
+  const { data: userInfo } = useFetchAnyQuery(id)
 
   return (
     <>
@@ -48,7 +44,7 @@ export default function UserInfo({ id }: { id: string }) {
       />
 
       <DialogContent>
-        <pre>{JSON.stringify(userInfo, null, 2)}</pre>
+        <pre>{JSON.stringify(userInfo ?? storedUserInfo, null, 2)}</pre>
       </DialogContent>
     </>
   )

src/components/pages/Admin/RegistrationRequests/index.tsx

@@ -18,11 +18,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Typography, PageSnackbar } from '@catena-x/portal-shared-components'
-import { useDispatch } from 'react-redux'
-import { fetchCompanyDetail } from 'features/admin/registration/actions'
 import './style.scss'
 import type { GridCellParams } from '@mui/x-data-grid'
 import CompanyDetailOverlay from './CompanyDetailOverlay'
@@ -39,7 +37,7 @@ import { ServerResponseOverlay } from 'components/overlays/ServerResponse'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import AddBpnOveraly from './ConfirmationOverlay/AddBpnOverlay'
 import ConfirmCancelOverlay from './ConfirmationOverlay/ConfirmCancelOverlay'
-import type { AppDispatch } from 'features/store'
+import { useGetCompanyDetailQuery } from 'features/admin/registration/apiSlice'
 
 enum TableField {
   DETAIL = 'detail',
@@ -49,8 +47,6 @@ enum TableField {
 export default function RegistrationRequests() {
   const { t } = useTranslation()
 
-  const dispatch = useDispatch<AppDispatch>()
-
   const [overlayOpen, setOverlayOpen] = useState<boolean>(false)
 
   const [confirmModalOpen, setConfirmModalOpen] = useState<boolean>(false)
@@ -79,15 +75,24 @@ export default function RegistrationRequests() {
     useState<boolean>(false)
   const [selectedRequestName, setSelectedRequestName] = useState<string>('')
   const [selectedActiveTab, setSelectedActiveTab] = useState<number>(0)
+
+  const { refetch } = useGetCompanyDetailQuery(selectedRequestId ?? '', {
+    skip: !selectedRequestId,
+  })
+
+  useEffect(() => {
+    if (selectedRequestId) {
+      refetch()
+    }
+  }, [selectedRequestId, refetch])
+
   const onTableCellClick = (params: GridCellParams) => {
-    // Show overlay only when detail field clicked
     if (
       params.field === TableField.DETAIL ||
       params.field === TableField.STATUS
     ) {
       setSelectedRequestId(params.row.applicationId)
       setSelectedRequest(params.row)
-      dispatch(fetchCompanyDetail(params.row.applicationId))
       setOverlayOpen(true)
       setSelectedActiveTab(params.field === TableField.DETAIL ? 0 : 2)
     }

src/components/shared/basic/ProgressVerificationButton/index.tsx

@@ -40,7 +40,7 @@ import {
 import './style.scss'
 import { useReducer } from 'react'
 import { useDispatch } from 'react-redux'
-import { refreshApplicationRequest } from 'features/admin/registration/actions'
+import { refreshApplicationRequest } from 'features/admin/registration/slice'
 
 enum ActionKind {
   SET_RETRIGGER_LOADING = 'SET_RETRIGGER_LOADING',
@@ -396,9 +396,7 @@ export const ProgressVerificationButton = ({
                     }}
                     variant="caption3"
                   >
-                    {props.details
-                      ? props.details
-                      : t('content.checklistOverlay.nocomments')}
+                    {props.details ?? t('content.checklistOverlay.nocomments')}
                   </Typography>
                 </div>
                 <div