Fork me on GitHub
#re-frame
<
2018-08-21
>
jmclavijo00:08:14

I was thinking of using a dashboard template built using react and next that would run on a node.js server. I’m trying to do something even using serverless tech. Does re-frame use next.js at all? Does it make sense to import next.js? or components from react.js?

tmarble02:08:55

I'm trying to test an app that uses enzyme and having some struggles. The stack is: [cljsjs/react "16.4.1-0"] [reagent "0.8.1"] [re-frame "0.10.5"] Turns out enzyme needs TestUtils (which moved out of React add-ons) https://reactjs.org/blog/2017/09/26/react-v16.0.html https://github.com/facebook/react/issues/9207 As cljsjs is out of date for enzyme and doesn't have enzyme-adapter-react-16 https://www.npmjs.com/package/enzyme-adapter-react-16-context-fixes https://www.npmjs.com/package/enzyme-adapter-react-16 (and I later got this error) Error: Cannot find module '@cljs-oss/module-deps' as in https://github.com/clojure/clojurescript-site/issues/143 I added these keys to my [:cljsbuilds :build :test :compiler] options

:npm-deps {"@cljs-oss/module-deps" "1.1.1"
                                :enzyme "3.4.4"
                                :enzyme-adapter-react-16 "1.2.0"}
                     :install-deps true
and this to the namespace where I use enzyme:
(ns my-test.enzyme
  (:require [enzyme :refer [configure]]
            [enzyme-adapter-react-16 :refer [Adapter]]))

(js/enzyme.configure (clj->js {:adapter: (js/Adapter.)}))
I see Bruce worked around this in figwheel (by reading the cljs_deps.js file) https://github.com/bhauman/figwheel-main/issues/21 But now my symptom is Error: module not found: "./util.inspect" from file /[...]/node_modules/object-inspect/index.js Thoughts? Or, is anyone testing re-frame apps on React 16?

genekim14:08:36

Good morning! Having great fun with re-frame, and again am amazed at how easy it has been to add functionality to my application, without my code collapsing in on itself like has been my experience for decades. :) You may recall, I was wondering a year ago if my events.cljs was too large at 500 lines — it’s now over 1500 lines, and for me, it’s still easy enough understand to quickly add features here and there. I’m amazed at how re-frame enables this... But for the first time, I’m adding two namespaces and two entry points. Like the “login” and “shopping-cart” example in https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-06.md. In my case, it’s to have a standard JS app, and another for my iPhone. Currently, I do the user-agent detection in the server, and send the client to either /app, or /iphone, which in the HTML does a “app.core.init()” or a “iphone.core.init()”. I’m still trying to figure out how to get everything configured properly — I initially had a whole new set of Lein profiles ({:dev, :min} => {:dev, :min, :dev-iphone, :min-iphone}, each with it’s own :on-jsload, so that it would hot reload properly. I think this worked, but abandoned this because it doubled build times (I think?), and was pretty sure this wasn’t the right way to proceed... I’ve collapsed it back to two profiles {:dev, :min}, and run “app.core.init()” or “iphone.core.init()” from the HTML, but hot reloading causes the entire app to blank out — I’m almost certain it’s because :on-jsload is not set correctly. (There can only be one :on-jsload setting per profile in project.clj...) What is the best way support multiple entry points, and still have hot reloading work? Thanks in advance!

miikka16:08:14

What does your :on-jsload do now?

miikka16:08:15

Does anyone have examples of re-frame interceptors that actually do something with :queue and/or :stack

nenadalm16:08:26

I have example that makes queue empty if http response is forbidden/unauthorized and dispatches logout:

(ns app.interceptors
  (:require
   [re-frame.core :as re-frame]))

(def restricted
  "Logs out current user if he is not authorized to perform the request.

  Should be registered early, as it skips other interceptors."
  (re-frame/->interceptor
   :id :restricted
   :before (fn [context]
             (let [coeffects (:coeffects context)
                   result (last (:event coeffects))
                   token (get-in coeffects [:db :auth :token])]
               (if (or (not token) (contains? #{401 403} (:status result)))
                 (-> context
                     (assoc :effects {:dispatch [:app.pages.login.events/logout]})
                     (update :queue empty))
                 context)))))

miikka17:08:55

Makes sense. In fact I just realized we have a similar interceptor in our work project, I just had forgotten about it 🙂

genekim20:08:25

@miikka Earlier, it was…

:cljsbuild
  {:builds
   [{:id           "dev"
     :source-paths ["src/cljs"]
     :figwheel     {:on-jsload "app.core/mount-root"}
Currently, I have it set to something I know doesn’t work:
:cljsbuild
  {:builds
   [{:id           "dev"
     :source-paths ["src/cljs"]
     :figwheel     true
Trying to figure out the right way to specify multiple entry points?

kurt-o-sys21:08:25

Using https://github.com/JedWatson/react-select, apollo and re-frame, I have everything working fine during dev. Whenever I deploy to a production environment, it fails:

(defn activity-select [options]
      [:> react-select {:clearable false
                        :onChange  (fn [new-value]
                                     (let [activity-id (.-value new-value)]
                                       (.then (query/activity-by-id-query activity-id)
                                              (fn [success]
                                                (-> success .-data .-Activity (js->clj :keywordize-keys true) deserialize
                                                    (#(re-frame/dispatch [... %]))))
                                              (fn [error]
                                                (println "failed to query: " error)))))
                        :multi     false
                        :options   options
                        :value     (-> @(re-frame/subscribe ...])
                                     (#(filter (comp #{%} :value) options))
                                     first)}]))
All works well during dev/test, but in a production environment, after selecting an 'activity', the selection box is empty and the re-frame subscription is nil, even though it's been dispatched.

kurt-o-sys21:08:15

I have no clue why...

kurt-o-sys22:08:23

I now do: in advanced compilation, things like (-> success .-data .-Activity ...) are messed up