#58 fixed upload buttons

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>
   );
 };
 

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%;

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);

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;