Fork me on GitHub
#clojurescript
<
2021-01-24
>
kari09:01:04

If someone is interested in how to use the Vega-Lite (https://vega.github.io/vega-lite/) graphics library with Clojurescript I created an exercise about it: https://www.karimarttila.fi/clojure/2021/01/19/world-statistics-exercise.html

đź‘Ť 6
Neros09:01:04

I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following: I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following:

import React from 'react';
import BarcodeScannerComponent from "react-webcam-barcode-scanner";

function App() {

  const [ data, setData ] = React.useState('Not Found');

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text)
          else setData('Not Found')
        }}
      />
      <p>{data}</p>
    </>
  )
}

export default App;
Any suggestions would be most grateful, thanks.

oliver10:01:57

@info527: maybe the wrong channel? Otherwise, if you are doing this with reagent or somesuch in ClojureScript, then maybe post a CLJS snippet and the problems you encounter.

Neros11:01:37

Thanks, yea I will post the cljs in a moment

clyfe14:01:38

Help! NPM integration issue (details in thread): > No such namespace: @codemirror/state

clyfe14:01:31

Note: done npm install and installed ok.

mkvlr15:01:52

are you trying clojure-mode?

mkvlr15:01:02

if you’re using bundle you’ll need the first one

mkvlr15:01:04

try replacing your clojurescript dep with

{:git/url ""
 :sha "f48609b862062caae6d19d5d281c4f7b53a39c25"}

mkvlr15:01:08

alternatively you can use https://github.com/nextjournal/clojure-mode-demo/ as a skeleton which works with shadow and unpatched ClojureScript

đź‘Ť 3
clyfe15:01:50

thank you!

mkvlr15:01:25

you’re welcome, let me know if it helps

đź‘Ť 3
mkvlr15:01:40

if you have any questions about clojure-mode, feel free to post in #nextjournal

clyfe16:01:48

cm demo works, git/sha doesn't for some reason will continue from the demo

mkvlr16:01:44

what’s the error?

clyfe16:01:20

Same No such namespace: @codemirror/state

Neros21:01:54

@oliver this is how I had converted the above react code to work in shadow-cljs:

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

(defn qr-scanner []
  (let [[data setData] (.useState js/React "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]))]))
I am getting errors in the console saying, reagent.impl.component.js:219 Error rendering component (in app.product.views.qr_scanner.qr_scanner) app.product.views.qr_scanner.js:8 Uncaught ReferenceError: React is not defined

thheller21:01:47

@info527 add ["react" :as react] to your ns require and use (react/useState ...) instead of js/React

Neros21:01:13

thankyou, Ill try it now

tomrbowden07:01:30

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

Neros21:01:22

@thheller thanks for the prompt reply, I am getting the following error now in the console: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

thheller21:01:23

yeah the useState hook you can only use in a function component. not sure how thats done in reagent. docs should have it. might be :f> or so

Piotr Brzeziński22:01:41

Hi. I’m playing with clojurescript + reagent for the first time and got a question. I want to have a timer that I can start by clicking on it and re-set on another click. I run the timer that updates my r/atom using setInerval but am not sure how/where to clear interval. I tried adding it conditionally at the end of my anonymous onclick FN but it fails saying fexpr.call is not a function

(defn counter-row [{desc :desc timer :timer active :active bg-color :bg-color}]
      (let [seconds-elapsed (r/atom 0)
            running (r/atom false)
            timer-fn (fn [] (js/setInterval #(swap! seconds-elapsed inc) 1000))]
           (fn []
               [:div {:class (str "h-full flex flex-col flex-1 " bg-color " bg-opacity-75 items-center justify-evenly")
                      :on-click (fn []
                                    #(reset! running (not @running))
                                    (timer-fn))}
                [:p {:class "w-full text-9xl text-center text-gray-50"} desc]
                [:p {:class "w-full text-9xl text-center text-gray-50"} @seconds-elapsed]])))
all help appreciated.

Piotr Brzeziński22:01:27

By reset I mean set seconds-elapsed to 0 and stop counting

p-himik23:01:02

If @running then call clearInterval, otherwise call setInterval. Save the result of setInterval in an atom (you can use a regular atom instead of a ratom here) and pass it later to clearInterval. A small thing - consider using reagent.core/with-let instead of a form-2 component. It won't change how it works but will make some things simpler. Also, it will make it much easier to call clearInterval when the component is unmounted (you cannot do it at all with form-2).

Piotr Brzeziński09:01:53

Thanks! Let me try that out.

Piotr Brzeziński10:01:25

Following your advice, I changed the code to this -> https://gist.github.com/brzezinskip/73464bfe3b9298671c47f11024db37e1 so now setInterval is assigned to timer-fn atom, but for some reason when I call js/cleaInterval timer-fn it doesn’t do anything.

Piotr Brzeziński10:01:36

The interval keeps counting :thinking_face:

p-himik10:01:12

It should be (js/clearInterval @timer-fn).

Piotr Brzeziński10:01:18

Ah yeah, just noticed that

Piotr Brzeziński10:01:26

Darn, I have problems remembering that.

Piotr Brzeziński10:01:31

Thanks a lot, now it works like a charm 🙂

đź‘Ť 3