Chore(ArrayField): add support for storeKey to manage independent selection states
#10390
Conversation
Aijeyomah
changed the title
storeKey to manage independent selection states**
Aijeyomah
changed the title
storeKey to manage independent selection states**storeKey to manage independent selection states
|
@fzaninotto Can you review? thanks |
|
Thanks for the PR! As this is a new feature, can you target the |
Yes, I can. Thanks |
Aijeyomah
force-pushed
the
add-storekey-to-arrayfield
branch
from
d8c1f4f to
d852f0c
Compare
@djhi @fzaninotto I have updated the target branch as well as written the necessary stories and tests for the feature. Please re-review. Thanks |
| useEffect(() => { | ||
| if (!resource) return; | ||
| // Check if storeKey exists in the pagination store | ||
| const currentPagination = storeKeyPaginationRef.current[resource]; | ||
| if (currentPagination) { | ||
| // Restore existing pagination state for the storeKey | ||
| if ( | ||
| page !== currentPagination.page || | ||
| perPage !== currentPagination.perPage | ||
| ) { | ||
| setPage(currentPagination.page); | ||
| setPerPage(currentPagination.perPage); | ||
| } | ||
| } else { | ||
| setPage(initialPage); | ||
| setPerPage(initialPerPage); | ||
| } | ||
| storeKeyPaginationRef.current[resource] = { page, perPage }; | ||
| }, [ | ||
| resource, | ||
| setPage, | ||
| setPerPage, | ||
| initialPage, | ||
| initialPerPage, | ||
| page, | ||
| perPage, | ||
| ]); | ||
|
|
There was a problem hiding this comment.
I'm afraid you are going in the wrong direction here 😬 . The fix for #10382 suggested by @fzaninotto was to allow to override the storeKey used to store the selection state (i.e. used in useRecordSelection), but not the pagination state.
You can have a look at what was done in useReferenceManyFieldController for an example:
| export const ListsWithoutStoreKeys = () => ( | ||
| <CoreAdminContext store={localStorageStore()} dataProvider={dataProvider}> | ||
| <CoreAdminUI layout={Layout}> | ||
| <CustomRoutes> | ||
| <Route path="/store" element={StorePosts} /> | ||
| <Route path="/nostore" element={NoStorePosts} /> | ||
| </CustomRoutes> | ||
| <Resource name="posts" /> | ||
| </CoreAdminUI> | ||
| </CoreAdminContext> | ||
| ); |
There was a problem hiding this comment.
This Story is a bit misleading, StorePosts is still using a storeKey.
Besides, storeKey={false} is not the same as having no storeKey (for NoStorePosts ). I'd expect both lists in ListsWithoutStoreKeys to have no storeKey.
| const Layout = (props: CoreLayoutProps) => ( | ||
| <div style={styles.mainContainer}> | ||
| <Link aria-label="top" to={`/top`}> | ||
| Go to Top Posts | ||
| </Link> | ||
| <Link aria-label="flop" to={`/flop`}> | ||
| Go to Flop Posts | ||
| </Link> | ||
| <Link aria-label="store" to={`/store`}> | ||
| Go to Store List | ||
| </Link> | ||
| <Link aria-label="nostore" to={`/nostore`}> | ||
| Go to No-Store List | ||
| </Link> | ||
|
|
||
| <br /> | ||
| {props.children} | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Layout should not be shared across stories since both stories do not implement the same routes
|
|
||
| When displaying multiple lists with the same data source, you may need to distinguish their selection states. To achieve this, assign a unique `storeKey` to each `ArrayField`. This allows each list to maintain its own selection state independently. | ||
|
|
||
| In the example below, two `ArrayField` components display the same data source (`books`), but each stores its selection state under a different key (`books.selectedIds` and `custom.selectedIds`). This ensures that both components can coexist on the same page without interfering with each other's state. |
There was a problem hiding this comment.
| In the example below, two `ArrayField` components display the same data source (`books`), but each stores its selection state under a different key (`books.selectedIds` and `custom.selectedIds`). This ensures that both components can coexist on the same page without interfering with each other's state. | |
| In the example below, two `ArrayField` components display the same data source (`books`), but each stores its selection state under a different key (`customOne.selectedIds` and `customTwo.selectedIds`). This ensures that both components can coexist on the same page without interfering with each other's state. |
Problem
#10382
Describe the problem this PR solves
Solution
storeKeyproperty forArrayFieldto enable distinct selection state storage for multiple instances of the same data source.Describe the solution this PR implements
How To Test
Describe the steps required to test the changes
Additional Checks
masterfor a bugfix, ornextfor a featureAlso, please make sure to read the contributing guidelines.