nova-post-by-feed Modal Demo (https://github.com/xavcz/nova-post-by-feed/)

README.md

import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import { FormattedMessage } from 'react-intl';
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/std:accounts-ui';
import { Modal, Dropdown, MenuItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { Router } from 'react-router';
import Users from 'meteor/nova:users';
import Core from "meteor/nova:core";
const ContextPasser = Core.ContextPasser;


class UsersMenuWithFeed extends Telescope.components.UsersMenu {

  constructor(props) {
    super(props);
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.state = {
      modalOpen: {
        settings: false,
        feeds: false
      }
    };
  }

  openModal(modal) {
    return (event) => {
      const modalOpen = {};
      modalOpen[modal] = true;
      this.setState({ modalOpen });
    };
  }

  closeModal(modal) {
    return (event) => {
      const modalOpen = {};
      modalOpen[modal] = false;
      this.setState({ modalOpen });
    };
  }

  renderSettingsModal() {

    const SettingsEditForm = Telescope.components.SettingsEditForm;

    return (
      <Modal show={this.state.modalOpen.settings} onHide={this.closeModal('settings')}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Settings</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <ContextPasser currentUser={this.props.user} closeCallback={this.closeModal('settings')}>
            <SettingsEditForm/>
          </ContextPasser>
        </Modal.Body>
      </Modal>
    )
  }

  renderFeedsModal() {

    const FeedsPage = Telescope.components.FeedsPage;

    return (
      <Modal bsSize='large' show={this.state.modalOpen.feeds} onHide={this.closeModal('feeds')}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Feeds</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <ContextPasser currentUser={this.props.user} closeCallback={this.closeModal('feeds')}>
            <FeedsPage/>
          </ContextPasser>
        </Modal.Body>
      </Modal>
    )
  }

  render() {

    ({UsersAvatar, UsersName} = Telescope.components);

    const user = this.props.user;
    const {currentUser} = this.context;

    return (
      <div className="users-menu">
        <Dropdown id="user-dropdown">
          <Dropdown.Toggle>
            <UsersAvatar size="small" user={user} link={false} />
            <div>{Users.getDisplayName(currentUser)}</div>
          </Dropdown.Toggle>
          <Dropdown.Menu>
            <LinkContainer to={`/users/${currentUser.telescope.slug}`}>
              <MenuItem className="dropdown-item" eventKey="1"><FormattedMessage  id="users.profile"/></MenuItem>
            </LinkContainer>
            <LinkContainer to={`/account`}>
              <MenuItem className="dropdown-item" eventKey="2"><FormattedMessage id="users.edit_account"/></MenuItem>
            </LinkContainer>
            {Users.isAdmin(user) ? <MenuItem className="dropdown-item" eventKey="4" onClick={this.openModal('feeds')}>Imported Feeds</MenuItem> : null}
            <MenuItem className="dropdown-item" eventKey="5" onClick={() => Meteor.logout(Accounts.ui._options.onSignedOutHook())}><FormattedMessage id="users.log_out"/></MenuItem>
          </Dropdown.Menu>
        </Dropdown>
        {this.renderSettingsModal()}
        {this.renderFeedsModal()}
      </div>
    )
  }
}

UsersMenuWithFeed.propTypes = {
  currentUser: React.PropTypes.object,
  user: React.PropTypes.object
};

export default UsersMenuWithFeed;