<commit_before>/* eslint-disable no-param-reassign, max-len */
/**
 * The main navigation with a list of all components
 */

import React from 'react';
import { hashHistory, IndexLink } from 'react-router';
import map from 'lodash/map';
import has from 'lodash/has';
import throttle from 'lodash/throttle';
import find from 'lodash/find';
import flatten from 'lodash/flatten';

import smoothscroll from './smoothscroll';
import offsetTopFromPage from './offsetTopFromPage';
import getComponentNameFromPath from '../../../utils/getComponentNameFromPath';

import styles from './styles.css';

window.hashHistory = hashHistory;

const getPlugins = (path) => window.STYLEGUIDE_PLUGIN_CLIENT_API.cache[path].navigation;

class Navigation extends React.Component {

  state = {
    filterString: '',
  };

  componentDidMount() {
    // making sure the component is re-rendered when the component data is loaded
    document.documentElement.addEventListener(
      'styleguide-plugin-update-navigation',
      () => this.forceUpdate(),
      false
    );

    window.addEventListener('scroll', throttle(this.setQueryParamForActiveItemId, 50), false);
    hashHistory.listen((location) => {
      if (location.state === null || !location.state.preventScroll) {
        this.setScrollPosition(location.query.id);
      }
    });
  }

  setFilter = (event) => {
    this.setState({
      filterString: event.target.value,
    });
  };

  setScrollPosition = (activeItemId) => {
    const element = document.getElementById(activeItemId);
    if (element) {
      const SMOOTH_SCROLL_SPEED = 250;
      smoothscroll(offsetTopFromPage(element), SMOOTH_SCROLL_SPEED);
    }
  };

  setQueryParamForActiveItemId = () => {
    const plugins = getPlugins(this.props.activeComponentPath);
    const ids = flatten(map(plugins, (plugin) => map(plugin, (link) => link.id)));

    const activeId = find(ids, (id) => {
      const element = document.getElementById(id);
      return window.scrollY <= offsetTopFromPage(element);
    });
    const activeItemId = this.props.location.query.id;
    if (activeId !== activeItemId || activeItemId === undefined) {
      hashHistory.replace({
        pathname: this.props.location.pathname,
        query: { id: activeId },
        state: { preventScroll: true },
      });
    }
  };

  renderSubNavigation = (componentPath) => {
    if (this.props.activeComponentPath === componentPath) {
      if (has(window.STYLEGUIDE_PLUGIN_CLIENT_API.cache, componentPath)) {
        const plugins = getPlugins(componentPath);
        return map(plugins, (plugin, pluginKey) => (
          <div key={pluginKey}>
            {
              map(plugin, (link) => (
                <div
                  className={styles.subListItemWrapper}
                  key={link.id}
                >
                  <IndexLink
                    to={`/${componentPath}?id=${link.id}`}
                    className={styles.subListItem}
                    activeClassName={styles.subListItemActive}
                  >
                    {link.title}
                  </IndexLink>
                </div>
              ))
            }
          </div>
        ));
      }

      return null;
    }

    return null;
  };

  renderComponents = () => (
    // Iterate through all components and generate a list
    Object.keys(window.STYLEGUIDE_PLUGIN_CLIENT_API.scripts)
      .map((componentPath) => {
        // Clean the component name
        // TODO Maybe do this earlier, not on every mount
        const componentName = getComponentNameFromPath(componentPath);
        if (componentName.toLowerCase().indexOf(this.state.filterString.toLowerCase()) > -1) {
          return (
            // IndexLink so not all links that match a part of the route are highlighted<commit_msg>Remove outdated TODO<commit_after>/* eslint-disable no-param-reassign, max-len */
/**
 * The main navigation with a list of all components
 */

import React from 'react';
import { hashHistory, IndexLink } from 'react-router';
import map from 'lodash/map';
import has from 'lodash/has';
import throttle from 'lodash/throttle';
import find from 'lodash/find';
import flatten from 'lodash/flatten';

import smoothscroll from './smoothscroll';
import offsetTopFromPage from './offsetTopFromPage';
import getComponentNameFromPath from '../../../utils/getComponentNameFromPath';

import styles from './styles.css';

window.hashHistory = hashHistory;

const getPlugins = (path) => window.STYLEGUIDE_PLUGIN_CLIENT_API.cache[path].navigation;

class Navigation extends React.Component {

  state = {
    filterString: '',
  };

  componentDidMount() {
    // making sure the component is re-rendered when the component data is loaded
    document.documentElement.addEventListener(
      'styleguide-plugin-update-navigation',
      () => this.forceUpdate(),
      false
    );

    window.addEventListener('scroll', throttle(this.setQueryParamForActiveItemId, 50), false);
    hashHistory.listen((location) => {
      if (location.state === null || !location.state.preventScroll) {
        this.setScrollPosition(location.query.id);
      }
    });
  }

  setFilter = (event) => {
    this.setState({
      filterString: event.target.value,
    });
  };

  setScrollPosition = (activeItemId) => {
    const element = document.getElementById(activeItemId);
    if (element) {
      const SMOOTH_SCROLL_SPEED = 250;
      smoothscroll(offsetTopFromPage(element), SMOOTH_SCROLL_SPEED);
    }
  };

  setQueryParamForActiveItemId = () => {
    const plugins = getPlugins(this.props.activeComponentPath);
    const ids = flatten(map(plugins, (plugin) => map(plugin, (link) => link.id)));

    const activeId = find(ids, (id) => {
      const element = document.getElementById(id);
      return window.scrollY <= offsetTopFromPage(element);
    });
    const activeItemId = this.props.location.query.id;
    if (activeId !== activeItemId || activeItemId === undefined) {
      hashHistory.replace({
        pathname: this.props.location.pathname,
        query: { id: activeId },
        state: { preventScroll: true },
      });
    }
  };

  renderSubNavigation = (componentPath) => {
    if (this.props.activeComponentPath === componentPath) {
      if (has(window.STYLEGUIDE_PLUGIN_CLIENT_API.cache, componentPath)) {
        const plugins = getPlugins(componentPath);
        return map(plugins, (plugin, pluginKey) => (
          <div key={pluginKey}>
            {
              map(plugin, (link) => (
                <div
                  className={styles.subListItemWrapper}
                  key={link.id}
                >
                  <IndexLink
                    to={`/${componentPath}?id=${link.id}`}
                    className={styles.subListItem}
                    activeClassName={styles.subListItemActive}
                  >
                    {link.title}
                  </IndexLink>
                </div>
              ))
            }
          </div>
        ));
      }

      return null;
    }

    return null;
  };

  renderComponents = () => (
    // Iterate through all components and generate a list
    Object.keys(window.STYLEGUIDE_PLUGIN_CLIENT_API.scripts)
      .map((componentPath) => {
        // Clean the component name
        const componentName = getComponentNameFromPath(componentPath);
        if (componentName.toLowerCase().indexOf(this.state.filterString.toLowerCase()) > -1) {
          return (
            // IndexLink so not all links that match a part of the route are highlighted
{'fraction_non_alphanumeric': 0.12156237544838581, 'fraction_numerical': 0.0015942606616181746, 'mean_word_length': 2.54592557701366, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 45, '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': '6799037', 'n_tokens_mistral': 2145, 'n_tokens_neox': 2075, 'n_words': 454}