Count for a ToggleRefinement acting weird

Hey :wave:

Trying to implement a custom toggle refinement, but the returned count object looks weird.

I have a list of users with around 11k records, whereof around 4k is verified. The default-generated UI in my Algolia Index displays this correctly:

image

However, inspecting the props passed to my component from InstantSearch React, it says:

{checked: 11449, unchecked: 4320}

I realise I can subtract the numbers to get the result, I just find this behaviour odd. Did I do something wrong?

Furthermore, there are no TS typings for the props for a ToggleRefinement/connectToggleRefinement, or am I missing something?

The class looks like this:

import { Grid, Typography } from '@material-ui/core';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch/Switch';
import React from 'react';
import { connectToggleRefinement } from 'react-instantsearch-core';

interface Props {
  currentRefinement: boolean;
  count: { unchecked: number; checked: number }; // https://www.algolia.com/doc/api-reference/widgets/toggle-refinement/react/#connector-param-provided-count
  refine: (newValue: boolean) => void;
}

const ToggleRefinement: React.FC<Props> = ({ currentRefinement, count, refine }) => {
  console.log(count);
  return (
    <Grid>
      <FormControlLabel
        value="end"
        control={
          <Switch
            color="primary"
            checked={currentRefinement}
            onChange={event => {
              event.preventDefault();
              refine(!currentRefinement);
            }}
          />
        }
        label="Verified only"
        labelPlacement="end"
      />
      <Typography>{currentRefinement ? count.checked : count.unchecked}</Typography>
    </Grid>
  );
};
export const CustomToggleRefinement = connectToggleRefinement(ToggleRefinement);

The values in count are the numbers to display when the toggle is checked or not.

For example in your case if ToggleRefinement is checked it will display something like:

[x] Verified only (11449)

Which means that if you uncheck it you’ll get 11449 results.

Same principle if ToggleRefinement is unchecked, you’ll get:

[ ] Verified only (4320)

Which means that if you check it you’ll get 4320 results.

I understand that it can be confusing but it was designed that way to be consistent with the count displayed in refinementList.

About the TS typings, they are relying on DefinitelyTyped for now and they are missing for this component indeed. We’ll work to fix this :slight_smile:

1 Like