diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx index 9fea3d83..a6811192 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/node/CommentForm/index.tsx @@ -5,17 +5,21 @@ import * as styles from './styles.scss'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; import assocPath from 'ramda/es/assocPath'; -import { InputHandler, INode } from '~/redux/types'; +import { InputHandler, IFileWithUUID } from '~/redux/types'; import { connect } from 'react-redux'; import * as NODE_ACTIONS from '~/redux/node/actions'; import { selectNode } from '~/redux/node/selectors'; import { LoaderCircle } from '~/components/input/LoaderCircle'; import { Group } from '~/components/containers/Group'; +import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants'; +import uuid from 'uuid4'; +import * as UPLOAD_ACTIONS from '~/redux/uploads/actions'; const mapStateToProps = selectNode; const mapDispatchToProps = { nodePostComment: NODE_ACTIONS.nodePostComment, nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData, + uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles, }; type IProps = ReturnType & @@ -24,13 +28,40 @@ type IProps = ReturnType & }; const CommentFormUnconnected: FC = ({ - nodePostComment, - nodeSetCommentData, comment_data, is_sending_comment, id, + nodePostComment, + nodeSetCommentData, + uploadUploadFiles, }) => { // const [data, setData] = useState({ ...EMPTY_COMMENT }); + const onInputChange = useCallback( + event => { + event.preventDefault(); + + if (!event.target.files || !event.target.files.length) return; + + const items: IFileWithUUID[] = Array.from(event.target.files).map( + (file: File): IFileWithUUID => ({ + file, + temp_id: uuid(), + subject: UPLOAD_SUBJECTS.COMMENT, + target: UPLOAD_TARGETS.COMMENTS, + type: UPLOAD_TYPES.IMAGE, + }) + ); + + const temps = items.map(file => file.temp_id); + + nodeSetCommentData( + id, + assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id]) + ); + uploadUploadFiles(items); + }, + [uploadUploadFiles, comment_data, id, nodeSetCommentData] + ); const onInput = useCallback( text => { @@ -69,6 +100,8 @@ const CommentFormUnconnected: FC = ({ + + {is_sending_comment && } diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index cf8eaf6d..c9332066 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -1,6 +1,4 @@ -import React, { - FC, useState, useCallback, useEffect, FormEvent, -} from 'react'; +import React, { FC, useState, useCallback, useEffect, FormEvent } from 'react'; import { connect } from 'react-redux'; import assocPath from 'ramda/es/assocPath'; import append from 'ramda/es/append'; @@ -23,7 +21,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions'; import { selectUploads } from '~/redux/uploads/selectors'; import { UPLOAD_TARGETS, UPLOAD_TYPES, UPLOAD_SUBJECTS } from '~/redux/uploads/constants'; -const mapStateToProps = (state) => { +const mapStateToProps = state => { const { editor } = selectNode(state); const { statuses, files } = selectUploads(state); @@ -50,6 +48,26 @@ const EditorDialogUnconnected: FC = ({ const eventPreventer = useCallback(event => event.preventDefault(), []); const [temp, setTemp] = useState([]); + 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, + }) + ); + + const temps = items.map(file => file.temp_id); + + setTemp([...temp, ...temps]); + uploadUploadFiles(items); + }, + [setTemp, uploadUploadFiles, temp] + ); + const onFileMove = useCallback( (old_index: number, new_index: number) => { setData(assocPath(['files'], moveArrItem(old_index, new_index, data.files), data)); @@ -68,48 +86,23 @@ const EditorDialogUnconnected: FC = ({ (event: React.DragEvent) => { event.preventDefault(); - if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return; + if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) + return; - const items: IFileWithUUID[] = Array.from(event.dataTransfer.files).map( - (file: File): IFileWithUUID => ({ - file, - temp_id: uuid(), - subject: UPLOAD_SUBJECTS.EDITOR, - target: UPLOAD_TARGETS.NODES, - type: UPLOAD_TYPES.IMAGE, - }) - ); - - const temps = items.map(file => file.temp_id); - - setTemp([...temp, ...temps]); - uploadUploadFiles(items); + onUpload(Array.from(event.dataTransfer.files)); }, - [uploadUploadFiles, temp] + [onUpload] ); const onInputChange = useCallback( - (event) => { + event => { event.preventDefault(); if (!event.target.files || !event.target.files.length) return; - const items: IFileWithUUID[] = Array.from(event.target.files).map( - (file: File): IFileWithUUID => ({ - file, - temp_id: uuid(), - subject: UPLOAD_SUBJECTS.EDITOR, - target: UPLOAD_TARGETS.NODES, - type: UPLOAD_TYPES.IMAGE, - }) - ); - - const temps = items.map(file => file.temp_id); - - setTemp([...temp, ...temps]); - uploadUploadFiles(items); + onUpload(Array.from(event.target.files)); }, - [uploadUploadFiles, temp] + [onUpload] ); useEffect(() => { @@ -122,9 +115,6 @@ const EditorDialogUnconnected: FC = ({ }; }, [eventPreventer]); - // useEffect(() => console.log({ temp }), [temp]); - // useEffect(() => console.log({ data }), [data]); - useEffect(() => { Object.entries(statuses).forEach(([id, status]) => { if (temp.includes(id) && !!status.uuid && files[status.uuid]) { @@ -135,17 +125,19 @@ const EditorDialogUnconnected: FC = ({ }, [statuses, files, temp, onFileAdd]); const setTitle = useCallback( - (title) => { + title => { setData({ ...data, title }); }, [setData, data] ); - const onSubmit = useCallback((event: FormEvent) => { - event.preventDefault(); - nodeSave(data); - console.log({ data }); - }, [data, nodeSave]); + const onSubmit = useCallback( + (event: FormEvent) => { + event.preventDefault(); + nodeSave(data); + }, + [data, nodeSave] + ); const buttons = ( diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 2eef245f..5ca22612 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -62,6 +62,7 @@ export const NODE_COMPONENTS: INodeComponents = { export const EMPTY_COMMENT: IComment = { text: '', files: [], + temp_ids: [], is_private: false, user: null, }; diff --git a/src/redux/types.ts b/src/redux/types.ts index b3d6eaa1..792c839f 100644 --- a/src/redux/types.ts +++ b/src/redux/types.ts @@ -116,6 +116,7 @@ export interface INode { export interface IComment { text: string; + temp_ids?: string[]; files: IFile[]; is_private: boolean; user: IUser;