Add 'add category button' to categories page

src/frontend/categorylist.nim

@@ -3,25 +3,33 @@ import options, json, httpcore
 import category
 
 when defined(js):
+  import sugar
   include karax/prelude
   import karax / [vstyles, kajax]
 
-  import karaxutils, error, user, mainbuttons
+  import karaxutils, error, user, mainbuttons, addcategorymodal
 
   type
     State = ref object
       list: Option[CategoryList]
       loading: bool
       status: HttpCode
+      addCategoryModal: AddCategoryModal
+
+  var state: State
 
   proc newState(): State =
     State(
       list: none[CategoryList](),
       loading: false,
-      status: Http200
+      status: Http200,
+      addCategoryModal: newAddCategoryModal(
+        onAddCategory=
+          (category: Category) => state.list.get().categories.add(category)
+      )
     )
-  var
-    state = newState()
+
+  state = newState()
 
   proc genCategory(category: Category, noBorder = false): VNode =
     result = buildHtml():
@@ -50,7 +58,18 @@ when defined(js):
     else:
       state.list = some(list)
 
-  proc renderCategories(): VNode =
+  proc renderCategoryHeader*(currentUser: Option[User]): VNode =
+    result = buildHtml(tdiv(id="add-category")):
+      text "Category"
+      if currentUser.isAdmin():
+        button(class="plus-btn btn btn-link",
+              onClick=(ev: Event, n: VNode) => (
+                state.addCategoryModal.setModalShown(true)
+              )):
+          italic(class="fas fa-plus")
+        render(state.addCategoryModal)
+
+  proc renderCategories(currentUser: Option[User]): VNode =
     if state.status != Http200:
       return renderError("Couldn't retrieve threads.", state.status)
 
@@ -68,7 +87,8 @@ when defined(js):
         table(id="categories-list", class="table"):
           thead():
             tr:
-              th(text "Category")
+              th:
+                renderCategoryHeader(currentUser)
               th(text "Topics")
           tbody():
             for i in 0 ..< list.categories.len:
@@ -80,4 +100,4 @@ when defined(js):
   proc renderCategoryList*(currentUser: Option[User]): VNode =
     result = buildHtml(tdiv):
       renderMainButtons(currentUser)
-      renderCategories()
+      renderCategories(currentUser)

src/frontend/mainbuttons.nim

@@ -16,7 +16,16 @@ when defined(js):
     let uri = makeUri("/c/" & $newCategory.id)
     navigateTo(uri)
 
-  let catPicker = newCategoryPicker(onCategoryChange=onSelectedCategoryChanged)
+  type
+    State = ref object
+      categoryPicker: CategoryPicker
+
+  proc newState(): State =
+    State(
+      categoryPicker: newCategoryPicker(onCategoryChange=onSelectedCategoryChanged),
+    )
+
+  let state = newState()
 
   proc renderMainButtons*(currentUser: Option[User], categoryId = -1): VNode =
     result = buildHtml():
@@ -30,8 +39,8 @@ when defined(js):
               li: text "community"
               li: text "dev" ]#
           if categoryId != -1:
-            catPicker.selectedCategoryID = categoryId
-            render(catPicker, currentUser, compact=false)
+            state.categoryPicker.selectedCategoryID = categoryId
+            render(state.categoryPicker, currentUser, compact=false)
 
           for btn in buttons:
             let active = btn.url == window.location.href