Factorize Header/Footer code.

[perso/Immae/Projets/Cryptomonnaies/Cryptoportfolio/Front.git] / cmd / web / js / header_footer.jsx

diff --git a/cmd/web/js/header_footer.jsx b/cmd/web/js/header_footer.jsx
new file mode 100644 (file)
index 0000000..3cb9937
--- /dev/null
+++ b/cmd/web/js/header_footer.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+class Signout extends React.Component {
+  render = () => {
+    return <a href="/signout"><u>Logout</u></a>;
+  }
+}
+
+class Logo extends React.Component {
+  render() {
+    return <div id="logo" className="w-100 h-100 align-self-center">
+             <h1><a href="/">CryptoPF</a></h1>
+           </div>;
+  }
+}
+
+class Footer extends React.Component {
+  render = () => {
+    var elements = this.props.elements;
+    if (elements === undefined) {
+      elements = [];
+    }
+
+    if (this.props.isLoggedIn === true) {
+      elements = elements.concat(<Signout />);
+    }
+
+    if (elements.length > 0) {
+      elements = [<hr key="hr"/>].concat(elements);
+    }
+
+    var rows = elements.map(function(element, i) {
+      return <div className="row text-center"  key={'footer-el-' + i}>
+               <div className="col-12">
+                 {element}
+               </div>
+             </div>;
+    });
+    return <div id="footer" className="row">
+             <div className="offset-4 col-4 d-sm-none">
+               {rows}
+             </div>
+           </div>;
+  }
+}
+
+class Header extends React.Component {
+  render = () => {
+    var elements = this.props.elements;
+    if (elements === undefined) {
+      elements = [];
+    }
+
+    if (this.props.isLoggedIn === true) {
+      elements = elements.concat(<Signout />);
+    }
+
+    elements = elements.map(function(element, i) {
+      return <div className="text-center"  key={'header-el-' + i}>
+               {element}
+             </div>;
+    });
+
+    return <div id="header" className="row">
+              <div className="offset-3 col-6 offset-md-4 col-md-4">
+                <Logo />
+              </div>
+              <div className="col-3 col-md-4 align-self-center h-100 d-none d-sm-flex justify-content-end">
+                {elements}
+              </div>
+           </div>;
+  }
+}
+
+export {
+  Header,
+  Footer,
+};