Filtering results depending on an attribute

I have the following code below and I have an attribute for all users and I have them listed in the react native app. I have an example record below and the component view below as well. I am trying to request all hits and search to only show by the current users account id. So a user with an account id of 2 should never see a list of someone with account id 4. This should be in the list and in a search as well and I can’t find the proper way to do that. The list and search work just fine. I just need to filter results.

Example Record:

{
  "id": 9,
  "company_name": null,
  "first_name": "John",
  "last_name": "Smith",
  "email": "john@smith.com",
  "customer_id": null,
  "account_id": 2,
  "_tags": [
    "App\\Customer::9"
  ],
  "objectID": "App\\Customer::9"
}

Code view:

import React, { Component } from 'react'
import { View, Text, ScrollView, FlatList, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, connectInfiniteHits, connectSearchBox, Configure } from 'react-instantsearch-native';

const searchClient = algoliasearch(
  'xxxxxxxxxxxxxxxxxxx',
  'xxxxxxxxxxxxxxxxxxx'
);

import * as actions from '../../redux/actions';
import CustomerItem from './CustomerItem'

// Styles
import styles from './styles'
import { Header, Main, Loader, Forms } from '../../styles/global'

class CustomerList extends Component {

  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      title: 'Customers',
      headerRight: (
        <TouchableOpacity
          onPress={() => { navigation.navigate('AddCustomer') }}>
          <Icon name="plus" style={Header.addButtonIcon} />
        </TouchableOpacity>
      )
    }
  }

  constructor(props) {
    super(props)
  }

  customerDetail = () => {
    this.props.navigation.navigate('CustomerDetail')
  }

  render() {

    // Customer list
    const Hits = connectInfiniteHits(({ hits, hasMore, refine }) => {
      /* if there are still results, you can
      call the refine function to load more */
      const onEndReached = function() {
        if (hasMore) {
          refine();
        }
      };

      return (
        <FlatList
          data={hits}
          onEndReached={onEndReached}
          keyExtractor={(item, index) => item.objectID}
          renderItem={({ item }) => {
            return (
              <CustomerItem customer={item} detail={this.customerDetail} />
            );
          }}
        />
      );
    });

    // Customer search
    const SearchBox = connectSearchBox(({ refine, currentRefinement }) => {
      return (
        <TextInput
          style={[Forms.inputField, Header.searchField]}
          onChangeText={text => refine(text)}
          value={currentRefinement}
          placeholder={'Search for customer...'}
          clearButtonMode={'always'}
          spellCheck={false}
          autoCorrect={false}
          autoCapitalize={'none'}
        />
      );
    });

    return (
      <View style={styles.container}>
        <InstantSearch
          searchClient={searchClient}
          indexName="customers"
        >
          <View style={Header.headerBar}>
            <SearchBox />
          </View>
          <View style={Main.searchContentContainer}>
              <Hits />
          </View>
        </InstantSearch>
      </View>
    )
  }
}

const mapStateToProps = state => {
  return {
    user: state.user,
    account: state.account
  }
}

export default connect(mapStateToProps, actions)(CustomerList)

So trying to solve and maybe I am close? See the below code for my thoughts/ideas. See what I am doing with the configure. My thought is I would pass the logged in user information to that account_id:Number string

return (
      <View style={styles.container}>
        <InstantSearch
          searchClient={searchClient}
          indexName="customers"
        >
          <View style={Header.headerBar}>
            <SearchBox />
          </View>
          <View style={Main.searchContentContainer}>
              <Configure
                filters="account_id:3"
              />
              <Hits />
          </View>
        </InstantSearch>
      </View>
    )

Hi @icemancast, we generally suggest using securedAPIKeys to restrict user data if you have a way to generate the api keys on your backend.

So my data set is not setup like that. I have a data set like the following, is there not a way to just pull or query by the account id. Also are there any react/react native examples of this setup?:

{
  "id": 4,
  "company_name": null,
  "first_name": "John",
  "last_name": "Smith",
  "email": "john@smith.com",
  "customer_id": null,
  "account_id": 4,
  "_tags": [
    "App\\Customer::4"
  ],
  "objectID": "App\\Customer::4"
}

So turns out I didn’t have any facets in my dashboard setup #facePalm

1 Like