@instructure/quiz-taking/src/components/layout/Sidebar/SidebarItem/presenter.js

/** @jsx jsx */
import {Component} from 'react'
import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import {jsx} from '@instructure/emotion'
import t from '@instructure/quiz-i18n/format-message'

import {SidebarItem as CommonSidebarItem} from '@instructure/quiz-core/common/components/layout/sidebar/SidebarItem/index'
import {Pin} from '@instructure/quiz-core/common/components/Pin/index'

import generateStyle from './styles'
import generateComponentTheme from './theme'
import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'

class BaseTakingSidebarItem extends Component {
  static displayName = 'TakingSidebarItem'
  static componentId = `Quizzes${this.displayName}`

  static propTypes = {
    // Passed in by the Sidebar
    inStimulus: PropTypes.bool,
    itemBody: PropTypes.string,
    itemName: PropTypes.string.isRequired,
    pointsPossible: PropTypes.number.isRequired,
    position: PropTypes.number.isRequired,
    // Used by mapStateToProps in index.js for response lookup
    // eslint-disable-next-line react/no-unused-prop-types
    actualPosition: PropTypes.number.isRequired,
    quizEntryId: PropTypes.string.isRequired,
    scrollToItem: PropTypes.func.isRequired,
    sidebarOpen: PropTypes.bool.isRequired,
    // Passes in by connect
    isAnswered: PropTypes.bool.isRequired,
    isPinned: PropTypes.bool.isRequired,
    pinSessionItem: PropTypes.func.isRequired,
    quizSession: ImmutablePropTypes.recordOf({
      id: PropTypes.string.isRequired,
    }).isRequired,
    screenreaderNotification: PropTypes.func.isRequired,
    /* eslint-disable-next-line react/forbid-prop-types, react/require-default-props */
    styles: PropTypes.object,
  }

  static defaultProps = {
    inStimulus: false,
    itemBody: '',
  }

  pinSessionItem = isPinned => () => {
    const {pinSessionItem, quizSession, position, screenreaderNotification} = this.props
    const confirmationMessage = isPinned ? t('Question unpinned') : t('Question pinned')
    pinSessionItem(quizSession.id, position).then(() => {
      screenreaderNotification(confirmationMessage)
    })
  }

  renderPin() {
    const {isPinned, position} = this.props
    return (
      <Pin isPinned={isPinned} pinSessionItem={this.pinSessionItem(isPinned)} position={position} />
    )
  }

  renderUnansweredMarkings() {
    return (
      <div
        css={this.props.styles.unansweredDot}
        data-automation="sdk-take-sidebar-item-unanswered-dot"
      />
    )
  }

  render() {
    return (
      <div css={this.props.styles.itemWrapper}>
        {!this.props.isAnswered && this.renderUnansweredMarkings()}
        <CommonSidebarItem
          itemBody={this.props.itemBody}
          itemId={this.props.quizEntryId}
          itemName={this.props.itemName}
          inStimulus={this.props.inStimulus}
          isAnswered={this.props.isAnswered}
          pointsPossible={this.props.pointsPossible}
          position={this.props.position}
          scrollToItem={this.props.scrollToItem}
          sidebarOpen={this.props.sidebarOpen}
        >
          {this.renderPin()}
        </CommonSidebarItem>
      </div>
    )
  }
}

export const TakingSidebarItem = withStyleOverrides(
  generateStyle,
  generateComponentTheme,
)(BaseTakingSidebarItem)

export default TakingSidebarItem