clean code

packages/app/src/components/PageComment.tsx

@@ -2,7 +2,7 @@ import React, {
   FC, useEffect, useState, useMemo, memo, useCallback,
 } from 'react';
 
-import { Nullable } from '@growi/core';
+import dynamic from 'next/dynamic';
 import { Button } from 'reactstrap';
 
 import { toastError } from '~/client/util/apiNotification';
@@ -15,22 +15,26 @@ import { ICommentHasId, ICommentHasIdList } from '../interfaces/comment';
 import { useSWRxPageComment } from '../stores/comment';
 
 import { Comment } from './PageComment/Comment';
-import { CommentEditor } from './PageComment/CommentEditor';
+import { CommentEditorProps } from './PageComment/CommentEditor';
 import { CommentEditorLazyRenderer } from './PageComment/CommentEditorLazyRenderer';
 import { DeleteCommentModal } from './PageComment/DeleteCommentModal';
 import { ReplyComments } from './PageComment/ReplyComments';
 
 import styles from './PageComment.module.scss';
 
-type Props = {
-  pageId?: Nullable<string>
+// TODO: Update Skelton
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./PageComment/CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
+
+
+type PageCommentProps = {
+  pageId?: string,
   isReadOnly: boolean,
   titleAlign?: 'center' | 'left' | 'right',
   highlightKeywords?: string[],
   hideIfEmpty?: boolean,
 }
 
-export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
+export const PageComment: FC<PageCommentProps> = memo((props:PageCommentProps): JSX.Element => {
 
   const {
     pageId, highlightKeywords, isReadOnly, titleAlign, hideIfEmpty,
@@ -214,7 +218,10 @@ export const PageComment: FC<Props> = memo((props:Props): JSX.Element => {
               })}
             </div>
             {/* TODO: Check if identical-page */}
-            <CommentEditorLazyRenderer pageId={pageId} rendererOptions={rendererOptions}/>
+            <CommentEditorLazyRenderer
+              pageId={pageId}
+              rendererOptions={rendererOptions}
+            />
           </div>
         </div>
       </div>

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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { UserPicture } from '@growi/ui';
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import { RendererOptions } from '~/services/renderer/renderer';
@@ -15,10 +16,14 @@ import RevisionRenderer from '../Page/RevisionRenderer';
 import Username from '../User/Username';
 
 import { CommentControl } from './CommentControl';
-import { CommentEditor } from './CommentEditor';
+import { CommentEditorProps } from './CommentEditor';
 
 import styles from './Comment.module.scss';
 
+// TODO: Update Skelton
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
+
+
 type CommentProps = {
   comment: ICommentHasId,
   isReadOnly: boolean,

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

@@ -1,11 +1,13 @@
 import React from 'react';
 
+
 type CommentControlProps = {
   onClickEditBtn: () => void,
   onClickDeleteBtn: () => void,
 }
 
 export const CommentControl = (props: CommentControlProps): JSX.Element => {
+
   const { onClickEditBtn, onClickDeleteBtn } = props;
 
   return (
@@ -19,4 +21,5 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
       </button>
     </div>
   );
+
 };

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

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 
 import { UserPicture } from '@growi/ui';
-// import dynamic from 'next/dynamic';
 import {
   Button, TabContent, TabPane,
 } from 'reactstrap';
@@ -17,7 +16,6 @@ import {
   useIsUploadableFile, useIsUploadableImage,
 } from '~/stores/context';
 import { useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
-// import { useIsMobile } from '~/stores/ui';
 
 import { CustomNavTab } from '../CustomNavigation/CustomNav';
 import NotAvailableForGuest from '../NotAvailableForGuest';
@@ -42,7 +40,7 @@ const navTabMapping = {
   },
 };
 
-type PropsType = {
+export type CommentEditorProps = {
   rendererOptions: RendererOptions,
   isForNewComment?: boolean,
   replyTo?: string,
@@ -58,7 +56,7 @@ type EditorRef = {
   terminateUploadingState: () => void,
 }
 
-export const CommentEditor = (props: PropsType): JSX.Element => {
+export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
   const {
     rendererOptions, isForNewComment, replyTo,
@@ -70,7 +68,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   const { data: currentPageId } = useCurrentPageId();
   const { update: updateComment, post: postComment } = useSWRxPageComment(currentPageId);
   const { data: revisionId } = useRevisionId();
-  // const { data: isMobile } = useIsMobile();
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
   const { data: isSlackConfigured } = useIsSlackConfigured();
@@ -78,9 +75,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   const { data: isUploadableImage } = useIsUploadableImage();
 
   const [isReadyToUse, setIsReadyToUse] = useState(!isForNewComment);
-  // TODO: Refactor comment and markdown variable names or logic after presentation
   const [comment, setComment] = useState(commentBody ?? '');
-  const [markdown, setMarkdown] = useState('');
   const [activeTab, setActiveTab] = useState('comment_editor');
   const [error, setError] = useState();
   const [slackChannels, setSlackChannels] = useState(slackChannelsData?.toString());
@@ -89,8 +84,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
   const handleSelect = useCallback((activeTab: string) => {
     setActiveTab(activeTab);
-    setMarkdown(comment);
-  }, [comment, setMarkdown]);
+  }, []);
 
   useEffect(() => {
     if (slackChannels === undefined) { return }
@@ -99,7 +93,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
 
   const initializeEditor = useCallback(() => {
     setComment('');
-    setMarkdown('');
     setActiveTab('comment_editor');
     setError(undefined);
     // reset value
@@ -177,7 +170,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   }, []);
 
   const uploadHandler = useCallback(async(file) => {
-
     if (editorRef.current == null) { return }
 
     const pagePath = currentPagePath;
@@ -187,6 +179,7 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
     formData.append('file', file);
     formData.append('path', pagePath ?? '');
     formData.append('page_id', pageId ?? '');
+
     try {
       // TODO: typescriptize res
       const res = await apiPostForm(endpoint, formData) as any;
@@ -208,7 +201,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
     }
   }, [apiErrorHandler, currentPageId, currentPagePath]);
 
-
   const getCommentHtml = useCallback(() => {
     if (currentPagePath == null) {
       return <></>;
@@ -217,11 +209,11 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
     return (
       <CommentPreview
         rendererOptions={rendererOptions}
-        markdown={markdown}
+        markdown={comment}
         path={currentPagePath}
       />
     );
-  }, [currentPagePath, markdown, rendererOptions]);
+  }, [currentPagePath, comment, rendererOptions]);
 
   const renderBeforeReady = useCallback((): JSX.Element => {
     return (
@@ -240,7 +232,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
   }, []);
 
   const renderReady = () => {
-
     const commentPreview = getCommentHtml();
 
     const errorMessage = <span className="text-danger text-right mr-2">{error}</span>;
@@ -260,10 +251,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
       </Button>
     );
 
-    // const Editor = dynamic(() => import('../PageEditor/Editor'), { ssr: false });
-    // TODO: typescriptize Editor
-    // const AnyEditor = Editor as any;
-
     const isUploadable = isUploadableImage || isUploadableFile;
 
     return (
@@ -275,8 +262,6 @@ export const CommentEditor = (props: PropsType): JSX.Element => {
               <Editor
                 ref={editorRef}
                 value={comment}
-                // lineNumbers={false}
-                // isMobile={isMobile}
                 isUploadable={isUploadable}
                 isUploadableFile={isUploadableFile}
                 onChange={setComment}

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

@@ -1,15 +1,19 @@
 import React from 'react';
 
-import { Nullable } from '@growi/core';
+import dynamic from 'next/dynamic';
 
 import { RendererOptions } from '~/services/renderer/renderer';
 
 import { useSWRxPageComment } from '../../stores/comment';
 
-import { CommentEditor } from './CommentEditor';
+import { CommentEditorProps } from './CommentEditor';
+
+// TODO: Update Skelton
+const CommentEditor = dynamic<CommentEditorProps>(() => import('./CommentEditor').then(mod => mod.CommentEditor), { ssr: false });
+
 
 type Props = {
-  pageId?: Nullable<string>,
+  pageId?: string,
   rendererOptions: RendererOptions,
 }
 
@@ -22,9 +26,10 @@ export const CommentEditorLazyRenderer = (props: Props): JSX.Element => {
   return (
     <CommentEditor
       rendererOptions={rendererOptions}
+      isForNewComment
       replyTo={undefined}
       onCommentButtonClicked={mutate}
-      isForNewComment
     />
   );
+
 };

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

@@ -2,6 +2,7 @@ import { RendererOptions } from '~/services/renderer/renderer';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
+
 type CommentPreviewPorps = {
   rendererOptions: RendererOptions,
   markdown: string,
@@ -10,7 +11,7 @@ type CommentPreviewPorps = {
 
 export const CommentPreview = (props: CommentPreviewPorps): JSX.Element => {
 
-  const { markdown, path, rendererOptions } = props;
+  const { rendererOptions, markdown, path } = props;
 
   return (
     <div className="page-comment-preview-body">

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

@@ -12,6 +12,7 @@ import { Comment } from './Comment';
 
 import styles from './ReplyComments.module.scss';
 
+
 type ReplycommentsProps = {
   isReadOnly: boolean,
   replyList: ICommentHasIdList,
@@ -38,11 +39,11 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
     return (
       <div key={reply._id} className={`${styles['page-comment-reply']} ml-4 ml-sm-5 mr-3`}>
         <Comment
-          rendererOptions={rendererOptions}
-          deleteBtnClicked={deleteBtnClicked}
           comment={reply}
-          onComment={onComment}
           isReadOnly={isReadOnly}
+          deleteBtnClicked={deleteBtnClicked}
+          onComment={onComment}
+          rendererOptions={rendererOptions}
           currentPagePath={currentPagePath}
           currentRevisionId={currentRevisionId}
           currentRevisionCreatedAt={currentRevisionCreatedAt}

packages/app/src/components/PageContentFooter.tsx

@@ -8,10 +8,10 @@ import { Skelton } from './Skelton';
 
 import styles from './PageContentFooter.module.scss';
 
-export const PageContentFooter = memo((): JSX.Element => {
+const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'),
+  { ssr: false, loading: () => <Skelton additionalClass={`${styles['page-content-footer-skelton']} mb-3`} /> });
 
-  const AuthorInfo = dynamic(() => import('./Navbar/AuthorInfo'),
-    { ssr: false, loading: () => <Skelton additionalClass={`${styles['page-content-footer-skelton']} mb-3`} /> });
+export const PageContentFooter = memo((): JSX.Element => {
 
   const { data: page } = useSWRxCurrentPage();
 
@@ -20,7 +20,6 @@ export const PageContentFooter = memo((): JSX.Element => {
   }
 
   return (
-    // TODO: page-content-footer, scss module import and global import.
     <div className={`${styles['page-content-footer']} page-content-footer py-4 d-edit-none d-print-none}`}>
       <div className="grw-container-convertible">
         <div className="page-meta">

packages/app/src/components/PageEditor/Editor.tsx

@@ -36,6 +36,7 @@ type EditorPropsType = {
   onSave?: () => Promise<void>,
   onPasteFiles?: (event: Event) => void,
   onCtrlEnter?: (event: Event) => void,
+  isComment?: boolean,
 }
 
 type DropzoneRef = {

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

@@ -81,7 +81,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   const SubNavButtons = dynamic<SubNavButtonsProps>(() => import('../Navbar/SubNavButtons').then(mod => mod.SubNavButtons), { ssr: false });
   const RevisionLoader = dynamic(() => import('../Page/RevisionLoader'), { ssr: false });
   const PageComment = dynamic(() => import('../PageComment').then(mod => mod.PageComment), { ssr: false });
-  // TODO: Commentout for eslint error
+  // Commentout for eslint error, PageContentFooter is imported in PgaeComment
   // const PageContentFooter = dynamic(() => import('../PageContentFooter'), { ssr: false });
 
   const scrollElementRef = useRef(null);