refactor(news section): remove axios library use (#1505)

#1248

Author: kunalgaurav-bmw

src/components/overlays/NewsDetail/index.tsx

@@ -24,22 +24,16 @@ import {
   DialogHeader,
 } from '@catena-x/portal-shared-components'
 import { show } from 'features/control/overlay'
-import { fetchItems } from 'features/info/news/actions'
-import { itemsSelector } from 'features/info/news/slice'
+import { useGetItemsQuery } from 'features/info/news/apiSlice'
 import type { AppDispatch } from 'features/store'
-import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { OVERLAYS } from 'types/Constants'
 
 export default function NewsDetail({ id }: { id: string }) {
   const { t } = useTranslation()
+  const { data: items = [] } = useGetItemsQuery()
   const dispatch = useDispatch<AppDispatch>()
-  const items = useSelector(itemsSelector)
-
-  useEffect(() => {
-    dispatch(fetchItems())
-  }, [dispatch])
 
   return (
     <>

src/components/pages/Home/NewsSection/index.tsx

@@ -19,20 +19,11 @@
  ********************************************************************************/
 
 import { Cards } from '@catena-x/portal-shared-components'
-import { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { fetchItems } from 'features/info/news/actions'
-import { itemsSelector } from 'features/info/news/slice'
 import './style.scss'
-import type { AppDispatch } from 'features/store'
+import { useGetItemsQuery } from 'features/info/news/apiSlice'
 
 export default function NewsSection() {
-  const dispatch = useDispatch<AppDispatch>()
-  const items = useSelector(itemsSelector)
-
-  useEffect(() => {
-    dispatch(fetchItems())
-  }, [dispatch])
+  const { data: items = [] } = useGetItemsQuery()
 
   return (
     <section className="news-section">

src/features/info/news/actions.ts

@@ -1,6 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 BMW Group AG
- * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2025 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -18,24 +17,20 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 import type { CardItems } from '@catena-x/portal-shared-components'
 import { getAssetBase } from 'services/EnvironmentService'
-import { HttpClient } from 'utils/httpClient'
 
-export class Api extends HttpClient {
-  private static classInstance?: Api
+export const apiSlice = createApi({
+  reducerPath: 'rtk/newsApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: getAssetBase(),
+  }),
+  endpoints: (builder) => ({
+    getItems: builder.query<CardItems[], void>({
+      query: () => '/api/news/latest.json',
+    }),
+  }),
+})
 
-  public constructor() {
-    super(getAssetBase())
-  }
-
-  public static getInstance() {
-    if (!this.classInstance) {
-      this.classInstance = new Api()
-    }
-    return this.classInstance
-  }
-
-  public getItems = () =>
-    this.instance.get<CardItems[]>('/api/news/latest.json')
-}
+export const { useGetItemsQuery } = apiSlice

src/features/info/news/api.ts renamed to src/features/info/news/apiSlice.ts

@@ -20,40 +20,44 @@
 
 import { createSlice } from '@reduxjs/toolkit'
 import type { CardItems } from '@catena-x/portal-shared-components'
-import type { RootState } from 'features/store'
+import { type RootState } from 'features/store'
 import { RequestState } from 'types/MainTypes'
-import { fetchItems } from './actions'
+import { apiSlice } from './apiSlice'
 import { initialState, name } from './types'
 
 export const slice = createSlice({
   name,
   initialState,
   reducers: {},
   extraReducers: (builder) => {
-    builder.addCase(fetchItems.pending, (state) => ({
-      ...state,
-      items: [],
-      request: RequestState.SUBMIT,
-      error: '',
-    }))
-    builder.addCase(fetchItems.fulfilled, (state, { payload }) => ({
-      ...state,
-      items: payload || [],
-      request: RequestState.OK,
-      error: '',
-    }))
-    builder.addCase(fetchItems.rejected, (state, action) => ({
-      ...state,
-      items: [],
-      request: RequestState.ERROR,
-      error: action.error.message!,
-    }))
+    builder
+      .addMatcher(apiSlice.endpoints.getItems.matchPending, (state) => {
+        state.items = []
+        state.request = RequestState.SUBMIT
+        state.error = ''
+      })
+      .addMatcher(
+        apiSlice.endpoints.getItems.matchFulfilled,
+        (state, { payload }) => {
+          state.items = payload ?? []
+          state.request = RequestState.OK
+          state.error = ''
+        }
+      )
+      .addMatcher(
+        apiSlice.endpoints.getItems.matchRejected,
+        (state, { error }) => {
+          state.items = []
+          state.request = RequestState.ERROR
+          state.error = error.message ?? ''
+        }
+      )
   },
 })
 
 export const itemsSelector = (state: RootState): CardItems[] =>
   state.info.news.items
 
-const Slice = { slice }
+export const Slice = { slice }
 
 export default Slice

src/features/info/news/slice.ts

@@ -22,7 +22,7 @@ import { createAction, createAsyncThunk } from '@reduxjs/toolkit'
 import { apiSlice as PartnerNetworkApiSlice } from '../../partnerNetwork/apiSlice'
 import { Api as AppsApi } from 'features/apps/marketplaceDeprecated/api'
 import { Api as UserApi } from 'features/admin/userDeprecated/api'
-import { Api as NewsApi } from 'features/info/news/api'
+import { apiSlice as NewsApi } from 'features/info/news/apiSlice'
 import {
   actionToSearchItem,
   appToSearchItem,
@@ -150,8 +150,12 @@ const searchForExpression = async function (expr: string) {
         )
         .unwrap()
         .catch(() => emptyPartnerResult),
-      NewsApi.getInstance()
-        .getItems()
+      store
+        .dispatch(NewsApi.endpoints.getItems.initiate())
+        .unwrap()
+        .then((response: CardItems[]) => {
+          return response
+        })
         .catch(() => emptyNewsResult),
       UserApi.getInstance()
         .getTenantUsers()

src/features/info/search/actions.ts

@@ -60,6 +60,7 @@ import { apiSlice as partnerNetworkApiSlice } from './partnerNetwork/apiSlice'
 import { apiSlice as partnerNetworkPortalApiSlice } from './newPartnerNetwork/partnerNetworkPortalApiSlice'
 import { apiSlice as connectorApiSlice } from './connector/connectorApiSlice'
 import { apiSlice as serviceManagementApiSlice } from './serviceManagement/apiSlice'
+import { apiSlice as newsApiSlice } from './info/news/apiSlice'
 import serviceSubscriptionSlice from './serviceSubscription/slice'
 import { apiSlice as serviceSubscriptionApiSlice } from './serviceSubscription/serviceSubscriptionApiSlice'
 import { apiSlice as serviceAdminBoardApiSlice } from './adminBoard/serviceAdminBoardApiSlice'
@@ -125,6 +126,7 @@ export const reducers = {
   [connectorApiSlice.reducerPath]: connectorApiSlice.reducer,
   [semanticApiSlice.reducerPath]: semanticApiSlice.reducer,
   [serviceManagementApiSlice.reducerPath]: serviceManagementApiSlice.reducer,
+  [newsApiSlice.reducerPath]: newsApiSlice.reducer,
   [serviceSubscriptionApiSlice.reducerPath]:
     serviceSubscriptionApiSlice.reducer,
   [serviceAdminBoardApiSlice.reducerPath]: serviceAdminBoardApiSlice.reducer,
@@ -165,6 +167,7 @@ export const store = configureStore({
       .concat(connectorApiSlice.middleware)
       .concat(semanticApiSlice.middleware)
       .concat(serviceManagementApiSlice.middleware)
+      .concat(newsApiSlice.middleware)
       .concat(serviceSubscriptionApiSlice.middleware)
       .concat(serviceAdminBoardApiSlice.middleware)
       .concat(companyRoleApiSlice.middleware)