ResourcList not selecting all. Why?

Anonymous
Not applicable
1805 0 0

Hi 

I am using Polaris ResourceList and I don't understand why it is not selecting all the data. 

Screenshot 2021-01-03 at 01.05.23.png

In the example it works perfect but not with my data (see image below)

 

Screenshot 2021-01-03 at 01.00.53.png

 

Here is my code for ResourceList:

import React, { useCallback, useEffect, useState } from 'react';
import {
  Pagination,
  Page,
  Spinner,
  TextStyle,
  Button,
  Card,
  TextField,
  Filters,
  ResourceItem,
  ResourceList,
  Thumbnail,
} from '@shopify/polaris';
import { useQuery } from 'react-apollo';
import axios from 'axios';
import { GET_ALL_PRODUCTS } from './gql/gql';

const ResourceListTable = () => {
  const [items, setItems] = useState(null);
  const [selectedItems, setSelectedItems] = useState([]);
  const [offset, setOffset] = useState(0);
  const [limit, setLimit] = useState(30);

  // const sendImageData = () => {
  //   const obj = Object.assign(itemsServer, { id: selectedItems });

  //   fetch('/images', {
  //     method: 'post',
  //     headers: { 'Content-Type': 'application/json' },
  //     body: JSON.stringify({ data: obj }),
  //   }).then((res) => console.log(res));
  // };
  const { loading, error, data, fetchMore } = useQuery(GET_ALL_PRODUCTS, {
    variables: {
      numProducts: 10,
      after: null,
    },
  });
  useEffect(() => {
    if (data) {
      const rootProducts = data ? data.products : null;
      const productEdges = rootProducts ? rootProducts.edges : null;
      setItems(productEdges);
    }
  }, [data]);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  const resourceName = {
    singular: 'product',
    plural: 'products',
  };
  const promotedBulkActions = [
    {
      content: 'Edit Products',
      onAction: () => console.log('Todo: implement bulk edit'),
    },
  ];

  const bulkActions = [
    {
      content: 'Add tags',
      onAction: () => console.log('Todo: implement bulk add tags'),
    },
    {
      content: 'Remove tags',
      onAction: () => console.log('Todo: implement bulk remove tags'),
    },
    {
      content: 'Delete customers',
      onAction: () => console.log('Todo: implement bulk delete'),
    },
  ];

  console.log(items);
  return items ? (
    <Page>
      <Card sectioned>
        <ResourceList
          resourceName={resourceName}
          items={items}
          renderItem={renderItem}
          selectedItems={selectedItems}
          onSelectionChange={setSelectedItems}
          promotedBulkActions={promotedBulkActions}
          bulkActions={bulkActions}
          resolveItemId={resolveItemIds}
        />

        <Pagination
          hasPrevious
          onPrevious={() => {
            console.log('Previous');
          }}
          hasNext
          onNext={() => {
            console.log('Next');
            setOffset(offset + 30);
            setLimit(limit + 30);
            const root = data.products.edges;
            const { cursor } = root[root.length - 1];

            fetchMore({
              variables: {
                after: cursor,
              },
              updateQuery: (prevResult, { fetchMoreResult }) => {
                if (!fetchMoreResult) return prevResult;
                fetchMoreResult.products.edges = [
                  ...prevResult.products.edges,
                  ...fetchMoreResult.products.edges,
                ];
                return fetchMoreResult;
              },
            });
          }}
        />
      </Card>
    </Page>
  ) : null;

  function renderItem(item, _, index) {
    const { id, title, images } = item.node;
    const { originalSrc } = images.edges[0].node;
    const newID = id.split('/')[4];
    const media = <Thumbnail size="large" source={originalSrc} />;
    return (
      <ResourceItem id={newID} media={media} sortOrder={index}>
        <h3>
          <TextStyle variation="strong">{title}</TextStyle>
        </h3>
        <div style={{ float: 'right' }}>
          <TextStyle variation="positive">{title} ✓</TextStyle>
        </div>
      </ResourceItem>
    );
  }

  function resolveItemIds({ id }) {
    return id;
  }

  function disambiguateLabel(key, value) {
    switch (key) {
      case 'taggedWith':
        return `Tagged with ${value}`;
      default:
        return value;
    }
  }

  function isEmpty(value) {
    if (Array.isArray(value)) {
      return value.length === 0;
    } else {
      return value === '' || value == null;
    }
  }
};

export default ResourceListTable;

 

 

0 Likes
Paul_vd_Dool
Shopify Partner
19 3 4

Hi,

Late response, maybe you already fixed it but leaving a response for feature people running into this issue.

In the renderItem function you create a newID variable where you take the id of the product "gid://shopify/Product/123467" and pass that ID to the ResourceItem component. When you select a single resource item, it emits that id, just the number.

When you "Select all" on the ResourceList it will emit an array of all the ids of the array you pass into the items prop. That id is still "gid://shopify/Product/1234567". And because that doesn't match with the "1234567" on the ResourceItem, it will not check the checkboxes for each ResourceItem when you "Select all".

0 Likes