From 129c3a908ee863d3cc20e0a9f566426dae0c5480 Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Tue, 2 Apr 2019 16:46:26 +0200 Subject: [PATCH] Added basic app-db panel --- src/pluto/playground/components/dialogs.cljs | 17 +++++++++++++++-- src/pluto/playground/components/source.cljs | 20 ++++++++++++++++++++ src/pluto/playground/core.cljs | 8 ++++++-- src/react_native_web/events.cljs | 7 ++++++- src/react_native_web/queries.cljs | 7 ++++++- 5 files changed, 53 insertions(+), 6 deletions(-) diff --git a/src/pluto/playground/components/dialogs.cljs b/src/pluto/playground/components/dialogs.cljs index 14cc4d7..eadd896 100644 --- a/src/pluto/playground/components/dialogs.cljs +++ b/src/pluto/playground/components/dialogs.cljs @@ -1,8 +1,10 @@ (ns pluto.playground.components.dialogs (:require-macros [react-native-web.views :refer [defview letsubs]]) - (:require [re-frame.core :as re-frame] + (:require [clojure.edn :as edn] + [re-frame.core :as re-frame] [react-native-web.react :as react] [cljsjs.material-ui] + [pluto.playground.components.source :as source] [status-im.colors :as colors])) (def Dialog (aget js/MaterialUI "Dialog")) @@ -60,7 +62,18 @@ (for [item examples-data] [example-item item])]])) +(defn app-db-browser [] + (let [browse @(re-frame/subscribe [:get :browse-app-db]) + m @(re-frame/subscribe [:store/all])] + [:> Dialog {:open browse :on-close #(re-frame/dispatch [:set :browse-app-db false])} + [:> DialogTitle + "Edit local app-db"] + [:div {:style {:padding 20 :width "50vw" :height "80vh"}} + [source/editor2 {:content (str (or m {})) + :on-change #(re-frame/dispatch [:fiddle/set-app-db nil (edn/read-string %)])}]]])) + (defn dialogs [] [:div [publish] - [examples]]) \ No newline at end of file + [examples] + [app-db-browser]]) diff --git a/src/pluto/playground/components/source.cljs b/src/pluto/playground/components/source.cljs index bd82965..56c3396 100644 --- a/src/pluto/playground/components/source.cljs +++ b/src/pluto/playground/components/source.cljs @@ -46,3 +46,23 @@ :reagent-render (fn [_] [:div {:style {:height "60%"}}])}))) + +(defn editor2 [{:keys [on-change content]}] + (reagent/create-class + {:component-did-mount + (fn [this] + (let [el (js/CodeMirror. (reagent/dom-node this) + (clj->js + {:lineWrapping true + :viewportMargin 20 + :maxHighlightLength js/Infinity + :mode "clojure"}))] + (js/parinferCodeMirror.init el) + (js/parinferCodeMirror.setMode el "smart") + (js/parinferCodeMirror.setOptions el #js {:forceBalance true}) + (.setValue el content) + (when on-change + (.on el "change" #(on-change (.getValue el)))))) + :reagent-render + (fn [_] + [:div {:style {:overflow "auto"}}])})) diff --git a/src/pluto/playground/core.cljs b/src/pluto/playground/core.cljs index 6a84325..539de39 100644 --- a/src/pluto/playground/core.cljs +++ b/src/pluto/playground/core.cljs @@ -81,7 +81,11 @@ [:div {:style {:display :flex :flex 1}} [dialogs/dialogs] [:div {:style {:display :inline-block :width "calc(100% - 400px)"}} - [source/editor {:on-change #(re-frame.core/dispatch [:extension/update-source ctx %])}] + [:div + [:div {:style {:display :flex :justify-content :flex-end :align-items :center :margin "10px"}} + [button {:color "primary" :variant "contained" :on-click #(re-frame/dispatch [:set :browse-app-db true])} + "Local app DB"]] + [source/editor {:on-change #(re-frame.core/dispatch [:extension/update-source ctx %])}]] [:div [:div {:style {:display :flex :justify-content :flex-end :align-items :center :margin "10px"}} [switch {:color "primary" :on-change #(re-frame/dispatch [:extension/switch-filter-logs %2])}] @@ -91,7 +95,7 @@ [:div {:style {:height "calc(40% - 50px)" :overflow :auto}} [logs/table (or (flatten-errors errors) logs)]]] [:div - [:div {:style {:display :flex :justify-content :flex-end :padding-right 20 :padding-top 5}} + [:div {:style {:display :flex :justify-content :flex-end :padding-right 20 :margin "10px"}} [button {:color "primary" :variant "contained" :on-click #(re-frame/dispatch [:set :examples true])} "Examples"] [:div {:style {:width 10}}] diff --git a/src/react_native_web/events.cljs b/src/react_native_web/events.cljs index bea73c3..fb718c8 100644 --- a/src/react_native_web/events.cljs +++ b/src/react_native_web/events.cljs @@ -56,6 +56,11 @@ (seqable? o) (empty? o) :else (nil? o))) +(re-frame/reg-event-fx + :fiddle/set-app-db + (fn [{:keys [db]} [_ {id :hook-id} m]] + {:db (assoc-in db [:extensions/store id] m)})) + (defn put-or-dissoc [db id key value] (if (empty-value? value) (update-in db [:extensions/store id] dissoc key) @@ -596,4 +601,4 @@ 'ethereum/shh-get-messages {:permissions [:read] :data :extensions/shh-get-messages - :arguments {:id :string}}}) \ No newline at end of file + :arguments {:id :string}}}) diff --git a/src/react_native_web/queries.cljs b/src/react_native_web/queries.cljs index dce9eb3..a021682 100644 --- a/src/react_native_web/queries.cljs +++ b/src/react_native_web/queries.cljs @@ -44,10 +44,15 @@ (fn [db [_ {id :hook-id} {:keys [key]}]] (get-in db [:extensions/store id key]))) +(re-frame/reg-sub + :store/all + (fn [db [_ {id :hook-id} _]] + (get-in db [:extensions/store id]))) + (def all {'identity {:data :extensions/identity :arguments {:value :map}} 'store/get {:data :store/get :arguments {:key :string}} 'contacts/all {:data :extensions.contacts/all} ;; :photo :name :address :public-key 'wallet/collectibles {:data :get-collectible-token :arguments {:token :string :symbol :string}} 'wallet/balance {:data :extensions.wallet/balance :arguments {:token :string}} 'wallet/token {:data :extensions.wallet/token :arguments {:token :string :amount? :number :amount-in-wei? :number}} - 'wallet/tokens {:data :extensions.wallet/tokens :arguments {:filter? :vector :visible? :boolean}}}) \ No newline at end of file + 'wallet/tokens {:data :extensions.wallet/tokens :arguments {:filter? :vector :visible? :boolean}}})