ChatWindow: convert to TSX
This commit is contained in:
Alex Gleason
parent
c35564c62b
commit
6459096b58
|
|
@ -15,7 +15,7 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
|
|||
|
||||
interface IHoverRefWrapper {
|
||||
accountId: string,
|
||||
inline: boolean,
|
||||
inline?: boolean,
|
||||
className?: string,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,135 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
closeChat,
|
||||
toggleChat,
|
||||
} from 'soapbox/actions/chats';
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import { Counter } from 'soapbox/components/ui';
|
||||
import { makeGetChat } from 'soapbox/selectors';
|
||||
import { getAcct } from 'soapbox/utils/accounts';
|
||||
import { displayFqn } from 'soapbox/utils/state';
|
||||
|
||||
import ChatBox from './chat_box';
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getChat = makeGetChat();
|
||||
|
||||
const mapStateToProps = (state, { chatId }) => {
|
||||
const chat = state.getIn(['chats', 'items', chatId]);
|
||||
|
||||
return {
|
||||
me: state.get('me'),
|
||||
chat: chat ? getChat(state, chat.toJS()) : undefined,
|
||||
displayFqn: displayFqn(state),
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
export default @connect(makeMapStateToProps)
|
||||
@injectIntl
|
||||
class ChatWindow extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
chatId: PropTypes.string.isRequired,
|
||||
windowState: PropTypes.string.isRequired,
|
||||
idx: PropTypes.number,
|
||||
chat: ImmutablePropTypes.record,
|
||||
me: PropTypes.node,
|
||||
displayFqn: PropTypes.bool,
|
||||
}
|
||||
|
||||
state = {
|
||||
content: '',
|
||||
}
|
||||
|
||||
handleChatClose = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(closeChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
handleChatToggle = (chatId) => {
|
||||
return (e) => {
|
||||
this.props.dispatch(toggleChat(chatId));
|
||||
};
|
||||
}
|
||||
|
||||
handleContentChange = (e) => {
|
||||
this.setState({ content: e.target.value });
|
||||
}
|
||||
|
||||
handleInputRef = (el) => {
|
||||
this.inputElem = el;
|
||||
this.focusInput();
|
||||
};
|
||||
|
||||
focusInput = () => {
|
||||
if (!this.inputElem) return;
|
||||
this.inputElem.focus();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const oldState = prevProps.windowState;
|
||||
const newState = this.props.windowState;
|
||||
|
||||
if (oldState !== newState && newState === 'open')
|
||||
this.focusInput();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { windowState, idx, chat, displayFqn } = this.props;
|
||||
if (!chat) return null;
|
||||
const account = chat.get('account');
|
||||
|
||||
const right = (285 * (idx + 1)) + 20;
|
||||
const unreadCount = chat.get('unread');
|
||||
|
||||
const unreadIcon = (
|
||||
<div className='mr-2 flex-none'>
|
||||
<Counter count={unreadCount} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const avatar = (
|
||||
<HoverRefWrapper accountId={account.get('id')}>
|
||||
<Link to={`/@${account.get('acct')}`}>
|
||||
<Avatar account={account} size={18} />
|
||||
</Link>
|
||||
</HoverRefWrapper>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
|
||||
<div className='pane__header'>
|
||||
{unreadCount > 0 ? unreadIcon : avatar }
|
||||
<button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
|
||||
@{getAcct(account, displayFqn)}
|
||||
</button>
|
||||
<div className='pane__close'>
|
||||
<IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<ChatBox
|
||||
chatId={chat.get('id')}
|
||||
onSetInputRef={this.handleInputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
closeChat,
|
||||
toggleChat,
|
||||
} from 'soapbox/actions/chats';
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import { Counter } from 'soapbox/components/ui';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { makeGetChat } from 'soapbox/selectors';
|
||||
import { getAcct } from 'soapbox/utils/accounts';
|
||||
import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
|
||||
|
||||
import ChatBox from './chat_box';
|
||||
|
||||
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
||||
|
||||
type WindowState = 'open' | 'minimized';
|
||||
|
||||
const getChat = makeGetChat();
|
||||
|
||||
interface IChatWindow {
|
||||
/** Position of the chat window on the screen, where 0 is rightmost. */
|
||||
idx: number,
|
||||
/** ID of the chat entity. */
|
||||
chatId: string,
|
||||
/** Whether the window is open or minimized. */
|
||||
windowState: WindowState,
|
||||
}
|
||||
|
||||
/** Floating desktop chat window. */
|
||||
const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const displayFqn = useAppSelector(getDisplayFqn);
|
||||
|
||||
const chat = useAppSelector(state => {
|
||||
const chat = state.chats.items.get(chatId);
|
||||
return chat ? getChat(state, chat.toJS() as any) : undefined;
|
||||
});
|
||||
|
||||
const inputElem = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const handleChatClose = (chatId: string) => {
|
||||
return () => {
|
||||
dispatch(closeChat(chatId));
|
||||
};
|
||||
};
|
||||
|
||||
const handleChatToggle = (chatId: string) => {
|
||||
return () => {
|
||||
dispatch(toggleChat(chatId));
|
||||
};
|
||||
};
|
||||
|
||||
const handleInputRef = (el: HTMLTextAreaElement) => {
|
||||
inputElem.current = el;
|
||||
focusInput();
|
||||
};
|
||||
|
||||
const focusInput = () => {
|
||||
inputElem.current?.focus();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
focusInput();
|
||||
}, [windowState === 'open']);
|
||||
|
||||
if (!chat) return null;
|
||||
const account = chat.account as unknown as AccountEntity;
|
||||
|
||||
const right = (285 * (idx + 1)) + 20;
|
||||
const unreadCount = chat.unread;
|
||||
|
||||
const unreadIcon = (
|
||||
<div className='mr-2 flex-none'>
|
||||
<Counter count={unreadCount} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const avatar = (
|
||||
<HoverRefWrapper accountId={account.id}>
|
||||
<Link to={`/@${account.acct}`}>
|
||||
<Avatar account={account} size={18} />
|
||||
</Link>
|
||||
</HoverRefWrapper>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
|
||||
<div className='pane__header'>
|
||||
{unreadCount > 0 ? unreadIcon : avatar }
|
||||
<button className='pane__title' onClick={handleChatToggle(chat.id)}>
|
||||
@{getAcct(account, displayFqn)}
|
||||
</button>
|
||||
<div className='pane__close'>
|
||||
<IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<ChatBox
|
||||
chatId={chat.id}
|
||||
onSetInputRef={handleInputRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatWindow;
|
||||
Loading…
Reference in New Issue