ChatBox: convert to TSX
This commit is contained in:
Alex Gleason
parent
46c1185dad
commit
c35564c62b
5 changed files with 200 additions and 222 deletions
|
|
@ -2,7 +2,7 @@ import { getFeatures } from 'soapbox/utils/features';
|
|||
|
||||
import api from '../api';
|
||||
|
||||
const noOp = () => {};
|
||||
const noOp = (e) => {};
|
||||
|
||||
export function fetchMedia(mediaId) {
|
||||
return (dispatch, getState) => {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ interface IChatRoom {
|
|||
const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const displayFqn = useAppSelector(getDisplayFqn);
|
||||
const inputElem = useRef<HTMLInputElement | null>(null);
|
||||
const inputElem = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const chat = useAppSelector(state => {
|
||||
const chat = state.chats.items.get(params.chatId, ImmutableMap()).toJS() as any;
|
||||
|
|
@ -33,7 +33,7 @@ const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
|
|||
inputElem.current?.focus();
|
||||
};
|
||||
|
||||
const handleInputRef = (el: HTMLInputElement) => {
|
||||
const handleInputRef = (el: HTMLTextAreaElement) => {
|
||||
inputElem.current = el;
|
||||
focusInput();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,214 +0,0 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import {
|
||||
sendChatMessage,
|
||||
markChatRead,
|
||||
} from 'soapbox/actions/chats';
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import UploadProgress from 'soapbox/features/compose/components/upload-progress';
|
||||
import UploadButton from 'soapbox/features/compose/components/upload_button';
|
||||
import { truncateFilename } from 'soapbox/utils/media';
|
||||
|
||||
import ChatMessageList from './chat_message_list';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
|
||||
send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
|
||||
});
|
||||
|
||||
const mapStateToProps = (state, { chatId }) => ({
|
||||
me: state.get('me'),
|
||||
chat: state.getIn(['chats', 'items', chatId]),
|
||||
chatMessageIds: state.getIn(['chat_message_lists', chatId], ImmutableOrderedSet()),
|
||||
});
|
||||
|
||||
const fileKeyGen = () => Math.floor((Math.random() * 0x10000));
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class ChatBox extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
chatId: PropTypes.string.isRequired,
|
||||
chatMessageIds: ImmutablePropTypes.orderedSet,
|
||||
chat: ImmutablePropTypes.record,
|
||||
onSetInputRef: PropTypes.func,
|
||||
me: PropTypes.node,
|
||||
}
|
||||
|
||||
initialState = () => ({
|
||||
content: '',
|
||||
attachment: undefined,
|
||||
isUploading: false,
|
||||
uploadProgress: 0,
|
||||
resetFileKey: fileKeyGen(),
|
||||
})
|
||||
|
||||
state = this.initialState()
|
||||
|
||||
clearState = () => {
|
||||
this.setState(this.initialState());
|
||||
}
|
||||
|
||||
getParams = () => {
|
||||
const { content, attachment } = this.state;
|
||||
|
||||
return {
|
||||
content,
|
||||
media_id: attachment && attachment.id,
|
||||
};
|
||||
}
|
||||
|
||||
canSubmit = () => {
|
||||
const { content, attachment } = this.state;
|
||||
|
||||
const conds = [
|
||||
content.length > 0,
|
||||
attachment,
|
||||
];
|
||||
|
||||
return conds.some(c => c);
|
||||
}
|
||||
|
||||
sendMessage = () => {
|
||||
const { dispatch, chatId } = this.props;
|
||||
const { isUploading } = this.state;
|
||||
|
||||
if (this.canSubmit() && !isUploading) {
|
||||
const params = this.getParams();
|
||||
|
||||
dispatch(sendChatMessage(chatId, params));
|
||||
this.clearState();
|
||||
}
|
||||
}
|
||||
|
||||
insertLine = () => {
|
||||
const { content } = this.state;
|
||||
this.setState({ content: content + '\n' });
|
||||
}
|
||||
|
||||
handleKeyDown = (e) => {
|
||||
this.markRead();
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
this.insertLine();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'Enter') {
|
||||
this.sendMessage();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
handleContentChange = (e) => {
|
||||
this.setState({ content: e.target.value });
|
||||
}
|
||||
|
||||
markRead = () => {
|
||||
const { dispatch, chatId } = this.props;
|
||||
dispatch(markChatRead(chatId));
|
||||
}
|
||||
|
||||
handleHover = () => {
|
||||
this.markRead();
|
||||
}
|
||||
|
||||
setInputRef = (el) => {
|
||||
const { onSetInputRef } = this.props;
|
||||
this.inputElem = el;
|
||||
onSetInputRef(el);
|
||||
};
|
||||
|
||||
handleRemoveFile = (e) => {
|
||||
this.setState({ attachment: undefined, resetFileKey: fileKeyGen() });
|
||||
}
|
||||
|
||||
onUploadProgress = (e) => {
|
||||
const { loaded, total } = e;
|
||||
this.setState({ uploadProgress: loaded / total });
|
||||
}
|
||||
|
||||
handleFiles = (files) => {
|
||||
const { dispatch } = this.props;
|
||||
|
||||
this.setState({ isUploading: true });
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', files[0]);
|
||||
|
||||
dispatch(uploadMedia(data, this.onUploadProgress)).then(response => {
|
||||
this.setState({ attachment: response.data, isUploading: false });
|
||||
}).catch(() => {
|
||||
this.setState({ isUploading: false });
|
||||
});
|
||||
}
|
||||
|
||||
renderAttachment = () => {
|
||||
const { attachment } = this.state;
|
||||
if (!attachment) return null;
|
||||
|
||||
return (
|
||||
<div className='chat-box__attachment'>
|
||||
<div className='chat-box__filename'>
|
||||
{truncateFilename(attachment.preview_url, 20)}
|
||||
</div>
|
||||
<div class='chat-box__remove-attachment'>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/icons/x.svg')}
|
||||
onClick={this.handleRemoveFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderActionButton = () => {
|
||||
const { intl } = this.props;
|
||||
const { resetFileKey } = this.state;
|
||||
|
||||
return this.canSubmit() ? (
|
||||
<IconButton
|
||||
src={require('@tabler/icons/icons/send.svg')}
|
||||
title={intl.formatMessage(messages.send)}
|
||||
onClick={this.sendMessage}
|
||||
/>
|
||||
) : (
|
||||
<UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { chatMessageIds, chatId, intl } = this.props;
|
||||
const { content, isUploading, uploadProgress } = this.state;
|
||||
if (!chatMessageIds) return null;
|
||||
|
||||
return (
|
||||
<div className='chat-box' onMouseOver={this.handleHover}>
|
||||
<ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
|
||||
{this.renderAttachment()}
|
||||
<UploadProgress active={isUploading} progress={uploadProgress * 100} />
|
||||
<div className='chat-box__actions simple_form'>
|
||||
<div className='chat-box__send'>
|
||||
{this.renderActionButton()}
|
||||
</div>
|
||||
<textarea
|
||||
rows={1}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onChange={this.handleContentChange}
|
||||
value={content}
|
||||
ref={this.setInputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
192
app/soapbox/features/chats/components/chat_box.tsx
Normal file
192
app/soapbox/features/chats/components/chat_box.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import {
|
||||
sendChatMessage,
|
||||
markChatRead,
|
||||
} from 'soapbox/actions/chats';
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import UploadProgress from 'soapbox/components/upload-progress';
|
||||
import UploadButton from 'soapbox/features/compose/components/upload_button';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { truncateFilename } from 'soapbox/utils/media';
|
||||
|
||||
import ChatMessageList from './chat_message_list';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
|
||||
send: { id: 'chat_box.actions.send', defaultMessage: 'Send' },
|
||||
});
|
||||
|
||||
const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
|
||||
|
||||
interface IChatBox {
|
||||
chatId: string,
|
||||
onSetInputRef: (el: HTMLTextAreaElement) => void,
|
||||
}
|
||||
|
||||
/**
|
||||
* Chat UI with just the messages and textarea.
|
||||
* Reused between floating desktop chats and fullscreen/mobile chats.
|
||||
*/
|
||||
const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const chatMessageIds = useAppSelector(state => state.chat_message_lists.get(chatId, ImmutableOrderedSet<string>()));
|
||||
|
||||
const [content, setContent] = useState('');
|
||||
const [attachment, setAttachment] = useState<any>(undefined);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
|
||||
|
||||
const inputElem = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const clearState = () => {
|
||||
setContent('');
|
||||
setAttachment(undefined);
|
||||
setIsUploading(false);
|
||||
setUploadProgress(0);
|
||||
setResetFileKey(fileKeyGen());
|
||||
};
|
||||
|
||||
const getParams = () => {
|
||||
return {
|
||||
content,
|
||||
media_id: attachment && attachment.id,
|
||||
};
|
||||
};
|
||||
|
||||
const canSubmit = () => {
|
||||
const conds = [
|
||||
content.length > 0,
|
||||
attachment,
|
||||
];
|
||||
|
||||
return conds.some(c => c);
|
||||
};
|
||||
|
||||
const sendMessage = () => {
|
||||
if (canSubmit() && !isUploading) {
|
||||
const params = getParams();
|
||||
|
||||
dispatch(sendChatMessage(chatId, params));
|
||||
clearState();
|
||||
}
|
||||
};
|
||||
|
||||
const insertLine = () => {
|
||||
setContent(content + '\n');
|
||||
};
|
||||
|
||||
const handleKeyDown: React.KeyboardEventHandler = (e) => {
|
||||
markRead();
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
insertLine();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const handleContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
|
||||
setContent(e.target.value);
|
||||
};
|
||||
|
||||
const markRead = () => {
|
||||
dispatch(markChatRead(chatId));
|
||||
};
|
||||
|
||||
const handleHover = () => {
|
||||
markRead();
|
||||
};
|
||||
|
||||
const setInputRef = (el: HTMLTextAreaElement) => {
|
||||
inputElem.current = el;
|
||||
onSetInputRef(el);
|
||||
};
|
||||
|
||||
const handleRemoveFile = () => {
|
||||
setAttachment(undefined);
|
||||
setResetFileKey(fileKeyGen());
|
||||
};
|
||||
|
||||
const onUploadProgress = (e: ProgressEvent) => {
|
||||
const { loaded, total } = e;
|
||||
setUploadProgress(loaded / total);
|
||||
};
|
||||
|
||||
const handleFiles = (files: FileList) => {
|
||||
setIsUploading(true);
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', files[0]);
|
||||
|
||||
dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
|
||||
setAttachment(response.data);
|
||||
setIsUploading(false);
|
||||
}).catch(() => {
|
||||
setIsUploading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const renderAttachment = () => {
|
||||
if (!attachment) return null;
|
||||
|
||||
return (
|
||||
<div className='chat-box__attachment'>
|
||||
<div className='chat-box__filename'>
|
||||
{truncateFilename(attachment.preview_url, 20)}
|
||||
</div>
|
||||
<div className='chat-box__remove-attachment'>
|
||||
<IconButton
|
||||
src={require('@tabler/icons/icons/x.svg')}
|
||||
onClick={handleRemoveFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderActionButton = () => {
|
||||
return canSubmit() ? (
|
||||
<IconButton
|
||||
src={require('@tabler/icons/icons/send.svg')}
|
||||
title={intl.formatMessage(messages.send)}
|
||||
onClick={sendMessage}
|
||||
/>
|
||||
) : (
|
||||
<UploadButton onSelectFile={handleFiles} resetFileKey={resetFileKey} />
|
||||
);
|
||||
};
|
||||
|
||||
if (!chatMessageIds) return null;
|
||||
|
||||
return (
|
||||
<div className='chat-box' onMouseOver={handleHover}>
|
||||
<ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
|
||||
{renderAttachment()}
|
||||
{isUploading && (
|
||||
<UploadProgress progress={uploadProgress * 100} />
|
||||
)}
|
||||
<div className='chat-box__actions simple_form'>
|
||||
<div className='chat-box__send'>
|
||||
{renderActionButton()}
|
||||
</div>
|
||||
<textarea
|
||||
rows={1}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={handleContentChange}
|
||||
value={content}
|
||||
ref={setInputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBox;
|
||||
|
|
@ -15,16 +15,16 @@ const onlyImages = (types: ImmutableList<string>) => {
|
|||
};
|
||||
|
||||
interface IUploadButton {
|
||||
disabled: boolean,
|
||||
unavailable: boolean,
|
||||
disabled?: boolean,
|
||||
unavailable?: boolean,
|
||||
onSelectFile: (files: FileList) => void,
|
||||
style: React.CSSProperties,
|
||||
style?: React.CSSProperties,
|
||||
resetFileKey: number,
|
||||
}
|
||||
|
||||
const UploadButton: React.FC<IUploadButton> = ({
|
||||
disabled,
|
||||
unavailable,
|
||||
disabled = false,
|
||||
unavailable = false,
|
||||
onSelectFile,
|
||||
resetFileKey,
|
||||
}) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue