refactor(app marketplace): remove axios library use (#1512)

#1248

Author: kunalgaurav-bmw

src/assets/locales/de/main.json

@@ -303,7 +303,8 @@
       "favoriteSection": {
         "title": "Meine Favoriten",
         "myFavorite": "Meine Favoriten",
-        "noFavoriteDescription": "Ihre App Favoriten werden in diesem Abschnitt angezeigt, sobald Favoriten ausgewählt sind."
+        "noFavoriteDescription": "Ihre App-Favoriten werden in diesem Abschnitt angezeigt, sobald Favoriten ausgewählt sind.",
+        "errorMsg": "Fehler! Etwas ist schief gelaufen"
       },
       "appOverviewSection": {
         "title": "App Übersicht",
@@ -327,7 +328,8 @@
         "noMatch": "Keine Treffer",
         "for": "zu Ihrem Suchausdruck",
         "dataLoadFailed": "Das Laden der Daten ist aufgrund fehlender Berechtigungsrechte fehlgeschlagen.",
-        "loadFailed": "Laden fehlgeschlagen"
+        "loadFailed": "Laden fehlgeschlagen",
+        "errorMsg": "Fehler! Etwas ist schief gelaufen"
       }
     },
     "semantichub": {
@@ -576,7 +578,7 @@
       "headerTitle": "Update Contract Documents",
       "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
       "successMsg": "Document uploaded successfully",
-      "errorMsg": "Error! Something went wrong",
+      "errorMsg": "Fehler! Etwas ist schief gelaufen",
       "uploadNewDocument": "Upload new document",
       "uploadNewDocumentDescription": "Hinweis: Es ist nur eine Datei zum Hochladen zulässig",
       "documentDeleteSuccess": "Document deleted successfully",
@@ -1412,7 +1414,7 @@
           "message": "Please try it again"
         },
         "dataSavedSuccessMessage": "Data saved successfully",
-        "errormessage": "Error! Something went wrong",
+        "errormessage": "Fehler! Etwas ist schief gelaufen",
         "fileSizeError": "Uploaded file is too big. Maximum 0.8MB is allowed",
         "shouldNotStartWith": "and should not start with"
       },
@@ -1585,7 +1587,7 @@
         "helpText": "For any questions regarding these change(s), please contact the Catena-X helpdesk:",
         "email": "[email protected]",
         "tenantUrlSuccessMsg": "App Tenant URL successfully updated",
-        "tenantUrlErrorMsg": "Error! Something went wrong",
+        "tenantUrlErrorMsg": "Fehler! Etwas ist schief gelaufen",
         "externalServices": {
           "heading": "Details zum externen Dienst",
           "trustedIssuer": {
@@ -1619,7 +1621,7 @@
       "headerTitle": "App request management",
       "search": "search company name/app title",
       "noDataMessage": "No data available",
-      "errorMsg": "Error! Something went wrong",
+      "errorMsg": "Fehler! Etwas ist schief gelaufen",
       "successMsg": "Successfully completed",
       "tabs": {
         "open": "Open",

src/assets/locales/en/main.json

@@ -303,7 +303,8 @@
       "favoriteSection": {
         "title": "My Favorite Applications",
         "myFavorite": "My Favorites",
-        "noFavoriteDescription": "Your app favorites will show up in this section as soon as favorites selected."
+        "noFavoriteDescription": "Your app favorites will show up in this section as soon as favorites are selected.",
+        "errorMsg": "Error! Something went wrong"
       },
       "appOverviewSection": {
         "title": "App Overview",
@@ -327,7 +328,8 @@
         "noMatch": "No Match",
         "for": "for your search term",
         "dataLoadFailed": "Data Load Failed due to missing permission rights.",
-        "loadFailed": "Load Failed"
+        "loadFailed": "Load Failed",
+        "errorMsg": "Error! Something went wrong"
       }
     },
     "semantichub": {

src/components/pages/AppDetail/AppDetailHeader/index.tsx

@@ -226,7 +226,7 @@ export default function AppDetailHeader({
             {t('content.appdetail.language')}:
           </Typography>
           <Typography variant="caption2" sx={{ pb: 2, ml: 1 }}>
-            {item.languages?.map((lang, index) => (
+            {item.languages?.map((lang: string, index: number) => (
               <span key={lang}>
                 {` ${index ? ', ' : ''}${lang.toUpperCase()} `}
               </span>

src/components/pages/AppMarketplace/AppListSection/index.tsx

@@ -25,20 +25,23 @@ import {
 } from '@catena-x/portal-shared-components'
 import { useTheme } from '@mui/material'
 import { AppListGroupView } from '../AppListGroupView'
-import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate, useParams, useLocation } from 'react-router-dom'
-import { addItem, removeItem } from 'features/apps/favorites/actions'
 import {
   useFetchActiveAppsQuery,
   useFetchFavoriteAppsQuery,
 } from 'features/apps/apiSlice'
 import CommonService from 'services/CommonService'
-import type { AppDispatch } from 'features/store'
 import { appsControlSelector } from 'features/apps/control'
 import { type AppMarketplaceApp } from 'features/apps/types'
 import { useEffect, useState } from 'react'
 import { cloneDeep } from 'lodash'
 import NoItems from 'components/pages/NoItems'
+import {
+  useAddItemMutation,
+  useRemoveItemMutation,
+} from 'features/apps/favorites/apiSlice'
+import { useSelector } from 'react-redux'
+import { error } from 'services/NotifyService'
 
 export const label = 'AppList'
 
@@ -48,33 +51,63 @@ export default function AppListSection() {
   const { id } = useParams()
   const location = useLocation()
 
-  const dispatch = useDispatch<AppDispatch>()
   const navigate = useNavigate()
-  const { data, error, isError, refetch } = useFetchActiveAppsQuery()
+  const {
+    data,
+    error: fetchError,
+    isError,
+    refetch,
+  } = useFetchActiveAppsQuery()
   const { data: favoriteItems, refetch: refetchFavoriteApps } =
     useFetchFavoriteAppsQuery()
+
   const control = useSelector(appsControlSelector)
   const [list, setList] = useState<AppMarketplaceApp[]>([])
   const [favList, setFavList] = useState<string[]>([])
 
-  // To-Do fix the type issue with status and data from FetchBaseQueryError
+  const [addItem] = useAddItemMutation()
+  const [removeItem] = useRemoveItemMutation()
+
+  // Add an ESLint exception until there is a solution
   // eslint-disable-next-line
-  const activeAppsError = error as any
+  const activeAppsError = fetchError as any
 
   const checkIsFavorite = (appId: string) => favList?.includes(appId)
 
   const addOrRemoveFavorite = (event: React.MouseEvent, appId: string) => {
     const favs = cloneDeep(favList)
-    event?.stopPropagation()
+    event.stopPropagation()
+
     if (checkIsFavorite(appId)) {
-      dispatch(removeItem(appId))
-      const indexVal = favs?.indexOf(appId)
-      favs.splice(indexVal, 1)
-      arrangeDataList(list, favs)
+      removeItem(appId)
+        .unwrap()
+        .then(() => {
+          favs.splice(favs.indexOf(appId), 1)
+          arrangeDataList(list, favs)
+          refetchFavoriteApps()
+        })
+        .catch((err) => {
+          error(
+            t('content.appstore.appOverviewSection.errorMsg'),
+            '',
+            err as object
+          )
+        })
     } else {
-      dispatch(addItem(appId))
-      favs?.push(appId)
-      arrangeDataList(list, favs)
+      addItem(appId)
+        .unwrap()
+        .then(() => {
+          favs.push(appId)
+          arrangeDataList(list, favs)
+          refetchFavoriteApps()
+        })
+        .catch((err) => {
+          error(
+            t('content.appstore.appOverviewSection.errorMsg'),
+            '',
+            err as object
+          )
+        })
     }
   }
 
@@ -104,9 +137,7 @@ export default function AppListSection() {
         variant="indeterminate"
         colorVariant="primary"
         size={50}
-        sx={{
-          color: theme.palette.primary.main,
-        }}
+        sx={{ color: theme.palette.primary.main }}
       />
     </div>
   )

src/components/pages/AppMarketplace/FavoriteSection/FavoriteItem.tsx

@@ -22,11 +22,11 @@ import { Card } from '@catena-x/portal-shared-components'
 import uniqueId from 'lodash/uniqueId'
 import { useNavigate } from 'react-router-dom'
 import { useState, useEffect } from 'react'
-import { removeItem } from 'features/apps/favorites/actions'
-import { useDispatch } from 'react-redux'
 import CommonService from 'services/CommonService'
-import type { AppDispatch } from 'features/store'
 import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
+import { useRemoveItemMutation } from 'features/apps/favorites/apiSlice'
+import { error } from 'services/NotifyService'
+import { t } from 'i18next'
 interface FavoriteItemProps {
   // Add an ESLint exception until there is a solution
   // eslint-disable-next-line
@@ -41,14 +41,20 @@ export default function FavoriteItem({
   cardClick,
 }: Readonly<FavoriteItemProps>) {
   const navigate = useNavigate()
-  const dispatch = useDispatch<AppDispatch>()
   const [cardImage, setCardImage] = useState('')
   const [addedToFavorite, setAddedToFavorite] = useState(false)
   const [fetchDocumentById] = useFetchDocumentByIdMutation()
+  const [removeItem] = useRemoveItemMutation()
 
   const handleSecondaryButtonClick = (id: string) => {
-    dispatch(removeItem(id))
-    setAddedToFavorite(!addedToFavorite)
+    removeItem(id)
+      .unwrap()
+      .then(() => {
+        setAddedToFavorite(!addedToFavorite)
+      })
+      .catch((err) => {
+        error(t('content.appstore.favoriteSection.errorMsg'), '', err as object)
+      })
   }
 
   useEffect(() => {

src/components/pages/AppMarketplace/FavoriteSection/index.tsx

@@ -23,24 +23,18 @@ import { Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import FavoriteItem from './FavoriteItem'
 import EmptyFavorites from './EmptyFavorites'
-import { useFetchActiveAppsQuery } from 'features/apps/apiSlice'
+import {
+  useFetchActiveAppsQuery,
+  useFetchFavoriteAppsQuery,
+} from 'features/apps/apiSlice'
 import { appToCard } from 'features/apps/mapper'
-import { useDispatch, useSelector } from 'react-redux'
-import { itemsSelector } from 'features/apps/favorites/slice'
-import { useEffect } from 'react'
-import { fetchItems } from 'features/apps/favorites/actions'
-import type { AppDispatch } from 'features/store'
 
 export default function FavoriteSection() {
   const { t } = useTranslation()
-  const dispatch = useDispatch<AppDispatch>()
-  const active = useFetchActiveAppsQuery().data ?? []
-  const favorites = useSelector(itemsSelector)
-  const favoriteSectionPosition = favorites.length === 0 ? 30 : 35
+  const { data: active = [] } = useFetchActiveAppsQuery()
+  const { data: favorites = [] } = useFetchFavoriteAppsQuery()
 
-  useEffect(() => {
-    dispatch(fetchItems())
-  }, [dispatch])
+  const favoriteSectionPosition = favorites.length === 0 ? 30 : 35
 
   return (
     <Box