Fork me on GitHub
#clojurescript
<
2021-01-25
>
Neros00:01:59

@thheller Thanks again for the reply, I feel really useless at the moment, tried many different variations and after trying this :

(ns app.product.views.qr-scanner
  (:require
   [reagent.core :as r]
   [reagent.dom :as rd]
   ["react" :as react]
   ["react-webcam-barcode-scanner" :refer [BarcodeScannerComponent]]))

;; "Not Found"

(defn scanner []
  (let [[data setData] (react/useState "Not Found")]
    [:> BarcodeScannerComponent
     {:height 500
      :width 500
      :onUpdate (fn [err result]
                  (if result
                    (setData (.-text result)) (setData "Not Found")))}
     (fn [result]
       (r/as-element [:p result]))]))


(defn qr-scanner []
  (rd/render
   [:f> scanner]))
I am now getting this error: Wrong number of args (1) passed to reagent.dom/render

p-himik01:01:20

accepts two arguments.

p-himik01:01:36

Check out its docstring for the details.

dpsutton01:01:19

Your outer function and inner render function should take the same number of args.

dpsutton01:01:05

Oh unless I misread that. Hard to see the indentation on mobile

p-himik02:01:40

That fn is not from a form-2 component but just an argument to BarcodeScannerComponent.

p-himik02:01:24

And you wouldn't see that error with Reagent components anyway because there's no such check in runtime, only in compile time.

tomrbowden07:01:31

I’ve built the scanner using Shadow-CLJS. What I noticed from your code: (1) the React Webcam Barcode Scanner docs show that BarcodeScannerComponent is a default, not named, import. You are using a named import in your code. (2) You are using the React.useState hook, which is unnecessary in CLJS - just use a ratom. Here is the code in CLJS:

(ns scanner.app.core
  (:require [reagent.core :as r]
            [reagent.dom :as rdom]
            ["react-webcam-barcode-scanner" :default BarcodeScannerComponent]))

(defn app []
  (let [data (r/atom nil)
        handle-update (fn [err result]
                        ;; 
                        (.log js/console err)
                        (if result
                          (reset! data (.-text result))
                          (reset! data "Not Found")))]
    (fn []
      [:<>
       [:> BarcodeScannerComponent
        {:width 500
         :height 500
         :on-update handle-update}]
       [:p (str @data)]])))

(defn render []
  (rdom/render [app] (.getElementById js/document "root")))

(defn ^:export main []
  (render))
Note that there is a bug in the library: https://github.com/dashboardphilippines/react-webcam-barcode-scanner/issues/10

🙌 3
👀 3
Neros12:01:21

@U0187JC6398 Thankyou so much! All working now, gonna print off these points and go over them!🙏

3
🙌 3
👍 3
pez12:01:14

Anyone know of an easy way to create a predictable “unique” uuid from a string? So always from the same string, the same uuid, and with highly unlikely collisions. I think this one might do the trick for Clojure (even if I’m not sure about the collisions aspect of it): https://stackoverflow.com/questions/29059530/is-there-any-way-to-generate-the-same-uuid-from-a-string

andy.fingerhut14:01:20

highly unlikely collisions strongly suggests to me that you want a cryptographically strong hash function in there, with enough bits of output to include all of those in a UUID (discard any extras).

❤️ 3
pez15:01:09

I’ll run with that. Actually I dodged the problem for now, but I have plans where I will need this. 😃

zendevil.eth15:01:38

I’m getting the following error when converting react native code to clojurescript:

<Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" color={color} size={size} />
          ),
        }}
      />
to
[:> (.-Screen Tab)
       {:key :home
        :options
        {:tabBarIcon
                  (fn [opt]
                    [:> Ionicons {:name "ios-information-circle"
                                  :size (. opt -size)
                                  :color (. opt -color)}])}
        :name "Home"
        :component (fn [] (r/as-element [home-container]))}]
And the error is:
Objects are not valid as a react child
Do you know what’s causing the error?

zendevil.eth15:01:11

the error is in the tabBarIcon key

zendevil.eth15:01:20

but I don’t know what it is

p-himik16:01:21

Two things that I notice: - In JS, component set to, well, a relevant component. You set it to a function. It may or may not cause problems - depends on the implementation of Tab.Screen - tabBarIcon returns a element. But you return a Hiccup vector

3
henrik15:01:26

What's the proper way to handle URIs between Clojure and ClojureScript when using Transit on the wire? How do I decode and encode a URI in cljs? I.e., to convert it to a string (for an input box), then back to a URI onChange.

p-himik19:01:31

If you need some specific class instances instead of strings, you can create your own tag and assign a reader and a writer for it on each side.