Skip to content

Commit

Permalink
Syntax fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@tijmenNL
tijmenNL committed Apr 30, 2024
1 parent 6c29af8 commit d0c54d2
Showing 1 changed file with 52 additions and 50 deletions.
102 changes: 52 additions & 50 deletions src/app/components/Chat/Message.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
'use strict';

const React = require('react');
const useState = React.useState;
const useEffect = React.useEffect;
const useRef = React.useRef;
const PropTypes = require('prop-types');
const React = require('react');
const useState = React.useState;
const useEffect = React.useEffect;
const useRef = React.useRef;
const PropTypes = require('prop-types');
const { default: clsx } = require('clsx');
const ReactBootstrap = require('react-bootstrap');
const Media = ReactBootstrap.Media;
const ReactBootstrap = require('react-bootstrap');
const Media = ReactBootstrap.Media;
const { default: parse } = require('html-react-parser');
const linkifyUrls = require('linkify-urls');
const { DateTime } = require('luxon');
const linkifyUrls = require('linkify-urls');
const { DateTime } = require('luxon');
const { Chip, Divider, MenuItem } = require('@material-ui/core');
const { makeStyles } = require('@material-ui/core/styles');
const { makeStyles } = require('@material-ui/core/styles');
const {
Lock: LockIcon,
Done: DoneIcon,
DoneAll: DoneAllIcon,
ErrorOutline: ErrorOutlineIcon
} = require('@material-ui/icons');
const { useInView } = require('react-intersection-observer');
const { useInView } = require('react-intersection-observer');

const CustomContextMenu = require('../CustomContextMenu');
const UserIcon = require('../UserIcon');
const UserIcon = require('../UserIcon');


const styleSheet = makeStyles((theme) => ({
Expand Down Expand Up @@ -65,6 +65,7 @@ const Message = ({
focus,
contactCache,
removeMessage,
editMessage,
imdnStates,
enableMenu
}) => {
Expand All @@ -74,7 +75,7 @@ const Message = ({
const messageRef = useRef(null);
const [anchorEl, setAnchorEl] = useState(null);

const sender = message.sender.displayName || message.sender.uri;
const sender = message.sender.displayName || message.sender.uri;
const time = DateTime.fromJSDate(message.timestamp).toFormat('HH:mm');
const { ref, inView, entry } = useInView({
threshold: 0
Expand All @@ -99,7 +100,8 @@ const Message = ({
useEffect(() => {
if (parsedContent !== undefined) {
scroll()
}}, [parsedContent, scroll]
}
}, [parsedContent, scroll]
);

useEffect(() => {
Expand All @@ -115,8 +117,8 @@ const Message = ({
let url = linkifyUrls(preHtmlEntities(domNode.data), {
customUrlRegexp,
attributes: {
target : '_blank',
rel : 'noopener noreferrer'
target: '_blank',
rel: 'noopener noreferrer'
}
});
return (<span>{parse(postHtmlEntities(url))}</span>);
Expand All @@ -131,19 +133,19 @@ const Message = ({
const linkfiedContent = linkifyUrls(preHtmlEntities(message.content), {
customUrlRegexp,
attributes: {
target : '_blank',
rel : 'noopener noreferrer'
target: '_blank',
rel: 'noopener noreferrer'
}
})

setParsedContent (
setParsedContent(
<pre>{parse(postHtmlEntities(linkfiedContent))}</pre>
);
} else if (message.contentType === 'text/pgp-public-key') {
setParsedContent(
<Chip
component="span"
classes={{sizeSmall: classes.chipSmall, iconSmall: classes.iconSmall}}
classes={{ sizeSmall: classes.chipSmall, iconSmall: classes.iconSmall }}
variant="outlined"
size="small"
icon={<LockIcon />}
Expand Down Expand Up @@ -173,7 +175,7 @@ const Message = ({
}, [message, classes]) // eslint-disable-line react-hooks/exhaustive-deps

const scrollToMessage = () => {
messageRef.current.scrollIntoView({behavior: 'smooth'})
messageRef.current.scrollIntoView({ behavior: 'smooth' })
};

useEffect(() => {
Expand All @@ -189,36 +191,36 @@ const Message = ({
}, [inView, isDisplayed]);

let theme = clsx({
'text-left' : true,
'pending' : state === 'pending',
'text-danger' : state === 'failed' || state === 'error',
'continued' : cont && message.type !== 'status',
'status' : message.type === 'status'
'text-left': true,
'pending': state === 'pending',
'text-danger': state === 'failed' || state === 'error',
'continued': cont && message.type !== 'status',
'status': message.type === 'status'
});

const statusIcon = () => {
if (state === 'accepted') {
return (<DoneIcon style={{color: '#888'}} className={classes.doneIcon}/>);
return (<DoneIcon style={{ color: '#888' }} className={classes.doneIcon} />);
}
if (state === 'delivered') {
return (<DoneIcon className={classes.doneIcon}/>);
return (<DoneIcon className={classes.doneIcon} />);
}
if (state === 'displayed') {
return (<DoneAllIcon className={classes.doneIcon} />);
}
if (state === 'failed') {
return (<ErrorOutlineIcon className={classes.errorOutlineIcon} titleAccess="Not Delivered"/>);
return (<ErrorOutlineIcon className={classes.errorOutlineIcon} titleAccess="Not Delivered" />);
}
if (state === 'error') {
return (<ErrorOutlineIcon className={classes.errorOutlineIcon} titleAccess="Display Error"/>);
return (<ErrorOutlineIcon className={classes.errorOutlineIcon} titleAccess="Display Error" />);
}
};

const getDisplayName = (uri) => {
if (contactCache !== undefined && contactCache.has(uri)) {
return {uri: uri, displayName: contactCache.get(uri)};
return { uri: uri, displayName: contactCache.get(uri) };
}
return {uri: uri};
return { uri: uri };
};

const handleContextMenu = (e) => {
Expand Down Expand Up @@ -268,60 +270,60 @@ const Message = ({
if (cont || message.type === 'status') {
return (
<div ref={ref}>
<Media className={theme} onContextMenu = {handleContextMenu}>
<Media className={theme} onContextMenu={handleContextMenu}>
{enableMenu && message.type !== 'status' &&
<CustomContextMenu
open = {Boolean(anchorEl)}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose = {handleClose}
keepMounted = {false}
onClose={handleClose}
keepMounted={false}
>
<MenuItem className={classes.item} onClick={() => {copy(); handleClose()}}>
<MenuItem className={classes.item} onClick={() => { copy(); handleClose() }}>
Copy
</MenuItem>
<Divider />
<MenuItem className={classes.item} onClick={() => {_removeMessage(); handleClose()}}>
<MenuItem className={classes.item} onClick={() => { _removeMessage(); handleClose() }}>
Remove Message
</MenuItem>
</CustomContextMenu>
}

<div ref={messageRef} />
{ message.type !== 'status' &&
<Media.Left className="timestamp-continued"><span>{time}</span></Media.Left>
{message.type !== 'status' &&
<Media.Left className="timestamp-continued"><span>{time}</span></Media.Left>
}
<Media.Body className="vertical-center">
{parsedContent}
</Media.Body>
<Media.Right>
<span className="pull-right" style={{paddingRight: '15px', whiteSpace: 'nowrap'}}>
<span className="pull-right" style={{ paddingRight: '15px', whiteSpace: 'nowrap' }}>
{message.isSecure && <LockIcon className={classes.lockIcon} />}
{statusIcon()}
{ message.type === 'status' &&
{message.type === 'status' &&
<pre>{time}</pre>
}
</span>
</Media.Right>
</Media>
</div>
</div >
);
}

return (
<div ref={ref}>
<Media className={theme} onContextMenu = {handleContextMenu}>
<Media className={theme} onContextMenu={handleContextMenu}>
{enableMenu &&
<CustomContextMenu
open = {Boolean(anchorEl)}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose = {handleClose}
keepMounted = {false}
onClose={handleClose}
keepMounted={false}
>
<MenuItem className={classes.item} onClick={() => {copy(); handleClose()}}>
<MenuItem className={classes.item} onClick={() => { copy(); handleClose() }}>
Copy
</MenuItem>
<Divider />
<MenuItem className={classes.item} onClick={() => {_removeMessage(); handleClose()}}>
<MenuItem className={classes.item} onClick={() => { _removeMessage(); handleClose() }}>
Remove Message
</MenuItem>
</CustomContextMenu>
Expand All @@ -334,7 +336,7 @@ const Message = ({
<Media.Heading>
{getDisplayName(message.sender.uri).displayName || sender}&nbsp;
<span>{time}</span>
<span className="pull-right" style={{paddingRight: '15px'}}>
<span className="pull-right" style={{ paddingRight: '15px' }}>
{message.isSecure && <LockIcon className={classes.lockIcon} />}
{statusIcon()}
</span>
Expand Down

0 comments on commit d0c54d2

Please sign in to comment.