Mutate useSWRxInAppNotifications when notification item is clicked

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

@@ -10,11 +10,12 @@ import { useModelNotification } from './PageNotification';
 
 interface Props {
   notification: IInAppNotification & HasObjectId
+  onClick?: () => void,
 }
 
 const InAppNotificationElm: FC<Props> = (props: Props) => {
 
-  const { notification } = props;
+  const { notification, onClick } = props;
 
   const modelNotificationUtils = useModelNotification(notification);
 
@@ -32,6 +33,7 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
     }
 
     publishOpen();
+    onClick?.();
   };
 
   const renderActionUserPictures = (): JSX.Element => {

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

@@ -9,10 +9,11 @@ import InAppNotificationElm from './InAppNotificationElm';
 
 type Props = {
   inAppNotificationData?: PaginateResult<IInAppNotification>,
+  onClickNotificationElm?: () => void,
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {
-  const { inAppNotificationData } = props;
+  const { inAppNotificationData, onClickNotificationElm } = props;
 
   if (inAppNotificationData == null) {
     return (
@@ -30,7 +31,11 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     <div className="list-group">
       { notifications.map((notification: IInAppNotification & HasObjectId) => {
         return (
-          <InAppNotificationElm key={notification._id} notification={notification} />
+          <InAppNotificationElm
+            key={notification._id}
+            notification={notification}
+            onClick={onClickNotificationElm}
+          />
         );
       }) }
     </div>

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

@@ -38,7 +38,7 @@ export const InAppNotificationContent = (props: InAppNotificationContentProps):
   const { t } = useTranslation('commons');
 
   // TODO: Infinite scroll implemented (https://redmine.weseek.co.jp/issues/138057)
-  const { data: inAppNotificationData } = useSWRxInAppNotifications(
+  const { data: inAppNotificationData, mutate: mutateInAppNotificationData } = useSWRxInAppNotifications(
     6,
     undefined,
     isUnopendNotificationsVisible ? InAppNotificationStatuses.STATUS_UNOPENED : undefined,
@@ -52,7 +52,10 @@ export const InAppNotificationContent = (props: InAppNotificationContentProps):
         ? t('in_app_notification.mark_all_as_read')
       // render list-group
         : (
-          <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+          <InAppNotificationList
+            inAppNotificationData={inAppNotificationData}
+            onClickNotificationElm={mutateInAppNotificationData}
+          />
         )
       }
     </>