🔥 changes to effects

This commit is contained in:
alonso.torres 2020-03-26 08:36:08 +01:00
parent 57d633b1d2
commit decd3e3443
3 changed files with 19 additions and 18 deletions

View file

@ -107,6 +107,7 @@
} }
.library-tab-libraries { .library-tab-libraries {
background-color: #303236;
margin: 0.5rem; margin: 0.5rem;
width: 90%; width: 90%;
padding: 0.5rem; padding: 0.5rem;

View file

@ -8,7 +8,6 @@
(mf/defc tab-container (mf/defc tab-container
[{:keys [children selected on-change-tab]}] [{:keys [children selected on-change-tab]}]
(.log js/console (map #(-> % .-props .-title) children))
(let [first-id (-> children first .-props .-id) (let [first-id (-> children first .-props .-id)
state (mf/use-state {:selected first-id}) state (mf/use-state {:selected first-id})
selected (or selected (:selected @state)) selected (or selected (:selected @state))
@ -20,7 +19,8 @@
[:div.tab-container-tabs [:div.tab-container-tabs
(for [tab children] (for [tab children]
[:div.tab-container-tab-title [:div.tab-container-tab-title
{:on-click (partial handle-select tab) {:key (str "tab-" (-> tab .-props .-id))
:on-click (partial handle-select tab)
:class (when (= selected (-> tab .-props .-id)) "current")} :class (when (= selected (-> tab .-props .-id)) "current")}
(-> tab .-props .-title)])] (-> tab .-props .-title)])]
[:div.tab-container-content [:div.tab-container-content

View file

@ -41,9 +41,8 @@
(mf/defc icons-tab [{:keys [libraries]}] (mf/defc icons-tab [{:keys [libraries]}]
(when (and libraries (-> libraries count (> 0))) (when (and libraries (-> libraries count (> 0)))
(let [state (mf/use-state {:selected-library (-> libraries first :id)})] (let [state (mf/use-state {:selected-library (-> libraries first :id)})]
(mf/use-effect {:fn (fn [] (mf/use-effect (mf/deps (:selected-library @state))
(st/emit! (dlib/retrieve-library-data :icons (:selected-library @state)))) #(st/emit! (dlib/retrieve-library-data :icons (:selected-library @state))))
:deps (mf/deps (:selected-library @state))})
[:div.library-tab.icons-tab [:div.library-tab.icons-tab
[:select.input-select.library-tab-libraries [:select.input-select.library-tab-libraries
@ -67,9 +66,8 @@
(mf/defc images-tab [{:keys [libraries]}] (mf/defc images-tab [{:keys [libraries]}]
(when (and libraries (-> libraries count (> 0))) (when (and libraries (-> libraries count (> 0)))
(let [state (mf/use-state {:selected-library (-> libraries first :id)})] (let [state (mf/use-state {:selected-library (-> libraries first :id)})]
(mf/use-effect {:fn (fn [] (mf/use-effect (mf/deps (:selected-library @state))
(st/emit! (dlib/retrieve-library-data :images (:selected-library @state)))) #(st/emit! (dlib/retrieve-library-data :images (:selected-library @state))))
:deps (mf/deps (:selected-library @state))})
[:div.library-tab.images-tab [:div.library-tab.images-tab
[:select.input-select.library-tab-libraries [:select.input-select.library-tab-libraries
@ -91,16 +89,17 @@
[{:keys [key]}] [{:keys [key]}]
(let [team-id (-> project-ref mf/deref :team-id) (let [team-id (-> project-ref mf/deref :team-id)
locale (i18n/use-locale)] locale (i18n/use-locale)]
(mf/use-effect {:fn (fn [] (mf/use-effect
(mf/deps key)
#(do
(st/emit! (dlib/retrieve-libraries :icons)) (st/emit! (dlib/retrieve-libraries :icons))
(st/emit! (dlib/retrieve-libraries :images))) (st/emit! (dlib/retrieve-libraries :images))))
:deps (mf/deps key)}) (mf/use-effect
(mf/use-effect {:fn (fn [] (mf/deps team-id)
(when team-id #(when team-id
(do (do
(st/emit! (dlib/retrieve-libraries :icons team-id)) (st/emit! (dlib/retrieve-libraries :icons team-id))
(st/emit! (dlib/retrieve-libraries :images team-id))))) (st/emit! (dlib/retrieve-libraries :images team-id)))))
:deps (mf/deps team-id)})
[:div#libraries.tool-window [:div#libraries.tool-window
[:div.libraries-window-bar [:div.libraries-window-bar
[:div.libraries-window-bar-title "Libraries"] [:div.libraries-window-bar-title "Libraries"]
@ -118,3 +117,4 @@
{:id :images :title "Images"} {:id :images :title "Images"}
[:& images-tab {:libraries (-> (libraries-ref :images) mf/deref vals flatten)}]]]]])) [:& images-tab {:libraries (-> (libraries-ref :images) mf/deref vals flatten)}]]]]]))