<commit_before>import React, { Component } from 'react'
import firebase from 'firebase'
import { withRouter } from 'react-router-dom'
import QuillViewer from './QuillViewer'
import QuizViewer from './QuizViewer'
import VRViewer from './mediaviewer/VRViewer'

import { getSlideType } from '../../helpers'

class SlideCanvasViewer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      info: null,
      slides: null,
      type: null,
      counter: 0,
      slideID: null
    }
    this.submitSlideText = this.submitSlideText.bind(this)
  }

  componentDidMount() {
    const { presentationID } = this.props.match.params
    firebase.database()
      .ref(`presentations/${presentationID}/active`)
      .on('value', snapshot => {
        const activeSlideId = snapshot.val()

        if (activeSlideId) {
          this.setState({
            slideID: activeSlideId,
            type: getSlideType(presentationID, activeSlideId)
          })
        }
      })

    const slides = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
    slides.on('value', (snapshot) => {
      const allslides = snapshot.val()
      this.setState({slides: allslides})
    })
  }

  componentWillUnmount() {
    const firstSlide = Object.keys(this.state.slides)[0]
    firebase.database()
      .ref(`/presentations/${this.props.presID}/active`)
      .set(firstSlide)
  }

  submitSlideText(evt) {
    evt.preventDefault()
  }

  toggleBack = () => {
    const currSlide = Object.keys(this.state.slides)[(this.state.counter - 1)]
    const slide = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
      .child(currSlide)
    slide.on('value', (snapshot) => {
      const value = snapshot.val()
      this.setState({
        info: value,
        type: value.type,
        counter: --this.state.counter,
        slideID: currSlide
      })
    })
    const presentation = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
    presentation.child('active').set(currSlide)
  }

  toggleFoward = () => {
    const currSlide = Object.keys(this.state.slides)[(this.state.counter + 1)]
    const slide = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
      .child(currSlide)

    slide.on('value', (snapshot) => {
      const value = snapshot.val()
      this.setState({
        info: value,
        type: value.type,
        counter: ++this.state.counter,
        slideID: currSlide
      })
    })
    const presentation = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
    presentation.child('active').set(currSlide)
  }

  render() {
    const type = this.state.type
    let typeComp = null
    if (type === 'quill') {
      typeComp = <QuillViewer presID={this.props.presID} slideID={this.state.slideID} />
    } else if (type === 'VR') {
      typeComp = <VRViewer
        obj={this.state.info.VRContents.VRurl[0]}
        mtl={this.state.info.VRContents.VRurl[1]}
        description= {this.state.info.VRContents.description}/>
    } else if (type === 'quiz') {
      typeComp = <QuizViewer presID={this.props.presID} slideID={this.state.slideID} />
    }

    const info = this.state.info
    return (
      <div>
      {this.state.slides &&
        <div className="slide-canvas-container">

          {typeComp}

          <div className="prev-btn-container">
            <button className="prev-slide-btn circle-btn"
                disabled={!this.state.counter || this.props.disabled}
                onClick={this.toggleBack} >
                <span className="icon">
                  <i className="fa fa-chevron-circle-left"></i>
                </span>
            </button>
          </div>

          <div className="next-btn-container">
            <button className="next-slide-btn circle-btn"
                disabled={
                    (this.state.counter === (Object.keys(this.state.slides).length -1)) ||
                    this.props.disabled
                }
                onClick={this.toggleFoward}>
                <span className="icon">
                  <i className="fa fa-chevron-circle-right"></i>
                </span>
            </button>
          </div>
        </div>}
      </div>
    )
  }
}

export default withRouter(SlideCanvasViewer)
<commit_msg>fix: info not populating on load in viewer. using slideID to get info directly<commit_after>import React, { Component } from 'react'
import firebase from 'firebase'
import { withRouter } from 'react-router-dom'
import QuillViewer from './QuillViewer'
import QuizViewer from './QuizViewer'
import VRViewer from './mediaviewer/VRViewer'

import { getSlideType } from '../../helpers'

class SlideCanvasViewer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      slides: null,
      type: null,
      counter: 0,
      slideID: null
    }
    this.submitSlideText = this.submitSlideText.bind(this)
  }

  componentDidMount() {
    const { presentationID } = this.props.match.params
    firebase.database()
      .ref(`presentations/${presentationID}/active`)
      .on('value', snapshot => {
        const activeSlideId = snapshot.val()

        if (activeSlideId) {
          this.setState({
            slideID: activeSlideId,
            type: getSlideType(presentationID, activeSlideId)
          })
        }
      })

    const slides = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
    slides.on('value', (snapshot) => {
      const allslides = snapshot.val()
      this.setState({slides: allslides})
    })
  }

  componentWillUnmount() {
    const firstSlide = Object.keys(this.state.slides)[0]
    firebase.database()
      .ref(`/presentations/${this.props.presID}/active`)
      .set(firstSlide)
  }

  submitSlideText(evt) {
    evt.preventDefault()
  }

  toggleBack = () => {
    const currSlide = Object.keys(this.state.slides)[(this.state.counter - 1)]
    const slide = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
      .child(currSlide)
    slide.on('value', (snapshot) => {
      const value = snapshot.val()
      this.setState({
        type: value.type,
        counter: --this.state.counter,
        slideID: currSlide
      })
    })
    const presentation = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
    presentation.child('active').set(currSlide)
  }

  toggleFoward = () => {
    const currSlide = Object.keys(this.state.slides)[(this.state.counter + 1)]
    const slide = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
      .child('slides')
      .child(currSlide)

    slide.on('value', (snapshot) => {
      const value = snapshot.val()
      this.setState({
        type: value.type,
        counter: ++this.state.counter,
        slideID: currSlide
      })
    })
    const presentation = firebase.database()
      .ref('presentations')
      .child(this.props.presID)
    presentation.child('active').set(currSlide)
  }

  render() {
    let typeComp = null
    if (this.state.slides) {
      const type = this.state.type
      const slideID = this.state.slideID
      if (type === 'quill') {
        typeComp = <QuillViewer presID={this.props.presID} slideID={this.state.slideID} />
      } else if (type === 'VR') {
        const VRContents = this.state.slides[slideID].VRContents
        typeComp = <VRViewer
          obj={VRContents.VRurl[0]}
          mtl={VRContents.VRurl[1]}
          description= {VRContents.description}/>
      } else if (type === 'quiz') {
        typeComp = <QuizViewer presID={this.props.presID} slideID={this.state.slideID} />
      }
    }
    return (
      <div>
      {this.state.slides &&
        <div className="slide-canvas-container">

          {typeComp}

          <div className="prev-btn-container">
            <button className="prev-slide-btn circle-btn"
                disabled={!this.state.counter || this.props.disabled}
                onClick={this.toggleBack} >
                <span className="icon">
                  <i className="fa fa-chevron-circle-left"></i>
                </span>
            </button>
          </div>

          <div className="next-btn-container">
            <button className="next-slide-btn circle-btn"
                disabled={
                    (this.state.counter === (Object.keys(this.state.slides).length -1)) ||
                    this.props.disabled
                }
                onClick={this.toggleFoward}>
                <span className="icon">
                  <i className="fa fa-chevron-circle-right"></i>
                </span>
            </button>
          </div>
        </div>}
      </div>
    )
  }
}

export default withRouter(SlideCanvasViewer)

{'fraction_non_alphanumeric': 0.14156424581005586, 'fraction_numerical': 0.0015642458100558658, 'mean_word_length': 2.1628975265017667, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 61, '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': '6804756', 'n_tokens_mistral': 2762, 'n_tokens_neox': 2730, 'n_words': 480}