mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 21:06:42 +07:00
Audio title editing
This commit is contained in:
Fedor Katurov
parent
da47da9d6a
commit
fff3770b1e
7 changed files with 304 additions and 242 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo } from 'react';
|
||||
import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo, memo } from 'react';
|
||||
import { Textarea } from '~/components/input/Textarea';
|
||||
import * as styles from './styles.scss';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
|
|
@ -41,244 +41,263 @@ type IProps = ReturnType<typeof mapStateToProps> &
|
|||
is_before?: boolean;
|
||||
};
|
||||
|
||||
const CommentFormUnconnected: FC<IProps> = ({
|
||||
node: { comment_data, is_sending_comment },
|
||||
uploads: { statuses, files },
|
||||
id,
|
||||
is_before = false,
|
||||
nodePostComment,
|
||||
nodeSetCommentData,
|
||||
uploadUploadFiles,
|
||||
nodeCancelCommentEdit,
|
||||
}) => {
|
||||
const onInputChange = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
const CommentFormUnconnected: FC<IProps> = memo(
|
||||
({
|
||||
node: { comment_data, is_sending_comment },
|
||||
uploads: { statuses, files },
|
||||
id,
|
||||
is_before = false,
|
||||
nodePostComment,
|
||||
nodeSetCommentData,
|
||||
uploadUploadFiles,
|
||||
nodeCancelCommentEdit,
|
||||
}) => {
|
||||
const onInputChange = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!event.target.files || !event.target.files.length) return;
|
||||
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: getFileType(file),
|
||||
})
|
||||
);
|
||||
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: getFileType(file),
|
||||
})
|
||||
);
|
||||
|
||||
const temps = items.map(file => file.temp_id);
|
||||
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<InputHandler>(
|
||||
text => {
|
||||
nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
|
||||
},
|
||||
[nodeSetCommentData, comment_data, id]
|
||||
);
|
||||
|
||||
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 && 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))
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id])
|
||||
);
|
||||
uploadUploadFiles(items);
|
||||
},
|
||||
[uploadUploadFiles, comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
if (added_files.length) {
|
||||
nodeSetCommentData(id, {
|
||||
...comment_data[id],
|
||||
temp_ids: filtered_temps,
|
||||
files: [...comment_data[id].files, ...added_files],
|
||||
});
|
||||
}
|
||||
}, [statuses, files]);
|
||||
const onInput = useCallback<InputHandler>(
|
||||
text => {
|
||||
nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
|
||||
},
|
||||
[nodeSetCommentData, comment_data, id]
|
||||
);
|
||||
|
||||
const comment = comment_data[id];
|
||||
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 && file.id === el.id));
|
||||
|
||||
const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
if (event) event.preventDefault();
|
||||
if (is_uploading_files || is_sending_comment) return;
|
||||
|
||||
nodePostComment(id, is_before);
|
||||
},
|
||||
[nodePostComment, id, is_before, is_uploading_files, is_sending_comment]
|
||||
);
|
||||
|
||||
const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
|
||||
({ ctrlKey, key }) => {
|
||||
if (!!ctrlKey && key === 'Enter') onSubmit(null);
|
||||
},
|
||||
[onSubmit]
|
||||
);
|
||||
|
||||
const images = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_images = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.IMAGE)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const audios = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_audios = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.AUDIO)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const onFileDrop = useCallback(
|
||||
(file_id: IFile['id']) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(['files'], comment.files.filter(file => file.id != file_id), comment_data[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))
|
||||
);
|
||||
},
|
||||
[comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onImageMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...audios,
|
||||
...(moveArrItem(oldIndex, newIndex, images.filter(file => !!file)) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios]
|
||||
);
|
||||
if (added_files.length) {
|
||||
nodeSetCommentData(id, {
|
||||
...comment_data[id],
|
||||
temp_ids: filtered_temps,
|
||||
files: [...comment_data[id].files, ...added_files],
|
||||
});
|
||||
}
|
||||
}, [statuses, files]);
|
||||
|
||||
const onAudioMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...images,
|
||||
...(moveArrItem(oldIndex, newIndex, audios.filter(file => !!file)) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios]
|
||||
);
|
||||
const comment = comment_data[id];
|
||||
|
||||
const onCancelEdit = useCallback(() => {
|
||||
nodeCancelCommentEdit(id);
|
||||
}, [nodeCancelCommentEdit, comment.id]);
|
||||
const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
|
||||
|
||||
const placeholder = getRandomPhrase('SIMPLE');
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
if (event) event.preventDefault();
|
||||
if (is_uploading_files || is_sending_comment) return;
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className={styles.wrap}>
|
||||
<div className={styles.input}>
|
||||
<Textarea
|
||||
value={comment.text}
|
||||
handler={onInput}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={is_sending_comment}
|
||||
placeholder={placeholder}
|
||||
minRows={2}
|
||||
/>
|
||||
</div>
|
||||
nodePostComment(id, is_before);
|
||||
},
|
||||
[nodePostComment, id, is_before, is_uploading_files, is_sending_comment]
|
||||
);
|
||||
|
||||
{(!!images.length || !!audios.length) && (
|
||||
<div className={styles.attaches}>
|
||||
{!!images.length && (
|
||||
<SortableImageGrid
|
||||
onDrop={onFileDrop}
|
||||
onSortEnd={onImageMove}
|
||||
axis="xy"
|
||||
items={images}
|
||||
locked={locked_images}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
size={120}
|
||||
/>
|
||||
)}
|
||||
const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
|
||||
({ ctrlKey, key }) => {
|
||||
if (!!ctrlKey && key === 'Enter') onSubmit(null);
|
||||
},
|
||||
[onSubmit]
|
||||
);
|
||||
|
||||
{(!!audios.length || !!locked_audios.length) && (
|
||||
<SortableAudioGrid
|
||||
items={audios}
|
||||
onDrop={onFileDrop}
|
||||
onSortEnd={onAudioMove}
|
||||
axis="y"
|
||||
locked={locked_audios}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
/>
|
||||
)}
|
||||
const images = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_images = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.IMAGE)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const audios = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_audios = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.AUDIO)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const onFileDrop = useCallback(
|
||||
(fileId: IFile['id']) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(['files'], comment.files.filter(file => file.id != fileId), comment_data[id])
|
||||
);
|
||||
},
|
||||
[comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onTitleChange = useCallback(
|
||||
(fileId: IFile['id'], title: IFile['metadata']['title']) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
comment.files.map(file =>
|
||||
file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
|
||||
),
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onImageMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...audios,
|
||||
...(moveArrItem(oldIndex, newIndex, images.filter(file => !!file)) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios]
|
||||
);
|
||||
|
||||
const onAudioMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...images,
|
||||
...(moveArrItem(oldIndex, newIndex, audios.filter(file => !!file)) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios]
|
||||
);
|
||||
|
||||
const onCancelEdit = useCallback(() => {
|
||||
nodeCancelCommentEdit(id);
|
||||
}, [nodeCancelCommentEdit, comment.id]);
|
||||
|
||||
const placeholder = getRandomPhrase('SIMPLE');
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className={styles.wrap}>
|
||||
<div className={styles.input}>
|
||||
<Textarea
|
||||
value={comment.text}
|
||||
handler={onInput}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={is_sending_comment}
|
||||
placeholder={placeholder}
|
||||
minRows={2}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Group horizontal className={styles.buttons}>
|
||||
<ButtonGroup>
|
||||
<Button iconLeft="photo" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="image/*" />
|
||||
</Button>
|
||||
{(!!images.length || !!audios.length) && (
|
||||
<div className={styles.attaches}>
|
||||
{!!images.length && (
|
||||
<SortableImageGrid
|
||||
onDrop={onFileDrop}
|
||||
onSortEnd={onImageMove}
|
||||
axis="xy"
|
||||
items={images}
|
||||
locked={locked_images}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
size={120}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button iconRight="audio" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="audio/*" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Filler />
|
||||
|
||||
{(is_sending_comment || is_uploading_files) && <LoaderCircle size={20} />}
|
||||
|
||||
{id !== 0 && (
|
||||
<Button size="small" color="link" type="button" onClick={onCancelEdit}>
|
||||
Отмена
|
||||
</Button>
|
||||
{(!!audios.length || !!locked_audios.length) && (
|
||||
<SortableAudioGrid
|
||||
items={audios}
|
||||
onDrop={onFileDrop}
|
||||
onTitleChange={onTitleChange}
|
||||
onSortEnd={onAudioMove}
|
||||
axis="y"
|
||||
locked={locked_audios}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="gray"
|
||||
iconRight={id === 0 ? 'enter' : 'check'}
|
||||
disabled={is_sending_comment || is_uploading_files}
|
||||
>
|
||||
{id === 0 ? 'Сказать' : 'Сохранить'}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
<Group horizontal className={styles.buttons}>
|
||||
<ButtonGroup>
|
||||
<Button iconLeft="photo" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="image/*" />
|
||||
</Button>
|
||||
|
||||
<Button iconRight="audio" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="audio/*" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Filler />
|
||||
|
||||
{(is_sending_comment || is_uploading_files) && <LoaderCircle size={20} />}
|
||||
|
||||
{id !== 0 && (
|
||||
<Button size="small" color="link" type="button" onClick={onCancelEdit}>
|
||||
Отмена
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="gray"
|
||||
iconRight={id === 0 ? 'enter' : 'check'}
|
||||
disabled={is_sending_comment || is_uploading_files}
|
||||
>
|
||||
{id === 0 ? 'Сказать' : 'Сохранить'}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const CommentForm = connect(
|
||||
mapStateToProps,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue