Delete unwanted props

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

@@ -10,8 +10,6 @@ import { useModelNotification } from './PageNotification';
 
 interface Props {
   notification: IInAppNotification & HasObjectId
-  elemClassName?: string,
-  type?: 'button' | 'list',
 }
 
 const InAppNotificationElm: FC<Props> = (props: Props) => {

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) => {
@@ -32,7 +30,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     <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,16 +1,26 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
+
 import InAppNotificationList from '~/components/InAppNotification/InAppNotificationList';
 import { useSWRxInAppNotifications } from '~/stores/in-app-notification';
 
 export const InAppNotificationSubstance = (): JSX.Element => {
+  const { t } = useTranslation('commons');
 
   // TODO: Infinite scroll implemented (https://redmine.weseek.co.jp/issues/138057)
   const { data: inAppNotificationData } = useSWRxInAppNotifications(6, undefined, undefined, { revalidateOnFocus: true });
 
   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} />
+        )
+      }
     </>
   );
 };