64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
import { h, Component } from 'preact';
|
||
|
||
const setupButton = ({className = '', onClickCallback, dataContent = '', btnLabel = ''}) => {
|
||
return (
|
||
<button
|
||
className={className}
|
||
onClick={onClickCallback}
|
||
data-content={dataContent}
|
||
>
|
||
{btnLabel}
|
||
</button>
|
||
)
|
||
}
|
||
|
||
export default class View extends Component {
|
||
channel = (props) => {
|
||
return (
|
||
<div className="chatNonChatView_contentblock">
|
||
<h2>{props.channel.channel_name}</h2>
|
||
<div>
|
||
<em>{props.channel.description}</em>
|
||
</div>
|
||
{
|
||
setupButton({
|
||
className: 'cta',
|
||
onClickCallback: this.props.onAcceptInvitation,
|
||
dataContent: props.channel.membership_id,
|
||
btnLabel: 'Accept'
|
||
})
|
||
}
|
||
{
|
||
setupButton({
|
||
className: 'cta',
|
||
onClickCallback: this.props.onDeclineInvitation,
|
||
dataContent: props.channel.membership_id,
|
||
btnLabel: 'Decline'
|
||
})
|
||
}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
render() {
|
||
const channels = this.props.channels.map(channel => {
|
||
return <this.channel channel={channel} />
|
||
});
|
||
return (
|
||
<div className="chatNonChatView">
|
||
<div className="container">
|
||
{
|
||
setupButton({
|
||
className: 'chatNonChatView_exitbutton',
|
||
onClickCallback: this.props.onViewExit,
|
||
dataContent: 'exit',
|
||
btnLabel: '×'
|
||
})
|
||
}
|
||
<h1>Channel Invitations 🤗</h1>
|
||
{channels}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|