refactor useCommentPreviewOptions hooks

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

@@ -10,7 +10,6 @@ import {
 import * as toastr from 'toastr';
 
 import { apiPostForm } from '~/client/util/apiv1-client';
-import { RendererOptions } from '~/services/renderer/renderer';
 import { useSWRxPageComment } from '~/stores/comment';
 import {
   useCurrentPagePath, useCurrentPageId, useCurrentUser, useRevisionId, useIsSlackConfigured,
@@ -40,7 +39,6 @@ const navTabMapping = {
 };
 
 type PropsType = {
-  rendererOptions: RendererOptions,
   isForNewComment?: boolean,
   replyTo?: string,
   currentCommentId?: string,
@@ -58,7 +56,7 @@ type EditorRef = {
 export const CommentEditor = (props: PropsType): JSX.Element => {
 
   const {
-    rendererOptions, isForNewComment, replyTo,
+    isForNewComment, replyTo,
     currentCommentId, commentBody, onCancelButtonClicked, onCommentButtonClicked,
   } = props;
   const { data: currentUser } = useCurrentUser();
@@ -211,12 +209,11 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
     return (
       <CommentPreview
-        rendererOptions={rendererOptions}
         markdown={markdown}
-        currentPagePath={currentPagePath}
+        path={currentPagePath}
       />
     );
-  }, [currentPagePath, markdown, rendererOptions]);
+  }, [currentPagePath, markdown]);
 
   const renderBeforeReady = useCallback((): JSX.Element => {
     return (

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

@@ -2,13 +2,9 @@ import React, { FC } from 'react';
 
 import { useSWRxPageComment } from '../../stores/comment';
 
-import AppContainer from '~/client/services/AppContainer';
-
-import CommentEditor from './CommentEditor';
-import { useCommentPreviewOptions } from '~/stores/renderer';
+import { CommentEditor } from './CommentEditor';
 
 type Props = {
-  appContainer: AppContainer,
   pageId: string,
 }
 
@@ -16,18 +12,9 @@ const CommentEditorLazyRenderer:FC<Props> = (props:Props):JSX.Element => {
 
   const { pageId } = props;
   const { mutate } = useSWRxPageComment(pageId);
-  const { data: rendererOptions } = useCommentPreviewOptions();
-
-  if (rendererOptions == null) {
-    return <></>;
-  }
-
-  const { appContainer } = props;
 
   return (
     <CommentEditor
-      appContainer={appContainer}
-      rendererOptions={rendererOptions}
       replyTo={undefined}
       onCommentButtonClicked={mutate}
       isForNewComment

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

@@ -1,24 +1,28 @@
-import { RendererOptions } from '~/services/renderer/renderer';
+import { useCommentPreviewOptions } from '~/stores/renderer';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
-
 type CommentPreviewPorps = {
-  rendererOptions: RendererOptions,
   markdown: string,
-  currentPagePath: string,
+  path: string,
 }
 
 export const CommentPreview = (props: CommentPreviewPorps): JSX.Element => {
-  const { rendererOptions, markdown, currentPagePath } = props;
+  const { markdown, path } = props;
+
+  const { data: commentPreviewOptions } = useCommentPreviewOptions();
+
+  if (commentPreviewOptions == null) {
+    return <></>;
+  }
 
   return (
     <div className="page-comment-preview-body">
       <RevisionRenderer
-        rendererOptions={rendererOptions}
+        rendererOptions={commentPreviewOptions}
         markdown={markdown}
         additionalClassName="comment"
-        pagePath={currentPagePath}
+        pagePath={path}
       />
     </div>
   );

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

@@ -3,8 +3,6 @@ import React, { useState } from 'react';
 
 import { Collapse } from 'reactstrap';
 
-import { RendererOptions } from '~/services/renderer/renderer';
-
 import { ICommentHasId, ICommentHasIdList } from '../../interfaces/comment';
 import { useRendererConfig } from '../../stores/context';
 
@@ -12,7 +10,6 @@ import { Comment } from './Comment';
 
 type ReplaycommentsProps = {
   deleteBtnClicked: (comment: ICommentHasId) => void,
-  rendererOptions: RendererOptions,
   isReadOnly: boolean,
   replyList: ICommentHasIdList,
   onComment: () => void,
@@ -20,7 +17,7 @@ type ReplaycommentsProps = {
 
 export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
   const {
-    deleteBtnClicked, rendererOptions, isReadOnly, replyList, onComment,
+    deleteBtnClicked, isReadOnly, replyList, onComment,
   } = props;
   const { data: rendererConfig } = useRendererConfig();
 
@@ -33,7 +30,6 @@ export const ReplayComments = (props: ReplaycommentsProps): JSX.Element => {
         <Comment
           comment={reply}
           deleteBtnClicked={deleteBtnClicked}
-          rendererOptions={rendererOptions}
           isReadOnly={isReadOnly}
           onComment={onComment}
         />