add tag interfaces and update Tag.tsx and TagList.tsx

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

@@ -4,19 +4,13 @@ import TagList from '../TagList';
 import TagCloudBox from '../TagCloudBox';
 import { apiGet } from '~/client/util/apiv1-client';
 import { toastError } from '~/client/util/apiNotification';
-
-// todo: commonize
-type Itag = {
-  _id: string,
-  name: string,
-  count: number,
-}
+import { ITagDataHasId } from '~/interfaces/tag';
 
 const LIMIT = 10;
 
 const Tag: FC = () => {
 
-  const [tagData, setTagData] = useState<Itag[]>([]);
+  const [tagData, setTagData] = useState<ITagDataHasId[]>([]);
   const [totalTags, setTotalTags] = useState<number>(0);
   const [isOnReload, setIsOnReload] = useState<boolean>(false);
   const { t } = useTranslation('');
@@ -26,7 +20,7 @@ const Tag: FC = () => {
     let res;
 
     try {
-      res = await apiGet('/tags.list', { LIMIT, offset });
+      res = await apiGet('/tags.list', { limit: LIMIT, offset });
     }
     catch (error) {
       toastError(error);
@@ -89,7 +83,13 @@ const Tag: FC = () => {
             {t('Check All tags')}
           </button>
         </div>
-        <TagList tagData={tagData} totalTags={totalTags} />
+        <TagList
+          tagData={tagData}
+          totalTags={totalTags}
+          limit={LIMIT}
+          isOnReload={isOnReload}
+          onHandlePagination={getTagList}
+        />
       </div>
     </>
   );

packages/app/src/components/TagList.tsx

@@ -1,24 +1,25 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, {
+  FC, useState, useCallback,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import PaginationWrapper from './PaginationWrapper';
+import { ITagDataHasId } from '~/interfaces/tag';
 
-type Itag = {
-  _id: string,
-  name: string,
-  count: number,
-}
 
 type TagListProps = {
-  tagData: Itag[],
+  tagData: ITagDataHasId[],
   totalTags: number,
-  onHandlePage?: ((selectPageNumber:number) => void)
+  limit: number,
+  isOnReload: boolean,
+  onHandlePagination?: ((selectPageNumber:number) => void)
 }
 
-const PAGING_LIMIT = 10;
 
 const TagList: FC<TagListProps> = (props:TagListProps) => {
   const [activePage, setActivePage] = useState<number>(1);
-  const { tagData, totalTags, onHandlePage } = props;
+  const {
+    tagData, totalTags, limit, onHandlePagination,
+  } = props;
   const isTagExist: boolean = tagData.length > 0;
   const { t } = useTranslation('');
 
@@ -34,11 +35,11 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
   }, []);
 
   const paginationHandler = useCallback(async(selectedPage) => {
-    if (onHandlePage != null) {
-      onHandlePage(selectedPage);
+    if (onHandlePagination != null) {
+      onHandlePagination(selectedPage);
       setActivePage(selectedPage);
     }
-  }, [onHandlePage]);
+  }, [onHandlePagination]);
 
   if (!isTagExist) {
     return <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
@@ -53,7 +54,7 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
         activePage={activePage}
         changePage={paginationHandler}
         totalItemsCount={totalTags}
-        pagingLimit={PAGING_LIMIT}
+        pagingLimit={limit}
         align="center"
         size="md"
       />

packages/app/src/interfaces/tag.ts

@@ -1,4 +1,11 @@
+import { HasObjectId } from './has-object-id';
+
 export type ITag = {
   name: string,
   createdAt: Date;
 }
+export type ITagData = {
+  name: string,
+  count: number,
+}
+export type ITagDataHasId = ITagData & HasObjectId