render() {
    
    const props = this.props;

    // nothing to do yet
    const accountId = props.accounts.selectedAccounts[0];
    
    if (!accountId) return <span></span>;
    
    // here's where the account API results are stored
    const pp = props.accounts.pageResults.bosses;
    const ac = props.accounts.pageResults.accounts;
    console.log ("bosses pp",pp);
    if (!pp.ready) {
      return <WorkingOn workingOn = {"getting your boss keys for account " + accountId }/>;
    }
    // extract out the coupon data and sort it
    const data = pp.data;
    console.log ("in bosses doing account", accountId);
    
    if (accountId !== pp.things.data.accountId) {
      return <Screwed screwed = {`Expected to be working on ${accountId} but have been handed ${pp.things.data.accountId}`} /> ;
    }

    const acOb = ac.data[accountId];
    if (!acOb || !acOb.planId) {
      return <Screwed screwed = {`data not available for ${accountId}`} /> ;
    }
    
    const extraContent = <TextField
      floatingLabelText={`new key lifetime (minutes)`}
      value = {this.state.bossMinutes}
      disabled = {false}
      errorText = {this.state.errorText}
      onChange = {this.handleBossMinutesChange}
    /> ;
    
    // now render  .. this calls a generalized version so there are quite a few props
    return  ( <span>
      <div>

        <ConsoleContent 
          
          {...props}
     
          data={data}
          
          
          // whether more than one item can be selected
          multiSelectable={false}
          
          // limit size of of accounts depending on plan
          maxRows={props.auth.planId ? cs.plans[props.auth.planId].MAX_BOSSES : 1}
          
          // doesnt need to have any accounts
          minRows={0}
          
          // title
          title="Boss keys"
          
          // show account name
          subtitle={"account " + accountId}
          
          // what to do when remove is requested
          removeAction={()=>this.handleRemoveBosses(accountId)}
          
          // what do do when add is requetsed
          addAction={()=>{
            const pack = {
              params: {
                seconds:this.state.bossMinutes*60
              },
              planId:acOb.planId,
              accountId
            };
            return acAddBoss (pack);
          }}
          
          
          // the table headings
          header={["Key","expires"]}
          
          // dont need a checkbox
          displayRowCheckbox = {false}
          
          // handle selected item
          handleSelection = {(rowSelection)=>this.handleBossSelection (rowSelection,data)}
          
          // how to figure out which items are selected
          makeSelectedItems = {()=>props.accounts.selectedBosses}
          
          // map selected items to their row numbers
          makeSelectedRows={()=> {
          
            // for bosses, the data is just the keys
            const dataKeys = data && data.map(d=>d.key) || [];
            
            return props.accounts.selectedBosses.map((d)=>dataKeys.indexOf(d)).filter((d,i)=>d !== -1);
          }}
          
          // how to generate rows in the table
          makeRows={(selectedRows)=>{

            // selectedRows not necessary
            // make table rows
            return data.map ((ob,i)=>[
              <XClipboard content={ob.key}/>,
              moment(ob.validtill).format("lll")
            ]);
    
              
          }}
          
          // warning if delete is selected
          dialogContent={(id) => `The boss keys and analytics for account ${id} 
               will be removed. This operation cannot be undone.`}
          
          // title if delete is selected
          dialogTitle = {"Removing accounts"}

          // allow changing of minutes for boss keys
          extraContent = {extraContent} 
         
        />
      </div>

    </span>);
  }
// the accounts section of the console
the accounts section of the console
the accounts section of the console
render() {
    const props = this.props;
    const accountId = props.accounts.selectedAccounts[0];
    if (!accountId) return <span></span>;
    const pp = props.accounts.pageResults.bosses;
    const ac = props.accounts.pageResults.accounts;
    console.log ("bosses pp",pp);
    if (!pp.ready) {
      return <WorkingOn workingOn = {"getting your boss keys for account " + accountId }/>;
    }
    const data = pp.data;
    console.log ("in bosses doing account", accountId);
    if (accountId !== pp.things.data.accountId) {
      return <Screwed screwed = {`Expected to be working on ${accountId} but have been handed ${pp.things.data.accountId}`} /> ;
    }
    const acOb = ac.data[accountId];
    if (!acOb || !acOb.planId) {
      return <Screwed screwed = {`data not available for ${accountId}`} /> ;
    }
    const extraContent = <TextField
      floatingLabelText={`new key lifetime (minutes)`}
      value = {this.state.bossMinutes}
      disabled = {false}
      errorText = {this.state.errorText}
      onChange = {this.handleBossMinutesChange}
    /> ;
    return  ( <span>
      <div>
        <ConsoleContent 
          {...props}
          data={data}
          multiSelectable={false}
          maxRows={props.auth.planId ? cs.plans[props.auth.planId].MAX_BOSSES : 1}
          minRows={0}
          title="Boss keys"
          subtitle={"account " + accountId}
          removeAction={()=>this.handleRemoveBosses(accountId)}
          addAction={()=>{
            const pack = {
              params: {
                seconds:this.state.bossMinutes*60
              },
              planId:acOb.planId,
              accountId
            };
            return acAddBoss (pack);
          }}
          header={["Key","expires"]}
          displayRowCheckbox = {false}
          handleSelection = {(rowSelection)=>this.handleBossSelection (rowSelection,data)}
          makeSelectedItems = {()=>props.accounts.selectedBosses}
          makeSelectedRows={()=> {
            const dataKeys = data && data.map(d=>d.key) || [];
            return props.accounts.selectedBosses.map((d)=>dataKeys.indexOf(d)).filter((d,i)=>d !== -1);
          }}
          makeRows={(selectedRows)=>{
            return data.map ((ob,i)=>[
              <XClipboard content={ob.key}/>,
              moment(ob.validtill).format("lll")
            ]);
          }}
          dialogContent={(id) => `The boss keys and analytics for account ${id} 
               will be removed. This operation cannot be undone.`}
           if delete is selected
          dialogTitle = {"Removing accounts"}
          extraContent = {extraContent} 
        />
      </div>
    </span>);
  }
render ( ) { const props = this . props ; const accountId = props . accounts . selectedAccounts [ 0 ] ; if ( ! accountId ) return < span > < / span > ; const pp = props . accounts . pageResults . bosses ; const ac = props . accounts . pageResults . accounts ; console . log ( "bosses pp" , pp ) ; if ( ! pp . ready ) { return < WorkingOn workingOn = { "getting your boss keys for account " + accountId } / > ; } const data = pp . data ; console . log ( "in bosses doing account" , accountId ) ; if ( accountId !== pp . things . data . accountId ) { return < Screwed screwed = { ` ${ accountId } ${ pp . things . data . accountId } ` } / > ; } const acOb = ac . data [ accountId ] ; if ( ! acOb || ! acOb . planId ) { return < Screwed screwed = { ` ${ accountId } ` } / > ; } const extraContent = < TextField floatingLabelText = { ` ` } value = { this . state . bossMinutes } disabled = { false } errorText = { this . state . errorText } onChange = { this . handleBossMinutesChange } / > ; return ( < span > < div > < ConsoleContent { ... props } data = { data } multiSelectable = { false } maxRows = { props . auth . planId ? cs . plans [ props . auth . planId ] . MAX_BOSSES : 1 } minRows = { 0 } title = "Boss keys" subtitle = { "account " + accountId } removeAction = { ( ) => this . handleRemoveBosses ( accountId ) } addAction = { ( ) => { const pack = { params : { seconds : this . state . bossMinutes * 60 } , planId : acOb . planId , accountId } ; return acAddBoss ( pack ) ; } } header = { [ "Key" , "expires" ] } displayRowCheckbox = { false } handleSelection = { ( rowSelection ) => this . handleBossSelection ( rowSelection , data ) } makeSelectedItems = { ( ) => props . accounts . selectedBosses } makeSelectedRows = { ( ) => { const dataKeys = data && data . map ( d => d . key ) || [ ] ; return props . accounts . selectedBosses . map ( ( d ) => dataKeys . indexOf ( d ) ) . filter ( ( d , i ) => d !== - 1 ) ; } } makeRows = { ( selectedRows ) => { return data . map ( ( ob , i ) => [ < XClipboard content = { ob . key } / > , moment ( ob . validtill ) . format ( "lll" ) ] ) ; } } dialogContent = { ( id ) => ` ${ id } ` } dialogTitle = { "Removing accounts" } extraContent = { extraContent } / > < / div > < / span > ) ; }
the accounts section of the console
the accounts section of the console
// nothing to do yet // here's where the account API results are stored // extract out the coupon data and sort it // now render  .. this calls a generalized version so there are quite a few props // whether more than one item can be selected // limit size of of accounts depending on plan // doesnt need to have any accounts // title // show account name // what to do when remove is requested // what do do when add is requetsed // the table headings // dont need a checkbox // handle selected item // how to figure out which items are selected // map selected items to their row numbers // for bosses, the data is just the keys // how to generate rows in the table // selectedRows not necessary // make table rows // warning if delete is selected // title if delete is selected // allow changing of minutes for boss keys