cmd/web/js/header_footer.jsx

   1 import React from 'react';
   2
   3 class Signout extends React.Component {
   4   render = () => {
   5     return <a href="/signout"><u>Logout</u></a>;
   6   }
   7 }
   8
   9 class MyAccount extends React.Component {
  10   render = () => {
  11     return <a href="/account"><u>Account</u></a>;
  12   }
  13 }
  14
  15 class Admin extends React.Component {
  16   render = () => {
  17     return <a href="/admin"><u>Admin</u></a>;
  18   }
  19 }
  20
  21 class Logo extends React.Component {
  22   render() {
  23     return <div id="logo" className="w-100 h-100 align-self-center">
  24              <h1><a href="/">CryptoPF</a></h1>
  25            </div>;
  26   }
  27 }
  28
  29 class Footer extends React.Component {
  30   render = () => {
  31     var elements = this.props.elements;
  32     if (elements === undefined) {
  33       elements = [];
  34     }
  35
  36     if (this.props.isAdmin === true) {
  37       elements = elements.concat(<Admin />);
  38     }
  39
  40     if (this.props.isLoggedIn === true) {
  41       elements = elements.concat(<MyAccount />);
  42       elements = elements.concat(<Signout />);
  43     }
  44
  45     if (elements.length > 0) {
  46       elements = [<hr key="hr"/>].concat(elements);
  47     }
  48
  49     var rows = elements.map(function(element, i) {
  50       return <div className="row text-center"  key={'footer-el-' + i}>
  51                <div className="col-12">
  52                  {element}
  53                </div>
  54              </div>;
  55     });
  56     return <div id="footer" className="row">
  57              <div className="offset-4 col-4 d-md-none">
  58                {rows}
  59              </div>
  60            </div>;
  61   }
  62 }
  63
  64 class Header extends React.Component {
  65   render = () => {
  66     var elements = this.props.elements;
  67     if (elements === undefined) {
  68       elements = [];
  69     }
  70
  71     if (this.props.isAdmin === true) {
  72       elements = elements.concat(<Admin />);
  73     }
  74
  75     if (this.props.isLoggedIn === true) {
  76       elements = elements.concat(<MyAccount />);
  77       elements = elements.concat(<Signout />);
  78     }
  79
  80     elements = elements.map(function(element, i) {
  81       return <div className="text-center header-menu-section"  key={'header-el-' + i}>
  82                {element}
  83              </div>;
  84     });
  85
  86     return <div id="header" className="row">
  87               <div className="offset-3 col-6 offset-md-4 col-md-4">
  88                 <Logo />
  89               </div>
  90               <div className="col-3 col-md-4 align-self-center h-100 d-none d-md-flex justify-content-end">
  91                 {elements}
  92               </div>
  93            </div>;
  94   }
  95 }
  96
  97 export {
  98   Header,
  99   Footer,
 100 };