Fork me on GitHub

yesterday we talked about the how I should render modal in the parent component of the component I want to render: line 369 of section N15's source parallel query of the modal and the data to render. you can totally pull the data out and put it in the header without changing the query


Today I remembered another reason why I have to render modal in the component itself and I can't use parallel query


I need to reset form when someone clicks modal close button, and I can only do that if I call b/ui-modal in actual form component render


(b/ui-modal (om/computed modal {:onClose #(f/reset-from-entity! this form)}) can only be done in PersonEdit render (which is the form), but not in the parent PersonEditModal, which would be the component with {:modal b/Modal} {:person PersonEdit} query.


though I guess that, again, if I'm clever with the maps, I can do it


Ok, now I've done exactly as in N15 and it doesn't work for second modal:

(defui ^:once DummyModal
  static om/IQuery
  (query [this] [{:ui/modal (om/get-query b/Modal)}])
  static fc/InitialAppState
  (initial-state [this props] {:ui/modal (fc/get-initial-state b/Modal {:id :dummy-modal})})
  (render [this] nil))

(defsc PersonEditModal
  [this {:keys [ui/modal modal-item]} _ _]
  {:query [{:ui/modal (om/get-query b/Modal)} {:modal-item (om/get-query PersonEdit)}]
   :css-include [PersonEdit]
   :protocols (static fc/InitialAppState
                (initial-state [this props] {:ui/modal (fc/get-initial-state b/Modal {:id :person-edit})}))}
   render elided

(route/defrouter ModalRouter :modal-router
  (ident [this props] [(-> props :ui/modal :db/id) :singleton])
  :dummy-modal comp/DummyModal
  :person-edit PersonEditModal)
This results in the following state on page load (that is before trying to display any popup)
  {:db/id :dummy-modal,
   :modal/active false,
   :modal/visible false,
   :modal/keyboard true,
   :modal/size nil,
   :modal/backdrop true}},
  {:ui/modal [:fulcro.ui.boostrap3.modal/by-id :person-edit]}},
  {:ui/modal [:fulcro.ui.boostrap3.modal/by-id :dummy-modal]}}
As you can see :person-edit :singleton links to [:fulcro.ui.boostrap3.modal/by-id :person-edit], but that is missing from the :fulcro.ui.boostrap3.modal/by-id table, and for the life of me I don't understand why.


Modals work if I force initial state into :fulcro.ui.boostrap3.modal/by-id table by hand


Seems to me defsc lacks support for root queries: Syntax error in defsc. One or more destructured parameters do not appear in your query! {:offending-symbols [ui/me-id]}` and I have query [[:ui/me-id '_] :person/id].


@roklenarcic had you though about using a simpler component for your modal? does it really needs data?


you could use a parent component data to decide if the modal is show/hidden, and the contents of the modal can be the stateful component


I usually do stateless modals