github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/routes/dashboard/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  
     4  import Card from '../../components/Card';
     5  import Device from './Device';
     6  
     7  class Nodes extends Component {
     8    render() {
     9      const { devices, nodes } = this.props;
    10  
    11      const devicesByNode = devices.reduce((acc, device) => {
    12        const [node] = device.get('id').split('.', 2);
    13        if (acc[node] === undefined) {
    14          acc[node] = [];
    15        }
    16        acc[node].push(device);
    17        return acc;
    18      }, {});
    19  
    20      return (
    21        <React.Fragment>
    22          <div className="row">
    23            <div className="col-md-4">
    24              {Object.keys(devicesByNode).map(nodeId => (
    25                <Card
    26                  title={nodes.getIn([nodeId, 'name']) || `New node of type ${nodes.getIn([nodeId, 'type'])}`}
    27                  bodyClassName="p-3"
    28                  key={nodeId}
    29                >
    30                  {devicesByNode[nodeId]
    31                    .sort((a, b) => a.get('name').localeCompare(b.get('name')))
    32                    .map(device => (
    33                      <Device device={device} key={`${nodeId}.${device.get('id')}`} />
    34                  ))}
    35                </Card>
    36                ))}
    37            </div>
    38          </div>
    39        </React.Fragment>
    40      );
    41    }
    42  }
    43  
    44  const mapToProps = state => ({
    45    devices: state.getIn(['devices', 'list']),
    46    nodes: state.getIn(['nodes', 'list']),
    47  });
    48  
    49  export default connect(mapToProps)(Nodes);