ConversationView: Move attachments processing into redux

This commit is contained in:
Scott Nonnenberg 2022-12-07 17:26:59 -08:00 committed by GitHub
parent ff6750e4fd
commit 452e0b7b31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 544 additions and 763 deletions

View file

@ -4,18 +4,82 @@
import React from 'react';
export type PropsType = {
conversationId: string;
processAttachments: (options: {
conversationId: string;
files: ReadonlyArray<File>;
}) => void;
renderCompositionArea: () => JSX.Element;
renderConversationHeader: () => JSX.Element;
renderTimeline: () => JSX.Element;
};
export function ConversationView({
conversationId,
processAttachments,
renderCompositionArea,
renderConversationHeader,
renderTimeline,
}: PropsType): JSX.Element {
const onDrop = React.useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
if (!event.dataTransfer) {
return;
}
if (event.dataTransfer.types[0] !== 'Files') {
return;
}
event.stopPropagation();
event.preventDefault();
const { files } = event.dataTransfer;
processAttachments({
conversationId,
files: Array.from(files),
});
},
[conversationId, processAttachments]
);
const onPaste = React.useCallback(
(event: React.ClipboardEvent<HTMLDivElement>) => {
if (!event.clipboardData) {
return;
}
const { items } = event.clipboardData;
const anyImages = [...items].some(
item => item.type.split('/')[0] === 'image'
);
if (!anyImages) {
return;
}
event.stopPropagation();
event.preventDefault();
const files: Array<File> = [];
for (let i = 0; i < items.length; i += 1) {
if (items[i].type.split('/')[0] === 'image') {
const file = items[i].getAsFile();
if (file) {
files.push(file);
}
}
}
processAttachments({
conversationId,
files,
});
},
[conversationId, processAttachments]
);
return (
<div className="ConversationView">
<div className="ConversationView" onDrop={onDrop} onPaste={onPaste}>
<div className="ConversationView__header">
{renderConversationHeader()}
</div>