Self order system(1) intro. to React

Posted byktke109

1. Introduction

I try to develop self order system of Japanese Monjayaki shop.

2. Prerequities

OS: Windows10
UI framework: React 17(using create-react-app) and Material UI 4.11

3. Goal of this article

The goal is to create the followings.
(1) Navigation menu as toggle button
(2) Language menu which switch display language

4. Installing React and Material UI

(1) Install nodejs and npm using installer from [1]

(2) Install create-react-app and yarn globally. create-react-app is a toolchain for developing react app. yarn is a node.js package manager.

npm install -g create-react-app
npm install -g yarn

(3) Install react

create-react-app self-order
cd self-order
yarn add @material-ui/core
yarn add @material-ui/icons
yarn add @material-ui/lab

5. Code

Demo is available from the following link.
https://osmanthus.work/monja/

5.1 HTML(index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>Monja Store</title>
    <style>
      main {
        display: flex;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

5.2 Code(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from '@material-ui/styles';

class App extends React.Component {
  constructor() {
    super();
    this.handleData = this.handleData.bind(this);
    this.state = {
      language: 'ja'
    };
  }
  
  handleData(data) {
    this.setState({
      language: data
    });
  }
  
  render() {
    return (
      <div>
        <main>
          <Head language_cd = {this.state.language} style={{width:10}}/>
          <LangButtons handlerFromParant={this.handleData}/> 
        </main>
        <div><NavButtons language_cd = {this.state.language} /></div>
      </div>
    );
  }
}

export function Head({language_cd}){
  let message;
  if(language_cd === 'ja'){
    message = 'もんじゃ焼き屋 セルフオーダー';
  }else{
    message = 'Monjayaki Store Self Order';
  }
  return <h1 style={{textAlign: 'center', width:1000, backgroundColor: '#99ccff'}}>{message}</h1>;
}


const theme = createMuiTheme({
  // Set up default theme with color palette, typography etc
  palette: {
    primary: {
      main: "#ff00ff"
    }
  }
});

theme.overrides.MuiToggleButton = {
  selected: {
    backgroundColor: 'rgba(255, 99, 71, 0.5) !important'
  }
};

export function NavButtons({language_cd}) {
  const [alignment, setAlignment] = React.useState('top');

  const handleAlignment = (event, newAlignment) => {
    if(newAlignment != null){
      setAlignment(newAlignment);
    }
  };

  const style = {color: "#000000", bordercolor: "#000000", margin: 5, width: 150};

  return (
    <ToggleButtonGroup
      value={alignment}
      exclusive
      onChange={handleAlignment}
      aria-label="text alignment"
    >
      <ToggleButton value = "top" style={style}>
      {language_cd === 'ja' ? 'トップ':'Top'}
      </ToggleButton>
      <ToggleButton value = "monjayaki" style={style}>
      {language_cd === 'ja' ? 'もんじゃ焼き':'Monjayaki'}  
      </ToggleButton>
      <ToggleButton value = "okonomiyaki" style={style}>
      {language_cd === 'ja' ? 'お好み焼き':'Okonomiyaki'}  
      </ToggleButton>
      <ToggleButton value = "single" style={style}>
      {language_cd === 'ja' ? '一品料理':'Single dish'}   
      </ToggleButton>
      <ToggleButton value = "dessert" style={style}>
      {language_cd === 'ja' ? 'デザート':'Dessert'}     
      </ToggleButton>
      <ToggleButton value = "history" style={style}>
      {language_cd === 'ja' ? '注文料理':'History'}   
      </ToggleButton>
      <ToggleButton value = "accounting" style={style}>
      {language_cd === 'ja' ? '会計':'Accounting'}    
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

class LangButtons extends React.Component {
  constructor() {
    super();
    this.state = {
      language: 'ja'
    };
  }
  
  switchLanguage(evt, language_cd) {
    evt.preventDefault();
    if(language_cd != null){
      this.props.handlerFromParant(language_cd);
      
      this.setState({
        language: language_cd
      });
    }
  }
  
  render(){
    const style = {color: "#000000", bordercolor: "#FF334C", margin: 5, width: 150};
    return (
      <ThemeProvider theme={theme}>
      <ToggleButtonGroup
        value = {this.state.language}
        exclusive
        onChange = {this.switchLanguage = this.switchLanguage.bind(this)}
        aria-label = "text alignment"
      >
        <ToggleButton value = "ja" style={style}>
          日本語
        </ToggleButton>
        <ToggleButton value = "en" style={style}>
          ENGLISH
        </ToggleButton>
      </ToggleButtonGroup>
      </ThemeProvider>
      )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

6. References

[1] Downloads node.js Latest LTS Version: 14.15.5 (includes npm 6.14.11)
https://nodejs.org/en/download/

[2] Create a New React App
https://reactjs.org/docs/create-a-new-react-app.html#creating-a-toolchain-from-scratch

[3] Create React App, Getting Started
https://create-react-app.dev/docs/getting-started/

Published by ktke109

I love open souce database management systems.