@instructure/quiz-interactions/src/components/categorization/Show/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

import {ItemBodyWrapper} from '@instructure/quiz-rce/components/ItemBodyWrapper/index'

import ChoicesList from '../common/ChoicesList'
import CategoriesContainer from '../common/CategoriesContainer'
import {getSortedCategories} from '../common/utils'
import setFromArray from '../../../util/setFromArray'

/**
 ---
category: Categorization
---

  Categorization Show component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <CategorizationShow
      itemBody="Match the name of the celestial body on the left with its correct classification:"
      interactionData={{
        categoryOrder: ['uuid1', 'uuid2'],
        categories: {
          uuid1: { id: 'uuid1', itemBody: 'Planet' },
          uuid2: { id: 'uuid2', itemBody: 'Moon' }
        },
        distractors: {
          uuid3: { id: 'uuid3', itemBody: 'Mars' },
          uuid4: { id: 'uuid4', itemBody: 'Europa' },
          uuid5: { id: 'uuid5', itemBody: 'Venus' }
        }
      }}
      scoringData={{
        value: [{
          id: 'uuid1',
          scoringAlgorithm: 'AllOrNothing',
          scoringData: { value: ['uuid3'] }
        }, {
          id: 'uuid2',
          scoringAlgorithm: 'AllOrNothing',
          scoringData: { value: ['uuid4'] }
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/

export default class CategorizationShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    interactionData: PropTypes.object.isRequired,
    scoringData: PropTypes.object.isRequired,
  }

  // ===========
  //   HELPERS
  // ===========

  filterDistractors() {
    const unavailableAnswersIds = setFromArray(
      this.props.scoringData.value.reduce((accumulator, currentValue) => {
        return accumulator.concat(currentValue.scoringData.value)
      }, []),
    )

    const distractors = Object.values(this.props.interactionData.distractors).filter(
      distractor => !unavailableAnswersIds.has(distractor.id),
    )
    return distractors
  }

  parsedScoringData() {
    return this.props.scoringData.value.map(item => ({
      id: item.id,
      value: item.scoringData.value,
    }))
  }

  // ===========
  //   RENDER
  // ===========

  render() {
    const {categories, categoryOrder} = this.props.interactionData

    return (
      <ItemBodyWrapper itemBody={this.props.itemBody}>
        <CategoriesContainer
          sortedCategories={getSortedCategories(categories, categoryOrder)}
          distractors={this.props.interactionData.distractors}
          userResponseValue={this.parsedScoringData()}
        />
        <ChoicesList distractors={this.filterDistractors()} isDraggable={false} />
      </ItemBodyWrapper>
    )
  }
}