App reviews, troubleshooting, and recommendations
I want to implement the index table's query, so I add some code in the handleQueryValueChange function, the data is empty now, but the view doesn’t change
const handleQueryValueChange = useCallback((value: string) => { setQueryValue(value); this.orders = []; }, []);
The complete code:
import { TextField, IndexTable, LegacyCard, IndexFilters, useSetIndexFiltersMode, useIndexResourceState, Text, ChoiceList, RangeSlider, Badge, IndexFiltersMode, useBreakpoints, } from "@shopify/polaris"; import type { IndexFiltersProps, TabProps } from "@shopify/polaris"; import { useState, useCallback } from "react"; function IndexTableWithFilteringExample() { const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const [itemStrings, setItemStrings] = useState([ "All", "Unpaid", "Open", "Closed", "Local delivery", "Local pickup", ]); const tabs: TabProps[] = itemStrings.map((item, index) => ({ content: item, index, onAction: () => {}, id: `${item}-${index}`, isLocked: index === 0, actions: [], })); const [selected, setSelected] = useState(0); const sortOptions: IndexFiltersProps["sortOptions"] = [ { label: "Order", value: "order asc", directionLabel: "Ascending" }, { label: "Order", value: "order desc", directionLabel: "Descending" }, { label: "Customer", value: "customer asc", directionLabel: "A-Z" }, { label: "Customer", value: "customer desc", directionLabel: "Z-A" }, { label: "Date", value: "date asc", directionLabel: "A-Z" }, { label: "Date", value: "date desc", directionLabel: "Z-A" }, { label: "Total", value: "total asc", directionLabel: "Ascending" }, { label: "Total", value: "total desc", directionLabel: "Descending" }, ]; const [sortSelected, setSortSelected] = useState(["order asc"]); const { mode, setMode } = useSetIndexFiltersMode(IndexFiltersMode.Filtering); const onHandleCancel = () => {}; const [accountStatus, setAccountStatus] = useState<string[]>([]); const [moneySpent, setMoneySpent] = useState<[number, number] | undefined>( undefined ); const [taggedWith, setTaggedWith] = useState<string | undefined>(""); const [queryValue, setQueryValue] = useState<string | undefined>(undefined); const handleAccountStatusChange = useCallback( (value: string[]) => setAccountStatus(value), [] ); const handleMoneySpentChange = useCallback( (value: [number, number]) => setMoneySpent(value), [] ); const handleTaggedWithChange = useCallback( (value: string) => setTaggedWith(value), [] ); const handleQueryValueChange = useCallback((value: string) => { setQueryValue(value); this.orders = []; }, []); const handleAccountStatusRemove = useCallback(() => setAccountStatus([]), []); const handleMoneySpentRemove = useCallback( () => setMoneySpent(undefined), [] ); const handleTaggedWithRemove = useCallback(() => setTaggedWith(""), []); const handleQueryValueRemove = useCallback(() => setQueryValue(""), []); const handleFiltersClearAll = useCallback(() => { handleAccountStatusRemove(); handleMoneySpentRemove(); handleTaggedWithRemove(); handleQueryValueRemove(); }, [ handleQueryValueRemove, handleTaggedWithRemove, handleMoneySpentRemove, handleAccountStatusRemove, ]); const filters = [ { key: "accountStatus", label: "Account status", filter: ( <ChoiceList title="Account status" titleHidden choices={[ { label: "Enabled", value: "enabled" }, { label: "Not invited", value: "not invited" }, { label: "Invited", value: "invited" }, { label: "Declined", value: "declined" }, ]} selected={accountStatus || []} onChange={handleAccountStatusChange} allowMultiple /> ), shortcut: true, }, { key: "taggedWith", label: "Tagged with", filter: ( <TextField label="Tagged with" value={taggedWith} onChange={handleTaggedWithChange} autoComplete="off" labelHidden /> ), shortcut: true, }, { key: "moneySpent", label: "Money spent", filter: ( <RangeSlider label="Money spent is between" labelHidden value={moneySpent || [0, 500]} prefix="$" output min={0} max={2000} step={1} onChange={handleMoneySpentChange} /> ), }, ]; const appliedFilters = taggedWith && !isEmpty(taggedWith) ? [ { key: "taggedWith", label: disambiguateLabel("taggedWith", taggedWith), onRemove: handleTaggedWithRemove, }, ] : []; var orders = [ { id: "1020", order: "#1020", date: "Jul 20 at 4:34pm", customer: "Jaydon Stanton", total: "$969.44", paymentStatus: <Badge progress="complete">Paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, { id: "1019", order: "#1019", date: "Jul 20 at 3:46pm", customer: "Ruben Westerfelt", total: "$701.19", paymentStatus: <Badge progress="partiallyComplete">Partially paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, { id: "1018", order: "#1018", date: "Jul 20 at 3.44pm", customer: "Leo Carder", total: "$798.24", paymentStatus: <Badge progress="complete">Paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, ]; const resourceName = { singular: "order", plural: "orders", }; const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(orders); const rowMarkup = orders.map( ( { id, order, date, customer, total, paymentStatus, fulfillmentStatus }, index ) => ( <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index} > <IndexTable.Cell> <Text variant="bodyMd" fontWeight="bold" as="span"> {order} </Text> </IndexTable.Cell> <IndexTable.Cell>{date}</IndexTable.Cell> <IndexTable.Cell>{customer}</IndexTable.Cell> <IndexTable.Cell> <Text as="span" alignment="end" numeric> {total} </Text> </IndexTable.Cell> <IndexTable.Cell>{paymentStatus}</IndexTable.Cell> <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell> </IndexTable.Row> ) ); return ( <LegacyCard> <IndexFilters sortOptions={sortOptions} sortSelected={sortSelected} queryValue={queryValue} queryPlaceholder="Searching in all" onQueryChange={handleQueryValueChange} onQueryClear={() => setQueryValue("")} onSort={setSortSelected} cancelAction={{ onAction: onHandleCancel, disabled: false, loading: false, }} tabs={tabs} selected={selected} onSelect={setSelected} canCreateNewView={false} filters={filters} appliedFilters={appliedFilters} onClearAll={handleFiltersClearAll} mode={mode} setMode={setMode} /> <IndexTable condensed={useBreakpoints().smDown} resourceName={resourceName} itemCount={orders.length} selectedItemsCount={ allResourcesSelected ? "All" : selectedResources.length } onSelectionChange={handleSelectionChange} headings={[ { title: "Order" }, { title: "Date" }, { title: "Customer" }, { title: "Total", alignment: "end" }, { title: "Payment status" }, { title: "Fulfillment status" }, ]} > {rowMarkup} </IndexTable> </LegacyCard> ); function disambiguateLabel(key: string, value: string | string[]): string { switch (key) { case "moneySpent": return `Money spent is between $${value[0]} and $${value[1]}`; case "taggedWith": return `Tagged with ${value}`; case "accountStatus": return (value as string[]).map((val) => `Customer ${val}`).join(", "); default: return value as string; } } function isEmpty(value: string): boolean { if (Array.isArray(value)) { return value.length === 0; } else { return value === "" || value == null; } } } export default IndexTableWithFilteringExample;
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024