display no_notification message in each dropdown and page

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -79,7 +79,12 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         <i className="icon-bell" /> {badge}
       </DropdownToggle>
       <DropdownMenu right>
-        <InAppNotificationList tag="DropdownItem" inAppNotificationData={inAppNotificationData} />
+        { inAppNotificationData != null && inAppNotificationData.docs.length === 0
+          // no items
+          ? <DropdownItem disabled>{t('in_app_notification.mark_all_as_read')}</DropdownItem>
+          // render DropdownItem
+          : <InAppNotificationList type="dropdown-item" inAppNotificationData={inAppNotificationData} />
+        }
         <DropdownItem divider />
         <DropdownItem tag="a" href="/me/all-in-app-notifications">
           { t('in_app_notification.see_all') }

packages/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -1,20 +1,18 @@
 import React, { FC } from 'react';
 
-import { useTranslation } from 'react-i18next';
-import { DropdownItem } from 'reactstrap';
 import { IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';
 import { HasObjectId } from '~/interfaces/has-object-id';
+
 import InAppNotificationElm from './InAppNotificationElm';
 
 
 type Props = {
   inAppNotificationData?: PaginateResult<IInAppNotification>,
   elemClassName?: string,
-  tag?: 'div' | 'DropdownItem',
+  type?: 'button' | 'dropdown-item',
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {
-  const { t } = useTranslation();
   const { inAppNotificationData } = props;
 
   if (inAppNotificationData == null) {
@@ -29,31 +27,11 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
 
   const notifications = inAppNotificationData.docs;
 
-  const isDropdownItem = props.tag === 'DropdownItem';
-
-  // determine tag
-  const TagElem = isDropdownItem
-    ? DropdownItem
-  // eslint-disable-next-line react/prop-types
-    : props => <div {...props}>{props.children}</div>;
-
-  if (notifications.length === 0) {
-    return (
-      <TagElem
-        disabled={isDropdownItem ? true : undefined}
-        className={props.elemClassName}
-      >{t('in_app_notification.no_notification')}
-      </TagElem>
-    );
-  }
-
   return (
     <>
       { notifications.map((notification: IInAppNotification & HasObjectId) => {
         return (
-          <TagElem className={props.elemClassName} key={notification._id}>
-            <InAppNotificationElm notification={notification} />
-          </TagElem>
+          <InAppNotificationElm key={notification._id} notification={notification} type={props.type} elemClassName={props.elemClassName} />
         );
       }) }
     </>

packages/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -96,10 +96,19 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
           </button>
         </div>
       )}
-        <InAppNotificationList inAppNotificationData={notificationData} elemClassName="d-flex flex-row" />
+        { notificationData != null && notificationData.docs.length === 0
+          // no items
+          ? t('in_app_notification.mark_all_as_read')
+          // render list-group
+          : (
+            <div className="list-group">
+              <InAppNotificationList inAppNotificationData={notificationData} type="button" elemClassName="list-group-item list-group-item-action" />
+            </div>
+          )
+        }
 
-        {notificationData.totalDocs > 0
-          && (
+        {notificationData.totalDocs > 0 && (
+          <div className="mt-4">
             <PaginationWrapper
               activePage={activePage}
               changePage={setAllNotificationPageNumber}
@@ -108,8 +117,8 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
               align="center"
               size="sm"
             />
-          )
-        }
+          </div>
+        ) }
       </>
     );
   };
@@ -130,7 +139,7 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
   };
 
   return (
-    <CustomNavAndContents navTabMapping={navTabMapping} />
+    <CustomNavAndContents navTabMapping={navTabMapping} tabContentClasses={['mt-4']} />
   );
 };