u-fit/frontend/components/training.js

function calculateRating (ratings) {
  const numberOfRatings = ratings.length
  const sumOfRatings = ratings.reduce(
    (accumulator, rating) => accumulator + rating.value,
    0
  )
  console.log(ratings, sumOfRatings, numberOfRatings)
  return sumOfRatings / numberOfRatings
}

const TrainingArchive = props => (
  <div>
    <h2>Training Archive</h2>
    {console.log('archive', props)}
    <ol>
      {props.trainings.map(training => (
        <TrainingHint key={training.id} training={training} />
      ))}
    </ol>
  </div>
)

const TrainingHint = props => (
  <div>
    <div>{props.training.date}</div>
    <div>{props.training.title}</div>
  </div>
)

const Training = props => (
  <div>
    <h3>{props.training.title}</h3>
    <p>Date: {props.training.date}</p>
    <p>Location: {props.training.location}</p>
    <p>Participants: {props.training.participants.length}</p>
    <p>Rating: {calculateRating(props.training.ratings)}</p>
    <p>Content</p>
  </div>
)

export { TrainingArchive }
export default Training