From 86a5d8ba73499de47402d5aa49f857ca36a0f61b Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 23 Jan 2024 13:10:23 +0100 Subject: [PATCH] console: Fix dropdown --- .../header/notifications-dropdown.js | 45 +++++-------------- .../console/containers/notifications/index.js | 3 ++ .../console/store/actions/notifications.js | 16 +++++++ .../store/middleware/logics/notifications.js | 24 +++++++++- .../console/store/reducers/notifications.js | 13 ++++++ .../console/store/selectors/notifications.js | 3 ++ 6 files changed, 70 insertions(+), 34 deletions(-) diff --git a/pkg/webui/console/containers/header/notifications-dropdown.js b/pkg/webui/console/containers/header/notifications-dropdown.js index 0c25fbc3c6d..e6e273b6127 100644 --- a/pkg/webui/console/containers/header/notifications-dropdown.js +++ b/pkg/webui/console/containers/header/notifications-dropdown.js @@ -12,30 +12,32 @@ // See the License for the specific language governing permissions and // limitations under the License. -import React, { useEffect, useState } from 'react' -import { useDispatch, useSelector } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import classnames from 'classnames' import { defineMessages } from 'react-intl' import Link from '@ttn-lw/components/link' import Icon from '@ttn-lw/components/icon' import Status from '@ttn-lw/components/status' -import Spinner from '@ttn-lw/components/spinner' import DateTime from '@ttn-lw/lib/components/date-time' import Message from '@ttn-lw/lib/components/message' +import RequireRequest from '@ttn-lw/lib/components/require-request' import Notification from '@console/components/notifications' import notificationStyle from '@console/containers/notifications/notifications.styl' import sharedMessages from '@ttn-lw/lib/shared-messages' -import attachPromise from '@ttn-lw/lib/store/actions/attach-promise' -import { getNotifications } from '@console/store/actions/notifications' +import { getDropdownNotifications } from '@console/store/actions/notifications' import { selectUserId } from '@console/store/selectors/logout' -import { selectTotalNotificationsCount } from '@console/store/selectors/notifications' +import { + selectDropdownNotifications, + selectTotalNotificationsCount, +} from '@console/store/selectors/notifications' import style from './header.styl' @@ -44,42 +46,19 @@ const m = defineMessages({ }) const NotificationsDropdown = () => { - const [notificationItems, setNotificationItems] = useState([]) - const [isLoading, setIsLoading] = useState(true) const userId = useSelector(selectUserId) - const dispatch = useDispatch() + const dropdownItems = useSelector(selectDropdownNotifications) const totalNotifications = useSelector(selectTotalNotificationsCount) - useEffect(() => { - setIsLoading(true) - const fetchNotifications = async () => { - const response = await dispatch( - attachPromise( - getNotifications(userId, ['NOTIFICATION_STATUS_UNSEEN', 'NOTIFICATION_STATUS_SEEN'], { - limit: 3, - page: 1, - }), - ), - ) - setNotificationItems(response.notifications) - } - fetchNotifications() - setIsLoading(false) - }, [setNotificationItems, dispatch, userId]) - - if (isLoading) { - return - } - return ( - +
{' '}
- {notificationItems.map(notification => ( + {dropdownItems.map(notification => ( {
- + ) } diff --git a/pkg/webui/console/containers/notifications/index.js b/pkg/webui/console/containers/notifications/index.js index 5f1b3017bf7..f0b18d063da 100644 --- a/pkg/webui/console/containers/notifications/index.js +++ b/pkg/webui/console/containers/notifications/index.js @@ -31,6 +31,7 @@ import NotificationList from './notification-list' import NotificationContent from './notification-content' import style from './notifications.styl' +import { useParams } from 'react-router-dom' const BATCH_SIZE = 50 @@ -65,6 +66,8 @@ const Notifications = () => { const listRef = useRef(null) const userId = useSelector(selectUserId) const dispatch = useDispatch() + const params = useParams() + console.log(params) const [selectedNotification, setSelectedNotification] = useState(undefined) const [hasNextPage, setHasNextPage] = useState(true) const [items, setItems] = useState(undefined) diff --git a/pkg/webui/console/store/actions/notifications.js b/pkg/webui/console/store/actions/notifications.js index 9445a41b837..31a37822d13 100644 --- a/pkg/webui/console/store/actions/notifications.js +++ b/pkg/webui/console/store/actions/notifications.js @@ -30,6 +30,22 @@ export const [ { request: getNotifications, success: getNotificationsSuccess, failure: getNotificationsFailure }, ] = createPaginationByParentRequestActions(SHARED_NAME) +export const GET_DROPDOWN_NOTIFICATIONS_BASE = 'GET_DROPDOWN_NOTIFICATIONS' +export const [ + { + request: GET_DROPDOWN_NOTIFICATIONS, + success: GET_DROPDOWN_NOTIFICATIONS_SUCCESS, + failure: GET_DROPDOWN_NOTIFICATIONS_FAILURE, + }, + { + request: getDropdownNotifications, + success: getDropdownNotificationsSuccess, + failure: getDropdownNotificationsFailure, + }, +] = createRequestActions(GET_DROPDOWN_NOTIFICATIONS_BASE, userId => ({ + userId, +})) + export const GET_UNSEEN_NOTIFICATIONS_BASE = 'GET_UNSEEN_NOTIFICATIONS' export const [ { diff --git a/pkg/webui/console/store/middleware/logics/notifications.js b/pkg/webui/console/store/middleware/logics/notifications.js index 43cd5c3ce55..5b391019d18 100644 --- a/pkg/webui/console/store/middleware/logics/notifications.js +++ b/pkg/webui/console/store/middleware/logics/notifications.js @@ -39,6 +39,23 @@ const getNotificationsLogic = createRequestLogic({ }, }) +const getDropdownNotificationsLogic = createRequestLogic({ + type: notifications.GET_DROPDOWN_NOTIFICATIONS, + process: async ({ action }) => { + const { + payload: { userId }, + } = action + const result = await tts.Notifications.getAllNotifications( + userId, + ['NOTIFICATION_STATUS_UNSEEN', 'NOTIFICATION_STATUS_SEEN'], + 1, + 3, + ) + + return { notifications: result.notifications, totalCount: result.totalCount } + }, +}) + const getUnseenNotificationsLogic = createRequestLogic({ type: notifications.GET_UNSEEN_NOTIFICATIONS, process: async ({ action }) => { @@ -73,4 +90,9 @@ const updateNotificationStatusLogic = createRequestLogic({ }, }) -export default [getNotificationsLogic, getUnseenNotificationsLogic, updateNotificationStatusLogic] +export default [ + getNotificationsLogic, + getDropdownNotificationsLogic, + getUnseenNotificationsLogic, + updateNotificationStatusLogic, +] diff --git a/pkg/webui/console/store/reducers/notifications.js b/pkg/webui/console/store/reducers/notifications.js index cfc2f821132..026306a9005 100644 --- a/pkg/webui/console/store/reducers/notifications.js +++ b/pkg/webui/console/store/reducers/notifications.js @@ -16,10 +16,12 @@ import { GET_NOTIFICATIONS_SUCCESS, GET_UNSEEN_NOTIFICATIONS_SUCCESS, UPDATE_NOTIFICATION_STATUS_SUCCESS, + GET_DROPDOWN_NOTIFICATIONS_SUCCESS, } from '@console/store/actions/notifications' const defaultState = { notifications: {}, + dropdownNotifications: {}, unseenIds: [], unseenTotalCount: undefined, totalCount: undefined, @@ -38,6 +40,17 @@ const notifications = (state = defaultState, { type, payload }) => { }, totalCount: payload.totalCount, } + case GET_DROPDOWN_NOTIFICATIONS_SUCCESS: + return { + ...state, + dropdownNotifications: { + ...payload.notifications.reduce((acc, not) => { + acc[not.id] = not + return acc + }, {}), + }, + totalCount: payload.totalCount, + } case GET_UNSEEN_NOTIFICATIONS_SUCCESS: return { ...state, diff --git a/pkg/webui/console/store/selectors/notifications.js b/pkg/webui/console/store/selectors/notifications.js index 94bbbddc700..d7f0f6dc053 100644 --- a/pkg/webui/console/store/selectors/notifications.js +++ b/pkg/webui/console/store/selectors/notifications.js @@ -18,6 +18,9 @@ export const selectNotificationsStore = state => state.notifications export const selectNotifications = createSelector([selectNotificationsStore], store => Object.values(store.notifications), ) +export const selectDropdownNotifications = createSelector([selectNotificationsStore], store => + Object.values(store.dropdownNotifications), +) export const selectTotalNotificationsCount = state => selectNotificationsStore(state).totalCount export const selectTotalUnseenCount = state => selectNotificationsStore(state).unseenTotalCount export const selectUnseenIds = state => selectNotificationsStore(state).unseenIds