Merge branch 'feat/137966-show-notifications-in-sidebar' into feat/138055-implementation-of-the-only-unread-switch

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

@@ -91,7 +91,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
           // no items
           ? <DropdownItem disabled>{t('in_app_notification.mark_all_as_read')}</DropdownItem>
           // render DropdownItem
-          : <InAppNotificationList type="list" inAppNotificationData={inAppNotificationData} />
+          : <InAppNotificationList inAppNotificationData={inAppNotificationData} />
         }
         <DropdownItem divider />
         <DropdownItem tag="a" href="/me/all-in-app-notifications">

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

@@ -10,11 +10,8 @@ import { useModelNotification } from './PageNotification';
 
 interface Props {
   notification: IInAppNotification & HasObjectId
-  elemClassName?: string,
-  type?: 'button' | 'list',
 }
 
-
 const InAppNotificationElm: FC<Props> = (props: Props) => {
 
   const { notification } = props;
@@ -56,22 +53,8 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
     );
   };
 
-  const isListItem = props.type === 'list';
-
-  // determine tag
-  const TagElem = isListItem
-    ? props => (
-      <div {...props} style={{ cursor: 'pointer' }}>
-        {/* eslint-disable-next-line react/prop-types */}
-        {props.children}
-        <div className="border-top" />
-      </div>
-    )
-    // eslint-disable-next-line react/prop-types
-    : props => <button type="button" {...props}>{props.children}</button>;
-
   return (
-    <TagElem className={props.elemClassName} onClick={() => clickHandler(notification)}>
+    <div className="list-group-item list-group-item-action" onClick={() => clickHandler(notification)} style={{ cursor: 'pointer' }}>
       <div className="d-flex align-items-center">
         <span
           className={`${notification.status === InAppNotificationStatuses.STATUS_UNOPENED
@@ -80,12 +63,13 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
           } rounded-circle me-3`}
         >
         </span>
+
         {renderActionUserPictures()}
 
         <Notification />
 
       </div>
-    </TagElem>
+    </div>
   );
 };
 

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

@@ -9,8 +9,6 @@ import InAppNotificationElm from './InAppNotificationElm';
 
 type Props = {
   inAppNotificationData?: PaginateResult<IInAppNotification>,
-  elemClassName?: string,
-  type?: 'button' | 'list',
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {
@@ -29,13 +27,13 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
   const notifications = inAppNotificationData.docs;
 
   return (
-    <>
+    <div className="list-group">
       { notifications.map((notification: IInAppNotification & HasObjectId) => {
         return (
-          <InAppNotificationElm key={notification._id} notification={notification} type={props.type} elemClassName={props.elemClassName} />
+          <InAppNotificationElm key={notification._id} notification={notification} />
         );
       }) }
-    </>
+    </div>
   );
 };
 

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

@@ -100,9 +100,7 @@ export const InAppNotificationPage: FC = () => {
           ? 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>
+            <InAppNotificationList inAppNotificationData={notificationData} />
           )
         }
 

apps/app/src/components/Sidebar/InAppNotification/InAppNotificationSubstance.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
+
 import InAppNotificationList from '~/components/InAppNotification/InAppNotificationList';
 import { InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 import { useSWRxInAppNotifications } from '~/stores/in-app-notification';
@@ -12,7 +14,7 @@ export const InAppNotificationForms = (props: InAppNotificationFormsProps): JSX.
   const { onChangeUnreadNotificationsVisible } = props;
 
   return (
-    <div className="px-4 my-2">
+    <div className="my-2">
       <div className="form-check form-switch">
         <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Only unread</label>
         <input
@@ -33,6 +35,7 @@ type InAppNotificationContentProps = {
 }
 export const InAppNotificationContent = (props: InAppNotificationContentProps): JSX.Element => {
   const { isUnreadNotificationsVisible } = props;
+  const { t } = useTranslation('commons');
 
   // TODO: Infinite scroll implemented (https://redmine.weseek.co.jp/issues/138057)
   const { data: inAppNotificationData } = useSWRxInAppNotifications(
@@ -44,7 +47,14 @@ export const InAppNotificationContent = (props: InAppNotificationContentProps):
 
   return (
     <>
-      <InAppNotificationList type="list" inAppNotificationData={inAppNotificationData} />
+      {inAppNotificationData != null && inAppNotificationData.docs.length === 0
+      // no items
+        ? t('in_app_notification.mark_all_as_read')
+      // render list-group
+        : (
+          <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+        )
+      }
     </>
   );
 };