using pagination

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

@@ -8,7 +8,7 @@ import PaginationWrapper from '../PaginationWrapper';
 const AllInAppNotifications: FC = () => {
   const limit = 6;
   const [activePage, setActivePage] = useState(1);
-  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit);
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, activePage);
 
 
   if (inAppNotificationData == null) {
@@ -21,9 +21,9 @@ const AllInAppNotifications: FC = () => {
     );
   }
 
-  function setPageNumber(selectedPageNumber): void {
+  const setPageNumber = (selectedPageNumber): void => {
     setActivePage(selectedPageNumber);
-  }
+  };
 
   return (
     <>

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

@@ -17,19 +17,17 @@ module.exports = (crowi) => {
   router.get('/list', accessTokenParser, loginRequiredStrictly, async(req, res) => {
     const user = req.user;
 
-    let limit = 10;
-    if (req.query.limit) {
-      limit = parseInt(req.query.limit, 10);
-    }
+    const limit = parseInt(req.query.limit) || await crowi.configManager.getConfig('crowi', 'customize:showPageLimitationS') || 10;
+    const page = req.query.page || 1;
+    const offset = (page - 1) * limit;
 
-    let offset = 0;
-    if (req.query.offset) {
-      offset = parseInt(req.query.offset, 10);
-    }
+    const queryOptions = {
+      offset,
+      limit,
+    };
 
-    const requestLimit = limit + 1;
 
-    const paginationResult = await inAppNotificationService.getLatestNotificationsByUser(user._id, requestLimit, offset);
+    const paginationResult = await inAppNotificationService.getLatestNotificationsByUser(user._id, queryOptions);
 
 
     const getActionUsersFromActivities = function(activities) {

packages/app/src/server/service/in-app-notification.ts

@@ -79,7 +79,9 @@ export default class InAppNotificationService {
     return;
   }
 
-  getLatestNotificationsByUser = async(userId, limitNum, offset) => {
+  getLatestNotificationsByUser = async(userId, queryOptions) => {
+    const { offset } = queryOptions;
+    const limit = queryOptions.limit || 10;
 
     try {
       const paginationResult = await InAppNotification.paginate(
@@ -87,7 +89,7 @@ export default class InAppNotificationService {
         {
           sort: { createdAt: -1 },
           offset,
-          limit: limitNum || 10,
+          limit,
           populate: [
             { path: 'user' },
             { path: 'target' },

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

@@ -7,11 +7,12 @@ import { IInAppNotification } from '../interfaces/in-app-notification';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxInAppNotifications = <Data, Error>(
-  // TODO: apply pagination by 80107
   limit: number,
+  page: number,
 ): SWRResponse<PaginateResult<IInAppNotification>, Error> => {
+  // const limitNum = limit;
   return useSWR(
-    '/in-app-notification/list',
-    endpoint => apiv3Get(endpoint, { limit }).then(response => response.data),
+    `/in-app-notification/list?limit=${limit}&page=${page}`,
+    endpoint => apiv3Get(endpoint).then(response => response.data),
   );
 };