fixup! feat: implement notification list component

Author: vetalcore

apps/browser-extension-wallet/src/components/NotificationsCenter/Notifications.tsx

@@ -15,7 +15,7 @@ import { SectionTitle } from '@components/Layout/SectionTitle';
 export const NotificationsCenter = (): React.ReactElement => {
   const { t } = useTranslation();
   const [isRemoveNotificationModalVisible, setIsRemoveNotificationModalVisible] = useState(false);
-  const { notifications, loadMore, remove, unreadNotifications, isLoading } = useNotificationsCenter();
+  const { notifications, remove, unreadNotifications } = useNotificationsCenter();
   const [notificationIdToRemove, setNotificationIdToRemove] = useState<string | undefined>();
   const history = useHistory();
 
@@ -51,9 +51,7 @@ export const NotificationsCenter = (): React.ReactElement => {
       <div>
         {notifications?.length > 0 ? (
           <NotificationsList
-            isLoading={isLoading}
             hasMore
-            loadMore={loadMore}
             notifications={notifications}
             scrollableTarget="contentLayout"
             dataLength={notifications.length}

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBell.tsx

@@ -8,7 +8,7 @@ import NotificationBellIcon from '../../assets/icons/notifications-bell.componen
 
 const MAX_NOTIFICATION_COUNT = 9;
 const formatNotificationCount = (count: number) =>
-  count < MAX_NOTIFICATION_COUNT ? count.toString() : `${MAX_NOTIFICATION_COUNT}+`;
+  count <= MAX_NOTIFICATION_COUNT ? count.toString() : `${MAX_NOTIFICATION_COUNT}+`;
 
 export interface NotificationsBellProps {
   onClick: () => void;

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.tsx

@@ -18,7 +18,7 @@ export const NotificationsCenter = (): React.ReactElement => {
   const { t } = useTranslation();
   const history = useHistory();
   const [isRemoveNotificationModalVisible, setIsRemoveNotificationModalVisible] = useState(false);
-  const { notifications, loadMore, markAsRead, remove, unreadNotifications, isLoading } = useNotificationsCenter();
+  const { notifications, markAsRead, remove, unreadNotifications } = useNotificationsCenter();
   const [notificationIdToRemove, setNotificationIdToRemove] = useState<string | undefined>();
 
   const onBack = () => {
@@ -82,9 +82,7 @@ export const NotificationsCenter = (): React.ReactElement => {
             notifications={notifications}
             scrollableTarget={LACE_APP_ID}
             dataLength={notifications.length}
-            loadMore={loadMore}
             onRemove={onShowRemoveNotificationModal}
-            isLoading={isLoading}
           />
         ) : (
           <Box mt="$120">

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsDropDown.tsx

@@ -18,7 +18,7 @@ export interface NotificationsDropDownProps {
 
 export const NotificationsDropDown = ({ onViewAll, popupView }: NotificationsDropDownProps): React.ReactElement => {
   const { t } = useTranslation();
-  const { notifications, loadMore, isLoading, markAsRead, unreadNotifications } = useNotificationsCenter();
+  const { notifications, markAsRead, unreadNotifications } = useNotificationsCenter();
 
   return (
     <Menu className={classnames(styles.container, { [styles.popupView]: popupView })}>
@@ -32,8 +32,6 @@ export const NotificationsDropDown = ({ onViewAll, popupView }: NotificationsDro
             notifications={notifications}
             scrollableTarget="notifications-dropdown-content"
             dataLength={notifications.length}
-            loadMore={loadMore}
-            isLoading={isLoading}
             withBorder={false}
             withDivider
             popupView

apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsList.tsx

@@ -3,11 +3,12 @@ import { List, Skeleton } from 'antd';
 import cn from 'classnames';
 import React, { useState, useCallback, useMemo } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { NotificationListItem, NotificationListItemProps } from './NotificationListItem';
+import { NotificationListItem } from './NotificationListItem';
 import styles from './NotificationsList.module.scss';
 import isNumber from 'lodash/isNumber';
 import Loader from '../../assets/icons/loader.component.svg';
 import { Flex } from '@input-output-hk/lace-ui-toolkit';
+import { LaceNotification } from '@src/types/notifications-center';
 
 const ESTIMATED_MIN_ITEM_HEIGHT = 96;
 
@@ -24,13 +25,14 @@ export const useItemsPageSize = (estimatedItemHeight = ESTIMATED_MIN_ITEM_HEIGHT
 
 export interface NotificationsListProps {
   className?: string;
-  notifications: NotificationListItemProps[];
+  notifications: LaceNotification[];
   scrollableTarget: string;
   endMessage?: React.ReactNode;
   dataLength: number;
   popupView?: boolean;
-  loadMore: () => void;
+  loadMore?: () => void;
   hasMore?: boolean;
+  onClick?: (id: string) => void;
   onRemove?: (id: string) => void;
   isLoading?: boolean;
   withBorder?: boolean;
@@ -45,14 +47,15 @@ export const NotificationsList = ({
   dataLength,
   popupView,
   loadMore,
-  hasMore = true,
+  onClick,
+  hasMore = false,
   onRemove,
   isLoading = false,
   withBorder = true,
   withDivider
 }: NotificationsListProps): React.ReactElement => {
   const next = useCallback(() => {
-    loadMore();
+    loadMore?.();
   }, [loadMore]);
 
   const loader = useMemo(
@@ -83,12 +86,20 @@ export const NotificationsList = ({
           data-testid="notifications-list"
           itemLayout="horizontal"
           dataSource={notifications}
-          renderItem={(props: NotificationListItemProps) => (
+          renderItem={(props: LaceNotification) => (
             <List.Item
               data-testid="notification-list-item"
               className={cn(styles.listItem, className, { [styles.withBorder]: withDivider })}
             >
-              <NotificationListItem onRemove={onRemove} {...props} popupView={popupView} withBorder={withBorder} />
+              <NotificationListItem
+                onRemove={onRemove}
+                popupView={popupView}
+                withBorder={withBorder}
+                id={props.message.id}
+                title={props.message.title}
+                publisher={props.message.topic}
+                onClick={() => onClick?.(props.message.id)}
+              />
             </List.Item>
           )}
         />

apps/browser-extension-wallet/src/hooks/useNotificationsCenter.ts

@@ -31,34 +31,13 @@ export const useNotificationsCenter = () => {
     [notifications]
   );
 
-  const mappedNotifications = useMemo(
-    () =>
-      notifications?.map((template) => ({
-        id: template.message.id,
-        title: template.message.title,
-        publisher: template.message.topic,
-        isRead: template.read,
-        onClick: () => {
-          // eslint-disable-next-line no-console
-          console.log(`Clicked notification ${template.message.id}`);
-        }
-      })),
-    [notifications]
-  );
-
   return {
-    notifications: mappedNotifications,
+    notifications,
     unreadNotifications,
     topics,
     subscribe,
     unsubscribe,
     markAsRead,
-    remove,
-    // TODO: Implement loadMore and isLoading
-    loadMore: () => {
-      // eslint-disable-next-line no-console
-      console.log('loadMore');
-    },
-    isLoading: false
+    remove
   };
 };

packages/core/src/ui/assets/icons/happy-face.component.svg

@@ -783,8 +783,6 @@
   "multiWallet.errorDialog.notDetectedError.trezorDescription": "Please make sure your device is unlocked.",
   "multiWallet.popupHwAccountEnable": "Hardware wallets require the <0>expanded view</0> to enable accounts",
   "multiWallet.walletAlreadyExists": "Wallet already exists",
-  "notificationsCenter.allClear.title": "All clear",
-  "notificationsCenter.allClear.description": "You don't have any notifications currently",
   "notificationsCenter.manageSubscriptions": "Manage subscriptions",
   "notificationsCenter.markAllAsRead": "Mark all as read",
   "notificationsCenter.title": "Notifications",