Fork me on GitHub
#re-frame
<
2017-12-04
>
jeaye00:12:43

(defn pulsing-text [message]
  (fn [message]
    (let [this (atom nil)]
      (r/create-class
        { :display-name "pulsing-text"

         :component-did-update
         #(ocall @this :bounce 800)

         :reagent-render
         (fn []
           [animatable/text {:ref #(reset! this %)
                             :style {:font-size 16
                                     :text-align :center
                                     :color theme/alternate-text-color}}
            message])}))))

jeaye00:12:54

Seems to do the trick; can I do any better than that?

jeaye00:12:51

Woops, yes I can; that's a form-2 and a form-3. šŸ˜›

danielcompton04:12:19

A new snapshot version of re-frame-trace is out, it has a pretty cool snapshotting feature. It lets you take a snapshot of app-db and then reset to it later on. Just add [day8.re-frame/trace "0.1.14-20171204.040033-2"]. One thing to note, snapshots are only saved for that browser session, they're not saved to localstorage (because serialisation can be messy)

reefersleep10:12:47

This is stuff that Iā€™ve been imagining since I first learnt about reagent. Is it present in other libs?

Guilhem Brouat 10:12:39

Hello ! I'm trying to get a very simplified version of the todomvc example. I have the following default db, sub and view for my tasks list :

Guilhem Brouat 10:12:37

But I get this error : Uncaught Error: [object Object] is not ISeqable at Object.cljs$core$seq [as seq]

p-himik10:12:48

@ganlhi The code you posted is incomplete.

p-himik10:12:20

Ah, sorry, opening in new windows helps, but expanding it inline for some reason does not.

danielneal10:12:48

@ganlhi you need to dereference the subscription

danielneal10:12:14

a.g. (for [todo @todos] ...) instead of (for [todo todos] ...)

danielneal10:12:42

in the error Uncaught Error: [object Object] is not ISeqable at Object.cljs$core$seq [as seq] - the for is trying to open a seq over the subscription's reaction object, but it can't

Guilhem Brouat 10:12:38

indeed it works much better šŸ™‚

tungsten16:12:22

Has anyone solved making deep links work with re-frame with the criteria that we need to check for the presence of a cookie in order to display certain routes

tungsten16:12:45

Maybe this is a use case for interceptors?

valtteri17:12:55

Rookie question: Iā€™ve imported react-native-maps component like this .

(def map-view (r/adapt-react-class (js/require "react-native-maps")))

(defn my-map [coords markers]
  [map-view {:style {:flex 1}
             :initialRegion coords}])
Now I need to create a a Marker on the Map. Itā€™s supposed to be a nested component ā€œMapView.Markerā€. How do I create the marker? In ā€˜normal Reactā€™ it happens like this
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <MapView.Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>
How should do I refer to ā€œMapView.Markerā€? It should happen maybe something like this:
(defn my-map [coords markers]
  [map-view {:style {:flex 1}
             :initialRegion coords}
     [map-view/Marker {:blabablab 1231}]
])
But whatā€™s the correct syntax for map-view/Marker?

mikerod17:12:56

@valtteri I believe

;; add `(:require [goog.object :as gobj])`

(def react-map-view (js/require "react-native-maps"))
(def map-view (r/adapt-react-class react-map-view))
(def map-viewer-marker (r/adapt-react-class (gobj/get react-map-view "Marker")))

mikerod17:12:08

I could be incorrect though šŸ™‚

taylor19:12:05

whatā€™s a reasonable way to (using secretary routes and re-frame) to restrict routes based on some value in the app-db?

taylor19:12:37

my current approach is to dispatch event from the secretary route, check my condition in the event subscriber/handler, and dispatch another event resetting the current page if the condition isnā€™t met

kasuko20:12:43

Hey guys, I find re-frame absolutely amazing and I personally use any chance I get. However, due to some external circumstances I might find myself in Javascript land soon. I was wondering. If I had to stick completely to Javascript, what would I use to emulate the re-frame framework the best? Iā€™m looking at React+Redux but I was wondering if there was anything better?

danielcompton20:12:12

@kasuko I most often hear redux compared with re-frame. I imagine there are a bunch of redux variants, but it seems like a reasonable choice

kennytilton20:12:10

@kasuko You might give MobX a look. Here is one write-up comparing that and Redux: https://www.robinwieruch.de/redux-mobx-confusion/

eoliphant22:12:35

Hi, iā€™m implementing a quick drag/drop implementation with re-frame. So far, everything is working pretty good. I have event handlers in my ā€˜draggableā€™ that set the item being dragged in the app-db,etc. This works fine. Similarly, iā€™ve on-dragover, etc handlers that change some local state in the drop-target component to highlight the drop-target, etc etc. This all works fine. What, im trying to do now, is basically have any drop target on the screen change some state when the ā€˜draggableā€™ on-drag fires and I set my dragging state in the app-db. I have subscription on the drop-target component that looks at the dragging state. The issue is that itā€™s not reflecting the state of the app-db until after I stop dragging. Hereā€™s a snippet of the drop-target code:

(defn field-drop-target
  [prev-field-id group-id]
  (let [dragged (rf/subscribe [:dragged])
        is-dragging? (some? @dragged)
        width (r/atom "10px")
        background-color (r/atom "white")
        border (r/atom "none")
        showtarget (fn [] (do
                            (reset! width "100px")
                            (reset! background-color "lightgrey")
                            (reset! border "1px dashed black")))
        hidetarget (fn [] (do
                            (reset! width "20px")
                            (reset! background-color "white")
                            (reset! border "none")))

        curpageid (rf/subscribe [:cur-page-id])]
    (fn [prev-field-id group-id]
is-dragging? doesnā€™t become true, until after I drop or stop dragging. Even though itā€™s set in the db. I figure this has something to do with the event loop, etc, but Iā€™m just not sure how to get around it..