mutate

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

@@ -1,6 +1,9 @@
 import React, { FC, useState, useEffect } from 'react';
+
 import { useTranslation } from 'react-i18next';
+
 import TagsList from '../TagsList';
+import _TagsList from '../_TagsList';
 
 const Tag: FC = () => {
   const { t } = useTranslation('');
@@ -34,7 +37,8 @@ const Tag: FC = () => {
         </button>
       </div>
       <div className="grw-container-convertible mb-5 pb-5">
-        <TagsList isOnReload={isOnReload} />
+        {/* <TagsList isOnReload={isOnReload} /> */}
+        <_TagsList isOnReload={isOnReload} />
       </div>
     </div>
   );

packages/app/src/components/_TagsList.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +11,7 @@ import TagCloudBox from './TagCloudBox';
 
 
 type Props = {
-
+  isOnReload: boolean
 }
 
 const TagsList: FC<Props> = (props: Props) => {
@@ -20,14 +20,19 @@ const TagsList: FC<Props> = (props: Props) => {
   const [activePage, setActivePage] = useState(1);
   const [totalTags, setTotalTags] = useState(0);
   const [pagingLimit, setPagingLimit] = useState(10);
+  const [pagingOffset, setPagingOffset] = useState(0);
 
-  const { data: tagsListResult } = useSWRxTagsList(pagingLimit, 0);
+  const { data: tagsListResult, mutate } = useSWRxTagsList(pagingLimit, pagingOffset);
 
   const handlePage = (selectedPageNumber: number) => {
-    console.log(selectedPageNumber);
     setActivePage(selectedPageNumber);
+    setPagingOffset((selectedPageNumber - 1) * pagingLimit);
   };
 
+  useEffect(() => {
+    mutate();
+  }, [mutate, props.isOnReload]);
+
   return (
     <>
       <header className="py-0">