Order.js

import React from 'react'
import { Segment, Header, Comment } from 'semantic-ui-react';
import _ from 'lodash/fp'

const ownerDetails = (owner) => (owner.details.name + " " + owner.details.surname)

const capitalize = (role) => role.substr(0, 1).toUpperCase() + role.substr(1)

const commentsView = (comments) => (
  <Comment.Group>
    {
       _.map((comment) => (
        <Comment key={comment.id}>
          <Comment.Content>
            <Comment.Author as='a'>{ ownerDetails(comment.user) }</Comment.Author>
            <Comment.Metadata>
              , { capitalize(comment.user.role) }
            </Comment.Metadata>
            <Comment.Text>{ comment.text }</Comment.Text>
          </Comment.Content>
        </Comment>
      ), comments)
    }
  </Comment.Group>
 )

export const Order = ({order}) => (
  <div>
    <Segment>
      <Header as="h3"> Owner </Header>
      <p> {ownerDetails(order.distributor)} </p>
      <Header as="h3"> Price </Header>
      <p> {order.price} </p>
    </Segment>

    <Segment>
    { commentsView(order.messages) }
    </Segment>
  </div>
)