swrize methods

packages/app/src/components/PageComment/CommentEditor.tsx

@@ -13,7 +13,7 @@ import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
 import PageContainer from '~/client/services/PageContainer';
 import GrowiRenderer from '~/client/util/GrowiRenderer';
-import { apiPost, apiPostForm } from '~/client/util/apiv1-client';
+import { apiPostForm } from '~/client/util/apiv1-client';
 import { CustomWindow } from '~/interfaces/global';
 import { IInterceptorManager } from '~/interfaces/interceptor-manager';
 import { useSWRxPageComment } from '~/stores/comment';
@@ -74,7 +74,7 @@ const CommentEditor = (props: PropsType): JSX.Element => {
   const { data: currentUser } = useCurrentUser();
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: currentPageId } = useCurrentPageId();
-  const { mutate: mutateComment } = useSWRxPageComment(currentPageId);
+  const { update: updateComment, post: postComment } = useSWRxPageComment(currentPageId);
   const { data: revisionId } = useRevisionId();
   const { data: isMobile } = useIsMobile();
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
@@ -156,34 +156,28 @@ const CommentEditor = (props: PropsType): JSX.Element => {
     }
   }, [isForNewComment, onCancelButtonClicked]);
 
-  const postComment = useCallback(async() => {
+  const postCommentHandler = useCallback(async() => {
     try {
       if (currentCommentId != null) {
         // update current comment
-        await apiPost('/comments.update', {
-          commentForm: {
-            comment,
-            revision_id: revisionId,
-            comment_id: currentCommentId,
-          },
-        });
+        await updateComment(comment, revisionId, currentCommentId);
       }
       else {
         // post new comment
-        await apiPost('/comments.add', {
+        const postCommentArgs = {
           commentForm: {
             comment,
-            page_id: currentPageId,
-            revision_id: revisionId,
+            revisionId,
             replyTo,
           },
           slackNotificationForm: {
             isSlackEnabled,
             slackChannels,
           },
-        });
+        };
+        postComment(postCommentArgs);
       }
-      mutateComment();
+
       initializeEditor();
 
       if (onCommentButtonClicked != null) {
@@ -204,8 +198,8 @@ const CommentEditor = (props: PropsType): JSX.Element => {
       event.preventDefault();
     }
 
-    postComment();
-  }, [postComment]);
+    postCommentHandler();
+  }, [postCommentHandler]);
 
   const apiErrorHandler = useCallback((error: Error) => {
     toastr.error(error.message, 'Error occured', {
@@ -289,7 +283,7 @@ const CommentEditor = (props: PropsType): JSX.Element => {
         outline
         color="primary"
         className="btn btn-outline-primary rounded-pill"
-        onClick={postComment}
+        onClick={postCommentHandler}
       >
         Comment
       </Button>

packages/app/src/stores/comment.tsx

@@ -1,6 +1,6 @@
 import useSWR, { SWRResponse } from 'swr';
 
-import { apiGet } from '~/client/util/apiv1-client';
+import { apiGet, apiPost } from '~/client/util/apiv1-client';
 
 import { ICommentHasIdList } from '../interfaces/comment';
 import { Nullable } from '../interfaces/common';
@@ -10,10 +10,67 @@ type IResponseComment = {
   ok: boolean,
 }
 
-export const useSWRxPageComment = (pageId: Nullable<string>): SWRResponse<ICommentHasIdList, Error> => {
+type CommentPost = {
+  commentForm: {
+    comment: string,
+    revisionId: string,
+    replyTo: string|undefined
+  },
+  slackNotificationForm: {
+    isSlackEnabled: boolean|undefined,
+    slackChannels: string|undefined,
+  },
+}
+
+type CommentOperation = {
+  update(comment: string, revisionId: string, commentId: string): Promise<void>,
+  post(args: CommentPost): Promise<void>
+}
+
+export const useSWRxPageComment = (pageId: Nullable<string>): SWRResponse<ICommentHasIdList, Error> & CommentOperation => {
   const shouldFetch: boolean = pageId != null;
-  return useSWR(
+
+  const swrResponse = useSWR(
     shouldFetch ? ['/comments.get', pageId] : null,
     (endpoint, pageId) => apiGet(endpoint, { page_id: pageId }).then((response:IResponseComment) => response.comments),
   );
+
+  const update = async(comment: string, revisionId: string, commentId: string) => {
+    const { mutate } = swrResponse;
+    await apiPost('/comments.update', {
+      commentForm: {
+        comment,
+        revision_id: revisionId,
+        comment_id: commentId,
+      },
+    });
+    mutate();
+  };
+
+  const post = async(args: CommentPost) => {
+    const { mutate } = swrResponse;
+    const { commentForm, slackNotificationForm } = args;
+    const { comment, revisionId, replyTo } = commentForm;
+    const { isSlackEnabled, slackChannels } = slackNotificationForm;
+
+    await apiPost('/comments.add', {
+      commentForm: {
+        comment,
+        page_id: pageId,
+        revision_id: revisionId,
+        replyTo,
+      },
+      slackNotificationForm: {
+        isSlackEnabled,
+        slackChannels,
+      },
+    });
+    mutate();
+  };
+
+  return {
+    ...swrResponse,
+    update,
+    post,
+  };
 };