GitHut.js

/* @flow */
/* global _ angular */
/* eslint
  fp/no-class:0,
  fp/no-this:0,
  fp/no-mutation:0,
  class-methods-use-this:0,
  react/prefer-stateless-function:0,
  max-len:0,
  flowtype/require-parameter-type:0,
  flowtype/require-return-type:0,
  no-param-reassign:0,
  no-useless-escape:0,
  no-unused-vars:1,
  no-else-return:0,
  react/prop-types:1,
*/

import React from 'react';
import JSURL from 'jsurl';
import { compose } from 'recompose';

import withRouter from '@ncigdc/utils/withRouter';

// Append d3-tip for githut. Appending here to avoid issues in load order.
const d3TipUrl = 'https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js';
const existingScript = document.querySelector(`script[src="${d3TipUrl}"`);
if (!existingScript) {
  const script = document.createElement('script');
  script.src = d3TipUrl;
  document.body.appendChild(script);
}

export default
compose(withRouter)(
class GitHut extends React.Component {
  componentDidMount() {
    const self = this;
    angular
      .module('legacyAngularWrapper', ['ngApp'])
      .config(['$locationProvider', 'RestangularProvider', ($locationProvider, RestangularProvider) => {
        $locationProvider.html5Mode(false);
        RestangularProvider.setBaseUrl(API);
        // Previous API treated "from=0" to be the same as "from=1", the current API doesn't.
        RestangularProvider.addFullRequestInterceptor((element, operation, what, url, headers, query) => ({
          params: Object.assign({}, query, { from: query.from === 1 ? 0 : query.from }),
        }));
      }])
      .run(['$browser', 'LocationService', '$state', ($browser, LocationService, $state) => {
        // angular dirty checks the browser url and messes with routing in other pages
        let pendingLocation = null;
        $browser.url = function (url, replace, state) {
          if (url) {
            pendingLocation = url;
            return $browser;
          } else {
            return pendingLocation || location.href.replace(/%27/g, "'");
          }
        };
        $state.go = this.handleAngularRouterRequestGo;
        LocationService.filters = () => this.props.params.filters;
      }])
      .directive('githut', () => ({
        controller: 'ProjectsController as prsc',
        link(scope, element, attrs, controller) {
          controller.ProjectsState.tabs.graph.active = true;
          self.angularController = controller;
        },
        template: `
          <git-hut
            data-ng-if="prsc.githutData"
            data="prsc.githutData"
            config="prsc.githutConfig"
          ></git-hut>
        `,
      }));
    angular.bootstrap(this.container, ['legacyAngularWrapper']);
  }

  componentDidUpdate() {
    if (this.angularController) {
      this.angularController.refresh();
    }
  }

  handleAngularRouterRequestGo = (state, params, options) => {
    const stateMap = {
      'search.participants': {
        pathname: '/repository',
        children: 'repository',
        query: {
          searchTableTab: 'cases',
          filters: JSURL.stringify(JSON.parse(params.filters || null)),
        },
      },
      'search.files': {
        pathname: '/repository',
        children: 'repository',
        query: {
          searchTableTab: 'files',
          filters: JSURL.stringify(JSON.parse(params.filters || null)),
        },
      },
      project: {
        pathname: `/projects/${params.projectId}`,
      },
    };

    this.props.push(stateMap[state]);
  }

  render() {
    return (
      <div
        ref={c => { this.container = c; }}
        dangerouslySetInnerHTML={{ __html: '<githut></githut>' }}
      />
    );
  }
})