<commit_before>import * as React from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { countSections } from 'core/actions/navigation'
import { getChapter } from 'core/util'
import { RootState } from 'core/reducers'
import { TocItem } from 'core/types'
import { CSSTransition, TransitionGroup } from 'react-transition-group'

type ContextProps = {
    item: TocItem
}
export const ChapterContext = React.createContext<Partial<ContextProps>>({})

export type ChapterType = {
    filename: string
}

const Chapter: React.FC<ChapterType> = ({ children, filename }) => {
    const item = useSelector((state: RootState) => getChapter(state.toc.present, filename))
    const dispatch = useDispatch()

    // On first render, record the number of sections
    React.useEffect(() => {
        dispatch(countSections(item, React.Children.count(children)))
    }, [dispatch])

    // Display all visible child sections
    const kids = React.Children.map(children, (child, index) => {
        if (React.isValidElement(child) && index <= item.bookmark) {
            return <CSSTransition {...SectionTransition}>{React.cloneElement(child)}</CSSTransition>
        }
        return null
    })

    return (
        <ChapterContext.Provider value={{ item }}>
            <TransitionGroup component={null}>{kids}</TransitionGroup>
        </ChapterContext.Provider>
    )
}

// Wraps the "new section" display in a CSS transformation
const SectionTransition = {
    classNames: 'windrift--section',
    timeout: {
        appear: 500,
        enter: 500,
        exit: 300
    },
    ariaLive: 'polite'
}
export default Chapter<commit_msg>[#59] Fix #59 scroll to top automatically<commit_after>import * as React from 'react'
import { useSelector, useDispatch } from 'react-redux'

import { countSections } from 'core/actions/navigation'
import { getChapter } from 'core/util'
import { RootState } from 'core/reducers'
import { TocItem } from 'core/types'
import { CSSTransition, TransitionGroup } from 'react-transition-group'

type ContextProps = {
    item: TocItem
}
export const ChapterContext = React.createContext<Partial<ContextProps>>({})

export type ChapterType = {
    filename: string
}

const Chapter: React.FC<ChapterType> = ({ children, filename }) => {
    const item = useSelector((state: RootState) => getChapter(state.toc.present, filename))
    const dispatch = useDispatch()

    // On first render, record the number of sections and scroll to top
    React.useEffect(() => {
        dispatch(countSections(item, React.Children.count(children)))

        document.querySelector('header').scrollIntoView()
    }, [dispatch])

    // Display all visible child sections
    const kids = React.Children.map(children, (child, index) => {
        if (React.isValidElement(child) && index <= item.bookmark) {
            return <CSSTransition {...SectionTransition}>{React.cloneElement(child)}</CSSTransition>
        }
        return null
    })

    return (
        <ChapterContext.Provider value={{ item }}>
            <TransitionGroup component={null}>{kids}</TransitionGroup>
        </ChapterContext.Provider>
    )
}

// Wraps the "new section" display in a CSS transformation
const SectionTransition = {
    classNames: 'windrift--section',
    timeout: {
        appear: 500,
        enter: 500,
        exit: 300
    },
    ariaLive: 'polite'
}
export default Chapter
{'fraction_non_alphanumeric': 0.12283279459300617, 'fraction_numerical': 0.006464883925947693, 'mean_word_length': 3.403622250970246, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6510142', 'n_tokens_mistral': 986, 'n_tokens_neox': 946, 'n_words': 252}