From 97958a358be33c2b1ea13558bec550e6da373f80 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 29 Mar 2021 09:27:49 +0700
Subject: [PATCH] #58 fixed upload buttons

---
 src/components/editors/EditorUploadButton/index.tsx  | 12 ++++++------
 .../editors/EditorUploadButton/styles.module.scss    | 10 +---------
 src/containers/dialogs/EditorDialog/index.tsx        |  9 ++++++---
 src/redux/node/selectors.ts                          |  1 +
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx
index abba2f47..19ca1b96 100644
--- a/src/components/editors/EditorUploadButton/index.tsx
+++ b/src/components/editors/EditorUploadButton/index.tsx
@@ -5,6 +5,8 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
 import { getFileType } from '~/utils/uploader';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { Button } from '~/components/input/Button';
 
 type IProps = IEditorComponentProps & {
   accept?: string;
@@ -18,6 +20,7 @@ const EditorUploadButton: FC<IProps> = ({
   type = UPLOAD_TYPES.IMAGE,
 }) => {
   const { uploadFiles } = useFileUploaderContext()!;
+  const { values } = useNodeFormContext();
 
   const onInputChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -33,13 +36,10 @@ const EditorUploadButton: FC<IProps> = ({
   );
 
   return (
-    <div className={styles.wrap}>
+    <Button type="button" round size="giant" className={styles.wrap}>
+      <Icon icon={icon} size={24} />
       <input type="file" onChange={onInputChange} accept={accept} multiple />
-
-      <div className={styles.icon}>
-        <Icon size={32} icon={icon} />
-      </div>
-    </div>
+    </Button>
   );
 };
 
diff --git a/src/components/editors/EditorUploadButton/styles.module.scss b/src/components/editors/EditorUploadButton/styles.module.scss
index 3347fd46..928026f7 100644
--- a/src/components/editors/EditorUploadButton/styles.module.scss
+++ b/src/components/editors/EditorUploadButton/styles.module.scss
@@ -1,15 +1,7 @@
 @import "src/styles/variables";
 
 .wrap {
-  @include outer_shadow();
-  @include editor_round_button();
-
-  transition: opacity 0.5s;
-  background: $red_gradient;
-
-  &:hover {
-    opacity: 1;
-  }
+  position: relative;
 
   input {
     width: 100%;
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 8e0340e3..bf01d869 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -2,23 +2,26 @@ import React, { createElement, FC, useMemo } from 'react';
 import { IDialogProps } from '~/redux/modal/constants';
 import { useCloseOnEscape } from '~/utils/hooks';
 import styles from './styles.module.scss';
-import { EMPTY_NODE, NODE_EDITORS } from '~/redux/node/constants';
+import { NODE_EDITORS } from '~/redux/node/constants';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
-import { has, prop } from 'ramda';
+import { prop } from 'ramda';
 import { useNodeFormFormik } from '~/utils/hooks/useNodeFormFormik';
 import { EditorButtons } from '~/components/editors/EditorButtons';
 import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { FormikProvider } from 'formik';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectNodeEditor } from '~/redux/node/selectors';
 
 interface Props extends IDialogProps {
   type: string;
 }
 
 const EditorDialog: FC<Props> = ({ type, onRequestClose }) => {
+  const editor = useShallowSelect(selectNodeEditor);
   const uploader = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, []);
-  const formik = useNodeFormFormik({ ...EMPTY_NODE, type }, uploader, onRequestClose);
+  const formik = useNodeFormFormik({ ...editor, type }, uploader, onRequestClose);
   const { values, handleSubmit } = formik;
 
   useCloseOnEscape(onRequestClose);
diff --git a/src/redux/node/selectors.ts b/src/redux/node/selectors.ts
index 7ff85a58..634b2583 100644
--- a/src/redux/node/selectors.ts
+++ b/src/redux/node/selectors.ts
@@ -3,3 +3,4 @@ import { IState } from '../store';
 export const selectNode = (state: IState) => state.node;
 export const selectNodeComments = (state: IState) => state.node.comments;
 export const selectNodeCurrent = (state: IState) => state.node.current;
+export const selectNodeEditor = (state: IState) => state.node.editor;