js: Extract more rendering to functions.

* js/guix-packages.js (guix.view): Extract renderPackageTable and
  renderSearchBox functions.

1 files changed, 43 insertions, 35 deletions

diff --git a/js/guix-packages.js b/js/guix-packages.js
index 024eb8c..437dca1 100644
--- a/js/guix-packages.js
+++ b/js/guix-packages.js
@@ -209,6 +209,35 @@ guix.view = function(ctrl) {
     }, "install");
   }
 
+  function renderPackageTable() {
+    return m("table.table", [
+      m("thead", [
+        m("tr", [
+          ctrl.columns.map(function(column) {
+            return m("th", {
+              class: columnHeaderClass(column),
+              onclick: function() {
+                ctrl.sortBy(column.sortField);
+              }
+            }, column.header);
+          }).concat([m("th", "")])
+        ])
+      ]),
+      m("tbody", [
+        ctrl.currentPage().map(function(package) {
+          return m("tr", [
+            m("td", renderName(package)),
+            m("td", package.version),
+            m("td", package.synopsis),
+            m("td", renderHomepage(package)),
+            m("td", renderLicense(package)),
+            m("td", renderInstallLink(package))
+          ]);
+        })
+      ])
+    ]);
+  }
+
   function renderPagination() {
     function renderPage(text, opts) {
       return m("li", {
@@ -250,6 +279,18 @@ guix.view = function(ctrl) {
     ]));
   }
 
+  function renderSearchBox() {
+    return m("input.form-control", {
+      type: "text",
+      placeholder: "Search",
+      onchange: m.withAttr("value", function(value) {
+        ctrl.searchTerm(value);
+        ctrl.doSearch();
+      }),
+      value: ctrl.searchTerm()
+    });
+  }
+
   function columnHeaderClass(column) {
     var sorter = ctrl.sorter();
 
@@ -353,41 +394,8 @@ guix.view = function(ctrl) {
       m("span.badge", ctrl.packageCount())
     ]),
     renderModal(),
-    m("input.form-control", {
-      type: "text",
-      placeholder: "Search",
-      onchange: m.withAttr("value", function(value) {
-        ctrl.searchTerm(value);
-        ctrl.doSearch();
-      }),
-      value: ctrl.searchTerm()
-    }),
-    m("table.table", [
-      m("thead", [
-        m("tr", [
-          ctrl.columns.map(function(column) {
-            return m("th", {
-              class: columnHeaderClass(column),
-              onclick: function() {
-                ctrl.sortBy(column.sortField);
-              }
-            }, column.header);
-          }).concat([m("th", "")])
-        ])
-      ]),
-      m("tbody", [
-        ctrl.currentPage().map(function(package) {
-          return m("tr", [
-            m("td", renderName(package)),
-            m("td", package.version),
-            m("td", package.synopsis),
-            m("td", renderHomepage(package)),
-            m("td", renderLicense(package)),
-            m("td", renderInstallLink(package))
-          ]);
-        })
-      ])
-    ]),
+    renderSearchBox(),
+    renderPackageTable(),
     renderPagination()
   ];
 };