Added basic app-db panel

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]])
+   [examples]
+   [app-db-browser]])

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"}}])}))

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}}]

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)

src/react_native_web/queries.cljs

@@ -44,6 +44,11 @@
  (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