React Native - Allowing a user to sort by favorites

Hey!

I’m having some issues figuring out how to implement filtering by the attribute “favorited_by” in my app.

Basically I’ve added a button that adds the user ID to the objects favorited_by attribute, but I don’t know where to go from here. Every guide about it has been for a different platform that doesn’t seem to apply for React Native.

The only solution I’ve come up with won’t work for what I’ve been asked to do, I tried adding a button that queries the userID (it’s a firebase user UID), which works. But I don’t want there to be a string in the search box, not to mention that way a user can’t search inside his favorite list.

My set up goes like this:

import algoliasearch from ‘algoliasearch/reactnative’;
const searchClient = algoliasearch(
‘ID’,
‘API’
);

return (
  <SafeAreaView style={styles.safe}>
    <StatusBar barStyle="light-content"/>
    <View style={styles.container}>
      <InstantSearch
        searchClient={searchClient}
        indexName="stuff"
        refresh={refresh}
        root={this.root}
        searchState={searchState}
        onSearchStateChange={this.onSearchStateChange}
      >
        <Filters
          isModalOpen={isModalOpen}
          searchClient={searchClient}
          searchState={searchState}
          toggleModal={this.toggleModal}
          onRequestClose={this.toggleModal}
          onSearchStateChange={this.onSearchStateChange}
        />

        <SearchBox/>
        {this.renderFilterButtons()}
        <InfiniteHits
          refresh={this.refresh}
          isDetailsPage={isDetailsPage}
          toggleEditPage={this.toggleEditPage}
          role={this.state.role}
        />
      </InstantSearch>
    </View>
  </SafeAreaView>
);

And the Filters.js

return(
  <Modal animationType="slide" visible={isModalOpen} onRequestClose={toggleModal}>
    <SafeAreaView>
      <InstantSearch
        searchClient={searchClient}
        indexName="converters"
        searchState={searchState}
        onSearchStateChange={onSearchStateChange}
      >
      <ScrollView>
        <RefinementList
          attribute="data.favorited_by"
          showMore={true}
          label="Favorites"
        />
      </ScrollView>
      <ScrollView>
        <RefinementList
          attribute="data.brand"
          showMore={true}
          label="Brands"
        />
      </ScrollView>
      <ScrollView>
        <RefinementList
          attribute="data.continent"
          showMore={true}
          label="Continents"
        />
        <TouchableOpacity style={styles.closeButton} onPress={toggleModal}>
          <Text style={styles.closeButtonText}>Close</Text>
        </TouchableOpacity>
      </ScrollView>
      </InstantSearch>
    </SafeAreaView>
  </Modal>
)

I don’t think I’m supposed to use data.favorited_by as attribute as that gets the list of user ids and not the actual object. So I don’t think that’s correct and I’m not sure if it’s used at all.

How do I go about allowing a user to filter by favorites they’ve bookmarked?

Any help is really appreciated.

Regards

Hi @Zango!
Have you tried/considered using the Configure widget to set a filter on the users userID once its fetched?

is available from react-instantsearch-native and lets you set filters as you like:

<Configure filters="favorited_by:123"/>

Let us know if this works for you.

Hi again!

Thank you @maria.schreiber!

It works just as I hoped for!

Best Regards !

1 Like