#58 using formik at node submit form

src/components/editors/AudioEditor/index.tsx

@@ -10,55 +10,36 @@ import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
 import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
 
-const mapStateToProps = selectUploads;
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
+type IProps = NodeEditorProps;
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & NodeEditorProps;
+const AudioEditor: FC<IProps> = () => {
+  const { values } = useNodeFormContext();
+  const { pending, setFiles } = useFileUploaderContext()!;
 
-const AudioEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
-  const images = useNodeImages(data);
+  const images = useNodeImages(values);
+  const audios = useNodeAudios(values);
 
-  const pending_images = useMemo(
-    () =>
-      temp
-        .filter(id => !!statuses[id] && statuses[id].type === UPLOAD_TYPES.IMAGE)
-        .map(id => statuses[id]),
-    [temp, statuses]
-  );
-
-  const audios = useNodeAudios(data);
-
-  const pending_audios = useMemo(
-    () =>
-      temp
-        .filter(id => !!statuses[id] && statuses[id].type === UPLOAD_TYPES.AUDIO)
-        .map(id => statuses[id]),
-    [temp, statuses]
-  );
-
-  const setImages = useCallback(files => setData({ ...data, files: [...files, ...audios] }), [
-    setData,
-    data,
-    audios,
+  const pendingImages = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.IMAGE), [
+    pending,
   ]);
 
-  const setAudios = useCallback(files => setData({ ...data, files: [...files, ...images] }), [
-    setData,
-    data,
-    images,
+  const pendingAudios = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.AUDIO), [
+    pending,
   ]);
 
+  const setImages = useCallback(values => setFiles([...values, ...audios]), [setFiles, audios]);
+
+  const setAudios = useCallback(values => setFiles([...values, ...images]), [setFiles, images]);
+
   return (
     <div className={styles.wrap}>
-      <ImageGrid files={images} setFiles={setImages} locked={pending_images} />
-      <AudioGrid files={audios} setFiles={setAudios} locked={pending_audios} />
+      <ImageGrid files={images} setFiles={setImages} locked={pendingImages} />
+      <AudioGrid files={audios} setFiles={setAudios} locked={pendingAudios} />
     </div>
   );
 };
 
-const AudioEditor = connect(mapStateToProps, mapDispatchToProps)(AudioEditorUnconnected);
-
 export { AudioEditor };

src/components/editors/EditorActionsPanel/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC, createElement } from 'react';
+import styles from './styles.module.scss';
+import { INode } from '~/redux/types';
+import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
+import { has } from 'ramda';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+
+const EditorActionsPanel: FC = () => {
+  const { values } = useNodeFormContext();
+
+  if (!values.type || !has(values.type, NODE_PANEL_COMPONENTS)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.panel}>
+      {NODE_PANEL_COMPONENTS[values.type] &&
+        NODE_PANEL_COMPONENTS[values.type].map((el, key) => createElement(el, { key }))}
+    </div>
+  );
+};
+
+export { EditorActionsPanel };

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -5,16 +5,8 @@ import { IEditorComponentProps } from '~/redux/node/types';
 
 type IProps = IEditorComponentProps & {};
 
-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}
-  />
+const EditorAudioUploadButton: FC<IProps> = () => (
+  <EditorUploadButton accept="audio/*" icon="audio" type={UPLOAD_TYPES.AUDIO} />
 );
 
 export { EditorAudioUploadButton };

src/components/editors/EditorButtons/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { EditorActionsPanel } from '~/components/editors/EditorActionsPanel';
+import { Group } from '~/components/containers/Group';
+import { InputText } from '~/components/input/InputText';
+import { Button } from '~/components/input/Button';
+import { Padder } from '~/components/containers/Padder';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+
+const EditorButtons: FC = () => {
+  const { values, handleChange } = useNodeFormContext();
+
+  return (
+    <Padder style={{ position: 'relative' }}>
+      <EditorActionsPanel />
+
+      <Group horizontal>
+        <InputText
+          title="Название"
+          value={values.title}
+          handler={handleChange('title')}
+          autoFocus
+          maxLength={256}
+        />
+
+        <Button
+          title="Сохранить"
+          iconRight="check"
+          color={values.is_promoted ? 'primary' : 'lab'}
+        />
+      </Group>
+    </Padder>
+  );
+};
+
+export { EditorButtons };

src/components/editors/EditorImageUploadButton/index.tsx

@@ -5,16 +5,8 @@ import { IEditorComponentProps } from '~/redux/node/types';
 
 type IProps = IEditorComponentProps & {};
 
-const EditorImageUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) => (
-  <EditorUploadButton
-    data={data}
-    setData={setData}
-    temp={temp}
-    setTemp={setTemp}
-    accept="image/*"
-    icon="image"
-    type={UPLOAD_TYPES.IMAGE}
-  />
+const EditorImageUploadButton: FC<IProps> = () => (
+  <EditorUploadButton accept="image/*" icon="image" type={UPLOAD_TYPES.IMAGE} />
 );
 
 export { EditorImageUploadButton };

src/components/editors/EditorPanel/index.tsx

@@ -1,29 +0,0 @@
-import React, { FC, createElement } from 'react';
-import styles from './styles.module.scss';
-import { INode } from '~/redux/types';
-import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
-import { has } from 'ramda';
-
-interface IProps {
-  data: INode;
-  setData: (val: INode) => void;
-  temp: string[];
-  setTemp: (val: string[]) => void;
-}
-
-const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => {
-  if (!data.type || !has(data.type, NODE_PANEL_COMPONENTS)) {
-    return null;
-  }
-
-  return (
-    <div className={styles.panel}>
-      {NODE_PANEL_COMPONENTS[data.type] &&
-        NODE_PANEL_COMPONENTS[data.type].map((el, key) =>
-          createElement(el, { key, data, setData, temp, setTemp })
-        )}
-    </div>
-  );
-};
-
-export { EditorPanel };

src/components/editors/EditorPublicSwitch/index.tsx

@@ -3,23 +3,25 @@ import { IEditorComponentProps } from '~/redux/node/types';
 import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
-import { Superpower } from '~/components/boris/Superpower';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
 
 interface IProps extends IEditorComponentProps {}
 
-const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
-  const onChange = useCallback(() => setData({ ...data, is_promoted: !data.is_promoted }), [
-    data,
-    setData,
+const EditorPublicSwitch: FC<IProps> = () => {
+  const { values, setFieldValue } = useNodeFormContext();
+
+  const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
+    values.is_promoted,
+    setFieldValue,
   ]);
 
   return (
     <Button
-      color={data.is_promoted ? 'primary' : 'lab'}
+      color={values.is_promoted ? 'primary' : 'lab'}
       type="button"
       size="giant"
       label={
-        data.is_promoted
+        values.is_promoted
           ? 'Доступно всем на главной странице'
           : 'Видно только сотрудникам в лаборатории'
       }
@@ -27,7 +29,7 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
       className={styles.button}
       round
     >
-      {data.is_promoted ? (
+      {values.is_promoted ? (
         <Icon icon="waves" size={24} />
       ) : (
         <div className={styles.lab_wrapper}>

src/components/editors/EditorUploadButton/index.tsx

@@ -1,110 +1,35 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { ChangeEvent, FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { IFile, IFileWithUUID } from '~/redux/types';
-import uuid from 'uuid4';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { append, assocPath } from 'ramda';
-import { selectUploads } from '~/redux/uploads/selectors';
-import { connect } from 'react-redux';
-import { NODE_SETTINGS } from '~/redux/node/constants';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { IEditorComponentProps } from '~/redux/node/types';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
+import { getFileType } from '~/utils/uploader';
 
-const mapStateToProps = state => {
-  const { statuses, files } = selectUploads(state);
-
-  return { statuses, files };
+type IProps = IEditorComponentProps & {
+  accept?: string;
+  icon?: string;
+  type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
 };
 
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & IEditorComponentProps & {
-    accept?: string;
-    icon?: string;
-    type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
-  };
-
-const EditorUploadButtonUnconnected: FC<IProps> = ({
-  data,
-  setData,
-  temp,
-  setTemp,
-  statuses,
-  files,
-  uploadUploadFiles,
+const EditorUploadButton: FC<IProps> = ({
   accept = 'image/*',
   icon = 'plus',
   type = UPLOAD_TYPES.IMAGE,
 }) => {
-  const eventPreventer = useCallback(event => event.preventDefault(), []);
-
-  const onUpload = useCallback(
-    (uploads: File[]) => {
-      const current = temp.length + data.files.length;
-      const limit = NODE_SETTINGS.MAX_FILES - current;
-
-      if (current >= NODE_SETTINGS.MAX_FILES) return;
-
-      const items: IFileWithUUID[] = Array.from(uploads).map(
-        (file: File): IFileWithUUID => ({
-          file,
-          temp_id: uuid(),
-          subject: UPLOAD_SUBJECTS.EDITOR,
-          target: UPLOAD_TARGETS.NODES,
-          type,
-        })
-      );
-
-      const temps = items
-        .filter(file => file?.temp_id)
-        .map(file => file.temp_id!)
-        .slice(0, limit);
-
-      setTemp([...temp, ...temps]);
-      uploadUploadFiles(items);
-    },
-    [setTemp, uploadUploadFiles, temp, data, type]
-  );
-
-  const onFileAdd = useCallback(
-    (file: IFile) => {
-      setData(assocPath(['files'], append(file, data.files), data));
-    },
-    [data, setData]
-  );
-
-  useEffect(() => {
-    window.addEventListener('dragover', eventPreventer, false);
-    window.addEventListener('drop', eventPreventer, false);
-
-    return () => {
-      window.removeEventListener('dragover', eventPreventer, false);
-      window.removeEventListener('drop', eventPreventer, false);
-    };
-  }, [eventPreventer]);
-
-  useEffect(() => {
-    Object.entries(statuses).forEach(([id, status]) => {
-      if (temp.includes(id) && !!status.uuid && files[status.uuid]) {
-        onFileAdd(files[status.uuid]);
-        setTemp(temp.filter(el => el !== id));
-      }
-    });
-  }, [statuses, files, temp, onFileAdd]);
+  const { uploadFiles } = useFileUploaderContext()!;
 
   const onInputChange = useCallback(
-    event => {
+    (event: ChangeEvent<HTMLInputElement>) => {
       event.preventDefault();
 
-      if (!event.target.files || !event.target.files.length) return;
+      const files = Array.from(event.target.files || []).filter(
+        file => !type || getFileType(file) === type
+      );
 
-      onUpload(Array.from(event.target.files));
+      uploadFiles(files);
     },
-    [onUpload]
+    [uploadFiles]
   );
 
   return (
@@ -118,9 +43,4 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
   );
 };
 
-const EditorUploadButton = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EditorUploadButtonUnconnected);
-
 export { EditorUploadButton };

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
 import { IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
 import styles from './styles.module.scss';
@@ -11,74 +11,41 @@ import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 import { PRESETS } from '~/constants/urls';
 import { IEditorComponentProps } from '~/redux/node/types';
+import { useFileUploader, useFileUploaderContext } from '~/utils/hooks/fileUploader';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
+import { getFileType } from '~/utils/uploader';
 
-const mapStateToProps = state => {
-  const { statuses, files } = selectUploads(state);
+type IProps = IEditorComponentProps & {};
 
-  return { statuses, files };
-};
+const EditorUploadCoverButton: FC<IProps> = ({}) => {
+  const { values, setFieldValue } = useNodeFormContext();
+  const { uploadFiles, files } = useFileUploader(UPLOAD_SUBJECTS.EDITOR, UPLOAD_TARGETS.NODES, []);
 
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
+  const background = values.cover ? getURL(values.cover, PRESETS['300']) : null;
+  const preview = status && path(['preview'], status);
 
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  IEditorComponentProps & {};
-
-const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
-  data,
-  setData,
-  files,
-  statuses,
-  uploadUploadFiles,
-}) => {
-  const [coverTemp, setCoverTemp] = useState<string>('');
-
-  useEffect(() => {
-    Object.entries(statuses).forEach(([id, status]) => {
-      if (coverTemp === id && !!status.uuid && files[status.uuid]) {
-        setData({ ...data, cover: files[status.uuid] });
-        setCoverTemp('');
-      }
-    });
-  }, [statuses, files, coverTemp, setData, data]);
-
-  const onUpload = useCallback(
-    (uploads: File[]) => {
-      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,
-        })
-      );
-
-      setCoverTemp(path([0, 'temp_id'], items) || '');
-      uploadUploadFiles(items);
-    },
-    [uploadUploadFiles, setCoverTemp]
-  );
+  const onDropCover = useCallback(() => {
+    setFieldValue('cover', null);
+  }, [setFieldValue]);
 
   const onInputChange = useCallback(
-    event => {
-      event.preventDefault();
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || [])
+        .filter(file => getFileType(file) === UPLOAD_TYPES.IMAGE)
+        .slice(0, 1);
 
-      if (!event.target.files || !event.target.files.length) return;
-
-      onUpload(Array.from(event.target.files));
+      uploadFiles(files);
     },
-    [onUpload]
+    [uploadFiles]
   );
-  const onDropCover = useCallback(() => {
-    setData({ ...data, cover: undefined });
-  }, [setData, data]);
 
-  const background = data.cover ? getURL(data.cover, PRESETS['300']) : null;
-  const status = coverTemp && path([coverTemp], statuses);
-  const preview = status && path(['preview'], status);
+  useEffect(() => {
+    if (!files.length) {
+      return;
+    }
+
+    setFieldValue('cover', files[files.length - 1]);
+  }, [files, setFieldValue]);
 
   return (
     <div className={styles.wrap}>
@@ -87,11 +54,11 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
         style={{ backgroundImage: `url("${preview || background}")` }}
       >
         <div className={styles.input}>
-          {!data.cover && <span>ОБЛОЖКА</span>}
+          {!values.cover && <span>ОБЛОЖКА</span>}
           <input type="file" accept="image/*" onChange={onInputChange} />
         </div>
 
-        {data.cover && (
+        {values.cover && (
           <div className={styles.button} onClick={onDropCover}>
             <Icon icon="close" />
           </div>
@@ -101,9 +68,4 @@ const EditorUploadCoverButtonUnconnected: FC<IProps> = ({
   );
 };
 
-const EditorUploadCoverButton = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EditorUploadCoverButtonUnconnected);
-
 export { EditorUploadCoverButton };

src/components/editors/ImageEditor/index.tsx

@@ -6,29 +6,18 @@ import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import styles from './styles.module.scss';
 import { NodeEditorProps } from '~/redux/node/types';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
 
-const mapStateToProps = selectUploads;
-const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
+type IProps = NodeEditorProps;
 
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & NodeEditorProps;
-
-const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
-  const pending_files = useMemo(() => temp.filter(id => !!statuses[id]).map(id => statuses[id]), [
-    temp,
-    statuses,
-  ]);
-
-  const setFiles = useCallback((files: IFile[]) => setData({ ...data, files }), [data, setData]);
+const ImageEditor: FC<IProps> = () => {
+  const { pending, files, setFiles } = useFileUploaderContext()!;
 
   return (
     <div className={styles.wrap}>
-      <ImageGrid files={data.files} setFiles={setFiles} locked={pending_files} />
+      <ImageGrid files={files} setFiles={setFiles} locked={pending} />
     </div>
   );
 };
 
-const ImageEditor = connect(mapStateToProps, mapDispatchToProps)(ImageEditorUnconnected);
-
 export { ImageEditor };

src/components/editors/SortableImageGrid/index.tsx

@@ -7,27 +7,25 @@ import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import classNames from 'classnames';
 
 const SortableImageGrid = SortableContainer(
   ({
     items,
     locked,
     onDelete,
-    size = 200,
+    className,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
     onDelete: (file_id: IFile['id']) => void;
     size?: number;
+    className?: string;
   }) => {
     const preventEvent = useCallback(event => event.preventDefault(), []);
 
     return (
-      <div
-        className={styles.grid}
-        style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
-        onDropCapture={preventEvent}
-      >
+      <div className={classNames(styles.grid, className)} onDropCapture={preventEvent}>
         {items
           .filter(file => file && file.id)
           .map((file, index) => (

src/components/editors/TextEditor/index.tsx

@@ -4,16 +4,18 @@ import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { path } from 'ramda';
 import { NodeEditorProps } from '~/redux/node/types';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 
-const TextEditor: FC<IProps> = ({ data, setData }) => {
-  const setText = useCallback(
-    (text: string) => setData({ ...data, blocks: [{ type: 'text', text }] }),
-    [data, setData]
-  );
+const TextEditor: FC<IProps> = () => {
+  const { values, setFieldValue } = useNodeFormContext();
 
-  const text = (path(['blocks', 0, 'text'], data) as string) || '';
+  const setText = useCallback((text: string) => setFieldValue('blocks', [{ type: 'text', text }]), [
+    setFieldValue,
+  ]);
+
+  const text = (path(['blocks', 0, 'text'], values) as string) || '';
 
   return (
     <div className={styles.wrap}>

src/components/editors/VideoEditor/index.tsx

@@ -6,16 +6,18 @@ import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
 import { getYoutubeThumb } from '~/utils/dom';
 import { NodeEditorProps } from '~/redux/node/types';
+import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik';
 
 type IProps = NodeEditorProps & {};
 
-const VideoEditor: FC<IProps> = ({ data, setData }) => {
-  const setUrl = useCallback(
-    (url: string) => setData({ ...data, blocks: [{ type: 'video', url }] }),
-    [data, setData]
-  );
+const VideoEditor: FC<IProps> = () => {
+  const { values, setFieldValue } = useNodeFormContext();
 
-  const url = (path(['blocks', 0, 'url'], data) as string) || '';
+  const setUrl = useCallback((url: string) => setFieldValue('blocks', [{ type: 'video', url }]), [
+    setFieldValue,
+  ]);
+
+  const url = (path(['blocks', 0, 'url'], values) as string) || '';
   const preview = useMemo(() => getYoutubeThumb(url), [url]);
   const backgroundImage = (preview && `url("${preview}")`) || '';