Skip to content

Prevent the collection being edited from displaying in its own embedded list #3778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dvail merged 1 commit into from
Nov 14, 2022
Merged

Prevent the collection being edited from displaying in its own embedded list #3778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion ui/apps/platform/src/Containers/Collections/CollectionAttacher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ const selectorListCells = [
];

export type CollectionAttacherProps = {
// A collection ID that should not be visible in the collection attacher component. This is
// used when editing a collection to prevent reference cycles.
excludedCollectionId: string | null;
initialEmbeddedCollections: CollectionResponse[];
onSelectionChange: (collections: CollectionResponse[]) => void;
};
Expand All @@ -30,11 +33,12 @@ function compareNameLowercase(search: string): (item: { name: string }) => boole
}

function CollectionAttacher({
excludedCollectionId,
initialEmbeddedCollections,
onSelectionChange,
}: CollectionAttacherProps) {
const [search, setSearch] = useState('');
const embedded = useEmbeddedCollections(initialEmbeddedCollections);
const embedded = useEmbeddedCollections(excludedCollectionId, initialEmbeddedCollections);
const { attached, detached, attach, detach, hasMore, fetchMore, onSearch } = embedded;
const { isFetchingMore, fetchMoreError } = embedded;

Expand Down
3 changes: 3 additions & 0 deletions ui/apps/platform/src/Containers/Collections/CollectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,9 @@ function CollectionForm({
<>
<p>Extend this collection by attaching other sets.</p>
<CollectionAttacher
excludedCollectionId={
action.type === 'edit' ? action.collectionId : null
}
initialEmbeddedCollections={initialEmbeddedCollections}
onSelectionChange={onEmbeddedCollectionsChange}
/>
Expand Down
43 changes: 35 additions & 8 deletions ui/apps/platform/src/Containers/Collections/hooks/useEmbeddedCollections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const minimumUpdateSize = pageSize / 2;
*
* If the response from the server contains less collections then the page size, display all
* aggregated results and set `hasMore` to `false`.
*
* @param clientMap
* A mapping of {id -> collection} for all attached and detached collections that
* are currently displayed in the UI.
Expand All @@ -41,6 +40,7 @@ const minimumUpdateSize = pageSize / 2;
* number, and the number of items returned in the last call to the server.
*/
function fetchDetachedCollections(
excludedCollectionId: string | null,
clientMap: CollectionMap,
searchValue: string,
pageNumber: number,
Expand All @@ -59,14 +59,22 @@ function fetchDetachedCollections(
);

return request.then((collections) => {
const newDetached = collections.filter(({ id }) => !clientMap[id]);
const newDetached = collections.filter(
({ id }) => !clientMap[id] && id !== excludedCollectionId
);
const detached = aggregateResult.concat(newDetached);
const lastResponseSize = collections.length;
const shouldFetchMore = lastResponseSize > 0 && detached.length < minimumUpdateSize;
const nextPage = pageNumber + 1;

if (shouldFetchMore) {
return fetchDetachedCollections(clientMap, searchValue, nextPage, detached);
return fetchDetachedCollections(
excludedCollectionId,
clientMap,
searchValue,
nextPage,
detached
);
}
return Promise.resolve({ detached, nextPage, lastResponseSize });
});
Expand All @@ -77,6 +85,7 @@ function fetchDetachedCollections(
* more detached collections from the server.
*/
function fetchMore(
excludedCollectionId: string | null,
attached: CollectionMap,
detached: CollectionMap,
searchValue: string,
Expand All @@ -85,7 +94,13 @@ function fetchMore(
) {
dispatch({ type: 'fetchMoreRequest' });

fetchDetachedCollections({ ...attached, ...detached }, searchValue, currentPage, [])
fetchDetachedCollections(
excludedCollectionId,
{ ...attached, ...detached },
searchValue,
currentPage,
[]
)
.then(({ detached: newDetached, nextPage, lastResponseSize }) => {
const nextDetached = { ...detached };
newDetached.forEach((collection) => {
Expand Down Expand Up @@ -239,10 +254,14 @@ export type UseEmbeddedCollectionsReturn = {
* - [Bonus] In the future, we should track when the user has loaded all collections _without_ search filtering
* as we can then disable the cache clearing/fetching behavior and filter the client side cache directly.
*
* @param excludedCollectionId
* The ids of the main collection that the other collections are being attached to, or `null` if
* a new collection is being created.
* @param initialAttachedCollectionIds
* A list of attached collection ids used to populate the initial attached collection list.
*/
export default function useEmbeddedCollections(
excludedCollectionId: string | null,
initialAttachedCollections: CollectionResponse[]
): UseEmbeddedCollectionsReturn {
const [state, dispatch] = useReducer(embeddedCollectionsReducer, initialState, (init) => ({
Expand All @@ -253,12 +272,19 @@ export default function useEmbeddedCollections(
const { attached, detached, page, hasMore, isFetchingMore, fetchMoreError } = state;

useEffect(() => {
return fetchMore(arrayToMap(initialAttachedCollections), {}, '', 1, dispatch);
}, [initialAttachedCollections]);
return fetchMore(
excludedCollectionId,
arrayToMap(initialAttachedCollections),
{},
'',
1,
dispatch
);
}, [excludedCollectionId, initialAttachedCollections]);

const onSearch = (search: string) => {
dispatch({ type: 'resetDetachedList' });
fetchMore(attached, {}, search, 1, dispatch);
fetchMore(excludedCollectionId, attached, {}, search, 1, dispatch);
};

return {
Expand All @@ -267,7 +293,8 @@ export default function useEmbeddedCollections(
attach: (id: string) => dispatch({ type: 'attachCollection', id }),
detach: (id: string) => dispatch({ type: 'detachCollection', id }),
hasMore,
fetchMore: (search: string) => fetchMore(attached, detached, search, page, dispatch),
fetchMore: (search: string) =>
fetchMore(excludedCollectionId, attached, detached, search, page, dispatch),
onSearch,
isFetchingMore,
fetchMoreError,
Expand Down