pass offset not activePageNum

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

@@ -6,9 +6,10 @@ import PaginationWrapper from '../PaginationWrapper';
 
 
 const AllInAppNotifications: FC = () => {
-  const limit = 6;
   const [activePage, setActivePage] = useState(1);
-  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, activePage);
+  const [offset, setOffset] = useState(0);
+  const limit = 10;
+  const { data: inAppNotificationData } = useSWRxInAppNotifications(limit, offset);
 
   if (inAppNotificationData == null) {
     return (
@@ -22,6 +23,8 @@ const AllInAppNotifications: FC = () => {
 
   const setPageNumber = (selectedPageNumber): void => {
     setActivePage(selectedPageNumber);
+    const offset = (selectedPageNumber - 1) * limit;
+    setOffset(offset);
   };
 
   return (

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

@@ -17,9 +17,12 @@ module.exports = (crowi) => {
   router.get('/list', accessTokenParser, loginRequiredStrictly, async(req, res) => {
     const user = req.user;
 
-    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;
+    const limit = parseInt(req.query.limit) || 10;
+
+    let offset = 0;
+    if (req.query.offset) {
+      offset = parseInt(req.query.offset, 10);
+    }
 
     const queryOptions = {
       offset,

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

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