80623 wip swr and tsx clean code

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -45,6 +45,7 @@ const GrowiSubNavigation = (props) => {
 
     try {
       const { tags } = await apiPost('/tags.update', { pageId, tags: newTags });
+      // here mutate();
 
       // update pageContainer.state
       pageContainer.setState({ tags });

packages/app/src/components/Page/TagLabels.jsx

@@ -66,7 +66,7 @@ class TagLabels extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const TagLabelsWrapper = withUnstatedContainers(TagLabels, [AppContainer]);
+const TagLabelsUnstatedWrapper = withUnstatedContainers(TagLabels, [AppContainer]);
 
 TagLabels.propTypes = {
   t: PropTypes.func.isRequired, // i18next
@@ -76,4 +76,7 @@ TagLabels.propTypes = {
   tagsUpdateInvoked: PropTypes.func,
 };
 
+const TagLabelsWrapper = (props) => {
+  return <TagLabelsUnstatedWrapper {...props}></TagLabelsUnstatedWrapper>;
+};
 export default withTranslation()(TagLabelsWrapper);

packages/app/src/components/SearchPage/SearchResultContentSubNavigation.tsx

@@ -5,6 +5,7 @@ import AppContainer from '../../client/services/AppContainer';
 import TagLabels from '../Page/TagLabels';
 import { toastSuccess, toastError } from '../../client/util/apiNotification';
 import { apiPost } from '../../client/util/apiv1-client';
+import { useSWRTagsInfo } from '../../stores/page';
 
 type Props = {
   appContainer:AppContainer
@@ -14,29 +15,24 @@ type Props = {
   isCompactMode?: boolean,
 }
 
-const TagLableWrapper = (props) => {
-  return <TagLabels {...props}></TagLabels>;
-};
 
 const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
   const {
     appContainer, pageId, path, isCompactMode, isSignleLineMode,
   } = props;
-  const [tags, setTags] = useState([]);
 
-  useEffect(() => {
-    const f = async() => {
-      const res : any = await appContainer.apiGet('/pages.getPageTag', { pageId });
-      setTags(res.tags);
-    };
-    f();
-  }, []);
+  const { data: tagData, error, mutate } = useSWRTagsInfo(pageId);
+  let TAGS;
 
+  if (tagData != null) {
+    TAGS = tagData.data.tags;
+    console.log(JSON.stringify(tagData.data.tags));
+  }
   const tagsUpdatedHandler = async(newTags) => {
     try {
-      const res : any = await apiPost('/tags.update', { pageId, tags: newTags });
-      setTags(res.tags);
+      await apiPost('/tags.update', { pageId, tags: newTags });
       toastSuccess('updated tags successfully');
+      mutate();
     }
     catch (err) {
       toastError(err, 'fail to update tags');
@@ -50,7 +46,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       <div className="grw-path-nav-container">
         {!isSharedUser && !isCompactMode && (
           <div className="grw-taglabels-container">
-            <TagLableWrapper tags={tags} tagsUpdateInvoked={tagsUpdatedHandler} />
+            <TagLabels tags={TAGS} tagsUpdateInvoked={tagsUpdatedHandler} />
           </div>
         )}
         <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />

packages/app/src/stores/page.tsx

@@ -1,6 +1,7 @@
 import useSWR, { SWRResponse } from 'swr';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
+import { apiGet } from '../client/util/apiv1-client';
 
 import { IPage } from '~/interfaces/page';
 import { IPagingResult } from '~/interfaces/paging-result';
@@ -31,3 +32,25 @@ export const useSWRxPageList = (
     }),
   );
 };
+
+
+// res
+// {"data":{"tags":["test","hello"],"ok":true}}
+interface DataInRes {
+  tags: string[];
+  ok : boolean;
+}
+interface Res {
+  data: DataInRes;
+}
+
+export const useSWRTagsInfo = (pageId) => {
+  return useSWR(`/pages.getPageTag?pageId=${pageId}`, endpoint => apiGet(endpoint).then((response) => {
+    // const res = response as Res;
+    return {
+      // res: response,
+      // tags: res.data.tags,
+      data: response,
+    };
+  }));
+};