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

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import { withRouter } from 'react-router';
     4  
     5  import { update } from '../ducks/app';
     6  import Link from '../components/Link';
     7  import SocketModal from '../components/SocketModal';
     8  
     9  class App extends Component {
    10    state = {
    11      socketModal: false,
    12    };
    13  
    14    render = () => {
    15      const {
    16        children, connected, dispatch, requests,
    17      } = this.props;
    18      const { socketModal } = this.state;
    19  
    20      return (
    21        <React.Fragment>
    22          <SocketModal
    23            visible={socketModal}
    24            onClose={() => this.setState({ socketModal: false })}
    25            onChange={({ hostname, port }) =>
    26              dispatch(update({ url: `ws://${hostname}:${port}/ws` }))
    27            }
    28          />
    29          <nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom">
    30            <ul className="navbar-nav">
    31              <li className="nav-item">
    32                <a className="nav-link" data-widget="pushmenu" href="#">
    33                  <i className="fa fa-bars" />
    34                </a>
    35              </li>
    36            </ul>
    37          </nav>
    38  
    39          <aside className="main-sidebar sidebar-dark-primary elevation-4">
    40            <a href="" className="brand-link">
    41              <span className="brand-text font-weight-light">stampzilla-go</span>
    42            </a>
    43  
    44            <div className="sidebar">
    45              <nav className="mt-2">
    46                <ul
    47                  className="nav nav-pills nav-sidebar flex-column"
    48                  data-widget="treeview"
    49                  role="menu"
    50                  data-accordion="false"
    51                >
    52                  <li className="nav-item">
    53                    <Link to="/" className="nav-link" activeClass="active">
    54                      <i className="nav-icon fa fa-tachometer" />
    55                      Dashboard
    56                    </Link>
    57                  </li>
    58                  <li className="nav-item">
    59                    <Link to="/aut" className="nav-link" activeClass="active">
    60                      <i className="nav-icon fa fa-magic" />
    61                      Automation
    62                    </Link>
    63                  </li>
    64                  <li className="nav-item">
    65                    <Link to="/nodes" className="nav-link" activeClass="active">
    66                      <i className="nav-icon fa fa-code" />
    67                      Nodes
    68                    </Link>
    69                  </li>
    70                  <li className="nav-item">
    71                    <Link
    72                      to="/security"
    73                      className="nav-link"
    74                      activeClass="active"
    75                    >
    76                      <i className="nav-icon fa fa-shield" />
    77                      <span>Security</span>
    78                      {requests && requests.size > 0 && (
    79                        <div className="badge badge-danger">{requests.size}</div>
    80                      )}
    81                    </Link>
    82                  </li>
    83                  <li className="nav-item mt-4">
    84                    <Link to="/debug" className="nav-link" activeClass="active">
    85                      <i className="nav-icon fa fa-terminal" />
    86                      Debug
    87                    </Link>
    88                  </li>
    89                </ul>
    90              </nav>
    91            </div>
    92          </aside>
    93  
    94          <div className="content-wrapper">
    95            {connected === false && (
    96              <div className="p-4 bg-danger">
    97                <button
    98                  className="btn btn-secondary float-right"
    99                  style={{ marginTop: '-8px' }}
   100                  onClick={() => this.setState({ socketModal: true })}
   101                >
   102                  Change socket url
   103                </button>
   104                Not connected!
   105              </div>
   106            )}
   107            <div className="content-header">
   108              <div className="container-fluid">
   109                <div className="row mb-2">
   110                  <div className="col-sm-6">
   111                    <h1 className="m-0 text-dark" style={{ display: 'none' }}>
   112                      Debug
   113                    </h1>
   114                  </div>
   115                </div>
   116              </div>
   117            </div>
   118  
   119            <div className="content">{children}</div>
   120          </div>
   121  
   122          <aside className="control-sidebar control-sidebar-dark" />
   123        </React.Fragment>
   124      );
   125    };
   126  }
   127  
   128  const mapToProps = state => ({
   129    connected: state.getIn(['connection', 'connected']),
   130    requests: state.getIn(['requests', 'list']),
   131  });
   132  
   133  export default withRouter(connect(mapToProps)(App));