Please provide Solutions for Exercises

[kristianmandrup]

I have the following solution to UI exercises, not sure if they are correct?

(defui Person
  ;; TODO: Add a query for :db/id, :person/name, and a recursive access of :person/mate
  ;; TODO: Add an ident that uses :db/id
  Object
  (initLocalState [this] {:checked false})
  (render [this]
    (let [{:keys [person/name person/mate]} (om/props this)
          {:keys [onDelete]} (om/get-computed this)
          checked (om/get-state this :checked)]
      (dom/li nil
        (dom/input #js {:type    "checkbox"
                        :onClick #(om/update-state! this update :checked not)
                        :checked (om/get-state this :checked)})
        (if checked
          (dom/b nil name)
          (dom/span nil name))
        (when onDelete
          (dom/button #js {:onClick #(onDelete name)} "X"))
        (when mate (dom/ul nil (om-person mate)))))))

(defui PeopleWidget
  Object
  (render [this]
    ; TODO: (ex 4): Create a deletePerson function
    (let [{:keys [people]} (om/props this)]                                        ; TODO (ex 2): Get yo stuff
      (dom/div nil
        (if (= nil people)
          (dom/span nil "Loading...")
          (dom/div nil
            (dom/button #js {} "Save")
            (dom/button #js {} "Refresh List")
            ; TODO: (ex 4) pass deletePerson as the onDelete handler to person element
            (dom/ul nil (map #(om-person %) people))))))))

(def people-widget (om/factory PeopleWidget))

(defui Root
  Object
  (render [this]
    (let [{:keys [widget new-person last-error]} (om/props this)]
                                   ; TODO (ex 2): Get yo stuff
      (dom/div nil
        (dom/div nil (when (not= "" last-error) (str "Error " last-error)))
        (dom/div nil
          (people-widget widget)
          (dom/input #js {:type "text"})
          (dom/button #js {} "Add Person"))))))

Just playing and learning ;)

I sometimes get:

Each child in an array or iterator should have a unique "key" prop. Check the render method ofom_tutorial$B_UI_Exercises$PeopleWidget. See https://fb.me/react-warning-keys for more information.

Not sure why this happens and how to fix it? Thanks :)

[jdrorrer]

@kristianmandrup I was thinking the same thing, but stumbled across the final answers in the project here: https://github.com/awkay/om-tutorial/tree/master/src/main/om_tutorial. For your question, you should check out the ui.cljs file.

One thing I found out is where you have:

(let [{:keys [people]} (om/props this)]  

it should be:

(let [people (-> (om/props) :people)]

I'm still trying to figure out what the heck the -> does and what the difference is between that and ->> :grimacing:

[awkay]

I apologize, but I don't have time to work on the tutorial at the moment, nor do I have time to answer general questions. The tutorial is a public resource, but it is incomplete and unsupported.

In general if you have questions you should join the Slack Clojurians, and join the #om channel. There are many friendly and helpful people there that can answer questions.

[dupuchba]

@kristianmandrup you are almost right, you'll want to prefer this for "bolding" the text (dom/span (when checked #js {:style #js {:fontWeight "bold"}}) name)