useReviewList

The useReviewsList hook is designed to fetch and manage a list of product reviews from a Shopify data source. It provides functionality for filtering, pagination, and handling loading states.

Usage

import { useReviewsList } from '@appmaker-xyz/shopify';

const {
  reviews,
  isLoading,
  isError,
  hasNextPage,
  fetchNextPage,
  isPageFetching,
  filters,
  setFilters,
  resetFilters,
  rating,
  setRating,
  limit,
  setLimit
} = useReviewsList({ productId, filters });

Parameters

Field	Type	Description
productId	string	The ID of the product to fetch reviews for.
filters (optional)		Initial filters to apply to the reviews.
default	boolean	Whether to use default filters.
limit	number	The maximum number of reviews to fetch.
rating	number	The minimum rating to filter by.

Returns

Field	Type	Description
reviews	array	The list of fetched reviews.
isLoading	boolean	Whether the reviews are currently being fetched.
isError	boolean	Whether an error occurred during fetching.
hasNextPage	boolean	Whether there are more reviews to fetch.
fetchNextPage	function	Function to fetch the next page of reviews.
isPageFetching	boolean	Whether the next page is currently being fetched.
filters	object	The current filters applied.
setFilters	function	Function to set new filters.
resetFilters	function	Function to reset filters to default.
rating	number	The current rating filter.
setRating	function	Function to set a new rating filter.
limit	number	The current limit filter.
setLimit	function	Function to set a new limit filter.

Example

Here's an example of how to use the useReviewsList hook in a React component:

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

const ReviewList = ({
  pageData,
  attributes,
  BlocksView,
  innerBlocks,
  blockData,
  BlockItem,
  onAction,
  BlockItemRender,
  ...props
}) => {
  const {
    reviews,
    isLoading,
    isError,
    hasNextPage,
    fetchNextPage,
    isPageFetching,
    rating,
    setRating,
  } = useReviewsList({
    productId: blockData?.productId || blockData?.node?.id,
    filters: {
      default: true,
      limit: 10,
    },
  });

  const renderItem = ({ item }) => {
    return (
      <BlockItem
        BlockItem={BlockItem}
        BlocksView={BlocksView}
        blockData={item}
        onAction={onAction}
        block={{
          name: 'shopify/review-item',
          innerBlocks,
          clientId: 'review-item',
          isValid: true,
        }}
      />
    );
  };

  return (
    <View>
      <View style={styles.headerContainer}>
        {Array.from({ length: 6 }).map((_, index) => {
          const isPressed =
            index === rating || (rating === undefined && index === 0);
          return (
            <Pressable
              key={index}
              onPress={() => setRating(index === 0 ? undefined : index)}
              style={[
                styles.starsPressable,
                {
                  backgroundColor: isPressed ? '#2c2c2c' : '#fff',
                },
              ]}>
              <Text
                style={{
                  color: isPressed ? '#fff' : '#2c2c2c',
                  fontSize: 12,
                }}>
                {index === 0 ? 'All' : `${index} Star${index > 1 ? 's' : ''}`}
              </Text>
            </Pressable>
          );
        })}
      </View>
      {isError ? (
        <Text>Error loading reviews</Text>
      ) : isLoading ? (
        <ActivityIndicator size="small" color="#2c2c2c" />
      ) : null}
      <FlatList
        data={reviews}
        renderItem={renderItem}
        keyExtractor={(item, index) =>
          item?.reviewer?.name?.toString() + item?.created_at?.toString()
        }
        onEndReached={() => hasNextPage && fetchNextPage()}
        onEndReachedThreshold={0.1}
        ListFooterComponent={() =>
          isPageFetching ? (
            <ActivityIndicator size="small" color="#2c2c2c" />
          ) : null
        }
        ListEmptyComponent={() => (
          <Text style={styles.listEmptyComponent}>No reviews found</Text>
        )}
      />
      {reviews?.length > 0 && (
        <BlockItem
          BlockItem={BlockItem}
          BlocksView={BlocksView}
          blockData={{
            productId: blockData?.productId || blockData?.node?.id,
          }}
          onAction={onAction}
          block={{
            name: 'shopify/show-all-review',
            innerBlocks,
            clientId: 'review-show-all',
            isValid: true,
          }}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    alignItems: 'center',
    marginBottom: 10,
  },
  starsPressable: {
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 10,
  },
  listEmptyComponent: {
    color: '#2c2c2c',
    fontSize: 12,
    textAlign: 'center',
    marginVertical: 10,
  },
});

export default ReviewList;