From 995d8948d6c5cfd3f11fdb42007628077e77a829 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 22 Jan 2025 15:33:23 +0000 Subject: [PATCH 01/15] wip commit - added splash and number of cards in group to insert logic --- .../src/components/FrontsEdit/Collection.tsx | 3 ++ .../components/FrontsEdit/FrontContent.tsx | 43 ++++++++++++++++++- .../src/components/clipboard/GroupLevel.tsx | 6 +++ fronts-client/src/lib/dnd/Level.tsx | 7 +++ 4 files changed, 57 insertions(+), 2 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 8b18361269a..7ace5cc358c 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -160,6 +160,8 @@ class CollectionContext extends React.Component collectionId={id} uuid={card.uuid} parentId={group.uuid} + isUneditable={isUneditable} size={size} canShowPageViewData={true} diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index cb1fdf8e7e6..9f3519eb7da 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -184,8 +184,47 @@ class FrontContent extends React.Component { }; public handleInsert = (e: React.DragEvent, to: PosSpec) => { - events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); - this.props.insertCardFromDropEvent(e, to, 'collection'); + console.log('e', e); + console.log('to', to); + + console.log('this.props', this.props); + + // if we are inserting an article into any group that is not the splash, then we just insert + if (to.groupName !== 'splash') { + events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + this.props.insertCardFromDropEvent(e, to, 'collection'); + } else { + // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert + if (to.numberOfCardsInGroup === 0) { + console.log('inserting article into splash with no other articles'); + events.dropArticle( + this.props.id, + isDropFromCAPIFeed(e) ? 'feed' : 'url', + ); + this.props.insertCardFromDropEvent(e, to, 'collection'); + } + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group + else if (to.numberOfCardsInGroup > 0 && to.index === 0) { + console.log('inserting article at top of splash group with another article'); + events.dropArticle( + this.props.id, + isDropFromCAPIFeed(e) ? 'feed' : 'url', + ); + this.props.insertCardFromDropEvent(e, to, 'collection'); + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group + else if (to.numberOfCardsInGroup > 0 && to.index > 0) { + console.log('inserting article at bottom of splash group with another article'); + events.dropArticle( + this.props.id, + isDropFromCAPIFeed(e) ? 'feed' : 'url', + ); + this.props.insertCardFromDropEvent(e, to, 'collection'); + } + } }; public render() { diff --git a/fronts-client/src/components/clipboard/GroupLevel.tsx b/fronts-client/src/components/clipboard/GroupLevel.tsx index 0d36b495188..7e3ed992a92 100644 --- a/fronts-client/src/components/clipboard/GroupLevel.tsx +++ b/fronts-client/src/components/clipboard/GroupLevel.tsx @@ -15,6 +15,8 @@ interface OuterProps { onMove: MoveHandler; onDrop: DropHandler; isUneditable?: boolean; + groupName: string; + numberOfCardsInGroup: number; } interface InnerProps { @@ -60,11 +62,15 @@ const GroupLevel = ({ onMove, onDrop, isUneditable, + groupName, + numberOfCardsInGroup }: Props) => ( @@ -56,6 +59,8 @@ export interface LevelProps { children: LevelChild; parentId: string; parentType: string; + groupName: string; + numberOfCardsInGroup: number; type: string; getDropType?: (item: T) => string; dragImageOffsetX?: number; @@ -178,6 +183,8 @@ class Level extends React.Component, State> { index: i, type: this.props.parentType, id: this.props.parentId, + groupName: this.props.groupName, + numberOfCardsInGroup: this.props.numberOfCardsInGroup }; if (!af) { From e2db32af35fe4d054308d812887961fab5dc211d Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Thu, 23 Jan 2025 12:39:10 +0000 Subject: [PATCH 02/15] wip commit - functioning insert to bottom of group case --- .../src/components/FrontsEdit/Collection.tsx | 190 ++++++++++-------- .../components/FrontsEdit/FrontContent.tsx | 40 +++- .../src/components/clipboard/CardLevel.tsx | 9 + .../src/components/clipboard/GroupLevel.tsx | 5 +- fronts-client/src/lib/dnd/Level.tsx | 10 +- 5 files changed, 158 insertions(+), 96 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 7ace5cc358c..0cc43313ef2 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { styled, Theme } from 'constants/theme'; import Collection from './CollectionComponents/Collection'; -import { AlsoOnDetail, CardMeta } from 'types/Collection'; +import { AlsoOnDetail, CardMeta, Group } from 'types/Collection'; import { CardSets, Card as TCard } from 'types/Collection'; import GroupDisplayComponent from 'components/GroupDisplay'; import GroupLevel from 'components/clipboard/GroupLevel'; @@ -19,6 +19,7 @@ import { CardTypes } from 'constants/cardTypes'; import { updateCardMetaWithPersist as updateCardMetaAction } from 'actions/Cards'; import { ValidationResponse } from '../../util/validateImageSrc'; import { bindActionCreators } from 'redux'; +import groups from 'reducers/groupsReducer'; const getArticleNotifications = ( id: string, @@ -114,6 +115,7 @@ interface ConnectedCollectionContextProps extends CollectionContextProps { handleBlur: () => void; lastDesktopArticle?: string; lastMobileArticle?: string; + groupsIds: string[]; updateCardMeta: (id: string, meta: CardMeta) => void; addImageToCard: (uuid: string, imageData: ValidationResponse) => void; } @@ -136,10 +138,13 @@ class CollectionContext extends React.Component removeSupportingCard, lastDesktopArticle, lastMobileArticle, + groupsIds, updateCardMeta, addImageToCard, } = this.props; + console.log('CollectionContextProps', this.props.groupsIds); + return ( canPublish={browsingStage !== 'live'} browsingStage={browsingStage} > - {(group, isUneditable, showGroupName) => ( -
- - - {(card, getAfNodeProps) => ( - <> - handleBlur()} - onFocus={(e: React.FocusEvent) => - handleArticleFocus(e, group.uuid, card, frontId) - } - uuid={card.uuid} - > - { + console.log('CollectionContext group', group); + return ( +
+ + + {(card, getAfNodeProps) => ( + <> + handleBlur()} + onFocus={(e: React.FocusEvent) => + handleArticleFocus(e, group.uuid, card, frontId) + } uuid={card.uuid} - parentId={group.uuid} - - isUneditable={isUneditable} - size={size} - canShowPageViewData={true} - getNodeProps={() => getAfNodeProps(isUneditable)} - onSelect={() => selectCard(card.uuid, id, false)} - onDelete={() => removeCard(group.uuid, card.uuid)} - groupSizeId={group.id ? parseInt(group.id) : 0} - updateCardMeta={updateCardMeta} - addImageToCard={addImageToCard} > - getAfNodeProps(isUneditable)} + onSelect={() => selectCard(card.uuid, id, false)} + onDelete={() => removeCard(group.uuid, card.uuid)} + groupSizeId={group.id ? parseInt(group.id) : 0} + updateCardMeta={updateCardMeta} + addImageToCard={addImageToCard} > - {(supporting, getSupportingProps) => ( - - selectCard(supporting.uuid, id, true) - } - isUneditable={isUneditable} - getNodeProps={() => - getSupportingProps(isUneditable) - } - onDelete={() => - removeSupportingCard(card.uuid, supporting.uuid) - } - size="small" - updateCardMeta={updateCardMeta} - addImageToCard={addImageToCard} - /> - )} - - - - - - )} - -
- )} + + {(supporting, getSupportingProps) => ( + + selectCard(supporting.uuid, id, true) + } + isUneditable={isUneditable} + getNodeProps={() => + getSupportingProps(isUneditable) + } + onDelete={() => + removeSupportingCard( + card.uuid, + supporting.uuid, + ) + } + size="small" + updateCardMeta={updateCardMeta} + addImageToCard={addImageToCard} + /> + )} + + + + + + )} + +
+ ); + }} ); @@ -260,8 +274,14 @@ const createMapStateToProps = () => { collectionId: props.id, collectionSet: props.browsingStage, }); + // console.log('state', state); + console.log('collections data', state.collections.data[props.id]); + console.log('collections data id', props.id); + const groupsIds = state.collections.data[props.id]?.draft || []; + console.log({ groupsIds }); return { + groupsIds: groupsIds, lastDesktopArticle: articleVisibilityDetails.desktop, lastMobileArticle: articleVisibilityDetails.mobile, }; diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index 9f3519eb7da..469c570e15d 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -187,7 +187,9 @@ class FrontContent extends React.Component { console.log('e', e); console.log('to', to); - console.log('this.props', this.props); + console.log('handle insert .props', this.props); + + const numberOfArticlesAlreadyInGroup = to.numberOfCardsInGroup // if we are inserting an article into any group that is not the splash, then we just insert if (to.groupName !== 'splash') { @@ -195,7 +197,7 @@ class FrontContent extends React.Component { this.props.insertCardFromDropEvent(e, to, 'collection'); } else { // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert - if (to.numberOfCardsInGroup === 0) { + if (numberOfArticlesAlreadyInGroup === 0 || undefined) { console.log('inserting article into splash with no other articles'); events.dropArticle( this.props.id, @@ -205,24 +207,45 @@ class FrontContent extends React.Component { } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if (to.numberOfCardsInGroup > 0 && to.index === 0) { + else if (!!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index === 0) { console.log('inserting article at top of splash group with another article'); + + // this.props.id needs to be the id of the other card + const otherCardId = "123" + const amendedTo = { + index: 0, + id: '1234', + type: 'group', + groupsIds: to.groupsIds + } + events.dropArticle( - this.props.id, + otherCardId, isDropFromCAPIFeed(e) ? 'feed' : 'url', ); - this.props.insertCardFromDropEvent(e, to, 'collection'); + // the "to" needs to be index 0, groupId the id of the other group, and type group + this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if (to.numberOfCardsInGroup > 0 && to.index > 0) { + else if (!!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index > 0) { console.log('inserting article at bottom of splash group with another article'); + const otherGroup = to.groupsIds.filter((groupId) => groupId !== to.id)[0]; + console.log('to.id', to.id); + console.log('otherGroup', otherGroup); + + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupsIds: to.groupsIds + } events.dropArticle( this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url', ); - this.props.insertCardFromDropEvent(e, to, 'collection'); + this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); } } }; @@ -234,6 +257,9 @@ class FrontContent extends React.Component { const isEditingLocked = false && (this.state.isCollectionsStale || !!collectionsError); + console.log('front content.props', this.props); + console.log('col elements', this.collectionElements) + return ( ( ( { parentType: string; groupName: string; numberOfCardsInGroup: number; + groupsIds: string[]; type: string; getDropType?: (item: T) => string; dragImageOffsetX?: number; @@ -184,7 +186,8 @@ class Level extends React.Component, State> { type: this.props.parentType, id: this.props.parentId, groupName: this.props.groupName, - numberOfCardsInGroup: this.props.numberOfCardsInGroup + numberOfCardsInGroup: this.props.numberOfCardsInGroup, + groupsIds: this.props.groupsIds }; if (!af) { @@ -193,6 +196,7 @@ class Level extends React.Component, State> { const { parents, id, index, type, data, forceClone } = JSON.parse(af); + if (!isInside(this.props.parents, [type, id])) { const [parentType, parentId] = parents[parents.length - 1]; const from = !forceClone && From 6000ecd741758015880eecd1ca8ac5854be720df Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Thu, 23 Jan 2025 17:15:03 +0000 Subject: [PATCH 03/15] tidy - inserting to empty splash works, inserting at bottom or top moves the card we're inserting to standard --- .../src/components/FrontsEdit/Collection.tsx | 187 +++++++++--------- .../components/FrontsEdit/FrontContent.tsx | 25 +-- fronts-client/src/lib/dnd/Level.tsx | 2 +- fronts-client/src/util/collectionUtils.ts | 1 + 4 files changed, 100 insertions(+), 115 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 0cc43313ef2..218984f180f 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -143,8 +143,6 @@ class CollectionContext extends React.Component addImageToCard, } = this.props; - console.log('CollectionContextProps', this.props.groupsIds); - return ( canPublish={browsingStage !== 'live'} browsingStage={browsingStage} > - {(group, isUneditable, showGroupName) => { - console.log('CollectionContext group', group); - return ( -
- - - {(card, getAfNodeProps) => ( - <> - handleBlur()} - onFocus={(e: React.FocusEvent) => - handleArticleFocus(e, group.uuid, card, frontId) - } + {(group, isUneditable, showGroupName) => ( +
+ + + {(card, getAfNodeProps) => ( + <> + handleBlur()} + onFocus={(e: React.FocusEvent) => + handleArticleFocus(e, group.uuid, card, frontId) + } + uuid={card.uuid} + > + getAfNodeProps(isUneditable)} + onSelect={() => selectCard(card.uuid, id, false)} + onDelete={() => removeCard(group.uuid, card.uuid)} + groupSizeId={group.id ? parseInt(group.id) : 0} + updateCardMeta={updateCardMeta} + addImageToCard={addImageToCard} > - getAfNodeProps(isUneditable)} - onSelect={() => selectCard(card.uuid, id, false)} - onDelete={() => removeCard(group.uuid, card.uuid)} - groupSizeId={group.id ? parseInt(group.id) : 0} - updateCardMeta={updateCardMeta} - addImageToCard={addImageToCard} + cardId={card.uuid} + groupName={group.name ? group.name : ''} + numberOfCardsInGroup={group.cards.length} + groupsIds={groupsIds} + onMove={handleMove} + onDrop={handleInsert} + cardTypeAllowList={this.getPermittedCardTypes( + card.cardType, + )} + dropMessage={this.getDropMessage(card.cardType)} > - - {(supporting, getSupportingProps) => ( - - selectCard(supporting.uuid, id, true) - } - isUneditable={isUneditable} - getNodeProps={() => - getSupportingProps(isUneditable) - } - onDelete={() => - removeSupportingCard( - card.uuid, - supporting.uuid, - ) - } - size="small" - updateCardMeta={updateCardMeta} - addImageToCard={addImageToCard} - /> - )} - - - - - - )} - -
- ); - }} + {(supporting, getSupportingProps) => ( + + selectCard(supporting.uuid, id, true) + } + isUneditable={isUneditable} + getNodeProps={() => + getSupportingProps(isUneditable) + } + onDelete={() => + removeSupportingCard(card.uuid, supporting.uuid) + } + size="small" + updateCardMeta={updateCardMeta} + addImageToCard={addImageToCard} + /> + )} + + + + + + )} + +
+ )} ); @@ -274,12 +266,9 @@ const createMapStateToProps = () => { collectionId: props.id, collectionSet: props.browsingStage, }); - // console.log('state', state); - console.log('collections data', state.collections.data[props.id]); - console.log('collections data id', props.id); const groupsIds = state.collections.data[props.id]?.draft || []; - console.log({ groupsIds }); + return { groupsIds: groupsIds, lastDesktopArticle: articleVisibilityDetails.desktop, diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index 469c570e15d..d6a04e28a8f 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -179,16 +179,12 @@ class FrontContent extends React.Component { } public handleMove = (move: Move) => { + events.dropArticle(this.props.id, 'collection'); this.props.moveCard(move.to, move.data, move.from || null, 'collection'); }; public handleInsert = (e: React.DragEvent, to: PosSpec) => { - console.log('e', e); - console.log('to', to); - - console.log('handle insert .props', this.props); - const numberOfArticlesAlreadyInGroup = to.numberOfCardsInGroup // if we are inserting an article into any group that is not the splash, then we just insert @@ -207,20 +203,24 @@ class FrontContent extends React.Component { } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if (!!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index === 0) { + else if (!!to.groupsIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index === 0) { console.log('inserting article at top of splash group with another article'); + + // grabbing the pre-existing article is tricky. Either amend the e target or add a function to add the metadata? + + const otherGroup = to.groupsIds.filter((groupId) => groupId !== to.id)[0]; + // this.props.id needs to be the id of the other card - const otherCardId = "123" const amendedTo = { index: 0, - id: '1234', + id: otherGroup, type: 'group', groupsIds: to.groupsIds } events.dropArticle( - otherCardId, + this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url', ); // the "to" needs to be index 0, groupId the id of the other group, and type group @@ -229,11 +229,9 @@ class FrontContent extends React.Component { // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if (!!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index > 0) { + else if (!!to.groupsIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index > 0) { console.log('inserting article at bottom of splash group with another article'); const otherGroup = to.groupsIds.filter((groupId) => groupId !== to.id)[0]; - console.log('to.id', to.id); - console.log('otherGroup', otherGroup); const amendedTo = { index: 0, @@ -257,9 +255,6 @@ class FrontContent extends React.Component { const isEditingLocked = false && (this.state.isCollectionsStale || !!collectionsError); - console.log('front content.props', this.props); - console.log('col elements', this.collectionElements) - return ( { for (const [type, fn] of Object.entries(dropToCardMap)) { const data = e.dataTransfer.getData(type); + if (data) { return fn(data); } From 0aeabb9a156312051657d78a114ccec241b052c3 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Thu, 23 Jan 2025 17:34:09 +0000 Subject: [PATCH 04/15] include handle move logic - same level of functioning --- .../components/FrontsEdit/FrontContent.tsx | 133 ++++++++++++++++-- 1 file changed, 119 insertions(+), 14 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index d6a04e28a8f..0e1bf07eaa9 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -179,13 +179,101 @@ class FrontContent extends React.Component { } public handleMove = (move: Move) => { + // events.dropArticle(this.props.id, 'collection'); + // this.props.moveCard(move.to, move.data, move.from || null, 'collection'); - events.dropArticle(this.props.id, 'collection'); - this.props.moveCard(move.to, move.data, move.from || null, 'collection'); + const numberOfArticlesAlreadyInGroup = move.to.numberOfCardsInGroup; + + // if we are inserting an article into any group that is not the splash, then we just insert + if (move.to.groupName !== 'splash') { + events.dropArticle(this.props.id, 'collection'); + this.props.moveCard(move.to, move.data, move.from || null, 'collection'); + } else { + // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert + if (numberOfArticlesAlreadyInGroup === 0 || undefined) { + console.log('moving article to splash with no other articles'); + + events.dropArticle(this.props.id, 'collection'); + this.props.moveCard( + move.to, + move.data, + move.from || null, + 'collection', + ); + } + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group + else if ( + !!move.to.groupsIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + move.to.index === 0 + ) { + console.log( + 'moving article to top of splash group with another article', + ); + + // grabbing the pre-existing article is tricky. Either amend the e target or add a function to add the metadata? + + const otherGroup = move.to.groupsIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + + // this.props.id needs to be the id of the other card + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupsIds: move.to.groupsIds, + }; + + events.dropArticle(this.props.id, 'collection'); + + // the "to" needs to be index 0, groupId the id of the other group, and type group + this.props.moveCard( + amendedTo, + move.data, + move.from || null, + 'collection', + ); + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group + else if ( + !!move.to.groupsIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + move.to.index > 0 + ) { + console.log( + 'moving article to bottom of splash group with another article', + ); + const otherGroup = move.to.groupsIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupsIds: move.to.groupsIds, + }; + events.dropArticle(this.props.id, 'collection'); + + this.props.moveCard( + amendedTo, + move.data, + move.from || null, + 'collection', + ); + } + + } }; public handleInsert = (e: React.DragEvent, to: PosSpec) => { - const numberOfArticlesAlreadyInGroup = to.numberOfCardsInGroup + const numberOfArticlesAlreadyInGroup = to.numberOfCardsInGroup; // if we are inserting an article into any group that is not the splash, then we just insert if (to.groupName !== 'splash') { @@ -203,21 +291,29 @@ class FrontContent extends React.Component { } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if (!!to.groupsIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index === 0) { - console.log('inserting article at top of splash group with another article'); - + else if ( + !!to.groupsIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + to.index === 0 + ) { + console.log( + 'inserting article at top of splash group with another article', + ); // grabbing the pre-existing article is tricky. Either amend the e target or add a function to add the metadata? - const otherGroup = to.groupsIds.filter((groupId) => groupId !== to.id)[0]; + const otherGroup = to.groupsIds.filter( + (groupId) => groupId !== to.id, + )[0]; // this.props.id needs to be the id of the other card const amendedTo = { index: 0, id: otherGroup, type: 'group', - groupsIds: to.groupsIds - } + groupsIds: to.groupsIds, + }; events.dropArticle( this.props.id, @@ -229,16 +325,25 @@ class FrontContent extends React.Component { // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if (!!to.groupsIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index > 0) { - console.log('inserting article at bottom of splash group with another article'); - const otherGroup = to.groupsIds.filter((groupId) => groupId !== to.id)[0]; + else if ( + !!to.groupsIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + to.index > 0 + ) { + console.log( + 'inserting article at bottom of splash group with another article', + ); + const otherGroup = to.groupsIds.filter( + (groupId) => groupId !== to.id, + )[0]; const amendedTo = { index: 0, id: otherGroup, type: 'group', - groupsIds: to.groupsIds - } + groupsIds: to.groupsIds, + }; events.dropArticle( this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url', From 1d929230053e71ef881202643bb5361766c36194 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Tue, 28 Jan 2025 23:48:57 +0000 Subject: [PATCH 05/15] working move/insert to top of splash --- .../src/components/FrontsEdit/Collection.tsx | 1 + .../components/FrontsEdit/FrontContent.tsx | 171 ++++++++---------- fronts-client/src/lib/dnd/Level.tsx | 4 +- 3 files changed, 80 insertions(+), 96 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 218984f180f..f426ffc9711 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -164,6 +164,7 @@ class CollectionContext extends React.Component isUneditable={isUneditable} groupId={group.uuid} groupName={group.name ? group.name : ''} + //todo: numberOfCards can probably just be got by the card array numberOfCardsInGroup={group.cards.length} groupsIds={groupsIds} onMove={handleMove} diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index 0e1bf07eaa9..229ef5716a8 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -179,9 +179,6 @@ class FrontContent extends React.Component { } public handleMove = (move: Move) => { - // events.dropArticle(this.props.id, 'collection'); - // this.props.moveCard(move.to, move.data, move.from || null, 'collection'); - const numberOfArticlesAlreadyInGroup = move.to.numberOfCardsInGroup; // if we are inserting an article into any group that is not the splash, then we just insert @@ -191,84 +188,76 @@ class FrontContent extends React.Component { } else { // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert if (numberOfArticlesAlreadyInGroup === 0 || undefined) { - console.log('moving article to splash with no other articles'); - events.dropArticle(this.props.id, 'collection'); this.props.moveCard( move.to, move.data, move.from || null, 'collection', - ); - } - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group + ); + } + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group else if ( - !!move.to.groupsIds && - !!numberOfArticlesAlreadyInGroup && - numberOfArticlesAlreadyInGroup > 0 && - move.to.index === 0 - ) { - console.log( - 'moving article to top of splash group with another article', - ); - - // grabbing the pre-existing article is tricky. Either amend the e target or add a function to add the metadata? - - const otherGroup = move.to.groupsIds.filter( - (groupId) => groupId !== move.to.id, - )[0]; - - // this.props.id needs to be the id of the other card - const amendedTo = { - index: 0, - id: otherGroup, - type: 'group', - groupsIds: move.to.groupsIds, - }; - - events.dropArticle(this.props.id, 'collection'); - - // the "to" needs to be index 0, groupId the id of the other group, and type group - this.props.moveCard( - amendedTo, - move.data, - move.from || null, - 'collection', - ); - } + !!move.to.groupsIds && + move.to.cards !== undefined && + move.to.index === 0 + ) { + //we do the regular move steps for the article we're moving to splash + events.dropArticle(this.props.id, 'collection'); + this.props.moveCard( + move.to, + move.data, + move.from || null, + 'collection', + ); - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if ( - !!move.to.groupsIds && - !!numberOfArticlesAlreadyInGroup && - numberOfArticlesAlreadyInGroup > 0 && - move.to.index > 0 - ) { - console.log( - 'moving article to bottom of splash group with another article', - ); - const otherGroup = move.to.groupsIds.filter( - (groupId) => groupId !== move.to.id, - )[0]; - - const amendedTo = { - index: 0, - id: otherGroup, - type: 'group', - groupsIds: move.to.groupsIds, - }; - events.dropArticle(this.props.id, 'collection'); - - this.props.moveCard( - amendedTo, - move.data, - move.from || null, - 'collection', - ); - } + //then we need to move the other article to the other group + const otherGroup = move.to.groupsIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + const existingCardData = move.to.cards[0]; + const existingCardTo = { + index: 0, + id: otherGroup, + type: 'group', + groupsIds: move.to.groupsIds, + }; + const existingCardMoveData: Move = { + data: existingCardData, + from: false, + to: existingCardTo, + }; + this.handleMove(existingCardMoveData); + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group + else if ( + !!move.to.groupsIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + move.to.index > 0 + ) { + const otherGroup = move.to.groupsIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupsIds: move.to.groupsIds, + }; + events.dropArticle(this.props.id, 'collection'); + + this.props.moveCard( + amendedTo, + move.data, + move.from || null, + 'collection', + ); + } } }; @@ -282,7 +271,6 @@ class FrontContent extends React.Component { } else { // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert if (numberOfArticlesAlreadyInGroup === 0 || undefined) { - console.log('inserting article into splash with no other articles'); events.dropArticle( this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url', @@ -291,36 +279,32 @@ class FrontContent extends React.Component { } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if ( - !!to.groupsIds && - !!numberOfArticlesAlreadyInGroup && - numberOfArticlesAlreadyInGroup > 0 && - to.index === 0 - ) { - console.log( - 'inserting article at top of splash group with another article', + else if (!!to.groupsIds && to.cards !== undefined && to.index === 0) { + // we do the regular insert steps for the article we're inserting to splash + events.dropArticle( + this.props.id, + isDropFromCAPIFeed(e) ? 'feed' : 'url', ); + this.props.insertCardFromDropEvent(e, to, 'collection'); - // grabbing the pre-existing article is tricky. Either amend the e target or add a function to add the metadata? + //then we need to move the other article to the other group const otherGroup = to.groupsIds.filter( (groupId) => groupId !== to.id, )[0]; - - // this.props.id needs to be the id of the other card - const amendedTo = { + const existingCardData = to.cards[0]; + const existingCardTo = { index: 0, id: otherGroup, type: 'group', groupsIds: to.groupsIds, }; - - events.dropArticle( - this.props.id, - isDropFromCAPIFeed(e) ? 'feed' : 'url', - ); - // the "to" needs to be index 0, groupId the id of the other group, and type group - this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); + const existingCardMoveData: Move = { + data: existingCardData, + from: false, + to: existingCardTo, + }; + this.handleMove(existingCardMoveData); } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to @@ -331,9 +315,6 @@ class FrontContent extends React.Component { numberOfArticlesAlreadyInGroup > 0 && to.index > 0 ) { - console.log( - 'inserting article at bottom of splash group with another article', - ); const otherGroup = to.groupsIds.filter( (groupId) => groupId !== to.id, )[0]; diff --git a/fronts-client/src/lib/dnd/Level.tsx b/fronts-client/src/lib/dnd/Level.tsx index 023a3d36567..f1324759f25 100644 --- a/fronts-client/src/lib/dnd/Level.tsx +++ b/fronts-client/src/lib/dnd/Level.tsx @@ -13,6 +13,7 @@ interface PosSpec { groupName?: string; numberOfCardsInGroup?: number; groupsIds?: string[]; + cards?: any[]; } @@ -187,7 +188,8 @@ class Level extends React.Component, State> { id: this.props.parentId, groupName: this.props.groupName, numberOfCardsInGroup: this.props.numberOfCardsInGroup, - groupsIds: this.props.groupsIds + groupsIds: this.props.groupsIds, + cards: this.props.arr }; if (!af) { From 2627db117914cda9e827bb2faf1a13dc3209861f Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 29 Jan 2025 09:50:44 +0000 Subject: [PATCH 06/15] lint --- fronts-client/src/components/clipboard/GroupLevel.tsx | 2 +- fronts-client/src/lib/dnd/Level.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/fronts-client/src/components/clipboard/GroupLevel.tsx b/fronts-client/src/components/clipboard/GroupLevel.tsx index 7c5f6d06c2a..1a810197940 100644 --- a/fronts-client/src/components/clipboard/GroupLevel.tsx +++ b/fronts-client/src/components/clipboard/GroupLevel.tsx @@ -65,7 +65,7 @@ const GroupLevel = ({ isUneditable, groupName, numberOfCardsInGroup, - groupsIds + groupsIds, }: Props) => ( @@ -189,7 +188,7 @@ class Level extends React.Component, State> { groupName: this.props.groupName, numberOfCardsInGroup: this.props.numberOfCardsInGroup, groupsIds: this.props.groupsIds, - cards: this.props.arr + cards: this.props.arr, }; if (!af) { @@ -198,7 +197,6 @@ class Level extends React.Component, State> { const { parents, id, index, type, data, forceClone } = JSON.parse(af); - if (!isInside(this.props.parents, [type, id])) { const [parentType, parentId] = parents[parents.length - 1]; const from = !forceClone && From bcd61f01235af6785b37653f2bf907c7d1b6a5b3 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 29 Jan 2025 15:30:21 +0000 Subject: [PATCH 07/15] remove unused imports --- fronts-client/src/components/FrontsEdit/Collection.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index f426ffc9711..0f5d1adda93 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { styled, Theme } from 'constants/theme'; import Collection from './CollectionComponents/Collection'; -import { AlsoOnDetail, CardMeta, Group } from 'types/Collection'; +import { AlsoOnDetail, CardMeta } from 'types/Collection'; import { CardSets, Card as TCard } from 'types/Collection'; import GroupDisplayComponent from 'components/GroupDisplay'; import GroupLevel from 'components/clipboard/GroupLevel'; @@ -19,7 +19,6 @@ import { CardTypes } from 'constants/cardTypes'; import { updateCardMetaWithPersist as updateCardMetaAction } from 'actions/Cards'; import { ValidationResponse } from '../../util/validateImageSrc'; import { bindActionCreators } from 'redux'; -import groups from 'reducers/groupsReducer'; const getArticleNotifications = ( id: string, From 9ce3b346c588d13e41fa14bcc0c8bb060dee5c1a Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 29 Jan 2025 15:48:26 +0000 Subject: [PATCH 08/15] Indicate new props as optional --- fronts-client/src/components/clipboard/CardLevel.tsx | 6 +++--- fronts-client/src/lib/dnd/Level.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/fronts-client/src/components/clipboard/CardLevel.tsx b/fronts-client/src/components/clipboard/CardLevel.tsx index a82bdbe9902..b6d8b1946c7 100644 --- a/fronts-client/src/components/clipboard/CardLevel.tsx +++ b/fronts-client/src/components/clipboard/CardLevel.tsx @@ -20,9 +20,9 @@ interface OuterProps { isUneditable?: boolean; dropMessage?: string; cardTypeAllowList?: CardTypes[]; - groupName: string; - numberOfCardsInGroup: number; - groupsIds: string[]; + groupName?: string; + numberOfCardsInGroup?: number; + groupsIds?: string[]; } interface InnerProps { diff --git a/fronts-client/src/lib/dnd/Level.tsx b/fronts-client/src/lib/dnd/Level.tsx index eb871381f66..3f7874a7e17 100644 --- a/fronts-client/src/lib/dnd/Level.tsx +++ b/fronts-client/src/lib/dnd/Level.tsx @@ -60,9 +60,9 @@ export interface LevelProps { children: LevelChild; parentId: string; parentType: string; - groupName: string; - numberOfCardsInGroup: number; - groupsIds: string[]; + groupName?: string; + numberOfCardsInGroup?: number; + groupsIds?: string[]; type: string; getDropType?: (item: T) => string; dragImageOffsetX?: number; From ca8133a870839323dc6526810002847244b403d0 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 29 Jan 2025 16:58:47 +0000 Subject: [PATCH 09/15] add new props to dnd test --- .../src/lib/dnd/__tests__/dnd.spec.tsx | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx index 019c3333e41..41d4f6ada1b 100644 --- a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx +++ b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx @@ -110,7 +110,15 @@ describe('Curation', () => { expect(edit).toEqual({ data: { id: '1' }, from: { type: 'b', id: '0', index: 0 }, - to: { type: 'a', id: '2', index: 1 }, + to: { + cards: [{ id: '3' }, { id: '4' }], + groupName: undefined, + groupsIds: undefined, + id: '2', + index: 1, + numberOfCardsInGroup: undefined, + type: 'a', + }, }); }); @@ -164,7 +172,15 @@ describe('Curation', () => { expect(edit).toEqual({ data: { id: '1' }, from: { type: 'b', id: '0', index: 0 }, - to: { type: 'a', id: '2', index: 0 }, + to: { + cards: [{ id: '3' }, { id: '4' }], + groupName: undefined, + groupsIds: undefined, + id: '2', + index: 0, + numberOfCardsInGroup: undefined, + type: 'a', + }, }); runDrag(nodeProps)(dropProps, false); @@ -273,7 +289,15 @@ describe('Curation', () => { })(dropProps); expect(JSON.parse(event.dataTransfer.getData('text'))).toEqual(data); - expect(to).toEqual({ id: '2', index: 1, type: 'a' }); + expect(to).toEqual({ + cards: [{ id: '1' }], + groupName: undefined, + groupsIds: undefined, + id: '2', + index: 1, + numberOfCardsInGroup: undefined, + type: 'a', + }); }); it('does not allow moves of a node to a subPath of that node', () => { From a45c6cba006bc3eaed71f7c38991641609233c9b Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Wed, 29 Jan 2025 17:01:35 +0000 Subject: [PATCH 10/15] remove unnecessary number of cards in group prop --- fronts-client/src/components/FrontsEdit/Collection.tsx | 3 --- fronts-client/src/components/FrontsEdit/FrontContent.tsx | 4 ++-- fronts-client/src/components/clipboard/CardLevel.tsx | 3 --- fronts-client/src/components/clipboard/GroupLevel.tsx | 3 --- fronts-client/src/lib/dnd/Level.tsx | 3 --- fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx | 3 --- fronts-client/src/util/collectionUtils.ts | 1 - 7 files changed, 2 insertions(+), 18 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 0f5d1adda93..97c456ca2c6 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -163,8 +163,6 @@ class CollectionContext extends React.Component isUneditable={isUneditable} groupId={group.uuid} groupName={group.name ? group.name : ''} - //todo: numberOfCards can probably just be got by the card array - numberOfCardsInGroup={group.cards.length} groupsIds={groupsIds} onMove={handleMove} onDrop={handleInsert} @@ -200,7 +198,6 @@ class CollectionContext extends React.Component isUneditable={isUneditable} cardId={card.uuid} groupName={group.name ? group.name : ''} - numberOfCardsInGroup={group.cards.length} groupsIds={groupsIds} onMove={handleMove} onDrop={handleInsert} diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index 229ef5716a8..946d5b2b36c 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -179,7 +179,7 @@ class FrontContent extends React.Component { } public handleMove = (move: Move) => { - const numberOfArticlesAlreadyInGroup = move.to.numberOfCardsInGroup; + const numberOfArticlesAlreadyInGroup = move.to.cards?.length; // if we are inserting an article into any group that is not the splash, then we just insert if (move.to.groupName !== 'splash') { @@ -262,7 +262,7 @@ class FrontContent extends React.Component { }; public handleInsert = (e: React.DragEvent, to: PosSpec) => { - const numberOfArticlesAlreadyInGroup = to.numberOfCardsInGroup; + const numberOfArticlesAlreadyInGroup = to.cards?.length; // if we are inserting an article into any group that is not the splash, then we just insert if (to.groupName !== 'splash') { diff --git a/fronts-client/src/components/clipboard/CardLevel.tsx b/fronts-client/src/components/clipboard/CardLevel.tsx index b6d8b1946c7..7520d89b8de 100644 --- a/fronts-client/src/components/clipboard/CardLevel.tsx +++ b/fronts-client/src/components/clipboard/CardLevel.tsx @@ -21,7 +21,6 @@ interface OuterProps { dropMessage?: string; cardTypeAllowList?: CardTypes[]; groupName?: string; - numberOfCardsInGroup?: number; groupsIds?: string[]; } @@ -53,7 +52,6 @@ const CardLevel = ({ dropMessage, cardTypeAllowList, groupName, - numberOfCardsInGroup, groupsIds, }: Props) => ( ( { parentId: string; parentType: string; groupName?: string; - numberOfCardsInGroup?: number; groupsIds?: string[]; type: string; getDropType?: (item: T) => string; @@ -186,7 +184,6 @@ class Level extends React.Component, State> { type: this.props.parentType, id: this.props.parentId, groupName: this.props.groupName, - numberOfCardsInGroup: this.props.numberOfCardsInGroup, groupsIds: this.props.groupsIds, cards: this.props.arr, }; diff --git a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx index 41d4f6ada1b..524085da9ae 100644 --- a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx +++ b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx @@ -116,7 +116,6 @@ describe('Curation', () => { groupsIds: undefined, id: '2', index: 1, - numberOfCardsInGroup: undefined, type: 'a', }, }); @@ -178,7 +177,6 @@ describe('Curation', () => { groupsIds: undefined, id: '2', index: 0, - numberOfCardsInGroup: undefined, type: 'a', }, }); @@ -295,7 +293,6 @@ describe('Curation', () => { groupsIds: undefined, id: '2', index: 1, - numberOfCardsInGroup: undefined, type: 'a', }); }); diff --git a/fronts-client/src/util/collectionUtils.ts b/fronts-client/src/util/collectionUtils.ts index b910106d21f..60cba848d02 100644 --- a/fronts-client/src/util/collectionUtils.ts +++ b/fronts-client/src/util/collectionUtils.ts @@ -64,7 +64,6 @@ export type InsertDropType = keyof typeof dropToCardMap; const dropToCard = (e: React.DragEvent): MappableDropType | null => { for (const [type, fn] of Object.entries(dropToCardMap)) { const data = e.dataTransfer.getData(type); - if (data) { return fn(data); } From 86888cc8f41a711955413113002a9ee3ec99c737 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Thu, 30 Jan 2025 11:05:24 +0000 Subject: [PATCH 11/15] rename groupsIds to groupIds --- .../src/components/FrontsEdit/Collection.tsx | 12 +++++----- .../components/FrontsEdit/FrontContent.tsx | 24 +++++++++---------- .../src/components/clipboard/CardLevel.tsx | 6 ++--- .../src/components/clipboard/GroupLevel.tsx | 6 ++--- fronts-client/src/lib/dnd/Level.tsx | 6 ++--- .../src/lib/dnd/__tests__/dnd.spec.tsx | 6 ++--- 6 files changed, 30 insertions(+), 30 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 97c456ca2c6..4e8a19d78b9 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -114,7 +114,7 @@ interface ConnectedCollectionContextProps extends CollectionContextProps { handleBlur: () => void; lastDesktopArticle?: string; lastMobileArticle?: string; - groupsIds: string[]; + groupIds: string[]; updateCardMeta: (id: string, meta: CardMeta) => void; addImageToCard: (uuid: string, imageData: ValidationResponse) => void; } @@ -137,7 +137,7 @@ class CollectionContext extends React.Component removeSupportingCard, lastDesktopArticle, lastMobileArticle, - groupsIds, + groupIds, updateCardMeta, addImageToCard, } = this.props; @@ -163,7 +163,7 @@ class CollectionContext extends React.Component isUneditable={isUneditable} groupId={group.uuid} groupName={group.name ? group.name : ''} - groupsIds={groupsIds} + groupIds={groupIds} onMove={handleMove} onDrop={handleInsert} cardIds={group.cards} @@ -198,7 +198,7 @@ class CollectionContext extends React.Component isUneditable={isUneditable} cardId={card.uuid} groupName={group.name ? group.name : ''} - groupsIds={groupsIds} + groupIds={groupIds} onMove={handleMove} onDrop={handleInsert} cardTypeAllowList={this.getPermittedCardTypes( @@ -264,10 +264,10 @@ const createMapStateToProps = () => { collectionSet: props.browsingStage, }); - const groupsIds = state.collections.data[props.id]?.draft || []; + const groupIds = state.collections.data[props.id]?.draft || []; return { - groupsIds: groupsIds, + groupIds: groupIds, lastDesktopArticle: articleVisibilityDetails.desktop, lastMobileArticle: articleVisibilityDetails.mobile, }; diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index 946d5b2b36c..cd08058a0de 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -199,7 +199,7 @@ class FrontContent extends React.Component { // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group else if ( - !!move.to.groupsIds && + !!move.to.groupIds && move.to.cards !== undefined && move.to.index === 0 ) { @@ -213,7 +213,7 @@ class FrontContent extends React.Component { ); //then we need to move the other article to the other group - const otherGroup = move.to.groupsIds.filter( + const otherGroup = move.to.groupIds.filter( (groupId) => groupId !== move.to.id, )[0]; const existingCardData = move.to.cards[0]; @@ -221,7 +221,7 @@ class FrontContent extends React.Component { index: 0, id: otherGroup, type: 'group', - groupsIds: move.to.groupsIds, + groupIds: move.to.groupIds, }; const existingCardMoveData: Move = { data: existingCardData, @@ -234,12 +234,12 @@ class FrontContent extends React.Component { // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group else if ( - !!move.to.groupsIds && + !!move.to.groupIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && move.to.index > 0 ) { - const otherGroup = move.to.groupsIds.filter( + const otherGroup = move.to.groupIds.filter( (groupId) => groupId !== move.to.id, )[0]; @@ -247,7 +247,7 @@ class FrontContent extends React.Component { index: 0, id: otherGroup, type: 'group', - groupsIds: move.to.groupsIds, + groupIds: move.to.groupIds, }; events.dropArticle(this.props.id, 'collection'); @@ -279,7 +279,7 @@ class FrontContent extends React.Component { } // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if (!!to.groupsIds && to.cards !== undefined && to.index === 0) { + else if (!!to.groupIds && to.cards !== undefined && to.index === 0) { // we do the regular insert steps for the article we're inserting to splash events.dropArticle( this.props.id, @@ -289,7 +289,7 @@ class FrontContent extends React.Component { //then we need to move the other article to the other group - const otherGroup = to.groupsIds.filter( + const otherGroup = to.groupIds.filter( (groupId) => groupId !== to.id, )[0]; const existingCardData = to.cards[0]; @@ -297,7 +297,7 @@ class FrontContent extends React.Component { index: 0, id: otherGroup, type: 'group', - groupsIds: to.groupsIds, + groupIds: to.groupIds, }; const existingCardMoveData: Move = { data: existingCardData, @@ -310,12 +310,12 @@ class FrontContent extends React.Component { // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group else if ( - !!to.groupsIds && + !!to.groupIds && !!numberOfArticlesAlreadyInGroup && numberOfArticlesAlreadyInGroup > 0 && to.index > 0 ) { - const otherGroup = to.groupsIds.filter( + const otherGroup = to.groupIds.filter( (groupId) => groupId !== to.id, )[0]; @@ -323,7 +323,7 @@ class FrontContent extends React.Component { index: 0, id: otherGroup, type: 'group', - groupsIds: to.groupsIds, + groupIds: to.groupIds, }; events.dropArticle( this.props.id, diff --git a/fronts-client/src/components/clipboard/CardLevel.tsx b/fronts-client/src/components/clipboard/CardLevel.tsx index 7520d89b8de..d8e275c8a56 100644 --- a/fronts-client/src/components/clipboard/CardLevel.tsx +++ b/fronts-client/src/components/clipboard/CardLevel.tsx @@ -21,7 +21,7 @@ interface OuterProps { dropMessage?: string; cardTypeAllowList?: CardTypes[]; groupName?: string; - groupsIds?: string[]; + groupIds?: string[]; } interface InnerProps { @@ -52,14 +52,14 @@ const CardLevel = ({ dropMessage, cardTypeAllowList, groupName, - groupsIds, + groupIds, }: Props) => ( ( { parentId: string; parentType: string; groupName?: string; - groupsIds?: string[]; + groupIds?: string[]; type: string; getDropType?: (item: T) => string; dragImageOffsetX?: number; @@ -184,7 +184,7 @@ class Level extends React.Component, State> { type: this.props.parentType, id: this.props.parentId, groupName: this.props.groupName, - groupsIds: this.props.groupsIds, + groupIds: this.props.groupIds, cards: this.props.arr, }; diff --git a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx index 524085da9ae..074ea1a4715 100644 --- a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx +++ b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx @@ -113,7 +113,7 @@ describe('Curation', () => { to: { cards: [{ id: '3' }, { id: '4' }], groupName: undefined, - groupsIds: undefined, + groupIds: undefined, id: '2', index: 1, type: 'a', @@ -174,7 +174,7 @@ describe('Curation', () => { to: { cards: [{ id: '3' }, { id: '4' }], groupName: undefined, - groupsIds: undefined, + groupIds: undefined, id: '2', index: 0, type: 'a', @@ -290,7 +290,7 @@ describe('Curation', () => { expect(to).toEqual({ cards: [{ id: '1' }], groupName: undefined, - groupsIds: undefined, + groupIds: undefined, id: '2', index: 1, type: 'a', From 0fd3c18e8d70fcc0c281f7f271fe87143318063f Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Fri, 31 Jan 2025 17:13:25 +0000 Subject: [PATCH 12/15] access groupIds in collection instead of taken from state and adding to store --- fronts-client/src/components/FrontsEdit/Collection.tsx | 7 +------ .../FrontsEdit/CollectionComponents/Collection.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx index 4e8a19d78b9..fa0d837ff09 100644 --- a/fronts-client/src/components/FrontsEdit/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/Collection.tsx @@ -114,7 +114,6 @@ interface ConnectedCollectionContextProps extends CollectionContextProps { handleBlur: () => void; lastDesktopArticle?: string; lastMobileArticle?: string; - groupIds: string[]; updateCardMeta: (id: string, meta: CardMeta) => void; addImageToCard: (uuid: string, imageData: ValidationResponse) => void; } @@ -137,7 +136,6 @@ class CollectionContext extends React.Component removeSupportingCard, lastDesktopArticle, lastMobileArticle, - groupIds, updateCardMeta, addImageToCard, } = this.props; @@ -153,7 +151,7 @@ class CollectionContext extends React.Component canPublish={browsingStage !== 'live'} browsingStage={browsingStage} > - {(group, isUneditable, showGroupName) => ( + {(group, isUneditable, groupIds, showGroupName) => (
{ collectionSet: props.browsingStage, }); - const groupIds = state.collections.data[props.id]?.draft || []; - return { - groupIds: groupIds, lastDesktopArticle: articleVisibilityDetails.desktop, lastMobileArticle: articleVisibilityDetails.mobile, }; diff --git a/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx b/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx index 5af937a7196..342d18ec971 100644 --- a/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx @@ -51,6 +51,7 @@ interface CollectionPropsBeforeState { children: ( group: Group, isUneditable: boolean, + groupIds: string[], showGroupName?: boolean, ) => React.ReactNode; alsoOn: { [id: string]: AlsoOnDetail }; @@ -223,6 +224,8 @@ class Collection extends React.Component { const isUneditable = isCollectionLocked || browsingStage !== cardSets.draft; + const groupIds = groups.map((group) => group.uuid); + return ( <> { ) : null } > - {groups.map((group) => children(group, isUneditable, true))} + {groups.map((group) => children(group, isUneditable, groupIds, true ))} {hasContent && ( @@ -357,7 +360,7 @@ class Collection extends React.Component { launched they will not appear here. - {children(previousGroup, true, false)} + {children(previousGroup, true, groupIds, false)} )} From f8136cf5732cff6821a82a17606b8240af9e15c2 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Fri, 31 Jan 2025 17:15:15 +0000 Subject: [PATCH 13/15] lint --- .../components/FrontsEdit/CollectionComponents/Collection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx b/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx index 342d18ec971..85514419661 100644 --- a/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx +++ b/fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx @@ -341,7 +341,7 @@ class Collection extends React.Component { ) : null } > - {groups.map((group) => children(group, isUneditable, groupIds, true ))} + {groups.map((group) => children(group, isUneditable, groupIds, true))} {hasContent && ( From d474ce4708ed498380e19c70d1ea7b944dda11e6 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Mon, 3 Feb 2025 16:54:13 +0000 Subject: [PATCH 14/15] refactor if statements to use early returns --- .../components/FrontsEdit/FrontContent.tsx | 258 ++++++++---------- 1 file changed, 120 insertions(+), 138 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index cd08058a0de..c1a9fb565a8 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -182,82 +182,75 @@ class FrontContent extends React.Component { const numberOfArticlesAlreadyInGroup = move.to.cards?.length; // if we are inserting an article into any group that is not the splash, then we just insert - if (move.to.groupName !== 'splash') { + // we also just insert if we're in the splash and there's no other article already in the splash + if ( + move.to.groupName !== 'splash' || + numberOfArticlesAlreadyInGroup === 0 || + undefined + ) { + events.dropArticle(this.props.id, 'collection'); + this.props.moveCard(move.to, move.data, move.from || null, 'collection'); + return; + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group + if ( + !!move.to.groupIds && + move.to.cards !== undefined && + move.to.index === 0 + ) { + //we do the regular move steps for the article we're moving to splash events.dropArticle(this.props.id, 'collection'); this.props.moveCard(move.to, move.data, move.from || null, 'collection'); - } else { - // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert - if (numberOfArticlesAlreadyInGroup === 0 || undefined) { - events.dropArticle(this.props.id, 'collection'); - this.props.moveCard( - move.to, - move.data, - move.from || null, - 'collection', - ); - } - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if ( - !!move.to.groupIds && - move.to.cards !== undefined && - move.to.index === 0 - ) { - //we do the regular move steps for the article we're moving to splash - events.dropArticle(this.props.id, 'collection'); - this.props.moveCard( - move.to, - move.data, - move.from || null, - 'collection', - ); - - //then we need to move the other article to the other group - const otherGroup = move.to.groupIds.filter( - (groupId) => groupId !== move.to.id, - )[0]; - const existingCardData = move.to.cards[0]; - const existingCardTo = { - index: 0, - id: otherGroup, - type: 'group', - groupIds: move.to.groupIds, - }; - const existingCardMoveData: Move = { - data: existingCardData, - from: false, - to: existingCardTo, - }; - this.handleMove(existingCardMoveData); - } - - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if ( - !!move.to.groupIds && - !!numberOfArticlesAlreadyInGroup && - numberOfArticlesAlreadyInGroup > 0 && - move.to.index > 0 - ) { - const otherGroup = move.to.groupIds.filter( - (groupId) => groupId !== move.to.id, - )[0]; - - const amendedTo = { - index: 0, - id: otherGroup, - type: 'group', - groupIds: move.to.groupIds, - }; - events.dropArticle(this.props.id, 'collection'); - - this.props.moveCard( - amendedTo, - move.data, - move.from || null, - 'collection', - ); - } + + //then we need to move the other article to the other group + const otherGroup = move.to.groupIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + const existingCardData = move.to.cards[0]; + const existingCardTo = { + index: 0, + id: otherGroup, + type: 'group', + groupIds: move.to.groupIds, + }; + const existingCardMoveData: Move = { + data: existingCardData, + from: false, + to: existingCardTo, + }; + this.handleMove(existingCardMoveData); + return; + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group + if ( + !!move.to.groupIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + move.to.index > 0 + ) { + const otherGroup = move.to.groupIds.filter( + (groupId) => groupId !== move.to.id, + )[0]; + + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupIds: move.to.groupIds, + }; + events.dropArticle(this.props.id, 'collection'); + + this.props.moveCard( + amendedTo, + move.data, + move.from || null, + 'collection', + ); + return; } }; @@ -265,72 +258,61 @@ class FrontContent extends React.Component { const numberOfArticlesAlreadyInGroup = to.cards?.length; // if we are inserting an article into any group that is not the splash, then we just insert - if (to.groupName !== 'splash') { + // we also just insert if we're in the splash and there's no other article already in the splash + if ( + to.groupName !== 'splash' || + numberOfArticlesAlreadyInGroup === 0 || + undefined + ) { + events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + this.props.insertCardFromDropEvent(e, to, 'collection'); + return; + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group + if (!!to.groupIds && to.cards !== undefined && to.index === 0) { + // we do the regular insert steps for the article we're inserting to splash events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); this.props.insertCardFromDropEvent(e, to, 'collection'); - } else { - // if we're in the splash and we insert an article and there's no other article already in the splash, then we just insert - if (numberOfArticlesAlreadyInGroup === 0 || undefined) { - events.dropArticle( - this.props.id, - isDropFromCAPIFeed(e) ? 'feed' : 'url', - ); - this.props.insertCardFromDropEvent(e, to, 'collection'); - } - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group - else if (!!to.groupIds && to.cards !== undefined && to.index === 0) { - // we do the regular insert steps for the article we're inserting to splash - events.dropArticle( - this.props.id, - isDropFromCAPIFeed(e) ? 'feed' : 'url', - ); - this.props.insertCardFromDropEvent(e, to, 'collection'); - - //then we need to move the other article to the other group - - const otherGroup = to.groupIds.filter( - (groupId) => groupId !== to.id, - )[0]; - const existingCardData = to.cards[0]; - const existingCardTo = { - index: 0, - id: otherGroup, - type: 'group', - groupIds: to.groupIds, - }; - const existingCardMoveData: Move = { - data: existingCardData, - from: false, - to: existingCardTo, - }; - this.handleMove(existingCardMoveData); - } - - // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to - // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group - else if ( - !!to.groupIds && - !!numberOfArticlesAlreadyInGroup && - numberOfArticlesAlreadyInGroup > 0 && - to.index > 0 - ) { - const otherGroup = to.groupIds.filter( - (groupId) => groupId !== to.id, - )[0]; - - const amendedTo = { - index: 0, - id: otherGroup, - type: 'group', - groupIds: to.groupIds, - }; - events.dropArticle( - this.props.id, - isDropFromCAPIFeed(e) ? 'feed' : 'url', - ); - this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); - } + + // then we need to move the other article to the other group + const otherGroup = to.groupIds.filter((groupId) => groupId !== to.id)[0]; + const existingCardData = to.cards[0]; + const existingCardTo = { + index: 0, + id: otherGroup, + type: 'group', + groupIds: to.groupIds, + }; + const existingCardMoveData: Move = { + data: existingCardData, + from: false, + to: existingCardTo, + }; + this.handleMove(existingCardMoveData); + return; + } + + // if we're in the splash and we insert an article and there's already another article, then we also look at the index we're inserting to + // if we're inserting to index 1, i.e. bottom of the group, then we add this story to the other group + if ( + !!to.groupIds && + !!numberOfArticlesAlreadyInGroup && + numberOfArticlesAlreadyInGroup > 0 && + to.index > 0 + ) { + const otherGroup = to.groupIds.filter((groupId) => groupId !== to.id)[0]; + + const amendedTo = { + index: 0, + id: otherGroup, + type: 'group', + groupIds: to.groupIds, + }; + events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); + return; } }; From 058b84e5a8850f63ea247c37dd8d0fae7f1d90e1 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Mon, 3 Feb 2025 16:58:36 +0000 Subject: [PATCH 15/15] refactor to add dropSource variable from isDropFromCapiFeed --- fronts-client/src/components/FrontsEdit/FrontContent.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx index c1a9fb565a8..ea90dcd9b33 100644 --- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx +++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx @@ -257,6 +257,8 @@ class FrontContent extends React.Component { public handleInsert = (e: React.DragEvent, to: PosSpec) => { const numberOfArticlesAlreadyInGroup = to.cards?.length; + const dropSource = isDropFromCAPIFeed(e) ? 'feed' : 'url'; + // if we are inserting an article into any group that is not the splash, then we just insert // we also just insert if we're in the splash and there's no other article already in the splash if ( @@ -264,7 +266,7 @@ class FrontContent extends React.Component { numberOfArticlesAlreadyInGroup === 0 || undefined ) { - events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + events.dropArticle(this.props.id, dropSource); this.props.insertCardFromDropEvent(e, to, 'collection'); return; } @@ -273,7 +275,7 @@ class FrontContent extends React.Component { // if we're inserting to index 0, i.e. top of the group, then we want to grab the pre-existing article and move it to the other group if (!!to.groupIds && to.cards !== undefined && to.index === 0) { // we do the regular insert steps for the article we're inserting to splash - events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + events.dropArticle(this.props.id, dropSource); this.props.insertCardFromDropEvent(e, to, 'collection'); // then we need to move the other article to the other group @@ -310,7 +312,7 @@ class FrontContent extends React.Component { type: 'group', groupIds: to.groupIds, }; - events.dropArticle(this.props.id, isDropFromCAPIFeed(e) ? 'feed' : 'url'); + events.dropArticle(this.props.id, dropSource); this.props.insertCardFromDropEvent(e, amendedTo, 'collection'); return; }