<commit_before>import React, { Component } from "react";
import ImageGallery from "react-image-gallery";

export default class MagazineViewer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: true
        };
    }

    componentDidMount() {
        document.body.addEventListener("click", () => {
            this.hideThumbnails();
        });

        document.body.addEventListener("keydown", e => {
            if (e.keyCode === 27) {
                this.hideThumbnails();
            }
        });
    }

    render() {
        const { magazine: { title, pages }, params: { id } } = this.props;
        const { loading } = this.state;
        const items = pages.map((page, i) => {
            page.thumbnailLabel = (`00${i}`).slice(-3);
            return page;
        });

        return (
            <div id={id} className="magazine-viewer" style={{
                height: window.innerHeight * .85
            }}>
                <h3 className="magazine-viewer__title">{title}</h3>
                {loading && <img id={`loading ${id}`} className="loading" src="/src/images/Eclipse.svg" />}
                <ImageGallery
                    showPlayButton={false}
                    onThumbnailClick={this.hideThumbnails}
                    items={items}
                    onImageLoad={() => this.setState({ loading: false })}
                />
                <div className="thumbnail-wrapper" onClick={this.showThumbnails}>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                </div>
            </div>
        );
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.loading && !this.state.loading) {
            const gallery = document.querySelector(".image-gallery");
            const thumbnailWrapper = document.querySelector(".thumbnail-wrapper");

            gallery.style.visibility = "inherit";
            thumbnailWrapper.style.visibility = "inherit";
        }
    }

    showThumbnails() {
        const thumbnails = document.querySelector(".image-gallery-thumbnails-wrapper");
        if (thumbnails) {
            thumbnails.style.display = "flex";
        }
    }
<commit_msg>Add magazine gallery image hash state<commit_after>import React, { Component } from "react";
import ImageGallery from "react-image-gallery";
import _ from "underscore";

export default class MagazineViewer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: true
        };
    }

    componentDidMount() {
        document.body.addEventListener("click", () => {
            this.hideThumbnails();
        });

        document.body.addEventListener("keydown", e => {
            if (e.keyCode === 27) {
                this.hideThumbnails();
            }
        });
    }

    render() {
        const { magazine: { title, pages }, params: { id } } = this.props;
        const { loading } = this.state;
        const items = pages.map((page, i) => {
            page.thumbnailLabel = (`00${i}`).slice(-3);
            return page;
        });
        const hash = parseInt(window.location.hash.slice(1), 10);
        const startIndex = hash < items.length - 1 ? hash : 0;

        return (
            <div id={id} className="magazine-viewer" style={{
                height: window.innerHeight * .85
            }}>
                <h3 className="magazine-viewer__title">{title}</h3>
                {loading && <img id={`loading ${id}`} className="loading" src="/src/images/Eclipse.svg" />}
                <ImageGallery
                    showPlayButton={false}
                    startIndex={startIndex}
                    onThumbnailClick={this.hideThumbnails}
                    items={items}
                    onImageLoad={() => this.setState({ loading: false })}
                    onSlide={index => {
                        if (_.isNumber(index) && !_.isNaN(index)) {
                            window.location.hash = index;
                        }
                    }}
                />
                <div className="thumbnail-wrapper" onClick={this.showThumbnails}>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                    <div className="thumbnail" onClick={this.showThumbnails}></div>
                </div>
            </div>
        );
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.loading && !this.state.loading) {
            const gallery = document.querySelector(".image-gallery");
            const thumbnailWrapper = document.querySelector(".thumbnail-wrapper");

            gallery.style.visibility = "inherit";
            thumbnailWrapper.style.visibility = "inherit";
        }
    }

    showThumbnails() {
        const thumbnails = document.querySelector(".image-gallery-thumbnails-wrapper");
        if (thumbnails) {
            thumbnails.style.display = "flex";
        }
    }

{'fraction_non_alphanumeric': 0.13388581952117865, 'fraction_numerical': 0.00423572744014733, 'mean_word_length': 1.7596544715447155, 'pattern_counts': {'":': 0, '<': 36, '<?xml version=': 0, '>': 44, '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': '5091437', 'n_tokens_mistral': 1478, 'n_tokens_neox': 1416, 'n_words': 250}