import React from 'react';

import Section from './Section';
import {EventContextDataProvider} from './useEventContextData';

export default function Chapter(props) {
  return (
    <div id={`chapter-${props.permaId}`}>
      {renderSections(props.sections,
                      props.currentSectionIndex,
                      props.setCurrentSectionIndex,
                      props.scrollTargetSectionIndex,
                      props.setScrollTargetSectionIndex)}
    </div>
  );
}

function renderSections(sections,
                        currentSectionIndex,
                        setCurrentSectionIndex,
                        scrollTargetSectionIndex,
                        setScrollTargetSectionIndex) {
  function onActivate(sectionIndex) {
    setCurrentSectionIndex(sectionIndex);
    setScrollTargetSectionIndex(null);
  }

  return sections.map((section) => {
    return (
      <EventContextDataProvider key={section.permaId} sectionIndex={currentSectionIndex}>
        <Section state={section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active'}
                 isScrollTarget={section.sectionIndex === scrollTargetSectionIndex}
                 onActivate={() => onActivate(section.sectionIndex)}
                 {...section} />
      </EventContextDataProvider>
    )
  });
}

import React from 'react';

import Section from './Section';
import {EventContextDataProvider} from './useEventContextData';

export default function Chapter(props) {
  return (
    <div id={`chapter-${props.permaId}`}>
      {renderSections(props.sections,
                      props.currentSectionIndex,
                      props.setCurrentSectionIndex,
                      props.scrollTargetSectionIndex,
                      props.setScrollTargetSectionIndex)}
    </div>
  );
}

function renderSections(sections,
                        currentSectionIndex,
                        setCurrentSectionIndex,
                        scrollTargetSectionIndex,
                        setScrollTargetSectionIndex) {
  function onActivate(sectionIndex) {
    setCurrentSectionIndex(sectionIndex);
    setScrollTargetSectionIndex(null);
  }

  return sections.map((section) => {
    return (
      <EventContextDataProvider key={section.permaId} sectionIndex={section.sectionIndex}>
        <Section state={section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active'}
                 isScrollTarget={section.sectionIndex === scrollTargetSectionIndex}
                 onActivate={() => onActivate(section.sectionIndex)}
                 {...section} />
      </EventContextDataProvider>
    )
  });
}

Use correct section index for EventContextDataProvider
Use correct section index for EventContextDataProvider

We need to pass the index of the rendered section, not the current
section. Passing the current section index causes the wrong section to
be reported in media events when a video is played that is not in the
current section but still visible in the viewport.

It also causes extra context updates and rendering.

REDMINE-17754
