react instantsearch and react native - nesting connectors within a modal

Hi,

i’m trying to make instantsearch run on a react native project. It is a large product list that can be filtered. Specifically i want to place the filter options in a modal dialog (https://facebook.github.io/react-native/docs/modal.html). After the modal opens, users can select various filter options and then hit ‘Apply Filter’, which closes the modal.

The Problem is that the previous alterations to the search state are gone. Any ideas on how to solve that?

Thank you!

import React, { Component } from 'react';
import { TouchableOpacity, TouchableHighlight, Image, Text, TextInput, Dimensions, Title, Icon, Header, View,  StyleSheet, Modal, ScrollView, ListView, RefreshControl } from 'react-native';


// Algolia Instantsearch
import { InstantSearch } from 'react-instantsearch/native';
import { connectSearchBox, connectInfiniteHits, connectCurrentRefinements, connectStats, connectHierarchicalMenu, connectRefinementList } from 'react-instantsearch/connectors';

// Catalog components
import SearchBox from './searchbox';
import Hits from './hits';

// Modal Content
import CurrentRefinements from './currentrefinements';
import CategoryFilter from './categoryfilter';
import SizeFilter from './sizefilter';
import PriceFilter from './pricefilter';
import ApplyFilter from './applyfilter';

// Pass Components to Algolia Connectors
const ConnectedSearchBox = connectSearchBox(SearchBox);
const ConnectedHits = connectInfiniteHits(Hits);
const ConnectedCurrentRefinements = connectCurrentRefinements(CurrentRefinements);
const ConnectedCategoryFilter = connectHierarchicalMenu(CategoryFilter);
const ConnectedSizeFilter = connectRefinementList(SizeFilter);
const ConnectedPriceFilter = connectMultiRange(PriceFilter);
const ConnectedApplyFilter=  connectStats(ApplyFilter);

class InstantSearch extends Component {

  constructor(props) {
    super(props);
  }

  render() {

      // Retrieve Redux actions and props
      const { filterModalOpen, toggleFilterModal, searchState, setSearchState, openDrawer } = this.props;
   
      return (

        <View>
            <InstantSearch
              appId="latency"
              apiKey="6be0576ff61c053d5f9a3225e2a90f76"
              indexName='ikea'
              searchState = { searchState }
              onSearchStateChange = { (st) => (  setSearchState(st) ) }
            >

              <TouchableOpacity onPress = { () => toggleFilterModal()} >
                <Text> Open Filter Modal </Text>
              </TouchableOpacity>

              <ConnectedSearchBox openDrawer = { openDrawer }/>

              <Modal
                animationType={"slide"}
                transparent={false}
                visible={filterModalOpen}
                onRequestClose={() => {alert("Modal has been closed.")}}
                > 
                <View style = {{ flex : 1 }}>
                    <ConnectedCurrentRefinements  />
                    <ConnectedCategoryFilter attributes = {['category']} />
                    <ConnectedSizeFilter attributeName = "sizes"  />
                    <ConnectedApplyFilter toggleFilterModal = {toggleFilterModal} />
                </View>
              </Modal>

              <ConnectedHits/> 

            </InstantSearch>
        </View>
        );
  }
}

[mthuret]

Hi @Arcade1080

This occurs because every time a widget is unmounted, then its removed from the search state. When the modal is closed, it unmounts the widgets inside, and then, their refinements are removed from the search state.

We need to think about a new API entry that will allow users to persist a refinement even if the widget is unmounted. That way you will be able to use only virtual widgets without having the need of saving the search state.

As a workaround for now, the way to go is by using virtual widgets along with the searchState and onSearchStateChange props to save the search state except when the modal is closing.

Here’s an example:

 <View style={styles.maincontainer}>
        <InstantSearch
          appId=""
          apiKey=""
          indexName=""
          searchState={this.state.searchState}
          onSearchStateChange={searchState => {
            if (!this.state.isClosing) {
              this.setState({searchState}); //save the searchState except when the modal is closing
            } else {
              this.setState({isClosing: false}); 
            }
          }}
        >
          <ConnectedSearchBox/>
          <VirtualRefinementList attributeName="category" />

          <TouchableHighlight onPress={() => {
            this.setModalVisible(true);
          }}>
            <Text>Show Modal</Text>
          </TouchableHighlight>

          <Modal
            animationType={'slide'}
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => this.setState({isClosing: true})}
          >
            <View style={{flex: 1, marginTop: 30}}>
              <ConnectedRefinementList attributeName="category" />
              <TouchableHighlight onPress={() => {
                this.setState({isClosing: true});
                this.setModalVisible(!this.state.modalVisible);
              }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </Modal>

          <ConnectedHits/>

        </InstantSearch>
</View>

where VirtualRefinementList is:

const VirtualRefinementList = connectRefinementList(() => null);

[Arcade1080]

Thank you! Will do!