Skip to content

Instantly share code, notes, and snippets.

@adelowo adelowo/gdpr-ChatView.js Secret
Created Mar 17, 2020

Embed
What would you like to do?
import React, { useState, Component } from "react";
import {
Chat,
MessageList,
MessageInput,
Thread,
Channel,
Window,
ChannelList,
withChannelContext
} from "stream-chat-react";
import axios from "axios";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
function GDPRExporter(props) {
const [show, setShow] = useState(false);
const [email, setEmail] = useState("");
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div>
<Button variant="primary" onClick={handleShow}>
Export Data
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<InputGroup className="mb-3">
<FormControl
placeholder="Recipient's email"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
type="email"
onChange={e => setEmail(e.target.value)}
/>
<InputGroup.Append>
<Button
variant="primary"
onClick={() => {
axios
.post("http://localhost:5200/users/export", {
user_id: props.user,
email: email
})
.then(res => {
alert(res.data.message);
handleClose();
})
.catch(err => {
console.error(err);
alert("Could not export data");
});
}}
>
Export
</Button>
</InputGroup.Append>
</InputGroup>
</Modal.Body>
<Modal.Footer>
An email containing the exported data will be sent to you
</Modal.Footer>
</Modal>
</div>
);
}
class MyChannelPreview extends Component {
render() {
const { setActiveChannel, channel } = this.props;
const unreadCount = channel.countUnread();
return (
<div className="channel_preview">
<a href="#" onClick={e => setActiveChannel(channel, e)}>
{channel.data.name}
</a>
<span>Unread messages: {unreadCount}</span>
</div>
);
}
}
class MyMessageComponent extends Component {
render() {
return (
<div>
<b>{this.props.message.user.name}</b> {this.props.message.text}
</div>
);
}
}
const CustomChannelHeader = withChannelContext(
class CustomChannelHeader extends React.PureComponent {
render() {
return (
<div className="str-chat__header-livestream">
<div className="str-chat__header-livestream-left">
<p className="str-chat__header-livestream-left--title">
{this.props.channel.data.name}
</p>
<p className="str-chat__header-livestream-left--members">
{Object.keys(this.props.members).length} members,{" "}
{this.props.watcher_count} online
</p>
</div>
<div className="str-chat__header-livestream-right">
<div className="str-chat__header-livestream-right-button-wrapper">
<GDPRExporter user={this.props.client.user.id} />
</div>
</div>
</div>
);
}
}
);
export default class ChatView extends Component {
render() {
return (
<Chat client={this.props.chatClient} theme={"messaging light"}>
<ChannelList Preview={MyChannelPreview} />
<Channel Message={MyMessageComponent}>
<Window>
<CustomChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
</Chat>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.