change component structures about tags and clean codes of swr tags.tsx

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

@@ -5,13 +5,11 @@ import TagList from '../TagList';
 import TagCloudBox from '../TagCloudBox';
 
 import { useSWRxTagDataList } from '~/stores/tag';
-import { toastError } from '~/client/util/apiNotification';
 import { ITagDataHasId } from '~/interfaces/tag';
 
 const LIMIT = 10;
 
 const Tag: FC = () => {
-  const [isOnReload, setIsOnReload] = useState<boolean>(false);
   const [offset, setOffset] = useState<number>(0);
 
   const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagDataList(LIMIT, offset);
@@ -20,28 +18,19 @@ const Tag: FC = () => {
 
   const { t } = useTranslation('');
 
-  const getTagList = useCallback((selectedPageNumber) => {
-    setOffset((selectedPageNumber - 1) * LIMIT);
-
-    try {
-      mutateTagDataList();
-    }
-    catch (error) {
-      toastError(error);
-    }
-
-    if (isOnReload) {
-      setIsOnReload(false);
-    }
-
-  }, [isOnReload, mutateTagDataList]);
+  const setOffsetByPageNumber = useCallback((selectedPageNumber: number):void => {
+    // offset = (selectedPageNumber - 1) * 10
+    setOffset((selectedPageNumber - 1) * 10);
+  }, []);
 
   const onReload = useCallback(() => {
-    setIsOnReload(true);
-  }, []);
+    mutateTagDataList();
+  }, [mutateTagDataList]);
 
+  // todo: consider loading state by designer's advice
   if (!tagDataList) return <div>{t('Loading')}</div>;
 
+  // todo: adjust design by XD
   return (
     <div className="grw-container-convertible px-4 mb-5 pb-5">
       <div className="grw-sidebar-content-header py-3 d-flex">
@@ -71,9 +60,9 @@ const Tag: FC = () => {
       <TagList
         tagData={tagData}
         totalTags={totalCount}
+        activePage={1 + offset / 10} // activePage = 1 + offset / 10
+        onChangePage={setOffsetByPageNumber}
         limit={LIMIT}
-        isOnReload={isOnReload}
-        onHandlePagination={getTagList}
       />
     </div>
   );

packages/app/src/components/TagList.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useState, useEffect, useCallback,
+  FC, useCallback,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import PaginationWrapper from './PaginationWrapper';
@@ -8,31 +8,26 @@ import { ITagDataHasId } from '~/interfaces/tag';
 type TagListProps = {
   tagData: ITagDataHasId[],
   totalTags: number,
+  activePage: number,
+  onChangePage?: (selectedPageNumber: number) => void,
   limit: number,
-  isOnReload?: boolean,
-  onHandlePagination?: (selectedPageNumber:number) => void
+  isPaginationShown?: boolean,
 }
 
-const TagList: FC<TagListProps> = (props:TagListProps) => {
-  const [activePage, setActivePage] = useState<number>(1);
+const defaultProps = {
+  isPaginationShown: true,
+};
+
+const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) => {
   const {
-    tagData, totalTags, limit, isOnReload, onHandlePagination,
+    tagData, totalTags, activePage, onChangePage, limit, isPaginationShown,
   } = props;
   const isTagExist: boolean = tagData.length > 0;
   const { t } = useTranslation('');
 
-  const reloadHandler = useCallback(() => {
-    if ((isOnReload != null && isOnReload) && onHandlePagination != null) {
-      onHandlePagination(activePage);
-    }
-  }, [isOnReload, onHandlePagination, activePage]);
-
-  useEffect(() => {
-    reloadHandler();
-  });
-
   const generateTagList = useCallback((tagData) => {
     return tagData.map((data) => {
+      // todo: adjust design
       return (
         <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
           <i className="icon-tag mr-2"></i>{data.name}
@@ -42,13 +37,6 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
     });
   }, []);
 
-  const paginationHandler = useCallback((selectedPage) => {
-    if (onHandlePagination != null) {
-      onHandlePagination(selectedPage);
-      setActivePage(selectedPage);
-    }
-  }, [onHandlePagination]);
-
   if (!isTagExist) {
     return <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
   }
@@ -58,17 +46,23 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
       <ul className="list-group text-left mb-4">
         {generateTagList(tagData)}
       </ul>
-      <PaginationWrapper
-        activePage={activePage}
-        changePage={paginationHandler}
-        totalItemsCount={totalTags}
-        pagingLimit={limit}
-        align="center"
-        size="md"
-      />
+      {isPaginationShown
+      && (
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={onChangePage}
+          totalItemsCount={totalTags}
+          pagingLimit={limit}
+          align="center"
+          size="md"
+        />
+      )
+      }
     </>
   );
 
 };
 
+TagList.defaultProps = defaultProps;
+
 export default TagList;

packages/app/src/components/TagPage.tsx

@@ -5,7 +5,6 @@ import TagList from './TagList';
 import TagCloudBox from './TagCloudBox';
 
 import { useSWRxTagDataList } from '~/stores/tag';
-import { toastError } from '~/client/util/apiNotification';
 import { ITagDataHasId } from '~/interfaces/tag';
 
 const LIMIT = 10;
@@ -13,26 +12,21 @@ const LIMIT = 10;
 const TagPage: FC = () => {
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagDataList(LIMIT, offset);
+  const { data: tagDataList } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagDataHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 
   const { t } = useTranslation('');
 
-  const getTagList = useCallback((selectedPageNumber) => {
-    setOffset((selectedPageNumber - 1) * LIMIT);
-
-    try {
-      mutateTagDataList();
-    }
-    catch (error) {
-      toastError(error);
-    }
-
-  }, [mutateTagDataList]);
+  const setOffsetByPageNumber = useCallback((selectedPageNumber: number):void => {
+    // offset = (selectedPageNumber - 1) * 10
+    setOffset((selectedPageNumber - 1) * 10);
+  }, []);
 
+  // todo: consider loading state by designer's advice
   if (!tagDataList) return <div>{t('Loading')}</div>;
 
+  // todo: adjust margin and redesign tags page
   return (
     <div className="grw-container-convertible mb-5 pb-5">
       <h2 className="my-3">{`${t('Tags')}(${totalCount})`}</h2>
@@ -42,8 +36,9 @@ const TagPage: FC = () => {
       <TagList
         tagData={tagData}
         totalTags={totalCount}
+        activePage={1 + offset / 10} // activePage = 1 + offset / 10
+        onChangePage={setOffsetByPageNumber}
         limit={LIMIT}
-        onHandlePagination={getTagList}
       />
     </div>
   );

packages/app/src/stores/tag.tsx

@@ -2,19 +2,18 @@ import useSWR, { SWRResponse } from 'swr';
 import { ITagDataHasId } from '~/interfaces/tag';
 import { apiGet } from '~/client/util/apiv1-client';
 
-type ITagDataResponse = {
+type ITagDataListResponse = {
   data: ITagDataHasId[],
   totalCount: number,
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const useSWRxTagDataList = (
     limit: number,
     offset: number,
-): SWRResponse<ITagDataResponse, Error> => {
+): SWRResponse<ITagDataListResponse, Error> => {
   return useSWR(
     `/tags.list?limit=${limit}&offset=${offset}`,
-    endpoint => apiGet(endpoint).then((response: ITagDataResponse) => {
+    endpoint => apiGet(endpoint).then((response: ITagDataListResponse) => {
       return {
         data: response.data,
         totalCount: response.totalCount,