Skip to content
Developer home
X3

Menu component and Order component (which contains Customer filter)

  Less than to read

In this step, we add Menu component and Order component (which contains Customer filter).

  1. Add menu-component.js in src/components folder

    import * as React from 'react';
    import { Menu, MenuItem, SubmenuBlock } from 'carbon-react/lib/components/menu';
    import NavigationBar from 'carbon-react/lib/components/navigation-bar';
    import Tile from 'carbon-react/lib/components/tile';
    import Content from 'carbon-react/lib/components/content';
    
    
    export default class MenuComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
    
      render() {
        return (
          <div>
            <Tile>
              <Content title=''>
                <img
                  src='/sage-logo.svg' alt='Sage'
                  className='se-navbar-logo'
                />
              </Content>
              <Content title=''>
                <NavigationBar>
                  <Menu>
                    <MenuItem submenu='Order'>
                      <SubmenuBlock>
                        <MenuItem value='Create' onClick={ this.props.chooseMenu }>Create</MenuItem>
                        <MenuItem value='History' onClick={ this.props.chooseMenu }>History</MenuItem>
                      </SubmenuBlock>
                    </MenuItem>
                  </Menu>
                </NavigationBar>
              </Content>
            </Tile>
          </div>
        );
      }
    }
    
  2. Add component called order-component.js which will contain 2 modes (History or Create)

    import * as React from 'react';
    
    export default class OrderComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
    
      render() {
        const { mode } = this.props;
        return (
          <div className='se-page-body'>
    
          </div>
        );
      }
    }
    
  3. Then we connect these components to the App component app.js:

    import * as React from 'react';
    import EmptyState from './utils';
    import MenuComponent from './components/menu-component';
    import OrderComponent from './components/order-component';
    
    
    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          mode: ''
        };
      }
    
      displayMode = ({ target }) => {
        if (target.innerText && target.innerText.length > 0) {
          this.setState({ mode: target.innerText });
        } else {
          this.setState({ mode: undefined });
        }
      };
    
      render() {
        return (
          <>
            <MenuComponent chooseMenu={ this.displayMode } />
            {!this.state.mode && <EmptyState />}
            {this.state.mode && <OrderComponent mode={ this.state.mode } />}
          </>
        );
      }
    }
    
  4. In the end of this step we have this file structure:

    Step 4

    Then you can run npm install then npm start to see the menu page

    Step 4

    You can also download the VSCode project at the end of this step.


Steps