removed upload redux store

src/components/comment/CommentContent/index.tsx

@@ -4,7 +4,7 @@ import { append, assocPath, path } from 'ramda';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 import styles from './styles.module.scss';
-import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { UploadType } from '~/constants/uploads';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
@@ -30,12 +30,12 @@ const CommentContent: FC<IProps> = memo(
     const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
     const stopEditing = useCallback(() => setIsEditing(false), [setIsEditing]);
 
-    const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+    const groupped = useMemo<Record<UploadType, IFile[]>>(
       () =>
         reduce(
           (group, file) =>
             file.type ? assocPath([file.type], append(file, group[file.type]), group) : group,
-          {},
+          {} as Record<UploadType, IFile[]>,
           comment.files
         ),
       [comment]

src/components/comment/CommentForm/index.tsx

@@ -3,8 +3,7 @@ import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
 import { Button } from '~/components/input/Button';
-import { FileUploaderProvider, useFileUploader } from '~/hooks/data/useFileUploader';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
+import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
 import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
 import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
@@ -16,6 +15,9 @@ import styles from './styles.module.scss';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
 import { Filler } from '~/components/containers/Filler';
+import { useUploader } from '~/hooks/data/useUploader';
+import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
+import { observer } from 'mobx-react-lite';
 
 interface IProps {
   comment?: IComment;
@@ -24,13 +26,9 @@ interface IProps {
   onCancelEdit?: () => void;
 }
 
-const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit }) => {
+const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCancelEdit }) => {
   const [textarea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
-  const uploader = useFileUploader(
-    UPLOAD_SUBJECTS.COMMENT,
-    UPLOAD_TARGETS.COMMENTS,
-    comment?.files
-  );
+  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments, comment?.files);
   const formik = useCommentFormFormik(
     comment || EMPTY_COMMENT,
     nodeId,
@@ -61,7 +59,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit })
     <UploadDropzone onUpload={uploader.uploadFiles}>
       <form onSubmit={formik.handleSubmit} className={styles.wrap}>
         <FormikProvider value={formik}>
-          <FileUploaderProvider value={uploader}>
+          <UploaderContextProvider value={uploader}>
             <div className={styles.input}>
               <LocalCommentFormTextarea onPaste={onPaste} ref={setTextArea} />
 
@@ -110,11 +108,11 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, saveComment, onCancelEdit })
                 </Button>
               </div>
             </div>
-          </FileUploaderProvider>
+          </UploaderContextProvider>
         </FormikProvider>
       </form>
     </UploadDropzone>
   );
-};
+});
 
 export { CommentForm };

src/components/comment/CommentFormAttachButtons/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { Button } from '~/components/input/Button';
-import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
+import { COMMENT_FILE_TYPES } from '~/constants/uploads';
 
 interface IProps {
   onUpload: (files: File[]) => void;

src/components/comment/CommentFormAttaches/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
@@ -6,68 +6,59 @@ import { IFile } from '~/redux/types';
 import { SortEnd } from 'react-sortable-hoc';
 import { moveArrItem } from '~/utils/fn';
 import { useFileDropZone } from '~/hooks';
-import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { useFileUploaderContext } from '~/hooks/data/useFileUploader';
+import { COMMENT_FILE_TYPES } from '~/constants/uploads';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
 
 const CommentFormAttaches: FC = () => {
-  const uploader = useFileUploaderContext();
-  const { files, pending, setFiles, uploadFiles } = uploader!;
-
-  const images = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
+  const {
     files,
-  ]);
-
-  const pendingImages = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.IMAGE), [
-    pending,
-  ]);
-
-  const audios = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), [
-    files,
-  ]);
-
-  const pendingAudios = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.AUDIO), [
-    pending,
-  ]);
+    pendingImages,
+    pendingAudios,
+    filesAudios,
+    filesImages,
+    uploadFiles,
+    setFiles,
+  } = useUploaderContext();
 
   const onDrop = useFileDropZone(uploadFiles, COMMENT_FILE_TYPES);
 
-  const hasImageAttaches = images.length > 0 || pendingImages.length > 0;
-  const hasAudioAttaches = audios.length > 0 || pendingAudios.length > 0;
+  const hasImageAttaches = filesImages.length > 0 || pendingImages.length > 0;
+  const hasAudioAttaches = filesAudios.length > 0 || pendingAudios.length > 0;
   const hasAttaches = hasImageAttaches || hasAudioAttaches;
 
   const onImageMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
       setFiles([
-        ...audios,
+        ...filesAudios,
         ...(moveArrItem(
           oldIndex,
           newIndex,
-          images.filter(file => !!file)
+          filesImages.filter(file => !!file)
         ) as IFile[]),
       ]);
     },
-    [images, audios, setFiles]
+    [setFiles, filesImages, filesAudios]
   );
 
   const onAudioMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
       setFiles([
-        ...images,
+        ...filesImages,
         ...(moveArrItem(
           oldIndex,
           newIndex,
-          audios.filter(file => !!file)
+          filesAudios.filter(file => !!file)
         ) as IFile[]),
       ]);
     },
-    [images, audios, setFiles]
+    [setFiles, filesImages, filesAudios]
   );
 
   const onFileDelete = useCallback(
     (fileId: IFile['id']) => {
       setFiles(files.filter(file => file.id !== fileId));
     },
-    [setFiles, files]
+    [files, setFiles]
   );
 
   const onAudioTitleChange = useCallback(
@@ -90,7 +81,7 @@ const CommentFormAttaches: FC = () => {
           onDelete={onFileDelete}
           onSortEnd={onImageMove}
           axis="xy"
-          items={images}
+          items={filesImages}
           locked={pendingImages}
           pressDelay={50}
           helperClass={styles.helper}
@@ -100,7 +91,7 @@ const CommentFormAttaches: FC = () => {
 
       {hasAudioAttaches && (
         <SortableAudioGrid
-          items={audios}
+          items={filesAudios}
           onDelete={onFileDelete}
           onTitleChange={onAudioTitleChange}
           onSortEnd={onAudioMove}