tipz

client/src/navbar.jsx

@@ -1,39 +1,48 @@
 const preact = require('preact');
 const jdenticon = require('jdenticon');
 
-{/*Test to render navbar and some identicons*/}
-const Navbar = () => (
-  <div> 
-    <nav class="navbar"> 
-      <div class="navbar-end"> 
-        <a class="navbar-item is-active"> 
-          Home 
-        </a> 
-        <a class="navbar-item"> 
-          Store 
-        </a> 
-        <a class="navbar-item"> 
-          FAQ 
-        </a> 
-        <span class="navbar-item"> 
-          <a class="button is-info is-inverted"> 
-            <span class="icon"> 
-              <svg width="80" height="80" data-jdenticon-value="Blog"></svg>
-            </span> 
-            <span>Blog</span> 
-          </a> 
-        </span> 
-      </div> 
-    </nav>
+// components all the way down
+const Icon = name => (
     <span>
-      Mashy ->
-      <svg width="80" height="80" data-jdenticon-value="Mashy"></svg>
+        {name}
+        <svg width="80" height="80" data-jdenticon-value={name} />
     </span>
-    <span>
-      Ntr ->
-      <svg width="80" height="80" data-jdenticon-value="Ntr"></svg>
-    </span>
-  </div>
 );
 
-module.exports = Navbar;
+// the css attribute name `class` is reserved in js
+// so in react you have to call it `className`
+function Navbar() {
+    const NAMES = ['Mashy', 'ntr'];
+
+    return (
+        <div>
+            <nav className="navbar">
+                <div className="navbar-end">
+                    <a href="/somewhere" className="navbar-item is-active">
+                        Home
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        Store
+                    </a>
+                    <a href="/somewhere" className="navbar-item">
+                        FAQ
+                    </a>
+                    <span className="navbar-item">
+                        <a href="/somewhere" className="button is-info is-inverted">
+                            <span className="icon">
+                                <svg width="80" height="80" data-jdenticon-value="Blog" />
+                            </span>
+                            <span>Blog</span>
+                        </a>
+                    </span>
+                </div>
+            </nav>
+            {NAMES.map(Icon)}
+        </div>
+    );
+    // map is a function that is called on every element of an array
+    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
+    // that gets put into the dom
+}
+
+module.exports = Navbar;

client/src/socket.jsx

@@ -1,9 +1,8 @@
 const { toast } = require('bulma-toast');
+const cbor = require('borc');
 
 const actions = require('./actions');
 
-const cbor = require('borc');
-
 function errorToast(err) {
     console.error(err);
     return toast({