console: Fix dropdown

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 <Spinner center small faded inline />
-  }
-
   return (
-    <React.Fragment>
+    <RequireRequest requestAction={getDropdownNotifications(userId)}>
       <div className={style.notificationsDropdownHeader}>
         <span>
           <Message content={sharedMessages.notifications} />{' '}
           <Message className="c-grey-500 fw-normal fs-m" content={`(${totalNotifications})`} />
         </span>
       </div>
-      {notificationItems.map(notification => (
+      {dropdownItems.map(notification => (
         <Link
           to="/notifications"
           key={notification.id}
@@ -121,7 +100,7 @@ const NotificationsDropdown = () => {
       <div className="p-cs-l c-grey-700 fs-s text-center bg-tts-primary-050">
         <Message content={m.description} values={{ totalNotifications }} />
       </div>
-    </React.Fragment>
+    </RequireRequest>
   )
 }
 

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)

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 [
   {

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,
+]

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,

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