How to use the taskcluster-client.Hooks function in taskcluster-client

// and hookGroupId, but the create and update methods do not take these
// properties.  This function strips the properties on input.
const stripHookIds = hook => {
  const strippedHook = {...hook};

  delete strippedHook.hookId;
  delete strippedHook.hookGroupId;

  return strippedHook;
};

const HookStatusDisplay = React.createClass({
  mixins: [
    utils.createTaskClusterMixin({
      clients: {
        hooks: taskcluster.Hooks,
      },
      reloadOnProps: ['currentHookId', 'currentHookGroupId', 'hookStatus'],
    }),
  ],

  propTypes: {
    currentHookId: React.PropTypes.string.isRequired,
    currentHookGroupId: React.PropTypes.string.isRequired,
    hookStatus: React.PropTypes.object,
    refreshHookStatus: React.PropTypes.func.isRequired,
  },

  render() {
    const stat = this.props.hookStatus;

    if (!stat) {

// TODO: reflect these into state with onChange hooks
    this.props.createHook(this.state.hookGroupId, this.state.hookId, this.getHookDefinition());
  },

  updateHook() {
    this.props.updateHook(this.getHookDefinition());
  },
});

/** Create hook editor/viewer (same thing) */
const HookEditView = React.createClass({
  /** Initialize mixins */
  mixins: [
    utils.createTaskClusterMixin({
      clients: {
        hooks: taskcluster.Hooks,
      },
      reloadOnProps: ['currentHookId', 'currentHookGroupId'],
    }),
  ],

  propTypes: {
    currentHookId: React.PropTypes.string,
    currentHookGroupId: React.PropTypes.string,
    refreshHookList: React.PropTypes.func.isRequired,
    selectHook: React.PropTypes.func.isRequired,
  },

  getInitialState() {
    return {
      // Currently loaded hook
      hookLoaded: false,

import React from 'react';
import {Row, Col, ButtonToolbar, Button, Glyphicon} from 'react-bootstrap';
import HookGroupBrowser from './hookgroupbrowser';
import HookEditView from './hookeditor';
import * as utils from '../lib/utils';
import taskcluster from 'taskcluster-client';
import './hookmanager.less';

export default React.createClass({
  displayName: 'HookManager',

  /** Initialize mixins */
  mixins: [
    utils.createTaskClusterMixin({
      clients: {
        hooks: taskcluster.Hooks,
      },
    }),
    utils.createLocationHashMixin({
      keys: ['currentHookGroupId', 'currentHookId'],
      type: 'string',
    }),
  ],

  /** Create an initial state */
  getInitialState() {
    return {
      currentHookGroupId: null,
      currentHookId: null,
    };
  },

handleClick() {
    if (!this.state.hooksLoading) {
      this.setState({hooksLoading: true});
      this.loadState({
        hooks: this.hooks.listHooks(this.props.group),
      });
    }
  },
});

const HookGroupBrowser = React.createClass({
  mixins: [
    utils.createTaskClusterMixin({
      clients: {
        hooks: taskcluster.Hooks,
      },
    }),
  ],

  propTypes: {
    currentHookGroupId: React.PropTypes.string,
    currentHookId: React.PropTypes.string,
    selectHook: React.PropTypes.func.isRequired,
  },

  getInitialState() {
    return {
      groups: null,
      groupsLoaded: false,
      groupsError: null,
    };

module.exports = options => ({
  auth: new Auth(options),
  github: new Github(options),
  hooks: new Hooks(options),
  index: new Index(options),
  purgeCache: new PurgeCache(options),
  queue: new Queue(options),
  secrets: new Secrets(options),
  queueEvents: new QueueEvents(options),
  notify: new Notify(options),
  workerManager: new WorkerManager(options),
});

import React from 'react';
import * as utils from '../lib/utils';
import taskcluster from 'taskcluster-client';
import * as format from '../lib/format';
import TreeView from 'react-treeview';

const HookBrowser = React.createClass({
  mixins: [
    utils.createTaskClusterMixin({
      clients: {
        hooks: taskcluster.Hooks,
      },
    }),
  ],

  propTypes: {
    group: React.PropTypes.string.isRequired,
    currentHookGroupId: React.PropTypes.string,
    currentHookId: React.PropTypes.string,
    selectHook: React.PropTypes.func.isRequired,
  },

  getInitialState() {
    return {
      hooks: null,
      hooksLoading: false,
      hooksLoaded: false,