Create and fetch categories

Author: prabhanshuguptagit

src/cljs/villagebookUI/components/category_table.cljs

@@ -0,0 +1,5 @@
+(ns villagebookUI.components.category-table)
+
+(defn category-table
+  [category]
+  [:h5 (:name category)])

src/cljs/villagebookUI/components/content_box.cljs

@@ -0,0 +1,35 @@
+(ns villagebookUI.components.content-box
+  (:require [reagent.core :as r]
+            [villagebookUI.components.create-category :refer [create-category-form]]
+            [villagebookUI.components.category-table :refer [category-table]]
+            [villagebookUI.fetchers :as fetchers]
+            [villagebookUI.store.categories :as category-store]))
+
+(defn- category-active?
+  [category categories]
+  (or (= (category-store/get-selected) category)
+      (empty? categories)))
+
+(defn category-tab
+  [categories category name]
+  [:a.category-tab {:href     "#"
+                    :key      (:id category)
+                    :on-click #(category-store/set-selected! category)
+                    :class    [(if (category-active? category categories)
+                                 :active)]}
+   name])
+
+(defn content-box
+  [org categories on-mount-cb]
+  (on-mount-cb)
+  (fn [org categories]
+    [:div.content-box
+     [:div.category-tabs
+      (doall
+       (for [category categories]
+         [category-tab categories category (:name category)]))
+      [category-tab categories :new "+ Add new"]]
+     [:div.simple-card
+      (if (category-active? :new categories)
+        [create-category-form]
+        [category-table (category-store/get-selected)])]]))

src/cljs/villagebookUI/components/create_category.cljs

@@ -2,39 +2,41 @@
   (:require [reagent.core :as r]
             [villagebookUI.helpers :as helpers]
             [villagebookUI.components.utils :as utils]
+            [villagebookUI.fetchers :as fetchers]
             [villagebookUI.api.category :as api]
             [villagebookUI.store.organisations :as org-store]))
 
 (defn submit-create-category
   [name fields]
-  (api/create {:name   name
-               :fields (map #(second %) fields)}
-              (:id (org-store/get-selected))
-              #(helpers/show-alert-bottom! :success (str "Category " name " created"))
-              #(helpers/show-alert-bottom! :error (:response %))))
+  (let [org-id (:id (org-store/get-selected))]
+    (api/create {:name   name
+                 :fields (map #(second %) fields)}
+                org-id
+                #(do
+                   (fetchers/fetch-categories! org-id last)
+                   (helpers/show-alert-bottom! :success (str "Category " name " created")))
+                #(helpers/show-alert-bottom! :error (:response %)))))
 
 (defn new-field-key
   [fields]
   (-> fields last first inc))
 
 (def new-field
-  {:name "Name"})
+  {:name "New column"})
 
 (defn create-category-form []
   (let [name   (r/atom "")
-        fields (r/atom (array-map
-                        1 {:name "Name"}
-                        2 {:name "Cost"}))]
+        fields (r/atom (array-map 1 new-field))]
     (fn []
       [:div
-       [utils/input {:type        "text"
-                     :class       [:create-category-name]
-                     :placeholder "Category name"
-                     :on-change   #(reset! name %)}]
        [:form.form-group
         {:on-submit #(do
                        (.preventDefault %)
                        (submit-create-category @name @fields))}
+        [utils/input {:type        "text"
+                      :class       [:create-category-name]
+                      :placeholder "Category name"
+                      :on-change   #(reset! name %)}]
         [:div.input-group.mb-3
          [:div.input-group-prepend
           [:span.input-group-text "Properties"]]
@@ -48,7 +50,7 @@
                           :value       (:name field)
                           :on-change   #(swap! fields assoc k {:name %})}]))
          [:div.input-group-append
-          [:button.btn.btn-outline-secondary
+          [:a.btn.btn-outline-secondary
            {:on-click #(swap! fields assoc (new-field-key @fields) new-field)}
            "+"]]]
         [:button {:type "submit" :class [:btn :btn-outline-primary]} "Create"]]])))

src/cljs/villagebookUI/components/main_content.cljs

@@ -3,18 +3,21 @@
             [villagebookUI.api.organisation :as org-api]
             [villagebookUI.fetchers :as fetchers]
             [villagebookUI.components.utils :as utils]
-            [villagebookUI.components.create-category :refer [create-category-form]]
             [villagebookUI.store.ui :as ui-store]
+            [villagebookUI.store.categories :as category-store]
+            [villagebookUI.components.content-box :refer [content-box]]
             [villagebookUI.helpers :as helpers]))
 
-(declare navbar content-box delete-org-btn delete-org)
+(declare navbar delete-org-btn delete-org)
 
 (defn main-content []
   (let [org (org-store/get-selected)]
     [:div.main-content
      [navbar org]
      (if org
-       [content-box]
+       [content-box org
+        (category-store/get-by-org (:id org))
+        #(fetchers/fetch-categories! (:id org) first)]
        [:h5 "Oops, page not found"])
      [utils/alert-bottom (ui-store/get-el-state :alert-bottom)]]))
 
@@ -24,15 +27,6 @@
    [:h5 (:name org)]
    [delete-org-btn org]])
 
-(defn content-box []
-  [:div.content-box
-   [:div.category-tabs
-    [:a.category-tab {:href "#"} "Category 1"]
-    [:a.category-tab {:href "#"} "Category 2"]
-    [:a.category-tab.active {:href "#"} "+ Add new"]]
-   [:div.simple-card
-    [create-category-form]]])
-
 (defn delete-org-btn
   [org]
   (if (= (:permission org) "owner")

src/cljs/villagebookUI/components/sidebar.cljs

@@ -2,7 +2,8 @@
   (:require [reagent.core :as r]
             [villagebookUI.components.utils :as utils]
             [villagebookUI.components.create-org :refer [org-creation-form]]
-            [villagebookUI.store.organisations :as org-store]))
+            [villagebookUI.store.organisations :as org-store]
+            [villagebookUI.fetchers :as fetchers]))
 
 (defn sidebar []
   (let [creating-org (r/atom false)]
@@ -21,7 +22,8 @@
              [:li.item {:key   id
                         :class (if (= id (:id (org-store/get-selected)))
                                  [:active])}
-              [:a.sidebar-link {:href (str "/orgs/" id)}
+              [:a.sidebar-link {:href     (str "/orgs/" id)
+                                :on-click #(fetchers/fetch-categories! (:id org) first)}
                [utils/patch (:color org)]
                (:name org)]]))
           [:li.item

src/cljs/villagebookUI/fetchers.cljs

@@ -3,7 +3,9 @@
             [villagebookUI.store.user :as user-store]
             [villagebookUI.api.user :as user-api]
             [villagebookUI.store.organisations :as org-store]
-            [villagebookUI.api.organisation :as org-api]))
+            [villagebookUI.api.organisation :as org-api]
+            [villagebookUI.store.categories :as category-store]
+            [villagebookUI.api.category :as category-api]))
 
 
 (defn fetch-user! []
@@ -26,3 +28,15 @@
              :id
              (str "/orgs/")))))
    identity))
+
+(defn fetch-categories!
+  [org-id & [selector-fn]]
+  (category-api/get-all
+   org-id
+   (fn [res]
+     (category-store/add-all! org-id res)
+     (when selector-fn
+       (->> (category-store/get-by-org org-id)
+            selector-fn
+            category-store/set-selected!)))
+   #(category-store/add-all! org-id nil)))

src/cljs/villagebookUI/store/categories.cljs

@@ -6,6 +6,9 @@
 (def categories
   (r/cursor state [:categories]))
 
+(def selected-category
+  (r/cursor state [:selected-category]))
+
 (defn add-all! [org-id category-list]
   (swap! categories assoc org-id (map #(keywordize-keys %) category-list)))
 
@@ -15,5 +18,11 @@
 (defn get-by-org [org-id]
   (get @categories org-id))
 
+(defn set-selected! [category]
+  (reset! selected-category (keywordize-keys category)))
+
+(defn get-selected []
+  @selected-category)
+
 (defn init! []
   (reset! categories {}))