categories with notification statuses

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

@@ -8,6 +8,7 @@ import InAppNotificationList from './InAppNotificationList';
 import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
 import PaginationWrapper from '../PaginationWrapper';
 import CustomNavAndContents from '../CustomNavigation/CustomNavAndContents';
+import { InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 
 
 type Props = {
@@ -20,6 +21,7 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
   const [activePage, setActivePage] = useState(1);
   const offset = (activePage - 1) * limit;
   const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, offset);
+  const { data: unOpendinAppNotificationData } = useSWRxInAppNotifications(limit, offset, InAppNotificationStatuses.STATUS_UNOPENED);
   const { t } = useTranslation();
 
   if (inAppNotificationData == null) {
@@ -56,6 +58,11 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
 
   // commonize notification lists by 81953
   const UnopenedInAppNotificationList = () => {
+    console.log('inAppNotificationData', unOpendinAppNotificationData);
+    // const unopendNotifications = inAppNotificationData.map((notification) => {
+
+    // });
+
     return (
       <>
         <div className="mb-2 d-flex justify-content-end">
@@ -69,7 +76,7 @@ const InAppNotificationPageBody: FC<Props> = (props) => {
           </button>
         </div>
         {/*  TODO: show only unopened notifications by 81945 */}
-        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+        <InAppNotificationList inAppNotificationData={unOpendinAppNotificationData} />
         <PaginationWrapper
           activePage={activePage}
           changePage={setPageNumber}

packages/app/src/server/routes/apiv3/in-app-notification.ts

@@ -29,6 +29,11 @@ module.exports = (crowi) => {
       limit,
     };
 
+    // get categorized notification list
+    if (req.query.status) {
+      console.log('req.query.status');
+      Object.assign(queryOptions, { status: req.query.status });
+    }
 
     const paginationResult = await inAppNotificationService.getLatestNotificationsByUser(user._id, queryOptions);
 

packages/app/src/stores/in-app-notification.ts

@@ -1,15 +1,17 @@
 import useSWR, { SWRResponse } from 'swr';
+import { InAppNotificationStatuses, IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';
 
 import { apiv3Get } from '../client/util/apiv3-client';
-import { IInAppNotification, PaginateResult } from '../interfaces/in-app-notification';
+
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxInAppNotifications = <Data, Error>(
   limit: number,
   offset?: number,
+  status?: InAppNotificationStatuses,
 ): SWRResponse<PaginateResult<IInAppNotification>, Error> => {
   return useSWR(
-    ['/in-app-notification/list', limit, offset],
-    endpoint => apiv3Get(endpoint, { limit, offset }).then(response => response.data),
+    ['/in-app-notification/list', limit, offset, status],
+    endpoint => apiv3Get(endpoint, { limit, offset, status }).then(response => response.data),
   );
 };