gistfile1.txt

import Anchor from '@trendmicro/react-anchor';
import Dropdown from '@trendmicro/react-dropdown';
import Navbar from '@trendmicro/react-navbar';
import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs';
import PropTypes from 'prop-types';
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-dropdown/dist/react-dropdown.css';
import '@trendmicro/react-navs/dist/react-navs.min.css';
import '@trendmicro/react-navbar/dist/react-navbar.min.css';
import './styles.scss'
let objectCounter = 0;
const generateId = function(){
  const id = objectCounter;
  objectCounter += 1;

  return id;
}
let graph = {
  nodes: {},
  edges: {}
};
const noop = () => {};
const NODE_TYPES = {
  Project: {
    kind: 'proto',
    properties: {}
  },
  User: {
    kind: 'proto',
    properties: {}
  },
  Pilot: {
    kind: 'proto',
    properties: {}
  },
  Job: {
    kind: 'proto',
    properties: {}
  },
  Role: {
    kind: 'proto',
    properties: {
      permissions: [],
      name: 'user'
    }
  },
  Status: {
    kind: 'proto',
    properties: {}
  },
  TypeOf: {
    kind: 'proto',
    properties: {
    }
  },
  Owner: {
    kind: 'proto',
    properties: {}
  },
  Operator: {
    kind: 'proto',
    properties: {}
  }
}
const ADMIN_PERMISSION = {action : 'edit', grant: true, resource: '*'};

for (var nodeProto in NODE_TYPES) {
  let proto = NODE_TYPES[nodeProto];
  proto.properties.nodeType = nodeProto;
  proto.id = generateId()
  graph.nodes[proto.id] = proto;
}
function PilotRole(props = {}){
  const ROLE = this,
        ROLE_TYPE = NODE_TYPES.Role.properties.nodeType,
        ROLE_NAME = 'pilot';

  ROLE.kind = ROLE_TYPE;
  ROLE.id = generateId();
  this.properties = Object.assign({}, NODE_TYPES.Pilot.properties, props, {name: ROLE_NAME, permissions: [ADMIN_PERMISSION] });

  const roleIndex = edge => {
    if(!edge || !edge.target || !edge.target.properties){
      return false;
    }
    const isTypeOfEdge = edge.kind === NODE_TYPES.TypeOf.properties.nodeType,
          isRoleTarget = edge.target.kind === ROLE.kind,
          roleTypeExists = edge.target.properties.name && edge.target.properties.name === ROLE.properties.name

    return isTypeOfEdge && isRoleTarget && roleTypeExists
  };
  const edges = Object.values(graph.edges)
  if(edges.findIndex(roleIndex) === -1){
    graph.edges[ROLE.id] = {
      kind: NODE_TYPES.TypeOf.properties.nodeType,
      source: NODE_TYPES.Role,
      target: NODE_TYPES.Pilot
    }
  }
}
class Pilot{
  constructor(props = {}){
    this.id = generateId();
    this.kind = 'user';
    this.properties = Object.assign({}, NODE_TYPES.User, props)
    this.properties.role = Pilot.register()

    graph.nodes[this.id] = this;
  }
  static register(){
    const type = new PilotRole()
    const typeRelation = {
      id: generateId(),
      kind: NODE_TYPES.TypeOf.properties.nodeType,
      source: this,
      target: type
    }
    graph.edges[typeRelation.id] = typeRelation;

    return type;
  }
}
function getUser(){

  return fetch('https://randomuser.me/api/')
  .then(response => {
    return response.json()
  })
  .then(function({results}){
    const user = results[0];

    console.log(user) //eslint-disable-line
    let pilot = new Pilot(user);
    console.log(graph, pilot); //eslint-disable-line
  })
}
const StickyNavbar = ({ state, actions }) => {
    return (
        <StickyContainer>
            <Sticky>
                <Navbar>
                    <Navbar.Header>
                      <Anchor
                          componentClass="button"
                          style={{
                              backgroundColor: 'transparent',
                              border: 'none',
                              padding: '10px'
                          }}
                          onClick={() => {getUser()}}
                      >
                        <div>
                          <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style={{
                            verticalAlign: 'middle'
                          }}><g><path d="m37.3 30v2.9q0 0.5-0.4 1t-1 0.4h-31.5q-0.6 0-1-0.4t-0.4-1v-2.9q0-0.6 0.4-1t1-0.4h31.5q0.5 0 1 0.4t0.4 1z m0-11.4v2.8q0 0.6-0.4 1t-1 0.5h-31.5q-0.6 0-1-0.5t-0.4-1v-2.8q0-0.6 0.4-1t1-0.5h31.5q0.5 0 1 0.5t0.4 1z m0-11.5v2.9q0 0.6-0.4 1t-1 0.4h-31.5q-0.6 0-1-0.4t-0.4-1v-2.9q0-0.5 0.4-1t1-0.4h31.5q0.5 0 1 0.4t0.4 1z"></path></g></svg>
                        </div>
                      </Anchor>
                    </Navbar.Header>
                    <Nav
                        navStyle="navbar"
                        activeKey={state.tab}
                        onSelect={actions.selectTab}
                    >
                        <NavItem className="text-center" style={{ minWidth: 72 }}>
                            <span>Active Node Name</span>
                        </NavItem>
                        {/* <NavDropdown
                            open={false}
                            onToggle={noop}
                            autoOpen
                            noCaret
                            eventKey="dashboard"
                            title="Dashboard"
                        >
                            <MenuItem eventKey="dashboard.1">Menu Item 1</MenuItem>
                            <MenuItem eventKey="dashboard.2">Menu Item 2</MenuItem>
                            <MenuItem eventKey="dashboard.3">Menu Item 3</MenuItem>
                            <MenuItem eventKey="dashboard.4">Menu Item 4</MenuItem>
                        </NavDropdown>
                        <NavDropdown
                            open={false}
                            onToggle={noop}
                            autoOpen
                            noCaret
                            eventKey="administration"
                            title="Administration"
                        >
                            <MenuItem eventKey="administration.1">Menu Item 1</MenuItem>
                            <MenuItem eventKey="administration.2">Menu Item 2</MenuItem>
                            <MenuItem eventKey="administration.3">Menu Item 3</MenuItem>
                            <Dropdown.SubMenu eventKey="administration.4" title="Menu item 4" onSelect={actions.selectTab}>
                                <MenuItem eventKey="administration.4.1">
                                    Second level item one
                                </MenuItem>
                                <MenuItem eventKey="administration.4.2">
                                    Second level item two
                                </MenuItem>
                            </Dropdown.SubMenu>
                        </NavDropdown> */}
                    </Nav>
                </Navbar>
            </Sticky>
        </StickyContainer>
    );
};

StickyNavbar.propTypes = {
    state: PropTypes.object,
    actions: PropTypes.object
};

export default StickyNavbar;