Fork me on GitHub
#clojurescript
<
2021-09-12
>
zendevil.eth05:09:55

I want to convert the following to cljs (reagent), but don’t really understand how to do the part that’s nested inside the <Dropzone> tag:

<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>

zendevil.eth06:09:16

I’m using the following library to do file drop into the browser: https://github.com/tonsky/cljs-drag-n-drop And this is my component (using useRef):

(defn i-have-a-creation []
  (let [drop-ref (useRef nil)]
    (try (dnd/subscribe! drop-ref :unique-key
          {:start (fn [e]       (println "d1 start"))
           :enter (fn [e]       (println "d1 enter"))
           :drop  (fn [e files] (println "d1 drop"))
           :leave (fn [e]       (println "d1 leave"))
           :end   (fn [e]       (println "d1 end"))})    
         (catch js/Object e (prn e)))
    [:div
     [:div.drop {:ref (fn [r] drop-ref)} "Drop here"]]))                                             
Although the d1 start and d1 end events are fired when I bring in the file in the browser window, when I drop the file inside div.drop, it doesn’t trigger the leave event but instead opens the file in a new tab. Does anyone know how to fix this?

thheller07:09:23

you can't use a library not designed for react with react. well at least it'll require a lot more interop to get the correct thing to the correct places. your use of drop-ref is incorrect and the dnd/subscribe would need to be in a proper hook so it only runs on mount (and properly unsubscribes on unmount)

zendevil.eth07:09:25

I tried the following:

(defn i-have-a-creation []
  (let [drop-ref (js/document.querySelector "div#drop")]
    (try (dnd/subscribe! drop-ref :unique-key
          {:start (fn [e]       (println "d1 start"))
           :enter (fn [e]       (println "d1 enter"))
           :drop  (fn [e files] (println "d1 drop"))
           :leave (fn [e]       (println "d1 leave"))
           :end   (fn [e]       (println "d1 end"))})    
         (catch js/Object e (prn e)))
    [:div.sell-royalties-page
     [:div.drop {:id :drop} "Drop here"]]))    
even thought the start and end events are firing dropping the file into the Drop here div opens it in a new tab?

thheller07:09:47

you already pasted that code. I told you whats wrong with it. sorry can't go into more detail right now

thheller07:09:22

the issue is the lifecycle, useRef would be correct if used correctly

zendevil.eth07:09:37

@U05224H0W this one uses querySelector not useRef?

zendevil.eth07:09:53

like in the docs of the library?

thheller07:09:18

basically you need to use the useRef and useEffect in exactly the same way

thheller07:09:35

just remove all the pdfjs related bits and replace it with the drag and drop stuff

thheller07:09:16

the dnd/subscribe needs to go into the useEffect basically

thheller07:09:19

sorry gotta go

Muhammad Hamza Chippa07:09:04

did anyone implement a live search form in clojurescript, I have to pull the text from the external api store it in array and then create an input label which gives suggestion to the user

p-himik07:09:09

There's plethora of JS components that do that, for all sorts of UI libraries - you can just use one of them without having to reinvent the wheel.

Muhammad Hamza Chippa12:09:24

can you suggest some of them ? I am new to clojure

p-himik15:09:19

As I said - it has nothing to do with Clojure. It would be a JavaScript library/component, and it depends on what you're already using. I would have to do the same web search as you, only I'm at disadvantage of not having the information on what you use.

Muhammad Hamza Chippa19:09:44

well I am using reagent

p-himik19:09:00

And it uses React. So you can search online for "life search form react" or, since it's more commonly called "typeahead", "typeahead react".

Muhammad Hamza Chippa20:09:32

I have another query sir , I am retrieving a request using (defn get-json [url] (GET url ;;:params params ;;:handler (partial success-handler function-handler) ;;:error-handler error-handler :format (json-request-format) :response-format (json-response-format {:keywords? true}))) (def all-symbols (get-json "https://ai.almanac.ai/db/api/data/symbol/search?q="))

Muhammad Hamza Chippa20:09:50

and I am getting #object[Object [object Object]] how to convert it into map

p-himik20:09:12

No clue, you gotta figure out what all-symbols actually is and go from there.

Muhammad Hamza Chippa20:09:02

can you suggest me where to learn how to fetch GET request and convert it into clojure maps

p-himik21:09:17

The documentation of whatever you're using to issue the requests? You're using GET in your code - it belongs to some library, which probably has documentation.

p-himik21:09:41

So, have you read its README, documentation, FAQ, examples?

Muhammad Hamza Chippa21:09:12

yes can't find related error

maverick14:09:03

How do I map react-select selected option to re-frame

maverick14:09:07

(defn select-input [id label options data] (r/with-let [value (re-frame/subscribe [::subs/form id]) ] [:div.field [:label.label label] [:div.control [:div.select [:> js/Select { :class "form-input" :value @value :options test-options :multi true :placeholder "Select" :on-change (fn [event] (reset! value event) (re-frame/dispatch [::events/update-form id event]) ) }] ]]]))

David Vujic14:09:08

I would suggest that you try out the component with hard coded values to find out how the component api is built. Then add re-frame subscriptions and dispatch events. Even better, I think you could extract the dispatch events and subscriptions to separate functions, and pass them in as params to your component.

maverick15:09:07

Can you help me with an example? I am not good at re-frame and clojurescript. Thanks

David Vujic15:09:19

Maybe this example code can help and inspire you try out different approaches (this one is a text-field with “on-change” events): https://github.com/DavidVujic/clojurescript-amplified/blob/main/src/main/app/components/user.cljs#L21

David Vujic15:09:12

The general idea is to keep your components simple, pass in actions like “on-click”. You can also pass in values. When doing that, your component does not have to know about any re-frame code at all.

john18:09:55

Is there an example out there of using "worker_threads" on nodejs in ClojureScript?

Muhammad Hamza Chippa21:09:00

https://github.com/JulianBirch/cljs-ajax/blob/master/docs/formats.md I use the ajax/get function from this library to fetch the get request from the api, but I am geeeting object only how to solve this

Fredrik21:09:54

Do you have some code to show how you're using it?

Muhammad Hamza Chippa21:09:57

I am trying to replicate this query

Fredrik21:09:03

and what are you receiving?

Fredrik21:09:36

I think the return value you want is passed to the handler function

Fredrik21:09:06

Are you supplying a handler function inside the GET ?

Muhammad Hamza Chippa21:09:37

what is handler function I am pretty new to clojure and stuck in complicated task

Fredrik21:09:31

The handler function is the clojure function that will receive the return of the get-request

Muhammad Hamza Chippa21:09:00

what should be my handler function

Muhammad Hamza Chippa21:09:02

i just want to fetch the get request and store it in variable

Fredrik22:09:10

You could try something like

(def state (atom {}))

(defn my-handler [response]
  (swap! state assoc :all-symbols response))

Fredrik22:09:49

This puts the response inside an atom, later you can retrieve it with (get @state :all-symbols) or just (:all-symbols @state) .

p-himik22:09:42

If you're running that code in the browser, don't use REPL to inspect JS values (and #object[...] is a JS value) - instead, pass it to (js/console.log ...) and inspect it inside your browser's JS console. It will tell you what kind of object it is and will help you reason about why you receive it.

Muhammad Hamza Chippa06:09:35

Thanks brother it works

Muhammad Hamza Chippa21:09:20

I am using this code

Muhammad Hamza Chippa21:09:55

how to access the data key from the state atom

Muhammad Hamza Chippa22:09:46

I am using (:data @atom_name) but it is not working

p-himik22:09:58

No clue. I can take a look if you create a public minimal reproducible example on GitHub or any other place.

Muhammad Hamza Chippa08:09:59

i just want to access the map inside the map, retrieved data looks something like this

p-himik09:09:31

(get-in @state [:data :data])

Muhammad Hamza Chippa09:09:41

you know about centipar library of clojurescript ?

Muhammad Hamza Chippa15:09:06

I have to solve this issue , I am kind of stuck in it

p-himik15:09:48

Gives me 404, it's probably a private repo.

Muhammad Hamza Chippa15:09:33

maybe my company make it private

Muhammad Hamza Chippa10:09:01

["Algeria" , "Comp" , "Malaria" , "Xenophones"] I am to filter out the words which contains "a" in it I am trying (filter includes "a" words) it is not working

p-himik10:09:57

1. You gotta provide the code if you want help 2. You gotta use a thread for a single purpose - ask new questions at the top level of a suitable channel

Muhammad Hamza Chippa10:09:46

The code is quite abrupt and makes no sense at all I am trying to optimize it, you help me a lot I quite appreciate it

Muhammad Hamza Chippa10:09:15

(def words ["axs" , "sdsa" ,"clj" , "xyz"]) (defn include_word [letter list] (for [n list] (includes n letter)) (def include_a? (partial include_word "a")) (filter include_a? words)

Muhammad Hamza Chippa10:09:20

I am using this code