From b871cc20429d13941b4ce219a7297a6e759da847 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 26 Mar 2021 17:52:24 +0700 Subject: [PATCH] #58 using formik at node submit form --- src/components/editors/AudioEditor/index.tsx | 55 +++---- .../editors/EditorActionsPanel/index.tsx | 23 +++ .../styles.module.scss | 0 .../editors/EditorAudioUploadButton/index.tsx | 12 +- .../editors/EditorButtons/index.tsx | 35 ++++ .../editors/EditorImageUploadButton/index.tsx | 12 +- src/components/editors/EditorPanel/index.tsx | 29 ---- .../editors/EditorPublicSwitch/index.tsx | 18 ++- .../editors/EditorUploadButton/index.tsx | 112 ++----------- .../editors/EditorUploadCoverButton/index.tsx | 94 ++++------- src/components/editors/ImageEditor/index.tsx | 21 +-- .../editors/SortableImageGrid/index.tsx | 10 +- src/components/editors/TextEditor/index.tsx | 14 +- src/components/editors/VideoEditor/index.tsx | 14 +- src/containers/dialogs/EditorDialog/index.tsx | 151 ++++-------------- src/redux/node/types.ts | 14 +- src/utils/hooks/useNodeFormFormik.ts | 39 +++++ 17 files changed, 230 insertions(+), 423 deletions(-) create mode 100644 src/components/editors/EditorActionsPanel/index.tsx rename src/components/editors/{EditorPanel => EditorActionsPanel}/styles.module.scss (100%) create mode 100644 src/components/editors/EditorButtons/index.tsx delete mode 100644 src/components/editors/EditorPanel/index.tsx create mode 100644 src/utils/hooks/useNodeFormFormik.ts diff --git a/src/components/editors/AudioEditor/index.tsx b/src/components/editors/AudioEditor/index.tsx index 2ac1119a..4eab9548 100644 --- a/src/components/editors/AudioEditor/index.tsx +++ b/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 mapDispatchToProps & NodeEditorProps; +const AudioEditor: FC = () => { + const { values } = useNodeFormContext(); + const { pending, setFiles } = useFileUploaderContext()!; -const AudioEditorUnconnected: FC = ({ 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 (
- - + +
); }; -const AudioEditor = connect(mapStateToProps, mapDispatchToProps)(AudioEditorUnconnected); - export { AudioEditor }; diff --git a/src/components/editors/EditorActionsPanel/index.tsx b/src/components/editors/EditorActionsPanel/index.tsx new file mode 100644 index 00000000..7f550f92 --- /dev/null +++ b/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 ( +
+ {NODE_PANEL_COMPONENTS[values.type] && + NODE_PANEL_COMPONENTS[values.type].map((el, key) => createElement(el, { key }))} +
+ ); +}; + +export { EditorActionsPanel }; diff --git a/src/components/editors/EditorPanel/styles.module.scss b/src/components/editors/EditorActionsPanel/styles.module.scss similarity index 100% rename from src/components/editors/EditorPanel/styles.module.scss rename to src/components/editors/EditorActionsPanel/styles.module.scss diff --git a/src/components/editors/EditorAudioUploadButton/index.tsx b/src/components/editors/EditorAudioUploadButton/index.tsx index 477bd2d9..afc73141 100644 --- a/src/components/editors/EditorAudioUploadButton/index.tsx +++ b/src/components/editors/EditorAudioUploadButton/index.tsx @@ -5,16 +5,8 @@ import { IEditorComponentProps } from '~/redux/node/types'; type IProps = IEditorComponentProps & {}; -const EditorAudioUploadButton: FC = ({ data, setData, temp, setTemp }) => ( - +const EditorAudioUploadButton: FC = () => ( + ); export { EditorAudioUploadButton }; diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx new file mode 100644 index 00000000..19dcb461 --- /dev/null +++ b/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 ( + + + + + + +