"LIMIT" -> "PAGING_LIMIT"

packages/app/src/components/Sidebar/Tag.tsx

@@ -9,12 +9,13 @@ import TagCloudBox from '../TagCloudBox';
 import TagList from '../TagList';
 
 
-const LIMIT = 10;
+const PAGING_LIMIT = 10;
 
 const Tag: FC = () => {
+  const [activePage, setActivePage] = useState<number>(1);
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate: mutateTagDataList, error } = useSWRxTagsList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutateTagDataList, error } = useSWRxTagsList(PAGING_LIMIT, offset);
   const tagData: ITagCountHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
   const isLoading = tagDataList === undefined && error == null;
@@ -22,8 +23,8 @@ const Tag: FC = () => {
   const { t } = useTranslation('');
 
   const setOffsetByPageNumber = useCallback((selectedPageNumber: number) => {
-    // offset = (selectedPageNumber - 1) * 10
-    setOffset((selectedPageNumber - 1) * 10);
+    setActivePage(selectedPageNumber);
+    setOffset((selectedPageNumber - 1) * PAGING_LIMIT);
   }, []);
 
   const onReload = useCallback(() => {
@@ -69,9 +70,9 @@ const Tag: FC = () => {
           <TagList
             tagData={tagData}
             totalTags={totalCount}
-            activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
+            activePage={activePage}
             onChangePage={setOffsetByPageNumber}
-            limit={LIMIT}
+            pagingLimit={PAGING_LIMIT}
           />
         )
       }

packages/app/src/components/TagList.tsx

@@ -13,7 +13,7 @@ type TagListProps = {
   totalTags: number,
   activePage: number,
   onChangePage?: (selectedPageNumber: number) => void,
-  limit: number,
+  pagingLimit: number,
   isPaginationShown?: boolean,
 }
 
@@ -23,7 +23,7 @@ const defaultProps = {
 
 const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) => {
   const {
-    tagData, totalTags, activePage, onChangePage, limit, isPaginationShown,
+    tagData, totalTags, activePage, onChangePage, pagingLimit, isPaginationShown,
   } = props;
   const isTagExist: boolean = tagData.length > 0;
   const { t } = useTranslation('');
@@ -60,7 +60,7 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
           activePage={activePage}
           changePage={onChangePage}
           totalItemsCount={totalTags}
-          pagingLimit={limit}
+          pagingLimit={pagingLimit}
           align="center"
           size="md"
         />

packages/app/src/components/TagPage.tsx

@@ -8,12 +8,12 @@ import { useSWRxTagsList } from '~/stores/tag';
 import TagCloudBox from './TagCloudBox';
 import TagList from './TagList';
 
-const LIMIT = 10;
+const PAGING_LIMIT = 10;
 
 const TagPage: FC = () => {
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, error } = useSWRxTagsList(LIMIT, offset);
+  const { data: tagDataList, error } = useSWRxTagsList(PAGING_LIMIT, offset);
   const tagData: ITagCountHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
   const isLoading = tagDataList === undefined && error == null;
@@ -21,8 +21,7 @@ const TagPage: FC = () => {
   const { t } = useTranslation('');
 
   const setOffsetByPageNumber = useCallback((selectedPageNumber: number) => {
-    // offset = (selectedPageNumber - 1) * 10
-    setOffset((selectedPageNumber - 1) * 10);
+    setOffset((selectedPageNumber - 1) * PAGING_LIMIT);
   }, []);
 
   // todo: adjust margin and redesign tags page
@@ -45,7 +44,7 @@ const TagPage: FC = () => {
               totalTags={totalCount}
               activePage={1 + (offset / 10)} // activePage = 1 + offset / 10
               onChangePage={setOffsetByPageNumber}
-              limit={LIMIT}
+              pagingLimit={PAGING_LIMIT}
             />
           </div>
         )