85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
import { h, Component } from 'preact';
|
||
import PropTypes from 'prop-types';
|
||
|
||
/**
|
||
* TODO: Instead of calling this function in render, use jsx (<SetupButton />).
|
||
*/
|
||
function SetupButton({ className, onClickCallback, dataContent, btnLabel }) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
className={className}
|
||
onClick={onClickCallback}
|
||
data-content={dataContent}
|
||
>
|
||
{btnLabel}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
SetupButton.propTypes = {
|
||
className: PropTypes.string.isRequired,
|
||
onClickCallback: PropTypes.func.isRequired,
|
||
dataContent: PropTypes.string.isRequired,
|
||
btnLabel: PropTypes.string.isRequired,
|
||
};
|
||
|
||
export default class View extends Component {
|
||
static propTypes = {
|
||
onAcceptInvitation: PropTypes.func.isRequired,
|
||
onDeclineInvitation: PropTypes.func.isRequired,
|
||
onViewExit: PropTypes.func.isRequired,
|
||
channels: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||
};
|
||
|
||
channel = props => {
|
||
const { onAcceptInvitation, onDeclineInvitation } = this.props;
|
||
return (
|
||
<div className="chatNonChatView_contentblock">
|
||
<h2>{props.channel.channel_name}</h2>
|
||
<div>
|
||
<em>{props.channel.description}</em>
|
||
</div>
|
||
{SetupButton({
|
||
className: 'cta',
|
||
onClickCallback: onAcceptInvitation,
|
||
dataContent: props.channel.membership_id,
|
||
btnLabel: 'Accept',
|
||
})}
|
||
{SetupButton({
|
||
className: 'cta',
|
||
onClickCallback: onDeclineInvitation,
|
||
dataContent: props.channel.membership_id,
|
||
btnLabel: 'Decline',
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
render() {
|
||
const { onViewExit, channels: channelsFromProps } = this.props;
|
||
const channels = channelsFromProps.map(channel => {
|
||
return <this.channel channel={channel} />;
|
||
});
|
||
return (
|
||
<div className="chatNonChatView">
|
||
<div className="container">
|
||
{SetupButton({
|
||
className: 'chatNonChatView_exitbutton',
|
||
onClickCallback: onViewExit,
|
||
dataContent: 'exit',
|
||
btnLabel: '×',
|
||
})}
|
||
<h1>
|
||
Channel Invitations
|
||
{' '}
|
||
<span role="img" aria-label="hugging-emoji">
|
||
🤗
|
||
</span>
|
||
</h1>
|
||
{channels}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|