Video 3732 create message components

[olipyskoty]

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

JIRA link(s):

• VIDEO-3732

Description

This PR added a MessageList component that renders the components MessageInfo and TextMessage (there will be a MediaMessage component soon in a future PR). The ChatWindow component is rendering MessageList and will pass an array of messages to it as a prop. For now, that data is hard-coded in ChatWindow. Once the remaining hooks are "hooked up", we will grab those messages from useChatContext().

web:

mobile:

Burndown

Before review

• Updated CHANGELOG.md if necessary
• Added unit tests if necessary
• Updated affected documentation
• Verified locally with npm test
• Manually sanity tested running locally
• Included screenshot as PR comment (if needed)
• Ready for review

Before merge

• Got one or more +1s
• Re-tested if necessary

[timmydoza]

I think a hardcoded date could fix the failing CI build (I think it must be time zone related).

Something like: new Date(1614634697422)

[timmydoza]

Nit - I think here we can have

const isLocalParticipant = localParticipant.identity === message.author;

Then isLocalParticipant can be passed as a prop to MessageInfo and TextMessage (and maybe MediaMessage in the future).

This way, the localParticipant.identity === message.author check is done only once per message, instead of twice (once by MessageInfo and once for TextMessage).

[olipyskoty]

nice, i'll have to remember this one👍 . this also allowed me to remove the author prop from the TextMessage component since we were only using it to check whether the message author was the localParticipant

[timmydoza]

I don't think this div is needed.

Suggested change

	<div>{body}</div>
	{body}

[timmydoza]

Suggested change

	import { makeStyles, createStyles } from '@material-ui/core/styles';
	const useStyles = makeStyles(() =>
	createStyles({
	messageInfoContainer: {
	display: 'flex',
	justifyContent: 'space-between',
	alignItems: 'center',
	padding: '1.425em 0 0.083em',
	fontSize: '12px',
	color: '#606B85',
	},
	})
	);
	import { makeStyles } from '@material-ui/core/styles';
	const useStyles = makeStyles({
	messageInfoContainer: {
	display: 'flex',
	justifyContent: 'space-between',
	alignItems: 'center',
	padding: '1.425em 0 0.083em',
	fontSize: '12px',
	color: '#606B85',
	},
	});