Iterate over list of filtered items?

[djMax]

I wrote a thing to stream a set of github workflow results down to a React frontend. The observable is like so:

export interface JobResults {
  languages: string[];
  topics: string[];
  results: RepoResults[];
}

export function createObservable() {
  const $state = observable<JobResults>({
    results: [],
    languages: [],
    topics: [],
  });

  return $state;
}

Where the languages are a list of the languages I've seen so far. Now, on display, I want to iterate over the languages (easy to use For for this), and then display a little div-based card of the results filtered by the language. How do I do that interior filter? I tried passing a filtered list to a For on the inner, but it didn't like that. I have:

               {state$.results.filter((r) => r.language.peek() === language.peek()).map((result) => (
                <div>{result.peek()?.repo}</div>
               ))}

But I assume that is wrong because there's a lot of peeking which likely means I am not reacting properly to changes. How would I do this properly? I know I could maintain the pre-filtered list and just update that every time a new result is loaded, but that seems a little overwraught.

Thanks!

[jmeistrich]

I would probably do it with a computed of the filtered list, and pass that into For. But your approach should work just fine - if you change language.peek() to language.get() it'll be reactive. If you want to overoptimize it (which probably isn't necessary) you you could move r.language.get() out to local state.

Benefits of each approach:

• For: Creating a computed in React creates a useRef, a useMemo, and a computed, which adds a very tiny overhead. But then when the list changes the renders will be constrained to inside For, so it saves full component renders. So it's mainly better if the component is heavy. Or if there's a lot of list elements that re-sort often, optimized mode is a good optimization.
• map: Save creating the hooks and computed. If there's nothing else in the component, it's a bit more efficient. So it's better if the component is just the list.

But in practice there's not really any meaningful difference. Just do what feels better.

[djMax]

How does that computed bit work - I didn't see a computed that takes an argument, so would I have to "decide" on the top level languages?

[jmeistrich]

Oh I think I misunderstood what you were trying to do, so ignore that idea...

[djMax]

Actually - could computed take an argument(s) and manage those hooks by those arguments? Would be interesting...

[jmeistrich]

computed with an argument is proxy (https://legendapp.com/open-source/state/usage/observable/#proxy). Maybe that's what you're looking for? It's generally for the use case when you don't know all keys upfront, so maybe not totally applicable here...

[djMax]

And on the existing one, you're saying that this is reactive to new entries to the results:

        <For each={state$.languages}>
          {(language) => (
            <>
              <h3>{language.get()}</h3>
              <div>
               {state$.results.filter((r) => r.language.peek() === language.get()).map((result) => (
                <div>{result.peek()?.repo}</div>
               ))}
              </div>
            </>
          )}
        </For>

[jmeistrich]

Yes, all array looping functions do a get({ shallow: true }) under the hood. So by filtering the list it'll react to keys being added to / removed from the list and re-render. Since it's a shallow get it will not react to any child properties changing (unless you get them specifically), but I don't think you need that, so this seems correct.

[djMax]

Ok, first off, thank you for the quick response! We're about to start a big new project and I'm pushing legend state, so I figure I better get a lot more familiar :). In that spirit - the For approach would not take that state$.results.filter output as an argument, is that expected? If so, might it be nice to have a filter method on that had a sane type signature?

[jmeistrich]

What do you mean as an argument? What would the ideal For API look like for this?

[djMax]

I would be fine with

<For each={state$.results.filter((r) => r.language.peek() === language.get())}>

But that's the one that complains about types. So perhaps

<For each={state$.results} where={r => r.language === language.get()}>

Or some variant of peeks and gets on that theme.