ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 02:08:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix DM message content overflowing

Browse Source
This commit is contained in:
Clayton Wilson 2019-11-27 21:52:14 -05:00
parent 731e01c552
commit f7ef0cb333
3 changed files with 108 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
twistter-frontend/package.json
View File

@ -21,7 +21,8 @@
"react-scripts": "0.9.5", "react-scripts": "0.9.5",
"redux": "^4.0.4", "redux": "^4.0.4",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"typeface-roboto": "0.0.75" "typeface-roboto": "0.0.75",
"underscore": "^1.9.1"
}, },
"devDependencies": {}, "devDependencies": {},
"scripts": { "scripts": {

144
twistter-frontend/src/pages/directMessages.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
import _ from "underscore";
// Material UI // Material UI
import Box from '@material-ui/core/Box'; import Box from '@material-ui/core/Box';
@ -75,24 +76,35 @@ const styles = {
marginTop: 5 marginTop: 5
}, },
dmRecentMessageSelected: { dmRecentMessageSelected: {
wordBreak: "break-all",
color: '#D6D6D6' color: '#D6D6D6'
}, },
dmRecentMessageUnselected: { dmRecentMessageUnselected: {
wordBreak: "break-all",
color: 'black' color: 'black'
}, },
dmListItemContainer: { dmListItemContainer: {
height: 100 height: 100
}, },
dmListLayoutContainer: {
height: "100%"
},
dmListRecentMessage: {
marginLeft: 10,
marginRight: 10
},
dmListTextLayout: { dmListTextLayout: {
height: '100%' height: 30
}, },
dmCardUnselected: { dmCardUnselected: {
fontSize: 20, fontSize: 20,
backgroundColor: '#FFFFFF' backgroundColor: '#FFFFFF',
width: 300
}, },
dmCardSelected: { dmCardSelected: {
fontSize: 20, fontSize: 20,
backgroundColor: '#1da1f2' backgroundColor: '#1da1f2',
width: 300
}, },
messagesGrid: { messagesGrid: {
// // margin: "auto" // // margin: "auto"
@ -124,7 +136,7 @@ const styles = {
minWidth: 150, minWidth: 150,
maxWidth: 350, maxWidth: 350,
minHeight: 40, minHeight: 40,
marginLeft: 2, marginLeft: 15,
marginTop: 2, marginTop: 2,
marginBottom: 10, marginBottom: 10,
backgroundColor: '#008394', backgroundColor: '#008394',
@ -132,6 +144,9 @@ const styles = {
float: 'left' float: 'left'
}, },
messageContent: { messageContent: {
// maxWidth: 330,
// width: 330,
wordBreak: "break-all",
textAlign: 'left', textAlign: 'left',
marginLeft: 5, marginLeft: 5,
marginRight: 5 marginRight: 5
@ -207,12 +222,12 @@ export class directMessages extends Component {
componentDidMount() { componentDidMount() {
this.props.getDirectMessages(); this.props.getDirectMessages();
this.updatePage(); // this.updatePage();
} }
// Updates the state whenever redux is updated // Updates the state whenever redux is updated
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.directMessages) { if (nextProps.directMessages && !_.isEqual(nextProps.directMessages, this.state.dmData)) {
this.setState({ dmData: nextProps.directMessages}, () => { this.setState({ dmData: nextProps.directMessages}, () => {
if (this.state.selectedChannel) { if (this.state.selectedChannel) {
this.state.dmData.forEach((channel) => { this.state.dmData.forEach((channel) => {
@ -244,16 +259,22 @@ export class directMessages extends Component {
this.setState({ this.setState({
hasChannelSelected: true hasChannelSelected: true
}); });
const dmItemsUpper = document.getElementById("dmItemsUpper");
let target = event.target;
let dmChannelKey; let dmChannelKey;
// Determine which DM channel was clicked by finding the key // Determine which DM channel was clicked by finding the data-key.
// An if statement is needed because the user could click the card or the typography // A while loop is necessary, because the user can click on any part of the
if (event.target.parentNode.parentNode.parentNode.dataset.key === undefined) { // DM list item. dmItemsUpper is the list container of the dmItems
// They clicked text while (target !== dmItemsUpper) {
dmChannelKey = event.target.parentNode.parentNode.parentNode.parentNode.dataset.key; dmChannelKey = target.dataset.key;
} else {
// They clicked the background/card if (dmChannelKey) {
dmChannelKey = event.target.parentNode.parentNode.parentNode.dataset.key; break;
} else {
target = target.parentNode;
}
} }
// Save the entire DM channel in the state so that it is easier to load the messages // Save the entire DM channel in the state so that it is easier to load the messages
@ -275,6 +296,21 @@ export class directMessages extends Component {
return dayjs(dateString).fromNow(); 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) => { handleOpenAddDMPopover = (event) => {
this.setState({ this.setState({
anchorEl: event.currentTarget anchorEl: event.currentTarget
@ -352,20 +388,41 @@ export class directMessages extends Component {
} }
> >
<Box className={classes.dmListItemContainer}> <Box className={classes.dmListItemContainer}>
<Grid container className={classes.dmListTextLayout}> <Grid container direction="column" className={classes.dmListLayoutContainer} spacing={1}>
<Grid item sm /> <Grid item>
<Grid item sm> <Grid container className={classes.dmListTextLayout}>
<Typography <Grid item sm />
className={ <Grid item sm>
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? ( <Typography
classes.dmItemUsernameSelected className={
) : ( this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
classes.dmItemUsernameUnselected classes.dmItemUsernameSelected
) ) : (
} classes.dmItemUsernameUnselected
> )
{channel.recipient} }
</Typography> >
{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 <Typography
className={ className={
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? ( this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? (
@ -375,22 +432,15 @@ export class directMessages extends Component {
) )
} }
> >
{channel.recentMessage ? channel.recentMessage : 'No messages'} {
</Typography> !channel.recentMessage ?
</Grid> 'No messages'
<Grid item sm> :
<Typography channel.recentMessage.length > 65 ?
className={ this.shortenText(channel.recentMessage, 65)
this.state.selectedChannel && this.state.selectedChannel.dmId === channel.dmId ? ( :
classes.dmItemTimeSelected channel.recentMessage
) : (
classes.dmItemTimeUnselected
)
} }
>
{channel.recentMessageTimestamp ? (
this.formatDateToTimeDiff(channel.recentMessageTimestamp)
) : null}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
@ -518,7 +568,7 @@ export class directMessages extends Component {
<Grid item className={classes.sidePadding} sm /> <Grid item className={classes.sidePadding} sm />
<Grid item className={classes.dmList}> <Grid item className={classes.dmList}>
<Grid container direction="column"> <Grid container direction="column">
<Grid item className={classes.dmItemsUpper}> <Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
{dmListMarkup} {dmListMarkup}
</Grid> </Grid>
<Grid item className={classes.dmItemsLower}> <Grid item className={classes.dmItemsLower}>
@ -553,9 +603,9 @@ export class directMessages extends Component {
className={classes.messageButton} className={classes.messageButton}
onClick={this.handleClickSend} onClick={this.handleClickSend}
disabled={ disabled={
sendingDirectMessage sendingDirectMessage ||
// !this.state.drafts[this.state.selectedChannel.dmId] || !this.state.drafts[this.state.selectedChannel.dmId] ||
// this.state.drafts[this.state.selectedChannel.dmId] !== "" this.state.drafts[this.state.selectedChannel.dmId] === ""
} }
> >
<SendIcon style={{ color: '#FFFFFF' }} /> <SendIcon style={{ color: '#FFFFFF' }} />

9
twistter-frontend/src/redux/actions/dataActions.js
View File

@ -25,6 +25,15 @@ export const getDirectMessages = () => (dispatch) => {
dispatch({type: SET_NOT_LOADING_UI_2}); dispatch({type: SET_NOT_LOADING_UI_2});
dispatch({type: CLEAR_ERRORS}); dispatch({type: CLEAR_ERRORS});
}) })
.catch((err) => {
console.error(err);
dispatch({
type: SET_ERRORS,
payload: {
errors: err.response.data.error
}
});
})
} }
export const getNewDirectMessages = () => (dispatch) => { export const getNewDirectMessages = () => (dispatch) => {