wip refactor tags

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

@@ -1,40 +1,95 @@
 import React, { FC, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import TagsList from '../TagsList';
+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,
+}
+
+const LIMIT = 10;
 
 const Tag: FC = () => {
-  const { t } = useTranslation('');
+
+  const [tagData, setTagData] = useState<Itag[]>([]);
+  const [totalTags, setTotalTags] = useState<number>(0);
   const [isOnReload, setIsOnReload] = useState<boolean>(false);
+  const { t } = useTranslation('');
+
+  const getTagList = async(selectPageNumber) => {
+    const offset = (selectPageNumber - 1) * LIMIT;
+    let res;
+
+    try {
+      res = await apiGet('/tags.list', { LIMIT, offset });
+    }
+    catch (error) {
+      toastError(error);
+    }
+
+    const tagData = res.data;
+
+    setTagData(tagData);
+    setTotalTags(res.totalCount);
+
+  };
+
+  const onReload = () => {
+    getTagList(1);
+  };
 
   useEffect(() => {
+    const f = async() => {
+      getTagList(1);
+    };
+    f();
+
     setIsOnReload(false);
   }, [isOnReload]);
 
   return (
     <>
+
       <div className="grw-sidebar-content-header p-3 d-flex">
         <h3 className="mb-0">{t('Tags')}</h3>
         <button
           type="button"
           className="btn btn-sm ml-auto grw-btn-reload-rc"
-          onClick={() => {
-            setIsOnReload(true);
-          }}
+          onClick={onReload}
         >
           <i className="icon icon-reload"></i>
         </button>
       </div>
-      <div className="d-flex justify-content-center">
-        <button
-          className="btn btn-primary my-4"
-          type="button"
-          onClick={() => { window.location.href = '/tags' }}
-        >
-          {t('Check All tags')}
-        </button>
-      </div>
+
+
       <div className="grw-container-convertible mb-5 pb-5">
-        <TagsList isOnReload={isOnReload} />
+
+        <header className="py-0">
+          {/* total tags */}
+          <h2 className="my-3">人気のタグ</h2>
+        </header>
+
+        <div className="px-3 text-center">
+          <TagCloudBox tags={tagData} minSize={20} />
+
+        </div>
+
+
+        <div className="d-flex justify-content-center">
+          <button
+            className="btn btn-primary mt-1 mb-4 px-4"
+            type="button"
+            onClick={() => { window.location.href = '/tags' }}
+          >
+            {t('Check All tags')}
+          </button>
+        </div>
+        <TagList tagData={tagData} totalTags={totalTags} />
       </div>
     </>
   );

packages/app/src/components/TagList.tsx

@@ -0,0 +1,65 @@
+import React, { FC, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import PaginationWrapper from './PaginationWrapper';
+
+type Itag = {
+  _id: string,
+  name: string,
+  count: number,
+}
+
+type TagListProps = {
+  tagData: Itag[],
+  totalTags: number,
+  onHandlePage?: ((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 isTagExist: boolean = tagData.length > 0;
+  const { t } = useTranslation('');
+
+  const generateTagList = useCallback((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>
+      );
+    });
+  }, []);
+
+  const paginationHandler = useCallback(async(selectedPage) => {
+    if (onHandlePage != null) {
+      onHandlePage(selectedPage);
+      setActivePage(selectedPage);
+    }
+  }, [onHandlePage]);
+
+  if (!isTagExist) {
+    return <h3>{ t('You have no tag, You can set tags on pages') }</h3>;
+  }
+
+  return (
+    <>
+      <ul className="list-group text-left mb-4">
+        {generateTagList(tagData)}
+      </ul>
+      <PaginationWrapper
+        activePage={activePage}
+        changePage={paginationHandler}
+        totalItemsCount={totalTags}
+        pagingLimit={PAGING_LIMIT}
+        align="center"
+        size="md"
+      />
+    </>
+  );
+
+};
+
+export default TagList;