{"size": 5650, "ext": "js", "max_stars_repo_path": "resources/assets/js/components/Preloader/common/Loading.js", "max_stars_repo_name": "ArturW1998/Portfolio", "max_stars_repo_stars_event_min_datetime": "2021-12-16T15:12:20.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-14T12:59:07.000Z", "max_issues_repo_path": "resources/assets/js/components/Preloader/common/Loading.js", "max_issues_repo_name": "ArturW1998/Portfolio", "max_issues_repo_issues_event_min_datetime": "2020-05-23T03:29:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T20:26:09.000Z", "max_forks_repo_path": "resources/assets/js/components/Preloader/common/Loading.js", "max_forks_repo_name": "ArturW1998/Portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 7, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 27.033492823, "max_line_length": 89, "alphanum_fraction": 0.6161061947}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

import URLS from '../../../constants/urls';
import setStatus from '../../../actions/preloader';
import { reloadPage, setPage } from '../../../actions/page';
import { setStatusMenu } from '../../../actions/menu';
import compose from '../utils/compose';
import PathLoader from './PathLoader';

class Loading extends Component {
  static propTypes = {
    page: PropTypes.shape({
      page: PropTypes.string,
      statusReload: PropTypes.bool,
    }),
    history: PropTypes.shape({
      push: PropTypes.func,
    }),
    reloadPage: PropTypes.func,
    setStatus: PropTypes.func,
    setStatusMenu: PropTypes.func,
  };

  static defaultProps = {
    page: {
      page: '',
      statusReload: false,
    },
    history: {
      push: () => {},
    },
    setStatus: () => {},
    reloadPage: () => {},
    setStatusMenu: () => {},
  };

  componentDidMount() {
    const { cssanimations: animations, prefixed } = window.Modernizr;
    const container = document.getElementById('ip-container');

    this.support = { animations };
    this.container = container;
    this.animEndEventNames = {
      WebkitAnimation: 'webkitAnimationEnd',
      OAnimation: 'oAnimationEnd',
      msAnimation: 'MSAnimationEnd',
      animation: 'animationend',
    };

    const animEndEventName = prefixed('animation');
    const header = this.container.querySelector('div.ip-header');

    this.animEndEventName = this.animEndEventNames[animEndEventName];
    this.header = header;

    this.init();
  }

  componentDidUpdate() {
    const {
      page: { statusReload: propsStatusReload, page: propsPage },
      reloadPage,
    } = this.props;

    if (propsStatusReload) {
      const page = propsPage === URLS.main ? '' : propsPage;

      this.reloading(page);

      reloadPage(false);
    }
  }

  init = () => {
    const { setStatus } = this.props;
    const ipLoaderCircle = document.getElementById('ip-loader-circle');
    const imgLoader = document.getElementById('img_loader');

    imgLoader.classList.remove('transparent');
    imgLoader.classList.add('show');

    this.loader = new PathLoader(ipLoaderCircle);
    setStatus(true);

    const onEndInitialAnimation = () => {
      const { animations } = this.support;
      const { setStatus: propsSetStatus } = this.props;

      const forFade = document.querySelector('.for_fade');

      animations &&
        this.container.removeEventListener(this.animEndEventName, onEndInitialAnimation);

      forFade && (forFade.style.visibility = 'hidden');

      this.startLoading();

      setTimeout(() => {
        if (forFade) {
          forFade.style.visibility = 'visible';
          forFade.classList.add('animated', 'fadeIn');
        }

        propsSetStatus(false);
      }, 1000);
    };

    // disable scrolling
    window.addEventListener('scroll', this.noScroll);

    // initial animation
    this.container.classList.add('loading');

    const { animations } = this.support;

    animations
      ? this.container.addEventListener(this.animEndEventName, onEndInitialAnimation)
      : onEndInitialAnimation();
  };

  reloading = page => {
    const ipContainer = document.getElementById('ip-container');

    window.scrollTo({ top: 0, behavior: 'smooth' });
    ipContainer.classList.add('unloaded');

    setTimeout(() => {
      const { history, setStatusMenu } = this.props;

      ipContainer.classList.remove('loaded', 'unloaded');

      history.push(page);
      setStatusMenu(false);
      this.init();
    }, 1000);
  };

  startLoading = () => {
    // simulate loading something...
    const simulationFn = ({ setProgress }) => {
      window.loadingFast ? (this.progress = 1) : (this.progress = 0);

      const interval = setInterval(() => {
        this.progress = Math.min(this.progress + Math.random() * 0.1, 1);
        setProgress(this.progress);

        // reached the end
        if (this.progress === 1) {
          window.loadingFast = true;

          const {
            page: { page },
          } = this.props;

          const imgLoader = document.getElementById('img_loader');

          if (page !== URLS.main || window.innerHeight < 500) {
            imgLoader.classList.add('transparent');
            imgLoader.classList.remove('show');
          }

          this.container.classList.remove('loading');
          this.container.classList.add('loaded');
          clearInterval(interval);

          const onEndHeaderAnimation = ({ target }) => {
            const { animations } = this.support;

            if (animations) {
              if (target !== this.header) return;
              window.removeEventListener(this.animEndEventName, onEndHeaderAnimation);
            }

            document.body.classList.add('layout-switch');
            window.removeEventListener('scroll', this.noScroll);
          };

          const { animations } = this.support;

          animations
            ? this.header.addEventListener(this.animEndEventName, onEndHeaderAnimation)
            : onEndHeaderAnimation();
        }
      }, 10);
    };

    const { setProgressFn } = this.loader;

    setProgressFn(simulationFn);
  };

  noScroll = () => window.scrollTo(0, 0);

  render() {
    return <div />;
  }
}

const mapStateToProps = ({ preloader, page }) => ({ preloader, page });

const matchDispatchToProps = { setStatus, reloadPage, setPage, setStatusMenu };

const enhance = compose(withRouter, connect(mapStateToProps, matchDispatchToProps));

export default enhance(Loading);
