Convert menu to closure component

josephspurrier · Jul 7, 2020 · 0d4d6ac · 0d4d6ac
1 parent 3da2b29
commit 0d4d6ac
Showing 1 changed file with 69 additions and 67 deletions.
diff --git a/src/app/ui/src/component/menu.js b/src/app/ui/src/component/menu.js
@@ -1,83 +1,85 @@
 import m from "mithril"; // eslint-disable-line no-unused-vars
 import CookieStore from "@/module/cookiestore";
 
-function logout() {
-  CookieStore.clear();
-  m.route.set("/");
-}
+var View = () => {
+  let logout = function () {
+    CookieStore.clear();
+    m.route.set("/");
+  };
 
-var View = {
-  view: () => (
-    <main>
-      <nav
-        class="navbar is-black"
-        role="navigation"
-        aria-label="main navigation"
-      >
-        <div class="navbar-brand">
-          <m.route.Link class="navbar-item" href="/" data-cy="home-link">
-            <strong>gomithrilapp</strong>
-          </m.route.Link>
+  return {
+    view: () => (
+      <main>
+        <nav
+          class="navbar is-black"
+          role="navigation"
+          aria-label="main navigation"
+        >
+          <div class="navbar-brand">
+            <m.route.Link class="navbar-item" href="/" data-cy="home-link">
+              <strong>gomithrilapp</strong>
+            </m.route.Link>
 
-          <a
-            id="mobile-navbar-top"
-            role="button"
-            class="navbar-burger burger"
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbar-top"
-            onclick={() => {
-              const mob = document.getElementById("mobile-navbar-top");
-              const nav = document.getElementById("navbar-top");
-              mob.classList.toggle("is-active");
-              nav.classList.toggle("is-active");
-            }}
-          >
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-          </a>
-        </div>
+            <a
+              id="mobile-navbar-top"
+              role="button"
+              class="navbar-burger burger"
+              aria-label="menu"
+              aria-expanded="false"
+              data-target="navbar-top"
+              onclick={() => {
+                const mob = document.getElementById("mobile-navbar-top");
+                const nav = document.getElementById("navbar-top");
+                mob.classList.toggle("is-active");
+                nav.classList.toggle("is-active");
+              }}
+            >
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </a>
+          </div>
 
-        <div id="navbar-top" class="navbar-menu">
-          <div class="navbar-end">
-            <div class="navbar-item has-dropdown is-hoverable">
-              <a class="navbar-link">Menu</a>
+          <div id="navbar-top" class="navbar-menu">
+            <div class="navbar-end">
+              <div class="navbar-item has-dropdown is-hoverable">
+                <a class="navbar-link">Menu</a>
 
-              <div class="navbar-dropdown is-right">
-                {!CookieStore.isLoggedIn() && (
-                  <m.route.Link class="navbar-item" href="/login">
-                    Login
-                  </m.route.Link>
-                )}
-                <a
-                  class="navbar-item"
-                  href={`https://petstore.swagger.io/?url=${location.origin}/static/swagger.json`}
-                >
-                  Swagger
-                </a>
-                <m.route.Link class="navbar-item" href="/about">
-                  About
-                </m.route.Link>
-                <hr class="navbar-divider" />
-                {CookieStore.isLoggedIn() && (
+                <div class="navbar-dropdown is-right">
+                  {!CookieStore.isLoggedIn() && (
+                    <m.route.Link class="navbar-item" href="/login">
+                      Login
+                    </m.route.Link>
+                  )}
                   <a
-                    class="dropdown-item"
-                    onclick={() => {
-                      logout();
-                    }}
+                    class="navbar-item"
+                    href={`https://petstore.swagger.io/?url=${location.origin}/static/swagger.json`}
                   >
-                    Logout
+                    Swagger
                   </a>
-                )}
-                <div class="navbar-item">v1.0.0</div>
+                  <m.route.Link class="navbar-item" href="/about">
+                    About
+                  </m.route.Link>
+                  <hr class="navbar-divider" />
+                  {CookieStore.isLoggedIn() && (
+                    <a
+                      class="dropdown-item"
+                      onclick={() => {
+                        logout();
+                      }}
+                    >
+                      Logout
+                    </a>
+                  )}
+                  <div class="navbar-item">v1.0.0</div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </nav>
-    </main>
-  ),
+        </nav>
+      </main>
+    ),
+  };
 };
 
 export default View;