Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
Jethro Larson
@jethrolarson
how do I index into a traversal?
Vesa Karvonen
@polytypic

You just want to get the first object that has {hot: true}? In that case

get(whereEq({hot: true}), stuff)

could already work as get only returns the first focus of a traversal and whereEq can traverse through (nested) arrays and objects, so elems is superfluous.

If you specifically want to read and write and write to a single element in an array then find is probably what you are looking for.

If the data structure is more complex than and array and you actually want whereEq and you want to only read and write the first focus, then you can combine whereEq with e.g. limit. Note that limit is linear time with respect to focuses produced by the traversal like subseq.

Jethro Larson
@jethrolarson
nth
0 was example but I want to index into the filtered list
in essence
Vesa Karvonen
@polytypic

To get nth hottest stuff, you might write

get(subseq(nth, nth + 1, whereEq({hot: true})), stuff)

Note that above subseq takes time linear in the number of elements found by whereEq (which itself is linear in the size of stuff).

Here is a playground.
Vesa Karvonen
@polytypic
I should also mention partsOf that can be used to turn the focuses of a traversal into an array. Here is a playground.
Jethro Larson
@jethrolarson
tyvm.
Vesa Karvonen
@polytypic
I recently started working on an Android project so I just had to try to convert this Epoxy sample to Calmm (not yet complete).
Vesa Karvonen
@polytypic
Added basic drag-and-drop (move) to the Calmm version.
Jonathan
@jonathanphz
hello - I have a question
I'm using U.Select and need to set it to the current location. The problem is that on first load the location takes a second so it's undefined.
is there a way to change the value once the location loads?
Vesa Karvonen
@polytypic
Hmm... Is the location observable?
Jonathan
@jonathanphz
yes
I get a country code like 'US' and the select has a list with a mapping of country code = country name
When I reload the page select has the correct country as it is cached but not on first load because it takes a moment to fetch the code.
Jonathan
@jonathanphz
got it to work
:)
with help from a friend
Vesa Karvonen
@polytypic
:thumbsup:
One thing I'd recommend is that to make a minimalist example of the problem case using e.g. CodeSandbox. That way anyone can take a look and fork the sandbox to attempt a solution.
Vesa Karvonen
@polytypic

Hmm... I wonder whether CodeSandbox has any simple way to change/update the template or "environment" used as a base for a sandbox?

Unfortunately most of my Calmm sample sandboxes were made a long time ago and they are based on old versions of create-react-app template. The problem with that is that the old version of the template does not work so nicely when you export it. I just converted the Color Carousel sample to use the latest(?) create-react-app by manually creating a new sandbox from the template and then manually copying the code to the new sandbox. Now it seems to work nicely when you export it as a .zip and use it on local machine.

Kurt Milam
@kurtmilam
:wave: Is there a nicer way to do something like this: https://bit.ly/2OcyrUy ?
Also, naming tips appreciated, specifically for mkValidatorLens, val and cur :)
The idea is to update two targets in parallel, where one target always has the most recent valid value, while the other has the current value, whether or not it's valid.
Kurt Milam
@kurtmilam
My earlier attempt wasn't quite right. I need a pair of lenses in my case, and this does the trick: https://bit.ly/2Df2mFs
The use-case, in order to avoid an X Y issue, is that I have an embedded SVG with a path superimposed on a grid. I allow the user to rotate the path by updating the path's transform:rotate attribute based on user input. The user can either input a (positive or negative) number of degrees in a standard text input, or they can use + and - buttons to increase or decrease rotation by one degree with each press. All works great, except when a user wants to input a negative rotation into the input. - is not a valid first argument to transform:rotate, and it causes havoc until the user adds a digit after the minus sign.
With this second incarnation, I use numeric.val for the buttons and the path's transform:rotate attribute, whereas I use numeric.cur for the text input, which does the trick. Am open to other solutions, though, as this doesn't feel idea.
Vesa Karvonen
@polytypic
Jaakko Karvonen
@JonPhno_gitlab

Hi! I was checking out the calmm.js documentation today, hoping to find a better solution for some form of state management between sharepoint online web parts. Browsing through this gitter, I found @rikutiira had a same use case two years ago (Dec 13 2017 20:52), where he tried to have components react to changes in sessionStorage, due to the components not having a common root.

my use case is that I want to have reactive storage where I can write stuff to sessionStorage and have my components react to it

Two years later, what would be a good way to implement this with calmm, where you can retrieve and modify (part of) the state using sessionStorage as the model? I'm quite new to both observables & sharepoint, so please bear with me :D

@polytypic beautiful name you have there, btw ;)
Stephan Meijer
@smeijer

I've just created this upsert method, what do you people think. Can it be done better?

const data = {
  blog: {
    comments: {
      pageInfo: { a: 1 },
      totalCount: 2,
      nodes: [{ _id: 1 }, { _id: 2 }],
    },
  },
};

function upsertNode(path, node, data) {
  const nodes = L.get([path, 'nodes', L.defaults([])], data);
  const idx = nodes.findIndex((x) => x._id === node._id);
  const position = idx === -1 ? nodes.length : idx;

  return R.compose(
    L.modify([path, 'totalCount', L.defaults(0)], (x) => x + 1),
    L.set([path, 'nodes', position, L.assignTo], node)
  )(data);
}

upsertNode(['blog', 'comments'], { _id: 2, comment: 'foo' }, data);

playground

Vesa Karvonen
@polytypic
Counters are not toys!
https://twitter.com/VesaKarvonen/status/1259743496182906880
Basically "Calmm" on top of WPF in F#.
Good news for TypeScript fans: @akheron has has been working on a new optics library for TypeScript: optics-ts. Looks very promising!
Vesa Karvonen
@polytypic
And he has also been working towards a new TypeScript based Calmm style UI implementation. Here is a counter example.
Vesa Karvonen
@polytypic
Er... I mean Contacts example, of course. :blush:
Vesa Karvonen
@polytypic
Atoms going mainstream: https://recoiljs.org/
Now it should take a few months before optics are added.
Vesa Karvonen
@polytypic
Vesa Karvonen
@polytypic
Vesa Karvonen
@polytypic
Roughly "Calmm" in TypeScript with Bacon and without React:
https://github.com/raimohanska/harmaja
Luigi D. Teixeira
@luigidt_gitlab

Is there a better alternative to:

  L.get(  
    L.pick(
        {
            name: 'name',
            cars: [
                  'cars',  
                  L.modify(L.elems, L.get(L.pick({model: 'name'})))                  
            ]                  
        }
    ),
    {name: 'John', cars: [ { name: 'Test' },  { name: 'Test2' }]}
  )

I want to rename a property inside a nested array

Vesa Karvonen
@polytypic

If you just want to rename the property and be done with, then you could do it like this:

L.modify(['cars', L.elems, L.keys], key => key === 'name' ? 'model' : key, ...)

The above composes a traversal that targets the keys of the cars and modifies those.

You could also compose an isomorphism that renames the property

const renamingIso = L.applyAt(
  ['cars', L.elems],
  L.mapping((name, rest) => [{name, ...rest}, {model: name, ...rest}])
)

so reading through with L.get gives you the name -> model rename

L.get(renamingIso, ...)

and you can also write through so that changes can be made to the original format.

See here.

Luigi D. Teixeira
@luigidt_gitlab
It does the trick, thank you @polytypic !
Josh Bertrand
@abstracthat
React 17 is out. I've found no issues when upgrading in our Karet app. I made a PR with a minor upgrade to clear the npm peer dependency warning. calmm-js/karet#33
Josh Bertrand
@abstracthat
Also updating kefir.ramda to the latest ramda calmm-js/kefir.ramda#4
Mitchell Skaggs
@magneticflux-
Where are some places to look for new happenings in this area of FRP? I've been experimenting and writing my own toy libraries similar to this and I'm convinced it's the future of FRP, but I haven't seen much activity over the last few years.

facebookexperimental/Recoil#21

It seems Recoil hasn't done much with optics, and Harmaja is the current state-of-the-art.

Mitchell Skaggs
@magneticflux-
I'm currently pursuing an optics-based extension to the Jetpack Compose framework by implementing each of the 7 GUIs and refining my design as I go. Progress is being documented here: https://github.com/magneticflux-/jetpack-compose-optics
Vesa Karvonen
@polytypic
I haven't personally been doing GUI programming recently. I was going to suggest taking a look at Harmaja, but I see you found that already. I think Juha started working on Harmaja after I gave a talk on how we implemented a Calmm style FRP model on top of WPF in C#. I wrote a couple of blog posts (and a demo/prototype in F#) on the subject:
Mitchell Skaggs
@magneticflux-
Thanks, those blog posts are really insightful! I've continued to refine my addon to Jetpack Compose and it seems to be going well. I've talked with one of the developers of it on the Kotlin Slack but they seemed to prefer the React-style unidirectional data flow of derived observable read-only state combined with propagating separate "events" upwards to a central state.
Jonas Luebbers
@nonphoto
Are kefir.atoms actually atomic? If so, how is that implemented? I noticed that regular kefir observables are not. kefirjs/kefir#97