audio upload buttin

src/components/bars/SubmitBar/index.tsx

@@ -19,6 +19,7 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
   const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]);
   const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]);
   const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]);
+  const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]);
 
   return (
     <div className={styles.wrap}>
@@ -34,6 +35,10 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
         <div onClick={onOpenVideoEditor}>
           <Icon icon="video" />
         </div>
+
+        <div onClick={onOpenAudioEditor}>
+          <Icon icon="audio" />
+        </div>
       </div>
 
       <div className={styles.button}>

src/components/editors/AudioEditor/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC, useCallback } from 'react';
+import { INode } from '~/redux/types';
+import path from 'ramda/es/path';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+}
+
+const AudioEditor: FC<IProps> = ({ data, setData }) => {
+  return <div>something!</div>;
+};
+
+export { AudioEditor };

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { INode } from '~/redux/types';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+  temp: string[];
+  setTemp: (val: string[]) => void;
+}
+
+const EditorAudioUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) => (
+  <EditorUploadButton
+    data={data}
+    setData={setData}
+    temp={temp}
+    setTemp={setTemp}
+    accept="audio/*"
+    icon="audio"
+    type={UPLOAD_TYPES.AUDIO}
+  />
+);
+
+export { EditorAudioUploadButton };

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 import { INode } from '~/redux/types';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
 interface IProps {
   data: INode;
@@ -17,6 +18,7 @@ const EditorImageUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) =
     setTemp={setTemp}
     accept="image/*"
     icon="image"
+    type={UPLOAD_TYPES.IMAGE}
   />
 );
 

src/components/editors/EditorPanel/styles.scss

@@ -7,4 +7,17 @@
   box-sizing: border-box;
   padding: $gap;
   z-index: 10;
-}
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    margin: 0 $gap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

src/components/editors/EditorUploadButton/index.tsx

@@ -30,6 +30,7 @@ type IProps = ReturnType<typeof mapStateToProps> &
 
     accept?: string;
     icon?: string;
+    type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
   };
 
 const EditorUploadButtonUnconnected: FC<IProps> = ({
@@ -42,6 +43,7 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
   uploadUploadFiles,
   accept = 'image/*',
   icon = 'plus',
+  type = UPLOAD_TYPES.IMAGE,
 }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
 
@@ -52,13 +54,15 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
 
       if (current >= NODE_SETTINGS.MAX_FILES) return;
 
+      console.log({ type });
+
       const items: IFileWithUUID[] = Array.from(uploads).map(
         (file: File): IFileWithUUID => ({
           file,
           temp_id: uuid(),
           subject: UPLOAD_SUBJECTS.EDITOR,
           target: UPLOAD_TARGETS.NODES,
-          type: UPLOAD_TYPES.IMAGE,
+          type,
         })
       );
 
@@ -67,7 +71,7 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
       setTemp([...temp, ...temps]);
       uploadUploadFiles(items);
     },
-    [setTemp, uploadUploadFiles, temp, data]
+    [setTemp, uploadUploadFiles, temp, data, type]
   );
 
   const onFileAdd = useCallback(

src/containers/editors/EditorDialogAudio/index.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { EditorDialog } from '~/containers/dialogs/EditorDialog';
+import { IDialogProps } from '~/redux/types';
+import { NODE_TYPES } from '~/redux/node/constants';
+
+type IProps = IDialogProps & {};
+
+const EditorDialogAudio: FC<IProps> = props => <EditorDialog type={NODE_TYPES.AUDIO} {...props} />;
+
+export { EditorDialogAudio };

src/redux/modal/constants.ts

@@ -3,6 +3,7 @@ import { LoginDialog } from '~/containers/dialogs/LoginDialog';
 import { EditorDialogImage } from '~/containers/editors/EditorDialogImage';
 import { EditorDialogText } from '~/containers/editors/EditorDialogText';
 import { EditorDialogVideo } from '~/containers/editors/EditorDialogVideo';
+import { EditorDialogAudio } from '~/containers/editors/EditorDialogAudio';
 import { NODE_TYPES } from '../node/constants';
 
 export const MODAL_ACTIONS = {
@@ -15,6 +16,7 @@ export const DIALOGS = {
   EDITOR_IMAGE: 'EDITOR_IMAGE',
   EDITOR_TEXT: 'EDITOR_TEXT',
   EDITOR_VIDEO: 'EDITOR_VIDEO',
+  EDITOR_AUDIO: 'EDITOR_AUDIO',
   LOGIN: 'LOGIN',
 };
 
@@ -22,6 +24,7 @@ export const DIALOG_CONTENT = {
   [DIALOGS.EDITOR_IMAGE]: EditorDialogImage,
   [DIALOGS.EDITOR_TEXT]: EditorDialogText,
   [DIALOGS.EDITOR_VIDEO]: EditorDialogVideo,
+  [DIALOGS.EDITOR_AUDIO]: EditorDialogAudio,
   [DIALOGS.LOGIN]: LoginDialog,
 };
 
@@ -29,6 +32,7 @@ export const NODE_EDITOR_DIALOGS = {
   [NODE_TYPES.IMAGE]: DIALOGS.EDITOR_IMAGE,
   [NODE_TYPES.TEXT]: DIALOGS.EDITOR_TEXT,
   [NODE_TYPES.VIDEO]: DIALOGS.EDITOR_VIDEO,
+  [NODE_TYPES.AUDIO]: DIALOGS.EDITOR_AUDIO,
 };
 
 export interface IDialogProps {

src/redux/node/constants.ts

@@ -6,8 +6,9 @@ import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { TextEditor } from '~/components/editors/TextEditor';
 import { VideoEditor } from '~/components/editors/VideoEditor';
-import { UPLOAD_TYPES } from '../uploads/constants';
+import { AudioEditor } from '~/components/editors/AudioEditor';
 import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadButton';
+import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadButton';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -88,10 +89,12 @@ export const NODE_EDITORS = {
   [NODE_TYPES.IMAGE]: ImageEditor,
   [NODE_TYPES.TEXT]: TextEditor,
   [NODE_TYPES.VIDEO]: VideoEditor,
+  [NODE_TYPES.AUDIO]: AudioEditor,
 };
 
 export const NODE_PANEL_COMPONENTS = {
   [NODE_TYPES.IMAGE]: [EditorImageUploadButton],
+  [NODE_TYPES.AUDIO]: [EditorAudioUploadButton, EditorImageUploadButton],
 };
 
 export const NODE_EDITOR_DATA: Record<

src/sprites/Sprites.tsx

@@ -108,9 +108,12 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
     </g>
+
+    <g id="audio" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z" />
+    </g>
   </svg>
 );
 
 export { Sprites };
-
-// <path d="M0 0H8V8H-8V-8Z" fillRule="evenodd" />