clean codes and rename useSWRxTagList

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import TagList from '../TagList';
 import TagCloudBox from '../TagCloudBox';
 
-import { useSWRxTagList } from '~/stores/tag';
+import { useSWRxTagDataList } from '~/stores/tag';
 import { toastError } from '~/client/util/apiNotification';
 import { ITagDataHasId } from '~/interfaces/tag';
 
@@ -14,7 +14,7 @@ const Tag: FC = () => {
   const [isOnReload, setIsOnReload] = useState<boolean>(false);
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutateTagDataList } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagDataHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 

packages/app/src/components/TagList.tsx

@@ -10,7 +10,7 @@ type TagListProps = {
   totalTags: number,
   limit: number,
   isOnReload?: boolean,
-  onHandlePagination?: ((selectedPageNumber:number) => void)
+  onHandlePagination?: (selectedPageNumber:number) => void
 }
 
 const TagList: FC<TagListProps> = (props:TagListProps) => {
@@ -21,7 +21,6 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
   const isTagExist: boolean = tagData.length > 0;
   const { t } = useTranslation('');
 
-
   const reloadHandler = useCallback(() => {
     if ((isOnReload != null && isOnReload) && onHandlePagination != null) {
       onHandlePagination(activePage);
@@ -32,7 +31,6 @@ const TagList: FC<TagListProps> = (props:TagListProps) => {
     reloadHandler();
   });
 
-
   const generateTagList = useCallback((tagData) => {
     return tagData.map((data) => {
       return (

packages/app/src/components/TagPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import TagList from './TagList';
 import TagCloudBox from './TagCloudBox';
 
-import { useSWRxTagList } from '~/stores/tag';
+import { useSWRxTagDataList } from '~/stores/tag';
 import { toastError } from '~/client/util/apiNotification';
 import { ITagDataHasId } from '~/interfaces/tag';
 
@@ -13,7 +13,7 @@ const LIMIT = 10;
 const TagPage: FC = () => {
   const [offset, setOffset] = useState<number>(0);
 
-  const { data: tagDataList, mutate: mutatetagDataList } = useSWRxTagList(LIMIT, offset);
+  const { data: tagDataList, mutate: mutatetagDataList } = useSWRxTagDataList(LIMIT, offset);
   const tagData: ITagDataHasId[] = tagDataList?.data || [];
   const totalCount: number = tagDataList?.totalCount || 0;
 

packages/app/src/components/TagsList.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { withTranslation } from 'react-i18next';
-
-import PaginationWrapper from './PaginationWrapper';
-import TagCloudBox from './TagCloudBox';
-import { apiGet } from '../client/util/apiv1-client';
-import { toastError } from '../client/util/apiNotification';
-
-class TagsList extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      tagData: [],
-      activePage: 1,
-      totalTags: 0,
-      pagingLimit: 10,
-    };
-
-    this.handlePage = this.handlePage.bind(this);
-    this.getTagList = this.getTagList.bind(this);
-  }
-
-  async componentWillMount() {
-    await this.getTagList(1);
-  }
-
-  async componentDidUpdate() {
-    if (this.props.isOnReload) {
-      await this.getTagList(this.state.activePage);
-    }
-  }
-
-  async handlePage(selectedPage) {
-    await this.getTagList(selectedPage);
-  }
-
-  async getTagList(selectPageNumber) {
-    const limit = this.state.pagingLimit;
-    const offset = (selectPageNumber - 1) * limit;
-    let res;
-
-    try {
-      res = await apiGet('/tags.list', { limit, offset });
-    }
-    catch (error) {
-      toastError(error);
-    }
-
-    const totalTags = res.totalCount;
-    const tagData = res.data;
-    const activePage = selectPageNumber;
-
-    this.setState({
-      tagData,
-      activePage,
-      totalTags,
-    });
-  }
-
-  /**
-   * generate Elements of Tag
-   *
-   * @param {any} pages Array of pages Model Obj
-   *
-   */
-  generateTagList(tagData) {
-    return tagData.map((data) => {
-      return (
-        <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
-          <i className="icon-tag mr-2"></i>{data.name}
-          <span className="ml-4 list-tag-count badge badge-secondary text-muted">{data.count}</span>
-        </a>
-      );
-    });
-  }
-
-  render() {
-    const { t } = this.props;
-    const messageForNoTag = this.state.tagData.length ? null : <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
-
-    return (
-      <>
-        <header className="py-0">
-          <h1 className="title text-center mt-5 mb-3 font-weight-bold">{`${t('Tags')}(${this.state.totalTags})`}</h1>
-        </header>
-        <div className="row text-center">
-          <div className="col-12 mb-5 px-5">
-            <TagCloudBox tags={this.state.tagData} minSize={20} />
-          </div>
-          <div className="col-12 tag-list mb-4">
-            <ul className="list-group text-left">
-              {this.generateTagList(this.state.tagData)}
-            </ul>
-            {messageForNoTag}
-          </div>
-          <div className="col-12 tag-list-pagination">
-            <PaginationWrapper
-              activePage={this.state.activePage}
-              changePage={this.handlePage}
-              totalItemsCount={this.state.totalTags}
-              pagingLimit={this.state.pagingLimit}
-              align="center"
-              size="md"
-            />
-          </div>
-        </div>
-      </>
-    );
-  }
-
-}
-
-TagsList.propTypes = {
-  isOnReload: PropTypes.bool,
-  t: PropTypes.func.isRequired, // i18next
-};
-
-TagsList.defaultProps = {
-  isOnReload: false,
-};
-
-export default withTranslation()(TagsList);

packages/app/src/stores/tag.tsx

@@ -8,7 +8,7 @@ type ITagDataResponse = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const useSWRxTagList = (
+export const useSWRxTagDataList = (
     limit: number,
     offset: number,
 ): SWRResponse<ITagDataResponse, Error> => {