47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { Button } from '@crayons';
|
|
|
|
export const ChannelRequest = ({ resource: data, handleJoiningRequest }) => (
|
|
<div>
|
|
<div className="joining-message">
|
|
<h2>Hey {data.user.name} !</h2>
|
|
<h3>You are not a member of this group yet. Send a request to join.</h3>
|
|
</div>
|
|
<div className="user-picture">
|
|
<div className="chatmessage__profilepic">
|
|
<img
|
|
className="chatmessagebody__profileimage"
|
|
src={data.user.profile_image_90}
|
|
alt={`${data.user.username} profile`}
|
|
/>
|
|
<img
|
|
className="chatmessagebody__profileimage"
|
|
src="/assets/organization.svg"
|
|
alt={`${data.channel.name} profile`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="send-request">
|
|
{data.channel.status !== 'joining_request' ? (
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleJoiningRequest}
|
|
data-channel-id={data.channel.id}
|
|
>
|
|
{' '}
|
|
Join {data.channel.name}{' '}
|
|
</Button>
|
|
) : (
|
|
<Button variant="secondary"> Requested Already </Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
ChannelRequest.propTypes = {
|
|
resource: PropTypes.shape({
|
|
data: PropTypes.object,
|
|
}).isRequired,
|
|
handleJoiningRequest: PropTypes.func.isRequired,
|
|
};
|