skypager-project-types-electron-app/src/Components/LaunchModal/index.js

skypager electron app project type

import React, { Component, PropTypes as types } from 'react'
import SkypagerLogo from 'Components/SkypagerLogo'
import delay from 'lodash/delay'
import { Progress } from 'semantic-ui-react'

export class LaunchModal extends Component {
  static displayName = 'LaunchModal'

  static propTypes = {
    progressInterval: types.number,
    hideDelay: types.number,
  }

  static defaultProps = {
    progressInterval: 35,
    hideDelay: 1000,
  }

  state = {
    progress: 0,
    description: 'Loading',
  }

  componentDidMount() {
    let { progress } = this.state
    
    console.log('YO')
    
    if (__BROWSER__) {
      this.interval = setInterval(() => {
        progress = progress + 1
        this.setState({ progress })

        if (progress >= 100) { 
          clearInterval(this.interval) 

          delay(() => {
            window.responder.ask('PROGRESS_COMPLETE').then((...args) => {
              console.log('progress complete response', ...args)
            })
          }, this.props.hideDelay)
        }
      }, this.props.progressInterval)
    }
  }

  render() {
    const { progress = 0, description = 'Loading' } = this.state

    return (
      <div className='ui page container'>
        <div style={{margin:'32px auto', padding: '16px'}}>
          <SkypagerLogo />
        </div>

        <Progress active percent={progress} success={progress >= 90} style={{marginTop: '16px'}}>
          {description}
        </Progress>
      </div>
    )
  }
}

export default LaunchModal