mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-15 18:08:46 +00:00
PROJECT COMPLETED!!!!!
This commit is contained in:
Aaron Sun
parent
db6b147c40
commit
5a7f80ab34
677
twistter-frontend/src/pages/directMessages.js
Normal file
677
twistter-frontend/src/pages/directMessages.js
Normal file
@ -0,0 +1,677 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import _ from "underscore";
|
||||
|
||||
// Material UI
|
||||
import Box from '@material-ui/core/Box';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Fab from '@material-ui/core/Fab';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Popover from '@material-ui/core/Popover';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import withStyles from '@material-ui/core/styles/withStyles';
|
||||
|
||||
// Material UI Icons
|
||||
import AddCircleIcon from '@material-ui/icons/AddBox';
|
||||
import CheckMarkIcon from '@material-ui/icons/Check';
|
||||
import ErrorIcon from '@material-ui/icons/ErrorOutline';
|
||||
import SendIcon from '@material-ui/icons/Send';
|
||||
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getDirectMessages,
|
||||
createNewDirectMessage,
|
||||
getNewDirectMessages,
|
||||
reloadDirectMessageChannels,
|
||||
sendDirectMessage
|
||||
} from '../redux/actions/dataActions';
|
||||
|
||||
const styles = {
|
||||
pageContainer: {
|
||||
minHeight: 'calc(100vh - 50px - 60px)'
|
||||
},
|
||||
sidePadding: {
|
||||
maxWidth: 350
|
||||
},
|
||||
dmList: {
|
||||
width: 300,
|
||||
marginLeft: 15
|
||||
},
|
||||
dmItemsUpper: {
|
||||
marginBottom: 1,
|
||||
// height: 'calc(100vh - 50px - 142px)',
|
||||
minHeight: 100,
|
||||
maxHeight: 'calc(100vh - 50px - 142px)',
|
||||
overflow: "auto"
|
||||
},
|
||||
dmItemsLower: {
|
||||
|
||||
},
|
||||
dmItemUsernameSelected: {
|
||||
fontSize: 20,
|
||||
color: 'white'
|
||||
},
|
||||
dmItemUsernameUnselected: {
|
||||
fontSize: 20,
|
||||
color: '#1da1f2'
|
||||
},
|
||||
dmItemTimeSelected: {
|
||||
color: '#D6D6D6',
|
||||
fontSize: 12,
|
||||
float: 'right',
|
||||
marginRight: 5,
|
||||
marginTop: 5
|
||||
},
|
||||
dmItemTimeUnselected: {
|
||||
color: 'black',
|
||||
fontSize: 12,
|
||||
float: 'right',
|
||||
marginRight: 5,
|
||||
marginTop: 5
|
||||
},
|
||||
dmRecentMessageSelected: {
|
||||
wordBreak: "break-all",
|
||||
color: '#D6D6D6'
|
||||
},
|
||||
dmRecentMessageUnselected: {
|
||||
wordBreak: "break-all",
|
||||
color: 'black'
|
||||
},
|
||||
dmRecentMessageDisabled: {
|
||||
wordBreak: "break-all",
|
||||
color: 'red'
|
||||
},
|
||||
dmListItemContainer: {
|
||||
height: 100
|
||||
},
|
||||
dmListLayoutContainer: {
|
||||
height: "100%"
|
||||
},
|
||||
dmListRecentMessage: {
|
||||
marginLeft: 10,
|
||||
marginRight: 10
|
||||
},
|
||||
dmListTextLayout: {
|
||||
height: 30
|
||||
},
|
||||
dmCardUnselected: {
|
||||
fontSize: 20,
|
||||
backgroundColor: '#FFFFFF',
|
||||
width: 300
|
||||
},
|
||||
dmCardSelected: {
|
||||
fontSize: 20,
|
||||
backgroundColor: '#1da1f2',
|
||||
width: 300
|
||||
},
|
||||
messagesGrid: {
|
||||
// // margin: "auto"
|
||||
// height: "auto",
|
||||
// width: "auto"
|
||||
},
|
||||
messagesBox: {
|
||||
width: 450
|
||||
},
|
||||
messagesContainer: {
|
||||
height: 'calc(100vh - 50px - 110px)',
|
||||
overflow: 'auto',
|
||||
width: 450,
|
||||
marginLeft: 2,
|
||||
marginRight: 17
|
||||
},
|
||||
fromMessage: {
|
||||
minWidth: 150,
|
||||
maxWidth: 350,
|
||||
minHeight: 40,
|
||||
marginRight: 2,
|
||||
marginTop: 2,
|
||||
marginBottom: 10,
|
||||
backgroundColor: '#008394',
|
||||
color: '#FFFFFF',
|
||||
float: 'right'
|
||||
},
|
||||
toMessage: {
|
||||
minWidth: 150,
|
||||
maxWidth: 350,
|
||||
minHeight: 40,
|
||||
marginLeft: 15,
|
||||
marginTop: 2,
|
||||
marginBottom: 10,
|
||||
backgroundColor: '#008394',
|
||||
color: '#FFFFFF',
|
||||
float: 'left'
|
||||
},
|
||||
messageContent: {
|
||||
// maxWidth: 330,
|
||||
// width: 330,
|
||||
wordBreak: "break-all",
|
||||
textAlign: 'left',
|
||||
marginLeft: 5,
|
||||
marginRight: 5
|
||||
},
|
||||
messageTime: {
|
||||
color: '#D6D6D6',
|
||||
textAlign: 'left',
|
||||
marginLeft: 5,
|
||||
fontSize: 12
|
||||
},
|
||||
writeMessage: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
boxShadow: '0px 0px 5px 0px grey',
|
||||
width: 450
|
||||
},
|
||||
messageTextField: {
|
||||
width: 388
|
||||
},
|
||||
messageButton: {
|
||||
backgroundColor: '#1da1f2',
|
||||
marginTop: 8,
|
||||
marginLeft: 2
|
||||
},
|
||||
loadingUsernameChecks: {
|
||||
height: 55,
|
||||
width: 55,
|
||||
marginLeft: 5
|
||||
},
|
||||
errorIcon: {
|
||||
height: 55,
|
||||
width: 55,
|
||||
marginLeft: 5,
|
||||
color: '#ff3d00'
|
||||
},
|
||||
checkMarkIcon: {
|
||||
height: 55,
|
||||
width: 55,
|
||||
marginLeft: 5,
|
||||
color: '#1da1f2'
|
||||
},
|
||||
createButton: {
|
||||
// textAlign: "center",
|
||||
// display: "block",
|
||||
marginLeft: 96,
|
||||
marginRight: 96,
|
||||
position: "relative"
|
||||
}
|
||||
};
|
||||
|
||||
export class directMessages extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hasChannelSelected: false,
|
||||
selectedChannel: null,
|
||||
dmData: null,
|
||||
anchorEl: null,
|
||||
createDMUsername: '',
|
||||
usernameValid: false,
|
||||
// message: '',
|
||||
drafts: {},
|
||||
errors: null
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.state.hasChannelSelected) {
|
||||
document.getElementById('messagesContainer').scrollTop = document.getElementById(
|
||||
'messagesContainer'
|
||||
).scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.getDirectMessages();
|
||||
// this.updatePage();
|
||||
}
|
||||
|
||||
// Updates the state whenever redux is updated
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.directMessages && !_.isEqual(nextProps.directMessages, this.state.dmData)) {
|
||||
this.setState({ dmData: nextProps.directMessages}, () => {
|
||||
if (this.state.selectedChannel) {
|
||||
this.state.dmData.forEach((channel) => {
|
||||
if (channel.dmId === this.state.selectedChannel.dmId) {
|
||||
this.setState({
|
||||
selectedChannel: channel
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updatePage = async() => {
|
||||
while (true) {
|
||||
await this.sleep(15000);
|
||||
// console.log("getting new DMs");
|
||||
this.props.getNewDirectMessages();
|
||||
}
|
||||
}
|
||||
|
||||
sleep = (ms) => {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
// Handles selecting different DM channels
|
||||
handleClickChannel = (event) => {
|
||||
this.setState({
|
||||
hasChannelSelected: true
|
||||
});
|
||||
|
||||
const dmItemsUpper = document.getElementById("dmItemsUpper");
|
||||
let target = event.target;
|
||||
let dmChannelKey;
|
||||
|
||||
// Determine which DM channel was clicked by finding the data-key.
|
||||
// A while loop is necessary, because the user can click on any part of the
|
||||
// DM list item. dmItemsUpper is the list container of the dmItems
|
||||
while (target !== dmItemsUpper) {
|
||||
dmChannelKey = target.dataset.key;
|
||||
|
||||
if (dmChannelKey) {
|
||||
break;
|
||||
} else {
|
||||
target = target.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
// Save the entire DM channel in the state so that it is easier to load the messages
|
||||
this.state.dmData.forEach((channel) => {
|
||||
if (channel.dmId === dmChannelKey) {
|
||||
this.setState({
|
||||
selectedChannel: channel
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
formatDateToString(dateString) {
|
||||
let newDate = new Date(Date.parse(dateString));
|
||||
return newDate.toDateString();
|
||||
}
|
||||
|
||||
formatDateToTimeDiff(dateString) {
|
||||
return dayjs(dateString).fromNow();
|
||||
}
|
||||
|
||||
shortenText = (text, length) => {
|
||||
// Shorten the text
|
||||
let shortened = text.slice(0, length + 1);
|
||||
|
||||
// Trim whitespace from the end of the text
|
||||
if (shortened[shortened.length - 1] === ' ') {
|
||||
shortened = shortened.trimRight();
|
||||
}
|
||||
|
||||
// Add ... to the end
|
||||
shortened = `${shortened}...`;
|
||||
|
||||
return shortened;
|
||||
}
|
||||
|
||||
handleOpenAddDMPopover = (event) => {
|
||||
this.setState({
|
||||
anchorEl: event.currentTarget
|
||||
});
|
||||
};
|
||||
|
||||
handleCloseAddDMPopover = () => {
|
||||
this.setState({
|
||||
anchorEl: null,
|
||||
createDMUsername: '',
|
||||
usernameValid: false
|
||||
});
|
||||
};
|
||||
|
||||
handleChangeAddDMUsername = (event) => {
|
||||
this.setState({
|
||||
createDMUsername: event.target.value
|
||||
});
|
||||
};
|
||||
|
||||
handleClickCreate = () => {
|
||||
this.props.createNewDirectMessage(this.state.createDMUsername)
|
||||
.then(() => {
|
||||
return this.props.reloadDirectMessageChannels();
|
||||
})
|
||||
.then(() => {
|
||||
this.handleCloseAddDMPopover();
|
||||
return;
|
||||
})
|
||||
.catch(() => {
|
||||
return;
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeMessage = (event) => {
|
||||
let drafts = this.state.drafts;
|
||||
drafts[this.state.selectedChannel.dmId] = event.target.value;
|
||||
this.setState({
|
||||
drafts
|
||||
});
|
||||
}
|
||||
|
||||
handleClickSend = () => {
|
||||
// console.log(this.state.drafts[this.state.selectedChannel.dmId]);
|
||||
let drafts = this.state.drafts;
|
||||
if (this.state.hasChannelSelected && drafts[this.state.selectedChannel.dmId]) {
|
||||
this.props.sendDirectMessage(this.state.selectedChannel.recipient, drafts[this.state.selectedChannel.dmId]);
|
||||
drafts[this.state.selectedChannel.dmId] = null;
|
||||
this.setState({
|
||||
drafts
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes, user: { credentials: { dmEnabled } } } = this.props;
|
||||
const loadingDirectMessages = this.props.UI.loading2;
|
||||
const creatingDirectMessage = this.props.UI.loading3;
|
||||
const sendingDirectMessage = this.props.UI.loading4;
|
||||
let errors = this.props.UI.errors ? this.props.UI.errors : {};
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
// Used for the add button on the dmList
|
||||
const open = Boolean(this.state.anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
let dmListMarkup = this.state.dmData ? (
|
||||
this.state.dmData.map((channel) => (
|
||||
<Card
|
||||
onClick={this.handleClickChannel}
|
||||
key={channel.dmId}
|
||||
data-key={channel.dmId}
|
||||
className={
|
||||
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? classes.dmCardSelected : classes.dmCardUnselected
|
||||
}
|
||||
>
|
||||
<Box className={classes.dmListItemContainer}>
|
||||
<Grid container direction="column" className={classes.dmListLayoutContainer} spacing={1}>
|
||||
<Grid item>
|
||||
<Grid container className={classes.dmListTextLayout}>
|
||||
<Grid item sm />
|
||||
<Grid item sm>
|
||||
<Typography
|
||||
className={
|
||||
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
||||
classes.dmItemUsernameSelected
|
||||
) : (
|
||||
classes.dmItemUsernameUnselected
|
||||
)
|
||||
}
|
||||
>
|
||||
{channel.recipient}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<Typography
|
||||
className={
|
||||
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
||||
classes.dmItemTimeSelected
|
||||
) : (
|
||||
classes.dmItemTimeUnselected
|
||||
)
|
||||
}
|
||||
>
|
||||
{channel.recentMessageTimestamp ? (
|
||||
this.formatDateToTimeDiff(channel.recentMessageTimestamp)
|
||||
) : null}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item className={classes.dmListRecentMessage}>
|
||||
<Typography
|
||||
className={
|
||||
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
|
||||
channel.hasDirectMessagesEnabled ?
|
||||
classes.dmRecentMessageSelected
|
||||
:
|
||||
classes.dmRecentMessageDisabled
|
||||
) : (
|
||||
channel.hasDirectMessagesEnabled ?
|
||||
classes.dmRecentMessageUnselected
|
||||
:
|
||||
classes.dmRecentMessageDisabled
|
||||
)
|
||||
}
|
||||
>
|
||||
{!channel.hasDirectMessagesEnabled ? "This user has DMs disabled" :
|
||||
!channel.recentMessage ?
|
||||
'No messages'
|
||||
:
|
||||
channel.recentMessage.length > 65 ?
|
||||
this.shortenText(channel.recentMessage, 65)
|
||||
:
|
||||
channel.recentMessage
|
||||
}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<p>You don't have any DMs yet</p>
|
||||
)
|
||||
|
||||
let messagesMarkup =
|
||||
this.state.selectedChannel !== null ? this.state.selectedChannel.messages.length > 0 ? (
|
||||
this.state.selectedChannel.messages.map((messageObj) => (
|
||||
<Grid item key={messageObj.messageId}>
|
||||
<Card
|
||||
className={
|
||||
messageObj.author === this.state.selectedChannel.recipient ? (
|
||||
classes.toMessage
|
||||
) : (
|
||||
classes.fromMessage
|
||||
)
|
||||
}
|
||||
>
|
||||
<Typography className={classes.messageContent}>{messageObj.message}</Typography>
|
||||
<Typography className={classes.messageTime}>
|
||||
{this.formatDateToString(messageObj.createdAt)}
|
||||
</Typography>
|
||||
</Card>
|
||||
</Grid>
|
||||
))
|
||||
) : (
|
||||
<p>No DMs here</p>
|
||||
) : (
|
||||
<p>Select a DM channel</p>
|
||||
);
|
||||
|
||||
let addDMMarkup = (
|
||||
<div>
|
||||
<AddCircleIcon
|
||||
style={{
|
||||
color: '#1da1f2',
|
||||
height: 82,
|
||||
width: 82,
|
||||
marginTop: 9,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
aria-describedby={id}
|
||||
onClick={this.handleOpenAddDMPopover}
|
||||
/>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={this.state.anchorEl}
|
||||
onClose={this.handleCloseAddDMPopover}
|
||||
anchorOrigin={{
|
||||
vertical: 'center',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
height: 200,
|
||||
width: 400
|
||||
}}
|
||||
>
|
||||
<Grid container>
|
||||
<Grid item sm />
|
||||
<Grid item style={{ height: 200, width: 285 }}>
|
||||
<Grid container direction="column" spacing={2}>
|
||||
<Grid item>
|
||||
<Typography style={{ marginTop: 15 }}>
|
||||
Who would you like to start a DM with?
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
onChange={this.handleChangeAddDMUsername}
|
||||
value={this.state.createDMUsername}
|
||||
label="Username"
|
||||
variant="outlined"
|
||||
helperText={errors.createDirectMessage}
|
||||
error={errors.createDirectMessage ? true : false}
|
||||
style={{
|
||||
width: 265,
|
||||
marginRight: 10,
|
||||
marginLeft: 10,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
className={classes.createButton}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={this.handleClickCreate}
|
||||
disabled={
|
||||
creatingDirectMessage ||
|
||||
this.state.createDMUsername === ""
|
||||
}
|
||||
>
|
||||
Create
|
||||
{creatingDirectMessage &&
|
||||
// Won't accept classes style for some reason
|
||||
<CircularProgress size={30} style={{position: "absolute"}}/>
|
||||
}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
</Box>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
loadingDirectMessages ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
|
||||
(dmEnabled !== undefined && dmEnabled !== null && !dmEnabled ? <Typography>Oops! It looks like you have DMs disabled. You can enable them on the Edit Profile page.</Typography> :
|
||||
<Grid container className={classes.pageContainer}>
|
||||
<Grid item className={classes.sidePadding} sm />
|
||||
<Grid item className={classes.dmList}>
|
||||
<Grid container direction="column">
|
||||
<Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
|
||||
{dmListMarkup}
|
||||
</Grid>
|
||||
<Grid item className={classes.dmItemsLower}>
|
||||
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
|
||||
<Box className={classes.dmListItemContainer}>
|
||||
{addDMMarkup}
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item className={classes.messagesGrid} sm>
|
||||
<Box>
|
||||
{this.state.hasChannelSelected && (
|
||||
<Card className={classes.messagesBox}>
|
||||
<Box className={classes.messagesContainer} id="messagesContainer">
|
||||
<Grid container direction="column">
|
||||
{messagesMarkup}
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box className={classes.writeMessage}>
|
||||
<TextField
|
||||
className={classes.messageTextField}
|
||||
variant="outlined"
|
||||
multiline
|
||||
rows={2}
|
||||
margin="dense"
|
||||
disabled={!this.state.selectedChannel.hasDirectMessagesEnabled}
|
||||
value={
|
||||
!this.state.selectedChannel.hasDirectMessagesEnabled ?
|
||||
"This user has DMs disabled"
|
||||
:
|
||||
this.state.drafts[this.state.selectedChannel.dmId] ?
|
||||
this.state.drafts[this.state.selectedChannel.dmId]
|
||||
:
|
||||
""
|
||||
}
|
||||
onChange={this.handleChangeMessage}
|
||||
/>
|
||||
<Fab
|
||||
className={classes.messageButton}
|
||||
onClick={this.handleClickSend}
|
||||
disabled={
|
||||
sendingDirectMessage ||
|
||||
!this.state.drafts[this.state.selectedChannel.dmId] ||
|
||||
this.state.drafts[this.state.selectedChannel.dmId] === ""
|
||||
}
|
||||
>
|
||||
<SendIcon style={{ color: '#FFFFFF' }} />
|
||||
{
|
||||
sendingDirectMessage &&
|
||||
<CircularProgress size={30} style={{position: "absolute"}}/>
|
||||
// Won't accept classes style for some reason
|
||||
}
|
||||
</Fab>
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
{!this.state.hasChannelSelected &&
|
||||
this.state.dmData && <Typography>Select a DM on the left</Typography>}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item className={classes.sidePadding} sm />
|
||||
</Grid>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
directMessages.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
getDirectMessages: PropTypes.func.isRequired,
|
||||
createNewDirectMessage: PropTypes.func.isRequired,
|
||||
getNewDirectMessages: PropTypes.func.isRequired,
|
||||
reloadDirectMessageChannels: PropTypes.func.isRequired,
|
||||
sendDirectMessage: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user,
|
||||
UI: state.UI,
|
||||
directMessages: state.data.directMessages
|
||||
});
|
||||
|
||||
const mapActionsToProps = {
|
||||
getDirectMessages,
|
||||
createNewDirectMessage,
|
||||
getNewDirectMessages,
|
||||
reloadDirectMessageChannels,
|
||||
sendDirectMessage
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(directMessages));
|
||||
Loading…
Reference in New Issue
Block a user