<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Sticky from 'react-stickynode';
import isEqual from 'lodash/isEqual';

import { Mobile, Desktop } from 'gfw-components';
import { trackEvent } from 'utils/analytics';
import CountryDataProvider from 'providers/country-data-provider';
import WhitelistsProvider from 'providers/whitelists-provider';
import GeostoreProvider from 'providers/geostore-provider';
import GeodescriberProvider from 'providers/geodescriber-provider';
import DatasetsProvider from 'providers/datasets-provider';
import LatestProvider from 'providers/latest-provider';
import AreasProvider from 'providers/areas-provider';
import LocationProvider from 'providers/location-provider';
import PlanetBasemapsProvider from 'providers/planet-provider';
import MyGfwProvider from 'providers/mygfw-provider';
import MetaProvider from 'providers/meta-provider';

// import dashboardLinksSSR from 'data/dashboard-menu-ssr';

import ModalMeta from 'components/modals/meta';
import Share from 'components/modals/share';
import ClimateModal from 'components/modals/climate';
import FiresModal from 'components/modals/fires';

import Widgets from 'components/widgets';
import SubNavMenu from 'components/subnav-menu';
import Button from 'components/ui/button';
import Icon from 'components/ui/icon';
import ScrollTo from 'components/scroll-to';
import DashboardPrompts from 'components/prompts/dashboard-prompts';

import closeIcon from 'assets/icons/close.svg?sprite';

import GFRBanner from './components/gfr-banner';
import Map from './components/map';
import Header from './components/header';
import MapControls from './components/map-controls';
import PendingDashboard from './components/pending-dashboard';
import GlobalSentence from './components/global-sentence';

import './styles.scss';

const isServer = typeof window === 'undefined';

class DashboardsPage extends PureComponent {
  static propTypes = {
    ssrLocation: PropTypes.object,
    showMapMobile: PropTypes.bool,
    setShowMap: PropTypes.func.isRequired,
    links: PropTypes.array,
    widgetAnchor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    globalSentence: PropTypes.object,
    locationType: PropTypes.string,
    activeArea: PropTypes.object,
    embed: PropTypes.bool,
    clearScrollTo: PropTypes.func,
    setDashboardPromptsSettings: PropTypes.func,
    basePath: PropTypes.string,
  };

  state = {
    scrollY: 0,
  };

  componentDidMount() {
    const { locationType, setDashboardPromptsSettings } = this.props;
    if (locationType === 'global' || locationType === 'country') {
      setDashboardPromptsSettings({
        open: true,
        stepIndex: 0,
        stepsKey: 'viewNationalDashboards',
      });
    }

    if (!isServer) {
      window.addEventListener('scroll', this.listenToScroll);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { activeArea, setDashboardPromptsSettings } = this.props;
    const { activeArea: prevActiveArea } = prevProps;
    const { scrollY } = this.state;
    const { scrollY: prevScrollY } = prevState;

    if (
      activeArea &&
      !activeArea.userArea &&
      !isEqual(activeArea, prevActiveArea)
    ) {
      trackEvent({
        category: 'Areas of interest',
        action: 'Visit a shared area of interest',
        label: activeArea.id,
      });
    }

    if (scrollY === 0 && prevScrollY > scrollY) {
      // show download prompts
      setDashboardPromptsSettings({
        open: true,
        stepIndex: 0,
        stepsKey: 'downloadDashboardStats',
      });
    }
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.listenToScroll);
  }

  listenToScroll = () => {
    this.setState({
      scrollY: window.pageYOffset,
    });
  };

  renderMap = () => {
    const { showMapMobile, setShowMap } = this.props;

    return (
      <div className="map-container">
        {showMapMobile && (
          <Button
            theme="square theme-button-light"
            className="close-map-button"
            onClick={() => setShowMap(false)}
          >
            <Icon icon={closeIcon} />
          </Button>
        )}
        <Map />
      </div>
    );
  };

  handleNavigationLinks() {
    const { links, basePath } = this.props;
    if (isServer && basePath) {
      return links.map((l) => ({
        ...l,
        href: basePath,
        as: `/dashboards${basePath}${l.as}`,
      }));
    }
    return links;
  }

  render() {
    const {
      showMapMobile,
      links,
      widgetAnchor,
      ssrLocation,
      activeArea,
      clearScrollTo,
      globalSentence,
      embed,
    } = this.props;
    const { status, location } = activeArea || {};

    const isPendingDashboard =
      status === 'pending' &&
      location &&
      !['country', 'wdpa'].includes(location.type);

    return (
      <div className="l-dashboards-page">
        <div className="content-panel">
          <Header
            className="header"
            handleSSRLocation={ssrLocation}
            globalSentence={globalSentence}
          />
          {links && !!links.length && (
            <SubNavMenu
              className="nav"
              theme="theme-subnav-dark"
              links={this.handleNavigationLinks()}
              checkActive
            />
          )}
          <GlobalSentence handleSSRLocation={ssrLocation} />
          {isPendingDashboard && (
            <PendingDashboard
              className="pending-message"
              isUserDashboard={activeArea && activeArea.userArea}
              areaId={activeArea && activeArea.id}
            />
          )}
          <Widgets className="dashboard-widgets" />
          {this.props.locationType === 'global' && <GFRBanner />}
        </div>
        <div className={`map-panel ${showMapMobile ? '-open-mobile' : ''}`}>
          <Desktop>
            <Sticky bottomBoundary=".l-dashboards-page">
              {this.renderMap()}
            </Sticky>
          </Desktop><commit_msg>Add temp warning message on dashboard<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Sticky from 'react-stickynode';
import isEqual from 'lodash/isEqual';

import { Mobile, Desktop } from 'gfw-components';
import { trackEvent } from 'utils/analytics';
import CountryDataProvider from 'providers/country-data-provider';
import WhitelistsProvider from 'providers/whitelists-provider';
import GeostoreProvider from 'providers/geostore-provider';
import GeodescriberProvider from 'providers/geodescriber-provider';
import DatasetsProvider from 'providers/datasets-provider';
import LatestProvider from 'providers/latest-provider';
import AreasProvider from 'providers/areas-provider';
import LocationProvider from 'providers/location-provider';
import PlanetBasemapsProvider from 'providers/planet-provider';
import MyGfwProvider from 'providers/mygfw-provider';
import MetaProvider from 'providers/meta-provider';

// import dashboardLinksSSR from 'data/dashboard-menu-ssr';

import ModalMeta from 'components/modals/meta';
import Share from 'components/modals/share';
import ClimateModal from 'components/modals/climate';
import FiresModal from 'components/modals/fires';

import Widgets from 'components/widgets';
import SubNavMenu from 'components/subnav-menu';
import Button from 'components/ui/button';
import Icon from 'components/ui/icon';
import ScrollTo from 'components/scroll-to';
import DashboardPrompts from 'components/prompts/dashboard-prompts';

import closeIcon from 'assets/icons/close.svg?sprite';

import GFRBanner from './components/gfr-banner';
import Map from './components/map';
import Header from './components/header';
import MapControls from './components/map-controls';
import PendingDashboard from './components/pending-dashboard';
import GlobalSentence from './components/global-sentence';

import './styles.scss';

const isServer = typeof window === 'undefined';

class DashboardsPage extends PureComponent {
  static propTypes = {
    ssrLocation: PropTypes.object,
    showMapMobile: PropTypes.bool,
    setShowMap: PropTypes.func.isRequired,
    category: PropTypes.string,
    links: PropTypes.array,
    widgetAnchor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    globalSentence: PropTypes.object,
    locationType: PropTypes.string,
    activeArea: PropTypes.object,
    embed: PropTypes.bool,
    clearScrollTo: PropTypes.func,
    setDashboardPromptsSettings: PropTypes.func,
    basePath: PropTypes.string,
  };

  state = {
    scrollY: 0,
  };

  componentDidMount() {
    const { locationType, setDashboardPromptsSettings } = this.props;
    if (locationType === 'global' || locationType === 'country') {
      setDashboardPromptsSettings({
        open: true,
        stepIndex: 0,
        stepsKey: 'viewNationalDashboards',
      });
    }

    if (!isServer) {
      window.addEventListener('scroll', this.listenToScroll);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { activeArea, setDashboardPromptsSettings } = this.props;
    const { activeArea: prevActiveArea } = prevProps;
    const { scrollY } = this.state;
    const { scrollY: prevScrollY } = prevState;

    if (
      activeArea &&
      !activeArea.userArea &&
      !isEqual(activeArea, prevActiveArea)
    ) {
      trackEvent({
        category: 'Areas of interest',
        action: 'Visit a shared area of interest',
        label: activeArea.id,
      });
    }

    if (scrollY === 0 && prevScrollY > scrollY) {
      // show download prompts
      setDashboardPromptsSettings({
        open: true,
        stepIndex: 0,
        stepsKey: 'downloadDashboardStats',
      });
    }
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.listenToScroll);
  }

  listenToScroll = () => {
    this.setState({
      scrollY: window.pageYOffset,
    });
  };

  renderMap = () => {
    const { showMapMobile, setShowMap } = this.props;

    return (
      <div className="map-container">
        {showMapMobile && (
          <Button
            theme="square theme-button-light"
            className="close-map-button"
            onClick={() => setShowMap(false)}
          >
            <Icon icon={closeIcon} />
          </Button>
        )}
        <Map />
      </div>
    );
  };

  handleNavigationLinks() {
    const { links, basePath } = this.props;
    if (isServer && basePath) {
      return links.map((l) => ({
        ...l,
        href: basePath,
        as: `/dashboards${basePath}${l.as}`,
      }));
    }
    return links;
  }

  render() {
    const {
      showMapMobile,
      links,
      widgetAnchor,
      ssrLocation,
      activeArea,
      clearScrollTo,
      globalSentence,
      embed,
      category,
    } = this.props;
    const { status, location } = activeArea || {};

    const isPendingDashboard =
      status === 'pending' &&
      location &&
      !['country', 'wdpa'].includes(location.type);

    return (
      <div className="l-dashboards-page">
        <div className="content-panel">
          <Header
            className="header"
            handleSSRLocation={ssrLocation}
            globalSentence={globalSentence}
          />
          {links && !!links.length && (
            <SubNavMenu
              className="nav"
              theme="theme-subnav-dark"
              links={this.handleNavigationLinks()}
              checkActive
            />
          )}
          <GlobalSentence handleSSRLocation={ssrLocation} />
          {category &&
            (category === 'summary' || category === 'forest-change') && (
              <div className="c-widgets dashboard-widgets global-dashboard-sentence">
                <div
                  className="c-widget c-dashboard-sentence-widget"
                  style={{
                    borderColor: '#ed4602',
                    padding: '10px 14px',
                    fontSize: '16px',
                    backgroundColor: '#fff9f7',
                  }}
                >
                  The widgets on this page reflect tree cover loss data from
                  2020. They will be updated to reflect 2021 data in the coming
                  days. Please check back here for updates.
                </div>
              </div>
            )}
          {isPendingDashboard && (
            <PendingDashboard
              className="pending-message"
              isUserDashboard={activeArea && activeArea.userArea}
              areaId={activeArea && activeArea.id}
            />
          )}
          <Widgets className="dashboard-widgets" />
          {this.props.locationType === 'global' && <GFRBanner />}
        </div>
        <div className={`map-panel ${showMapMobile ? '-open-mobile' : ''}`}>
          <Desktop>
            <Sticky bottomBoundary=".l-dashboards-page">
              {this.renderMap()}
            </Sticky>
          </Desktop>
{'fraction_non_alphanumeric': 0.11920376514157859, 'fraction_numerical': 0.0021603271352519096, 'mean_word_length': 2.6237070170533965, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6937800', 'n_tokens_mistral': 3638, 'n_tokens_neox': 3607, 'n_words': 785}