improve InAppNotificationList

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

@@ -78,10 +78,12 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
       <DropdownToggle tag="a" className="px-3 nav-link border-0 bg-transparent waves-effect waves-light">
         <i className="icon-bell" /> {badge}
       </DropdownToggle>
-      <DropdownMenu className="px-2" right>
-        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+      <DropdownMenu right>
+        <InAppNotificationList tag="DropdownItem" inAppNotificationData={inAppNotificationData} />
         <DropdownItem divider />
-        <a className="dropdown-item d-flex justify-content-center" href="/me/all-in-app-notifications">{ t('in_app_notification.see_all') }</a>
+        <DropdownItem tag="a" href="/me/all-in-app-notifications">
+          { t('in_app_notification.see_all') }
+        </DropdownItem>
       </DropdownMenu>
     </Dropdown>
   );

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

@@ -97,11 +97,9 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
   }
 
   return (
-    <div className="dropdown-item d-flex flex-row mb-3" role="button">
-      <div className="p-2 mr-2 d-flex align-items-center">
-        <span className={`${notification.status === 'UNOPENED' ? 'grw-unopend-notification' : 'ml-2'} rounded-circle mr-3`}></span>
-        {renderActionUserPictures()}
-      </div>
+    <div className="d-flex align-items-center">
+      <span className={`${notification.status === 'UNOPENED' ? 'grw-unopend-notification' : 'ml-2'} rounded-circle mr-3`}></span>
+      {renderActionUserPictures()}
       {notification.targetModel === 'Page' && (
         <PageModelNotification
           notification={notification}

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

@@ -1,13 +1,16 @@
 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>;
+  inAppNotificationData?: PaginateResult<IInAppNotification>,
+  elemClassName?: string,
+  tag?: 'div' | 'DropdownItem',
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {
@@ -26,21 +29,33 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
 
   const notifications = inAppNotificationData.docs;
 
-  const renderInAppNotificationList = () => {
-    const inAppNotificationList = notifications.map((notification: IInAppNotification & HasObjectId) => {
-      return (
-        <div className="d-flex flex-row" key={notification._id}>
-          <InAppNotificationElm notification={notification} />
-        </div>
-      );
-    });
+  const isDropdownItem = props.tag === 'DropdownItem';
+
+  // determine tag
+  const TagElem = isDropdownItem
+    ? DropdownItem
+  // eslint-disable-next-line react/prop-types
+    : props => <div {...props}>{props.children}</div>;
 
-    return inAppNotificationList;
-  };
+  if (notifications.length === 0) {
+    return (
+      <TagElem
+        disabled={isDropdownItem ? true : undefined}
+        className={props.elemClassName}
+      >{t('in_app_notification.no_notification')}
+      </TagElem>
+    );
+  }
 
   return (
     <>
-      {notifications.length === 0 ? <>{t('in_app_notification.no_notification')}</> : renderInAppNotificationList()}
+      { notifications.map((notification: IInAppNotification & HasObjectId) => {
+        return (
+          <TagElem className={props.elemClassName} key={notification._id}>
+            <InAppNotificationElm notification={notification} />
+          </TagElem>
+        );
+      }) }
     </>
   );
 };

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

@@ -96,7 +96,7 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
           </button>
         </div>
       )}
-        <InAppNotificationList inAppNotificationData={notificationData} />
+        <InAppNotificationList inAppNotificationData={notificationData} elemClassName="d-flex flex-row" />
 
         {notificationData.totalDocs > 0
           && (