feat(notifications): enable content search (#426)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## unreleased
+
+- Notifications
+  - search also returns hits in content
+
 ## 1.8.0-RC1
 
 ### Change

src/components/pages/NotificationCenter/NotificationList.tsx

@@ -29,8 +29,8 @@ import isYesterday from 'dayjs/plugin/isYesterday'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useGetNotificationsQuery } from 'features/notification/apiSlice'
 import './Notifications.scss'
-import { useSelector } from 'react-redux'
-import { notificationFetchSelector } from 'features/notification/slice'
+import { useDispatch, useSelector } from 'react-redux'
+import { notificationFetchSelector, setMeta } from 'features/notification/slice'
 import NotificationPager from './NotificationPager'
 
 dayjs.extend(isToday)
@@ -54,10 +54,12 @@ const NotificationGroup = ({
   fetchArgs: NotificationFetchType
   page: number
 }) => {
+  const dispatch = useDispatch()
   const { data } = useGetNotificationsQuery({
     ...fetchArgs,
     page,
   })
+  if (data) dispatch(setMeta(data.meta))
   return (
     <ul className="group">
       <NotificationItems items={data?.content ?? []} />

src/components/pages/NotificationCenter/NotificationPager.tsx

@@ -20,19 +20,26 @@
 
 import { Box } from '@mui/material'
 import { CircleProgress } from '@catena-x/portal-shared-components'
-import { notificationFetchSelector, setPage } from 'features/notification/slice'
+import {
+  metaSelector,
+  notificationFetchSelector,
+  setPage,
+} from 'features/notification/slice'
 import { useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import useOnScreen from 'utils/useOnScreen'
 
 export default function NotificationPager() {
   const fetchArgs = useSelector(notificationFetchSelector)
+  const meta = useSelector(metaSelector)
   const dispatch = useDispatch()
   const ref = useRef<HTMLDivElement>(null)
   const isVisible = useOnScreen(ref)
+  const hasMore = fetchArgs.page < (meta?.totalPages ?? 1)
 
   const triggerLoad = () => {
-    setTimeout(() => dispatch(setPage(fetchArgs.page + 1)), 700)
+    if ((meta?.page ?? 0) === fetchArgs.page)
+      setTimeout(() => dispatch(setPage(fetchArgs.page + 1)), 700)
     return true
   }
 
@@ -47,7 +54,7 @@ export default function NotificationPager() {
       }}
     >
       {' '}
-      {isVisible && (
+      {isVisible && hasMore && (
         <CircleProgress
           size={40}
           step={1}
@@ -58,7 +65,7 @@ export default function NotificationPager() {
         />
       )}
       <div style={{ marginTop: 200 }} ref={ref}>
-        {isVisible && triggerLoad()}
+        {isVisible && hasMore && triggerLoad()}
       </div>
     </Box>
   )

src/features/notification/apiSlice.ts

@@ -61,6 +61,10 @@ export const apiSlice = createApi({
           fetchArgs?.args?.searchTypeIds
             ?.map((typeId: NotificationType) => `&searchTypeIds=${typeId}`)
             .join('') ?? ''
+        }${
+          fetchArgs?.args?.searchQuery
+            ? `&searchSemantic=OR&searchQuery=${fetchArgs?.args?.searchQuery}`
+            : ''
         }&sorting=${
           fetchArgs?.args?.sorting ?? NotificationSortingType.DateDesc
         }`,

src/features/notification/slice.ts

@@ -21,7 +21,10 @@
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
 import type { RootState } from 'features/store'
 import { initServicetNotifications } from 'types/MainTypes'
-import type { PageNotificationsProps } from '@catena-x/portal-shared-components'
+import type {
+  PageNotificationsProps,
+  PaginMeta,
+} from '@catena-x/portal-shared-components'
 import {
   type NotificationFetchType,
   type NOTIFICATION_TOPIC,
@@ -47,6 +50,10 @@ export const slice = createSlice({
       ...state,
       fetch: payload.initialNotificationState,
     }),
+    setMeta: (state, action: PayloadAction<PaginMeta>) => ({
+      ...state,
+      meta: action.payload,
+    }),
     setPage: (state, action: PayloadAction<number>) => ({
       ...state,
       fetch: {
@@ -72,6 +79,7 @@ export const slice = createSlice({
         page: 0,
         args: {
           ...state.fetch.args,
+          searchQuery: action.payload,
           searchTypeIds: I18nService.searchNotifications(action.payload),
         },
       },
@@ -90,6 +98,9 @@ export const slice = createSlice({
   },
 })
 
+export const metaSelector = (state: RootState): PaginMeta =>
+  state.notification.meta
+
 export const notificationSelector = (
   state: RootState
 ): PageNotificationsProps => state.notification.notification
@@ -101,6 +112,7 @@ export const notificationFetchSelector = (
 export const {
   setNotification,
   resetNotification,
+  setMeta,
   setFetch,
   setTopic,
   setSearch,

src/features/notification/types.ts

@@ -95,6 +95,7 @@ export const initialNotificationFetchType: NotificationFetchType = {
 }
 
 export interface NotificationState {
+  meta?: PaginMeta
   notification: PageNotificationsProps
   fetch: NotificationFetchType
 }