Search code examples
clojurefrontendelectric-clojure

Electric Clojure - how to add new values into table? (as table format)

I started to learn Electric Clojure and started to make some educational projects (very simple because unfortunately there is no detailed documentation about the frontend development side, dom elements and implementations etc and even more I don't have experience with frontend development) and I need some help with when the user inputs a new value I would like to see that value in the table.

(e/defn TableApp []
  (e/client
    (let [!userName (atom "")
          !email (atom "")]
      (dom/input (dom/props {:placeholder "Please write your username..."})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! !userName givenValue)
                (set! (.-value dom/node)
                  (dom/props {:placeholder (str "Given Username= " givenValue)})))))))
      (dom/input (dom/props {:placeholder "Please write your email..."})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! !email givenValue)
                (set! (.-value dom/node)
                  (dom/props {:placeholder (str "Given email= " givenValue)})))))))

      (dom/table (dom/props {:class "hyperfiddle"})
        (e/client
          (dom/tr (dom/td (dom/text (str "Username: " (e/watch !userName)))))
          (dom/tr (dom/td (dom/text (str "Email: " (e/watch !email))))))))))

When I input a value I can see that in the table as you can see here. enter image description here

Here when I input a value that overwrites my old variables(I know I wrote my code like that because I don't know how to do it as I asking for help here. (like in table format)) enter image description here

What is the best way to do that? (If possible I would like to control value inputs with a submit button instead enter, that would be a good example for me for future studies) Thank you so much!

Solution 
  • (e/defn TableApp []
  (e/client
    (let [*userNamePlaceHolder (atom "Please write your username...")
          userNamePlaceHolder (e/watch *userNamePlaceHolder)]
      (dom/input (dom/props {:placeholder userNamePlaceHolder})
        (dom/on "keydown"
          (e/fn [enter]
            (when (= "Enter" (.-key enter))
              (when-some [givenValue (contrib.str/empty->nil (-> enter .-target .-value))]
                (reset! *userNamePlaceHolder (str "Given Username= " givenValue))
                (reset! !userName givenValue)
                (set! (.-value dom/node) "")
...
)))