refactored component errors

src/components/comment/CommentContent/index.tsx

@@ -33,7 +33,8 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalSho
   const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
     () =>
       reduce(
-        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        (group, file) =>
+          file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
         {},
         comment.files
       ),

src/components/comment/CommentEmbedBlock/index.tsx

@@ -6,6 +6,7 @@ import { selectPlayer } from '~/redux/player/selectors';
 import { connect } from 'react-redux';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
 import { Icon } from '~/components/input/Icon';
+import { path } from 'ramda';
 
 const mapStateToProps = state => ({
   youtubes: selectPlayer(state).youtubes,
@@ -21,30 +22,32 @@ type Props = ReturnType<typeof mapStateToProps> &
 
 const CommentEmbedBlockUnconnected: FC<Props> = memo(
   ({ block, youtubes, playerGetYoutubeInfo }) => {
-    const link = useMemo(
-      () =>
-        block.content.match(
-          /https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?([\w\-\=]+)/
-        ),
-      [block.content]
-    );
+    const id = useMemo(() => {
+      const match = block.content.match(
+        /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-\=]+)/
+      );
+
+      return (match && match[1]) || '';
+    }, [block.content]);
 
     const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
     useEffect(() => {
-      if (!link[5] || youtubes[link[5]]) return;
-      playerGetYoutubeInfo(link[5]);
-    }, [link, playerGetYoutubeInfo]);
+      if (!id) return;
+      playerGetYoutubeInfo(id);
+    }, [id, playerGetYoutubeInfo]);
 
-    const title = useMemo(
-      () =>
-        (youtubes[link[5]] && youtubes[link[5]].metadata && youtubes[link[5]].metadata.title) || '',
-      [link, youtubes]
-    );
+    const title = useMemo<string>(() => {
+      if (!id) {
+        return block.content;
+      }
+
+      return path([id, 'metadata', 'title'], youtubes) || block.content;
+    }, [id, youtubes, block.content]);
 
     return (
       <div className={styles.embed}>
-        <a href={link[0]} target="_blank" />
+        <a href={id[0]} target="_blank" />
 
         <div className={styles.preview}>
           <div style={{ backgroundImage: `url("${preview}")` }}>
@@ -53,7 +56,7 @@ const CommentEmbedBlockUnconnected: FC<Props> = memo(
                 <Icon icon="play" size={32} />
               </div>
 
-              <div className={styles.title}>{title || link[0]}</div>
+              <div className={styles.title}>{title}</div>
             </div>
           </div>
         </div>

src/components/comment/CommentForm/index.tsx

@@ -67,7 +67,13 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
 
             <Group horizontal className={styles.buttons}>
               <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
-              <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
+
+              {!!textarea && (
+                <CommentFormFormatButtons
+                  element={textarea}
+                  handler={formik.handleChange('text')}
+                />
+              )}
 
               {isLoading && <LoaderCircle size={20} />}
 

src/components/comment/CommentFormAttaches/index.tsx

@@ -10,7 +10,8 @@ import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
 
 const CommentFormAttaches: FC = () => {
-  const { files, pending, setFiles, uploadFiles } = useFileUploaderContext();
+  const uploader = useFileUploaderContext();
+  const { files, pending, setFiles, uploadFiles } = uploader!;
 
   const images = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
     files,
@@ -70,7 +71,7 @@ const CommentFormAttaches: FC = () => {
   );
 
   const onAudioTitleChange = useCallback(
-    (fileId: IFile['id'], title: IFile['metadata']['title']) => {
+    (fileId: IFile['id'], title: string) => {
       setFiles(
         files.map(file =>
           file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
@@ -80,36 +81,36 @@ const CommentFormAttaches: FC = () => {
     [files, setFiles]
   );
 
-  return (
-    hasAttaches && (
-      <div className={styles.attaches} onDropCapture={onDrop}>
-        {hasImageAttaches && (
-          <SortableImageGrid
-            onDelete={onFileDelete}
-            onSortEnd={onImageMove}
-            axis="xy"
-            items={images}
-            locked={pendingImages}
-            pressDelay={50}
-            helperClass={styles.helper}
-            size={120}
-          />
-        )}
+  if (!hasAttaches) return null;
 
-        {hasAudioAttaches && (
-          <SortableAudioGrid
-            items={audios}
-            onDelete={onFileDelete}
-            onTitleChange={onAudioTitleChange}
-            onSortEnd={onAudioMove}
-            axis="y"
-            locked={pendingAudios}
-            pressDelay={50}
-            helperClass={styles.helper}
-          />
-        )}
-      </div>
-    )
+  return (
+    <div className={styles.attaches} onDropCapture={onDrop}>
+      {hasImageAttaches && (
+        <SortableImageGrid
+          onDelete={onFileDelete}
+          onSortEnd={onImageMove}
+          axis="xy"
+          items={images}
+          locked={pendingImages}
+          pressDelay={50}
+          helperClass={styles.helper}
+          size={120}
+        />
+      )}
+
+      {hasAudioAttaches && (
+        <SortableAudioGrid
+          items={audios}
+          onDelete={onFileDelete}
+          onTitleChange={onAudioTitleChange}
+          onSortEnd={onAudioMove}
+          axis="y"
+          locked={pendingAudios}
+          pressDelay={50}
+          helperClass={styles.helper}
+        />
+      )}
+    </div>
   );
 };
 

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -13,7 +13,7 @@ const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
 
   const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
     ({ ctrlKey, key }) => {
-      if (!!ctrlKey && key === 'Enter') handleSubmit(null);
+      if (ctrlKey && key === 'Enter') handleSubmit(undefined);
     },
     [handleSubmit]
   );