useQuickFilters

The useQuickFilters hook is used to get the quick filters data for a collection. It fetches the filters based on the collection ID and returns the available filters.

Usage

import { useQuickFilters } from '@appmaker-xyz/shopify';
const { filters, isFilterLoading, applyQuickFilter, clearAllFilters, removeQuickFilter, getSingleFilter, isFilterAvailable, selectedFilters } = useQuickFilters();

Example

import React from 'react';
import {
  FlatList,
  Text,
  View,
  Pressable,
  StyleSheet,
} from 'react-native';
import { useQuickFilters } from '@appmaker-xyz/shopify';

const QuickFilters = () => {
  const {
    filters,
    selectedFilters,
    applyQuickFilter,
    removeQuickFilter,
    isFilterLoading,
    isFilterAvailable,
  } = useQuickFilters();

  if (isFilterLoading || !isFilterAvailable) return null;

  const flatQuickFilters = filters.flatMap(filter =>
    filter.values.map(value => ({
      ...value,
      parentId: filter.id,
    }))
  );

  const renderItem = ({ item }) => {
    const isSelected = selectedFilters?.[item.parentId]?.[item.id];
    const isDisabled = item.count === 0;

    return (
      <Pressable
        disabled={isDisabled}
        onPress={() => {
          if (isSelected) {
            removeQuickFilter({ filterKey: item.parentId, filterItem: item });
          } else {
            applyQuickFilter({ filterKey: item.parentId, filterItem: item });
          }
        }}
        style={({ pressed }) => [
          styles.chip,
          isSelected && styles.selectedChip,
          isDisabled && styles.disabledChip,
          pressed && !isDisabled && styles.pressedChip,
        ]}
      >
        <Text style={[styles.chipText, isSelected && styles.selectedChipText]}>
          {item.label}
        </Text>
      </Pressable>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={flatQuickFilters}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        horizontal
        showsHorizontalScrollIndicator={false}
        ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
        contentContainerStyle={{ paddingHorizontal: 12 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    backgroundColor: '#fff',
  },
  chip: {
    height: 35,
    paddingHorizontal: 16,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    backgroundColor: 'white',
  },
  selectedChip: {
    backgroundColor: '#000',
    borderColor: '#000',
  },
  selectedChipText: {
    color: '#fff',
  },
  disabledChip: {
    opacity: 0.4,
  },
  pressedChip: {
    opacity: 0.7,
  },
  chipText: {
    fontSize: 14,
    color: '#333',
  },
});

export default QuickFilters;