muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

#58 using formik at node submit form

Browse source
This commit is contained in:
Fedor Katurov 2021-03-26 17:52:24 +07:00
parent 4b542e0291
commit b871cc2042
17 changed files with 230 additions and 423 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/editors/AudioEditor/index.tsx
View file

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