Как предотвратить начальную загрузку из мгновенного поиска Algolia в реагировать на родной? - PullRequest
Новая
       29

Как предотвратить начальную загрузку из мгновенного поиска Algolia в реагировать на родной?

0 голосов
/ 17 февраля 2020

У меня есть коллекция пользователей, которую я хочу запрашивать как типы пользователей, но когда я переключаюсь на экран поиска пользователей, все пользователи заполняются на экране, даже если поиск пуст.

Как можно Я запрещаю это и отправляю результаты клиенту только тогда, когда он / она печатает в окне поиска. ??

Я нашел некоторые другие ссылки и ресурсы, но либо они были слишком стары, трудны для понимания или использовались React вместо React Native.

Я начинающий разработчик, и если бы вы разработали решение, это было бы здорово.

Это мой код:

SEARCH_USER. JS: 

import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  Alert,
  FlatList,
  ActivityIndicator,
} from 'react-native';


import firestore from '@react-native-firebase/firestore';
import algoliasearch from 'algoliasearch';
import {
  InstantSearch,
  connectSearchBox,
  connectInfiniteHits,
} from 'react-instantsearch-native';
import PropTypes from 'prop-types';
import InfiniteHits from '../components/Algolia Components/InfiniteHits';



class SearchAddBuddyScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      value: null,
    };
  }


  searchClient = algoliasearch(
    '########',
    '####################',
  );

  render() {
    return (
      <View>
        <SecondaryHeader secondaryHeaderTitle="Add Buddies" />
        <InstantSearch
          searchClient={this.searchClient}
          indexName="prod_USERSCOLLECTION"
          onSearchStateChange={searchState =>
            console.log('=====> ', searchState)
          }>
          <ConnectedSearchBox />
          <InfiniteHits navigation={this.props.navigation} />
        </InstantSearch>
      </View>
    );
  }
}

class SearchBox extends Component {
  render() {
    console.log('Connected Search Box called');
    return (
      <View
        style={[
          textInput.generalTextInput,
          {
            marginBottom: 24,
            alignSelf: 'center',
            justifyContent: 'center',
          },
        ]}>
        <TextInput
          placeholderTextColor="#333647"
          style={[textInput.generalTextInput, {alignSelf: 'center'}]}
          onChangeText={text => this.props.refine(text)}
          value={this.props.currentRefinement}
          placeholder={'Search'}
          clearButtonMode={'always'}
          spellCheck={false}
          autoCorrect={false}
          autoCapitalize={'none'}
        />
      </View>
    );
  }
}

SearchBox.propTypes = {
  refine: PropTypes.func.isRequired,
  currentRefinement: PropTypes.string,
};

const ConnectedSearchBox = connectSearchBox(SearchBox);
export default SearchUserScreen;

InfiniteHits. js: 

import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList} from 'react-native';
import {connectInfiniteHits} from 'react-instantsearch-native';
import AddFriendComponent from '../AddFriend';

class InfiniteHits extends Component {
  constructor(props) {
    super(props);

    this.navigation = this.props.navigation;
  }
  _renderItem = ({item}) => {
    return (
      <AddFriendComponent
        username={item.username}
        fullName={item.fullName}
        onPressUserProfile={() =>
          this.props.navigation.navigate('UserProfile', {profileId: item.uid})
        }
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.props.hits}
        keyExtractor={item => item.objectID}
        // ItemSeparatorComponent={() => <View style={styles.separator} />}
        onEndReached={() => this.props.hasMore && this.props.refine()}
        renderItem={this._renderItem}
      />
    );
  }
}
export default connectInfiniteHits(InfiniteHits);

1 Ответ

0 голосов
/ 18 февраля 2020

После прочтения большего количества материала я нашел это https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/react/

И внес следующие изменения в мой код, и это удалось. 


conditionalQuery = {
    search(requests) {
      if (
        requests.every(({params}) => !params.query) ||
        requests.every(({params}) => params.query === ' ') ||
        requests.every(({params}) => params.query === '  ') ||
        requests.every(({params}) => params.query === '   ')
      ) {
        // Here we have to do something else
        console.log('Empty Query');
        return Promise.resolve({
          results: requests.map(() => ({
            hits: [],
            nbHits: 0,
            nbPages: 0,
            processingTimeMS: 0,
          })),
        });
      }
      const searchClient = algoliasearch(
        '########',
        '###################',
      );
      return searchClient.search(requests);
    },
  };
  render() {
    return (
      <View>
        <SecondaryHeader secondaryHeaderTitle="Add Buddies" />
        <InstantSearch
          searchClient={this.conditionalQuery}
          indexName="prod_USERSCOLLECTION"
          onSearchStateChange={searchState =>
            console.log('=====> ', searchState)
          }>
          <ConnectedSearchBox />
          <InfiniteHits navigation={this.props.navigation} />
        </InstantSearch>
      </View>
    );
  }

Это решение может все еще будет улучшено для напечатанных пробелов, но я не знаю, как это сделать.

...