fixed user hydration

src/components/comment/CommentContent/index.tsx

@@ -1,9 +1,19 @@
-import React, { createElement, FC, Fragment, memo, ReactNode, useCallback, useMemo, useState } from 'react';
+import React, {
+  createElement,
+  FC,
+  Fragment,
+  memo,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
 import classnames from 'classnames';
 import classNames from 'classnames';
 
 import { CommentForm } from '~/components/comment/CommentForm';
+import { Authorized } from '~/components/containers/Authorized';
 import { Group } from '~/components/containers/Group';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
@@ -28,7 +38,15 @@ interface IProps {
 }
 
 const CommentContent: FC<IProps> = memo(
-  ({ comment, canEdit, nodeId, saveComment, onDelete, onShowImageModal, prefix }) => {
+  ({
+    comment,
+    canEdit,
+    nodeId,
+    saveComment,
+    onDelete,
+    onShowImageModal,
+    prefix,
+  }) => {
     const [isEditing, setIsEditing] = useState(false);
 
     const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
@@ -38,11 +56,13 @@ const CommentContent: FC<IProps> = memo(
       () =>
         reduce(
           (group, file) =>
-            file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
+            file.type
+              ? assocPath([file.type], append(file, group[file.type]), group)
+              : group,
           {} as Record<UploadType, IFile[]>,
-          comment.files
+          comment.files,
         ),
-      [comment]
+      [comment],
     );
 
     const onLockClick = useCallback(() => {
@@ -50,8 +70,9 @@ const CommentContent: FC<IProps> = memo(
     }, [comment, onDelete]);
 
     const menu = useMemo(
-      () => canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
-      [canEdit, startEditing, onLockClick]
+      () =>
+        canEdit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
+      [canEdit, startEditing, onLockClick],
     );
 
     const blocks = useMemo(
@@ -59,7 +80,7 @@ const CommentContent: FC<IProps> = memo(
         !!comment.text.trim()
           ? formatCommentText(path(['user', 'username'], comment), comment.text)
           : [],
-      [comment]
+      [comment],
     );
 
     if (isEditing) {
@@ -78,17 +99,22 @@ const CommentContent: FC<IProps> = memo(
         {!!prefix && <div className={styles.prefix}>{prefix}</div>}
         {comment.text.trim() && (
           <Group className={classnames(styles.block, styles.block_text)}>
-            {menu}
+            <Authorized>{menu}</Authorized>
 
             <Group className={styles.renderers}>
               {blocks.map(
                 (block, key) =>
                   COMMENT_BLOCK_RENDERERS[block.type] &&
-                  createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+                  createElement(COMMENT_BLOCK_RENDERERS[block.type], {
+                    block,
+                    key,
+                  }),
               )}
             </Group>
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+            <div className={styles.date}>
+              {getPrettyDate(comment.created_at)}
+            </div>
           </Group>
         )}
 
@@ -102,32 +128,45 @@ const CommentContent: FC<IProps> = memo(
               })}
             >
               {groupped.image.map((file, index) => (
-                <div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
-                  <img src={getURL(file, ImagePresets['600'])} alt={file.name} />
+                <div
+                  key={file.id}
+                  onClick={() => onShowImageModal(groupped.image, index)}
+                >
+                  <img
+                    src={getURL(file, ImagePresets['600'])}
+                    alt={file.name}
+                  />
                 </div>
               ))}
             </div>
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+            <div className={styles.date}>
+              {getPrettyDate(comment.created_at)}
+            </div>
           </div>
         )}
 
         {groupped.audio && groupped.audio.length > 0 && (
           <Fragment>
-            {groupped.audio.map(file => (
-              <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
+            {groupped.audio.map((file) => (
+              <div
+                className={classnames(styles.block, styles.block_audio)}
+                key={file.id}
+              >
                 {menu}
 
                 <AudioPlayer file={file} />
 
-                <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+                <div className={styles.date}>
+                  {getPrettyDate(comment.created_at)}
+                </div>
               </div>
             ))}
           </Fragment>
         )}
       </div>
     );
-  }
+  },
 );
 
 export { CommentContent };