import React, { Component } from 'react'
import StarRatingComponent from 'react-star-rating-component'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardHeader from '@material-ui/core/CardHeader'
import Avatar from '@material-ui/core/Avatar'

import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'

import DateRangeIcon from '@material-ui/icons/DateRange'
import LinkIcon from '@material-ui/icons/Link'

import { isArray } from 'lodash'

class Review extends Component {
  
  datePublished(datePublished) {
    if (datePublished) {
      return (
        <ListItem>
            <ListItemIcon><DateRangeIcon /></ListItemIcon>
            <ListItemText
                primary={datePublished}
            />
        </ListItem>
      )
    }
  }
  
  url(url) {
    if(url) {
      return (
        <ListItem>
            <ListItemIcon><LinkIcon /></ListItemIcon>
            <ListItemText
                primary={<a href={url}>{url}</a>}
            />
        </ListItem>
      )
    }
  }

  detailedReview(detailed_review) {
    if (isArray(detailed_review)) {
      return detailed_review
        .filter(dr => Boolean(dr && dr.rating))
        .map(dr => (      
          <ListItem>
            <ListItemText
                primary={
                  <div>
                    <div>{dr.category}</div>
                    <div>
                      <StarRatingComponent name='rating' starCount={dr.rating.max} value={dr.rating.value} />
                    </div>
                  </div>}
                secondary={dr.review}
            />
          </ListItem>
        ))
    }
  }
  
  render() {
    const { review, index } = this.props
    return (
      <Card>
        <CardHeader
          avatar={<Avatar aria-label='review-author'> {index} </Avatar>}
          title={
            <StarRatingComponent
              name='rating'
              starCount={review.rating ? review.rating.max : 5}
              value={review.rating? review.rating.value : 0}
            />
          }
          subheader={review.author ? review.author.name : 'Unknown Author'}
        />
        {review.review && <CardContent>
          <List disablePadding>
            <ListItem>
              <ListItemText
                  primary={review.review.title}
                  secondary={review.review.text}
              />
            </ListItem>
            {this.datePublished(review.review.date_published)}
            {this.url(review.review.url)}
            {this.detailedReview(review.detailed_review)}
          </List>
        </CardContent>}
      </Card>
    )
  }  
}

export default Review

@@ -34,16 +34,57 @@
 'react'%0A
+import %7B Link %7D from %22react-router-dom%22%0A%0A
 import S
@@ -133,24 +133,24 @@
 -component'%0A
-
 import Card 
@@ -666,16 +666,28 @@
  isArray
+, isNil, get
  %7D from 
@@ -1848,24 +1848,497 @@
 ))%0A    %7D%0A  %7D
+%0A%0A  platform(review) %7B%0A    if (review.platform && review.platform.name && review.platform.url) %7B%0A      return %3Cspan%3E Review Origin: %3CLink to=%7Breview.platform.url%7D%3E%7Breview.platform.name%7D %3C/Link%3E %3C/span%3E%0A    %7D else %7B%0A      return 'Review Origin: unknown'%0A    %7D%0A  %7D%0A%0A  reviewUrl(review) %7B%0A    if (review.url) %7B%0A      return %3Cspan%3E Review link: %3CLink to=%7Breview.review.url%7D%3E%7Breview.review.url%7D %3C/Link%3E %3C/span%3E%0A    %7D else %7B%0A      return 'Review link: No url available'%0A    %7D%0A  %7D
 %0A  %0A  render
@@ -2758,23 +2758,57 @@
 er=%7B
+isNil(get(
 review
-.
+, '
 author
- ?
+.name')) ? 'Anonymous' :
  rev
@@ -2827,26 +2827,8 @@
 ame 
-: 'Unknown Author'
 %7D%0A  
@@ -3005,16 +3005,39 @@
 ew.title
+ %7C%7C 'No title provided'
 %7D%0A      
@@ -3077,16 +3077,40 @@
 iew.text
+ %7C%7C 'No review provided'
 %7D%0A      
@@ -3249,16 +3249,16 @@
 w.url)%7D%0A
-
         
@@ -3307,16 +3307,503 @@
 eview)%7D%0A
+            %3CListItem%3E%0A              %3CListItemText%0A                  primary=%7Bthis.platform(review)%7D%0A              /%3E%0A            %3C/ListItem%3E%0A            %3CListItem%3E%0A              %3CListItemText%0A                  primary=%7B%60Verifiable: $%7B(isNil(review.verifiable) %7C%7C !review.verifiable ? 'No' : 'Yes' )%7D%60%7D%0A              /%3E%0A            %3C/ListItem%3E%0A            %3CListItem%3E%0A              %3CListItemText%0A                  primary=%7Bthis.reviewUrl(review)%7D%0A              /%3E%0A            %3C/ListItem%3E%0A
         

Fix review rendering to show platform, review url and verifiable flag