Fork me on GitHub
#re-frame
<
2019-08-29
>
ouvasam08:08:50

Hi, Is it possible to get the headers from a response usinh http-xhrio ? Thanks

Lu08:08:40

So http-xhrio is simply forwarding to ajax-request, and the latter can receive a raw response by passing this map as of the response-format ->

{:read identity :description "raw"}

Lu08:08:08

I haven't tested it yet, but it seems this should be enough to get a raw response including headers 🙂

Lu08:08:46

reference ->

ouvasam10:08:45

@lucio Many Thanks i'll look at this

🙂 4
eag17:08:14

Hello everyone, I'm doing my first re-frame SPA, things are going nicely but I'd like to do a line chart with both a single row of data, or multiple rows. I've read the docs on wrapping a stateful js object for reagent, and I've found some examples, but I have yet to make it work. I know clojure much better than js, so that is not helping me with the js interop. Is there something out there that I should be using ? Or is there a good up to date example that works with re-frame ? Im using shadow-cljs, and I've got chart.js loaded...

ingesol09:08:10

Given example is pretty minimal, so you should probably be able to make a copy to work for your system

eag20:08:32

Cool. Thanks. This piece has turned out to be more complicated than everything else I've done.

eag11:09:03

@U21QNFC5C I'm finally trying to get this working. But my project uses shadow-clj so I can't use cljsjs version of highcharts. I didn't know what I was getting into with shadowcljs. I'm having trouble with the mount code. I don't know enough js yet to understand. It appears that I'm calling chart. ok. but the node specification is not right, so I get a stack overflow with js/Highcharts, or if I get it wrong I get a null node. How do I know what node to give it ? Here's my code.

(ns prod-inv-ui.views
  (:require
   [re-frame.core :as rf]
   [reagent.core :as r]
   [re-com.core
    :refer [h-box v-box box gap single-dropdown radio-button button alert-box
            input-text checkbox label title hyperlink-href p p-span throbber]]
   [prod-inv-ui.subs :as subs]
   [prod-inv-ui.events :as events]
   [re-frame-datatable.core :as dt]
   ["highcharts" :as highcharts]))

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

;; (defn mount-chart [comp]
;;   (.chart js/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

(defn update-chart [comp]
  (mount-chart comp))

(defn chart-inner []
  (r/create-class
   {:component-did-mount   mount-chart
    :component-did-update  update-chart
    :reagent-render        (fn [comp] [:div])}))

(defn chart-outer [config]
  [chart-inner @config])

(defn test-chart
  []
  (let [chart-data (rf/subscribe [::subs/test-chart])]
    (when (some? chart-data)
      (fn []
        [chart-inner chart-data]))))
test-chart has you original chart data in it.

ingesol11:09:01

your are not derefing chart-data subscription at the bottom

ingesol11:09:27

oh wait, i see what you are doing now

ingesol11:09:59

This bit seems off

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

eag11:09:02

yea. definitely. I just don't know what. If I leave the node as js/Highcharts I get a stack overflow.

ingesol11:09:04

putting a . after chart means you are calling the chart constructor, the dot should be at the start of the word to mean a function call

ingesol11:09:36

use the correct function interop syntax, and try to remove the component-did-update parts. I’m suspecting they are causing your loop

eag11:09:49

ok. that helped. Now I'm getting this.

views.cljs:14 Uncaught TypeError: Cannot read property 'highcharts' of undefined
    at Constructor.prod_inv_ui$views$mount_chart (views.cljs:14)
    at Constructor.reagent$impl$component$custom_wrapper_$_componentDidMount (component.cljs:194)
    at Constructor.componentDidMount (factory.js:666)
    at commitAllLifeCycles (react-dom.development.js:17335)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at commitRoot (react-dom.development.js:18949)
    at react-dom.development.js:20419
    at Object.exports.unstable_runWithPriority (scheduler.development.js:256)
from this
(defn mount-chart [comp]
  (.highcharts/chart highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

eag11:09:03

js/Highcharts gives reference error Highcharts undefined.

ingesol11:09:07

the correct way is (.chart the-highchart-object)

ingesol11:09:01

And given your require, i’m no shadow-cljs expert, but I would guess it might look like (.chart highcharts)

ingesol11:09:31

you might want to log out the value of your highcharts required object to see what it is.

eag11:09:49

yea, I've tried that, and I've tried changing my require to just `["highcharts"] and using the original code. js/Highcharts is still undefined.

eag12:09:21

printing js/Highcharts prints nothing.

eag12:09:27

with this, (.highcharts/chart highcharts (r/dom-node comp) (clj->js (r/props comp))) and the did-mount code I get maximum call stack size exceeded.

eag12:09:39

Of course, commending out the did-mount works but I get no chart.

ingesol12:09:04

I still think your use of interop is wrong

ingesol12:09:28

you should try to do (js/console.log highcharts)

ingesol12:09:47

I suspect npm imported throught shadow-cljs should not be prefixed with js/

ingesol12:09:43

Did you try (.chart highcharts)?

eag12:09:28

Yes. It cant find chart.

ingesol12:09:31

So given that this is most likely about how you do interop in shadow, you should ask about that specifically on shadow channel

eag12:09:06

Yea. I was just thinking that.

ingesol12:09:32

skimmed it, might be that you need (highcharts/chart params)

eag12:09:02

Ah. No dot ?

ingesol12:09:25

if you read the guide i pasted, it seems that’s the correct way

eag12:09:43

Reading now.

eag12:09:29

I think you are right. I am walking. I will try it when I get back.

eag06:09:11

So still not working. Highcharts is an undefined symbol. I added a compiler option to preserve externes that doesnt seem to be working. So it is close. I posted a question in shadow-cljs.

eag12:09:20

@U21QNFC5C In the end this is what worked.

(hc/chart (r/dom-node comp) (clj->js (r/props comp)))
I've got it all working nicely now. Thanks for your help.

👍 4
Lu21:08:58

What example are you following?

eag21:08:15

I have this. it seems simple enough, hard coded data and everything.

(defn show-revenue-chart
  []
  (let [context (.getContext (.getElementById js/document "rev-chartjs") "2d")
        chart-data {:type "bar"
                    :data {:labels ["2012" "2013" "2014" "2015" "2016"]
                           :datasets [{:data [5 10 15 20 25]
                                       :label "Rev in MM"
                                       :backgroundColor "#90EE90"}
                                      {:data [3 6 9 12 15]
                                       :label "Cost in MM"
                                       :backgroundColor "#F08080"}]}}]
    (chart. context (clj->js chart-data))))

(defn rev-chartjs-component
  []
  (reagent/create-class
   {:component-did-mount #(show-revenue-chart)
    :display-name        "chartjs-component"
    :reagent-render      (fn []
                           [:canvas {:id "rev-chartjs" :width "700" :height "380"}])}))

eag22:08:51

I don't get any errors but I don't get any output either. I'm also using re-com, but that seems like it shouldn't be a problem. maybe I'm wrong about that. I have it in an v-box [(rev-chart-js-component)]

thelittlesipper22:08:24

I've been trying to mock a re-frame http effect as follows:

(deftest getting-types
  (rf-test/run-test-sync
    (rf/dispatch [::events/initialize-db])
    (rf/dispatch [::events/change-owner "goo goo"])
    (with-redefs [ajax-request (fn [_opts]
                                 (println _opts)
                                 [true {:file_path    "/bubbies"
                                        :db           "goo"
                                        :name         "goo"
                                        :type_mapping {:goober "datetime"}}])]
                 (rf/dispatch [::events/get-types]))
    (let [types @(rf/subscribe [::subs/upload-file-results])]
      (is (= {:goober "datetime"} (:type_mapping types))))))
The get-types event fires off an :http-xhrio ajax-request, and the mocked/re-defined ajax-request runs instead (verified). The problem is that the get-types event's :on-success handler never gets triggered. Anyone know why?

dpsutton22:08:12

Just off the cuff but the Ajax handler was what fired the events. And you’ve modified it to a no op

dpsutton22:08:33

Presumably you want to modify the mock to just dispatch the onsuccess?

thelittlesipper22:08:00

Makes sense, yea. Thanks matey!

parens 4