mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
file uploading at comments (not working yet)
This commit is contained in:
Fedor Katurov
parent
afbec84f7c
commit
287b3efed2
4 changed files with 94 additions and 45 deletions
61
package-lock.json
generated
61
package-lock.json
generated
|
|
@ -8259,8 +8259,7 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -8281,16 +8280,14 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"balanced-match": "1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
|
|
@ -8303,20 +8300,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -8330,7 +8324,7 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
"ms": "2.1.1"
|
||||
}
|
||||
},
|
||||
"deep-extend": {
|
||||
|
|
@ -8408,7 +8402,7 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
"safer-buffer": "2.1.2"
|
||||
}
|
||||
},
|
||||
"ignore-walk": {
|
||||
|
|
@ -8417,7 +8411,7 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimatch": "^3.0.4"
|
||||
"minimatch": "3.0.4"
|
||||
}
|
||||
},
|
||||
"inflight": {
|
||||
|
|
@ -8433,8 +8427,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -8446,9 +8439,8 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
"number-is-nan": "1.0.1"
|
||||
}
|
||||
},
|
||||
"isarray": {
|
||||
|
|
@ -8461,16 +8453,14 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
"brace-expansion": "1.1.11"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
|
|
@ -8494,7 +8484,6 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -8547,8 +8536,8 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"abbrev": "1",
|
||||
"osenv": "^0.1.4"
|
||||
"abbrev": "1.1.1",
|
||||
"osenv": "0.1.5"
|
||||
}
|
||||
},
|
||||
"npm-bundled": {
|
||||
|
|
@ -8563,8 +8552,8 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ignore-walk": "^3.0.1",
|
||||
"npm-bundled": "^1.0.1"
|
||||
"ignore-walk": "3.0.1",
|
||||
"npm-bundled": "1.0.6"
|
||||
}
|
||||
},
|
||||
"npmlog": {
|
||||
|
|
@ -8582,8 +8571,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -8617,8 +8605,8 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"os-homedir": "^1.0.0",
|
||||
"os-tmpdir": "^1.0.0"
|
||||
"os-homedir": "1.0.2",
|
||||
"os-tmpdir": "1.0.2"
|
||||
}
|
||||
},
|
||||
"path-is-absolute": {
|
||||
|
|
@ -8680,8 +8668,7 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -14056,9 +14043,9 @@
|
|||
}
|
||||
},
|
||||
"react-sortable-hoc": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz",
|
||||
"integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==",
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.10.1.tgz",
|
||||
"integrity": "sha512-eVyv5rrK6qY9bG60bboRY78In7OpdRRg+hxp4QMLIjC/UJaFSU7exTYd0764GtXvBqh+b+faYGzren5/ffRYKw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.3.4",
|
||||
"invariant": "2.2.4",
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scrollbar": "^0.5.4",
|
||||
"react-sortable-hoc": "^1.9.1",
|
||||
"react-sortable-hoc": "^1.10.1",
|
||||
"react-stack-grid": "^0.7.1",
|
||||
"redux": "^4.0.1",
|
||||
"redux-persist": "^5.10.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC, useCallback, KeyboardEventHandler } from 'react';
|
||||
import React, { FC, useCallback, KeyboardEventHandler, useEffect } from 'react';
|
||||
import { Textarea } from '~/components/input/Textarea';
|
||||
import { CommentWrapper } from '~/components/containers/CommentWrapper';
|
||||
import * as styles from './styles.scss';
|
||||
|
|
@ -14,8 +14,14 @@ 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';
|
||||
import { selectUploads } from '~/redux/uploads/selectors';
|
||||
import { IState } from '~/redux/store';
|
||||
|
||||
const mapStateToProps = (state: IState) => ({
|
||||
node: selectNode(state),
|
||||
uploads: selectUploads(state),
|
||||
});
|
||||
|
||||
const mapStateToProps = selectNode;
|
||||
const mapDispatchToProps = {
|
||||
nodePostComment: NODE_ACTIONS.nodePostComment,
|
||||
nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
|
||||
|
|
@ -28,8 +34,8 @@ type IProps = ReturnType<typeof mapStateToProps> &
|
|||
};
|
||||
|
||||
const CommentFormUnconnected: FC<IProps> = ({
|
||||
comment_data,
|
||||
is_sending_comment,
|
||||
node: { comment_data, is_sending_comment },
|
||||
uploads: { statuses, files },
|
||||
id,
|
||||
nodePostComment,
|
||||
nodeSetCommentData,
|
||||
|
|
@ -85,6 +91,49 @@ const CommentFormUnconnected: FC<IProps> = ({
|
|||
[onSubmit]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || [];
|
||||
const added_files = temp_ids
|
||||
.map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
|
||||
.map(el => !!el && files[el])
|
||||
.filter(el => !!el && !comment_data[id].files.some(file => file.id === el.id));
|
||||
|
||||
const filtered_temps = temp_ids.filter(
|
||||
temp_id =>
|
||||
statuses[temp_id] &&
|
||||
statuses[temp_id].uuid &&
|
||||
!added_files.some(file => file.id === statuses[temp_id].uuid)
|
||||
);
|
||||
|
||||
console.log({ temp_ids, added_files });
|
||||
|
||||
// if (added_files.length) {
|
||||
nodeSetCommentData(id, {
|
||||
...comment_data[id],
|
||||
temp_ids: filtered_temps,
|
||||
files: [...comment_data[id].files, ...added_files],
|
||||
});
|
||||
// }
|
||||
|
||||
// if (filtered_temps.length) {
|
||||
// leaving only currently uploading files
|
||||
// nodeSetCommentData(id, assocPath(['temp_ids'], filtered_temps, comment_data[id]));
|
||||
// }
|
||||
|
||||
// console.log({
|
||||
// statuses,
|
||||
// temp_ids,
|
||||
// filtered_temps,
|
||||
// added_files,
|
||||
// });
|
||||
// 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]);
|
||||
|
||||
const comment = comment_data[id];
|
||||
|
||||
return (
|
||||
|
|
@ -111,6 +160,21 @@ const CommentFormUnconnected: FC<IProps> = ({
|
|||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
{comment.temp_ids.map(
|
||||
temp_id =>
|
||||
statuses[temp_id] &&
|
||||
statuses[temp_id].is_uploading && (
|
||||
<div key={statuses[temp_id].temp_id}>{statuses[temp_id].progress}</div>
|
||||
)
|
||||
)}
|
||||
{comment.files.map(
|
||||
file =>
|
||||
file.name && (
|
||||
<div key={file.id}>
|
||||
{file.name} {file.mime} {file.size}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</CommentWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ interface IProps {
|
|||
is_uploading?: boolean;
|
||||
}
|
||||
|
||||
const ImageUpload: FC<IProps> = ({
|
||||
thumb, id, progress, is_uploading,
|
||||
}) => (
|
||||
const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading }) => (
|
||||
<div className={styles.wrap}>
|
||||
<div className={classNames(styles.thumb_wrap, { is_uploading })}>
|
||||
{thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue