This is a project created for the purpouse of learning Reagent.
State which only exist at the component environment
Editing giggin.components.gig-editor
All these forms are equivalent,
#(.log js/console (.-value (.-target %)))
#(.log js/console (-> %
.-target
.-value))
#(.log js/console (.. %
-target
-value))
#(.log js/console (.. % -target -value))
”(…) We will be using these inputs to change values in our model and save them to our state. Additionally, we will be populating these values, when we will be editing a gig (model).”
Example: our editor-application that instantiate our model
.
Here, we use values
as our core state
for the editor-application.
Read: next step
(ns giggin.components.gig-editor)
(defn gig-editor-footer [modal]
[:div.modal__footer
[:button.btn.btn--link.float--left
{:on-click #(reset! modal false)}
"Cancel"]
[:button.btn.btn--secondary
"Save"]])
(defn gig-editor-body-form [{:keys [id type value values]}]
[:div.form__group
[:label.form__label {:for id } id]
[:input.form__input {:type type
:id id
:value value ;;(:title @values)
:on-change #(do (swap! values assoc (keyword id) (.. % -target -value))
(.log js/console (.. % -target -value)))}]])
(defn gig-editor-body-form-soldout [values]
[:div.form__group
[:label.form__label {:for "sold-out"} "sold-out"]
[:label.form__switch
[:input {:type :checkbox
:checked (:sold-out @values)
:on-change #(swap! values assoc :sold-out (.. % -target -checked))}]
[:i.form__icon]]])
(defn gig-editor
"Component responsible for bridging the user to the functionality of adding gigs to the plataform"
[modal values]
[:div.modal (when @modal {:class "active"})
[:div.modal__overlay]
[:div.modal__container
[:div.modal__body
(gig-editor-body-form {:id "title" :type "text" :value (:title @values) :values values})
(gig-editor-body-form {:id "desc" :type "text" :value (:desc @values) :values values})
(gig-editor-body-form {:id "img" :type "text" :value (:img @values) :values values})
(gig-editor-body-form {:id "price" :type "number" :value (:price @values) :values values})
(gig-editor-body-form-soldout values)]
(gig-editor-footer modal)]])
Next step: This value, called values, only changes locally, where it’s called (e.i., at <a href=”file:src/giggin/components/gigs.cljs::(defn gigs”>giggin.gig).
(defn gigs
[]
(let [modal-plus (r/atom false)
modal-minus (r/atom false)
values (r/atom {:id nil :title "" :desc "" :img "" :price 0 :sold-out false})]
(fn []
[:main
[:div.gigs
(modal-add modal-plus)
(modal-remove modal-minus)
(gig-editor modal-plus values)
(for [{:keys [id img title price desc]} (vals @state/gigs)]
(gig id img title price desc))]])))
The goal, now, is to store this local-variable
at our local-database
. That
is, migrate our local-state to database-state.