Add Desktop Filters #149
Open
Add Desktop Filters #149
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updated the dependency version from ^0.5.0 to ^0.5.1 in package.json and package-lock.json to incorporate latest bug fixes and improvements.
…ders table - Introduce new TableFilters component with status filtering options - Integrate filters into ServiceProvidersTable UI for enhanced data filtering - Improves user experience by allowing filtering of active providers
…ders table Implement filters for status, country, IPNI, capacity range, and proving period range in the ServiceProvidersTable component, enhancing user experience by allowing data filtering based on these criteria. Added useFilterQueryState and useFilterOptions hooks, and updated TableFilters to handle state management and UI interactions.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… in TableFilters - Removed commented-out "Reset Filters" button section to clean up the component - Removed unused import comment for DEFAULT_FILTER_STATE to eliminate dead code
…lity, and conditional rendering - Update input placeholders from "e.g. 10" to "Min" and "Max" for clarity - Enhance aria-labels for better screen reader support - Conditionally render Status and IPNI filter sections only when multiple options exist, reducing UI clutter
…put constraints - Update options prop type to use ReturnType of useFilterOptions for better type safety - Destructure options into individual variables for cleaner code - Add min/max values to input placeholders using locale strings for better UX - Set min and max attributes on capacity and proving period inputs to prevent invalid entries - Update references to use destructured variables instead of nested options access This improves user experience by displaying available ranges and enforcing input limits.
Add filtering capabilities for service status, country, IPNI, capacity range, and proving period range in the ServiceProvidersTable component. This enhances user experience by allowing dynamic filtering of table data based on query parameters, using custom filter functions and transforming filter state into column filters for the React Table.
- Updated dependency version from 0.5.1 to 0.5.2 in package.json and package-lock.json - Changed imports in TableFilters.tsx from default to named exports (Checkbox, Input) to match new API - Added 'grow' class to a div for improved layout compatibility with updated library
Collaborator
Author
Move the `transformFilterStateToColumnFilters` function from `ServiceProvidersTable.tsx` to a new `map-filter-state-to-column-filters.ts` utility file for better code organization and reusability. Updated the component to import and use the new utility function.
- Renamed src/utils/service-provider-filters.ts to src/app/service-providers/utils/service-provider-filters.ts - Updated import paths in ServiceProvidersTable.tsx and column-definition.tsx - Removed unused filter imports and filterFns from ServiceProvidersTable.tsx to clean up code and localize utilities to the service-providers module for better organization.
…umns The explicit `id` properties in column definitions were removed, as they are automatically inferred from the accessor functions in TanStack Table, reducing boilerplate without changing functionality.
…ions Simplified the provingPeriod min/max computations by removing the `|| 0` fallback in the map function. This prevents defaulting missing or falsy `minProvingPeriod` values to 0, ensuring accurate range calculation (now NaN if undefined, which may require upstream data validation).
…h empty data handling Combine status, location, IPNI, capacity, and proving period computations into a single loop over providers to improve performance by avoiding multiple iterations. Add early return for empty data arrays with default options. Only update capacity min/max for providers with capacityTb data, defaulting range to 0 if none present. This ensures graceful handling of edge cases like missing data while maintaining sorted outputs.
…AsArrayOf path Moved parseAsArrayOf import from 'nuqs/server' to 'nuqs' and combined all related imports into a single block for better organization and consistency.
Removed the ResetTableFilters component and its import from ServiceProvidersTable.tsx, as it appears to be unused or deprecated in the current implementation. This simplifies the table header without affecting functionality.
Co-authored-by: Mirha Masala <[email protected]>
…lters Exported `Range` type from `map-filter-state-to-column-filters.ts` for reuse, removed duplicate `RangeFilter` in `service-provider-filters.ts`, and updated `capacityRangeFilterFn`/`provingPeriodRangeFilterFn` to use it. Added null check to `provingPeriodRangeFilterFn` for consistent behavior when no filter is applied, reducing duplication and improving maintainability.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📝 Description
This PR adds comprehensive filtering functionality to the Service Providers table. The filters are URL-persisted using query parameters, maintaining filter state across page refreshes and enabling shareable filtered views.
UXIT-3675
🛠️ Key Changes
TableFilterscomponent with dropdown menu containing filter options for:ResetTableFilterscomponent to clear all filters, search, and sortinguseFilterQueryStatehook for URL-persisted filter state management using nuqsuseFilterOptionshook to dynamically derive available filter options and min/max values from table data../utils/service-provider-filters.ts:statusFilterFnfor service status filteringcountryFilterFnfor location-based filteringipniFilterFnfor IPNI availability filteringcapacityRangeFilterFnfor capacity range filteringprovingPeriodRangeFilterFnfor proving period range filteringServiceProvidersTableto integrate filter state and apply column filters../data/column-definition.tsxto specify appropriatefilterFnfor each filterable columnuseSortingQueryStatehook to return object withsortQuery,setSortQuery, andclearSortQuerymethods@filecoin-foundation/ui-filecoindependency to v0.5.2📸 Screenshots