Current RowState / Currently selected checkboxes

Client
1

I am trying to implement a use case that depends on the currently marked checkboxes.

I have attempted to use useSelector(UiStateSelector.rowState()), but it returned undefined within the Overview. I also tried using a middleware to achieve the same result.

It seems I am missing something when attempting to retrieve the currently selected checkboxes.

2

Hi @soeren-round-ridge,

I was able to reproduce it. I managed to get the state with

...
const rowState = useSelector(OverviewEngineSelectors.uiState(props.activityId)).rowState;
const rowState2 = useSelector(UiStateSelector.rowState())
console.log("useSelector(OverviewEngineSelectors.uiState(activityId)).rowState", rowState) // present
console.log("useSelector(UiStateSelector.rowState())", rowState2) // // undefined
...

However, I could not explain why it worked; maybe some client colleague could help. Please help to test it on yours

Cheers,

3

Thank you! We weren’t able to make it work within the OverviewEngine, but it worked in a middleware.

4

Hi @soeren-round-ridge,
UiStateSelector of the Overview Engine is a context-awareness selector, which usually cannot retrieve information directly from the global Redux store, but it rather has to be placed under some context to make it function correctly. The lacking of the activityId as the selector’s parameter also explains itself. Most of the case, the selector should be used with a specific hook to provide it a context, which is the useOverviewEngineState

import { UiStateSelector } from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/store";
import {
    useOverviewEngineState
} from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/view/context/overview-engine-context";

function CustomCell(props: unknown): JSX.Element {
    const rowState = useOverviewEngineState(UiStateSelector.rowState())
    return <div>My cell</div>;
}

This solution allow Overview Engine to apply several optimizations on top. On other places, like the middleware or any other use case outside of React, your suggested solution should work just fine :wink:

5

const rowState = useOverviewEngineState(UiStateSelector.rowState())

That works in in cell, but not in an overview, is that intended? What if I want know that in my overview?

6

Hi @soeren-round-ridge,

That could be related to the problem I mentioned above, which means your “overview” component are not yet wrapped with necessary contexts. I would imagine it look like this

  • YourOverviewComponent <= the selector is called here which doesn’t aware of any context
    • OverviewEngine
      • OverviewEngineStateContextProvider
        • Table
          • Row
            • Cell

If this is your actual React tree, then you could try moving your selector logic into a specific lower level component like Table, Row, Cell…

Or else, if it such refactor is not possible, you can use the solution suggested by @loi-risen-dale