Clojurians Log v2

@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]))

<http://reagent.com/render|reagent.com/render> accepts two arguments.

Check out its docstring for the details.

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

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

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

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

@info527 It’s not necessary to use React hooks - it is simpler to use a ratom to hold the data state.

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]
                        ;; <https://github.com/dashboardphilippines/react-webcam-barcode-scanner/issues/10>
                        (.log js/console err)
                        (if result
                          (reset! data (.-text result))
                          (reset! data "Not Found")))]
    (fn []
      [:&lt;&gt;
       [:&gt; 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))

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

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).

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

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} />
          ),
        }}
      />

[:> (.-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]))}]

Objects are not valid as a react child

the error is in the tabBarIcon key

but I don’t know what it is

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.

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

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.