assignment solita#3

src/cljs/widgetshop/app/state.cljs

@@ -7,7 +7,10 @@
                       :category nil ;; the selected category
 
                       ;; Loaded product listings keyd by selected category
-                      :products-by-category {}}))
+                      :products-by-category {}
+
+                      ;; Product selected for viewing
+                      :selected-product nil}))
 
 (defn update-state!
   "Updates the application state using a function, that accepts as parameters

src/cljs/widgetshop/main.cljs

@@ -11,12 +11,6 @@
 
 
 
-;; Task 1: refactor this, the listing of products in a category should
-;; be its own component (perhaps in another namespace).
-;;
-;; Task 2: Add actions to add item to cart. See that cart badge is automatically updated.
-;;
-
 (defn widgetshop [app]
   [ui/mui-theme-provider
    {:mui-theme (get-mui-theme
@@ -46,7 +40,8 @@
 
      [ui/raised-button {:label        "Click me"
                         :icon         (ic/social-group)
-                        :on-click     #(println "clicked")}]]]])
+                        :on-click     #(println "clicked")}]]
+    [products-list/product-view (:selected-product app)]]])
 
 
 (defn main-component []

src/cljs/widgetshop/view/products_list.cljs

@@ -8,11 +8,27 @@
             [widgetshop.app.state :as state]
             [widgetshop.app.products :as products]))
 
+(defn- select-product [app product]
+  (assoc app :selected-product product))
+
+(defn select-product! [products row-index]
+  (if-let [row-index (first (js->clj row-index))]
+    (do (println (str "Selected row " row-index))
+        (state/update-state! select-product (get products row-index)))))
+
+(defn product-view [{:keys [id name description price] :as product}]
+   (when product
+     [ui/card
+      {:initially-expanded true}
+      [ui/card-header {:title name
+                       :subtitle description}]
+      [ui/card-text (str price " €")]]))
+
 (defn listing [products]
   (if (= :loading products)
     [ui/refresh-indicator {:status "loading" :size 40 :left 10 :top 10}]
 
-    [ui/table
+    [ui/table {:on-row-selection (partial select-product! products)}
      [ui/table-header {:display-select-all false :adjust-for-checkbox false}
       [ui/table-row
        [ui/table-header-column "Name"]