/** * Copyright 2019 IBM Corp. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the 'License'); you may not * use this file except in compliance with the License. You may obtain a copy of * the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations under * the License. */ import React from 'react'; import PropTypes from 'prop-types'; import { List, Image } from 'semantic-ui-react'; /** * This object renders the results of the search query on the web page. * Each result item, or 'match', will display a title, description, and * sentiment value. */ const Message = props => ( <List.Item className={ props.className }> <Image avatar src={ props.image } /> <List.Content className='message-text' > { props.text } </List.Content> </List.Item> ); // type check to ensure we are called correctly Message.propTypes = { text: PropTypes.string.isRequired, className: PropTypes.string.isRequired, image: PropTypes.string.isRequired }; const Messages = props => ( <div> <List relaxed='very'> {props.messages.map(item => <Message key={ item.id } text={ item.text } className = { getClassName(item) } image = { getImage(item) } />) } </List> </div> ); const getClassName = item => { if (item.owner === 'user') { return 'right-item-list'; } else { return 'left-item-list'; } }; const getImage = item => { if (item.owner === 'user') { return 'https://semantic-ui.com/images/avatar/small/stevie.jpg'; } else { return '/images/watson.png'; } }; // type check to ensure we are called correctly Messages.propTypes = { messages: PropTypes.arrayOf(PropTypes.object).isRequired }; // export so we are visible to parent module.exports = Messages;