add room editor dialog

src/components/editors/AudioEditor/index.tsx

@@ -1,46 +1,39 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import { FC } from 'react';
 
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import { UploadType } from '~/constants/uploads';
-import { IFile } from '~/types';
 import { NodeEditorProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
-import { values } from '~/utils/ramda';
 
 import { AudioGrid } from '../AudioGrid';
 import { ImageGrid } from '../ImageGrid';
 
 import styles from './styles.module.scss';
 
-type IProps = NodeEditorProps;
-
-const AudioEditor: FC<IProps> = () => {
-  const { pending, filesAudios, filesImages, setFiles, uploadFiles } = useUploaderContext()!;
-
-  const pendingImages = useMemo(
-    () => values(pending).filter(item => item.type === UploadType.Image),
-    [pending]
-  );
-
-  const pendingAudios = useMemo(
-    () => values(pending).filter(item => item.type === UploadType.Audio),
-    [pending]
-  );
-
-  const setImages = useCallback((values: IFile[]) => setFiles([...values, ...filesAudios]), [
-    setFiles,
-    filesAudios,
-  ]);
-  const setAudios = useCallback((values: IFile[]) => setFiles([...values, ...filesImages]), [
-    setFiles,
+const AudioEditor: FC<NodeEditorProps> = () => {
+  const {
     filesImages,
-  ]);
+    filesAudios,
+    uploadFiles,
+    setImages,
+    setAudios,
+    pendingAudios,
+    pendingImages,
+  } = useUploaderContext()!;
 
   return (
     <UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
       <div className={styles.wrap}>
-        <ImageGrid files={filesImages} setFiles={setImages} locked={pendingImages} />
-        <AudioGrid files={filesAudios} setFiles={setAudios} locked={pendingAudios} />
+        <ImageGrid
+          files={filesImages}
+          setFiles={setImages}
+          locked={pendingImages}
+        />
+
+        <AudioGrid
+          files={filesAudios}
+          setFiles={setAudios}
+          locked={pendingAudios}
+        />
       </div>
     </UploadDropzone>
   );

src/components/editors/RoomEditor/index.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { NodeEditorProps } from '~/types/node';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+
+import { AudioGrid } from '../AudioGrid';
+import { ImageGrid } from '../ImageGrid';
+
+import styles from './styles.module.scss';
+
+const RoomEditor: FC<NodeEditorProps> = () => {
+  const {
+    filesImages,
+    filesAudios,
+    uploadFiles,
+    setImages,
+    setAudios,
+    pendingAudios,
+    pendingImages,
+  } = useUploaderContext()!;
+
+  return (
+    <UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
+      <div className={styles.wrap}>
+        <ImageGrid
+          files={filesImages}
+          setFiles={setImages}
+          locked={pendingImages}
+        />
+
+        <AudioGrid
+          files={filesAudios}
+          setFiles={setAudios}
+          locked={pendingAudios}
+        />
+      </div>
+    </UploadDropzone>
+  );
+};
+
+export { RoomEditor };

src/components/editors/RoomEditor/styles.module.scss

@@ -0,0 +1,6 @@
+@import "src/styles/variables";
+
+.wrap {
+  padding-bottom: $upload_button_height + $gap;
+  min-height: 200px;
+}