Merge pull request #1290 from guardian/jsh/reduce-reuse-rerender

Do not rerender child collections unnecessarily
guardian · Dec 22, 2020 · 9aa6db7 · 9aa6db7
2 parents 7708b11 + 41339ad
commit 9aa6db7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/fronts-client/src/components/FrontsEdit/Collection.tsx b/fronts-client/src/components/FrontsEdit/Collection.tsx
@@ -91,7 +91,7 @@ interface CollectionContextProps {
  size?: 'medium' | 'default' | 'wide';
  handleMove: (move: Move<TCard>) => void;
  handleInsert: (e: React.DragEvent, to: PosSpec) => void;
- selectCard: (id: string, isSupporting: boolean) => void;
+ selectCard: (id: string, collectionId: string, isSupporting: boolean) => void;
 }
 
 interface ConnectedCollectionContextProps extends CollectionContextProps {
@@ -174,7 +174,7 @@ class CollectionContext extends React.Component<
  size={size}
  canShowPageViewData={true}
  getNodeProps={() => getAfNodeProps(isUneditable)}
- onSelect={() => selectCard(card.uuid, false)}
+ onSelect={() => selectCard(card.uuid, id, false)}
  onDelete={() => removeCard(group.uuid, card.uuid)}
  >
  <CardLevel
@@ -189,7 +189,9 @@ class CollectionContext extends React.Component<
  uuid={supporting.uuid}
  parentId={card.uuid}
  canShowPageViewData={false}
- onSelect={() => selectCard(supporting.uuid, true)}
+ onSelect={() =>
+ selectCard(supporting.uuid, id, true)
+ }
  isUneditable={isUneditable}
  getNodeProps={() =>
  getSupportingProps(isUneditable)

diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx
@@ -232,14 +232,7 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
  ? 'default'
  : 'medium'
  }
- selectCard={(cardId, isSupporting) =>
- this.props.selectCard(
- cardId,
- collectionId,
- this.props.id,
- isSupporting
- )
- }
+ selectCard={this.onSelectCard}
  handleArticleFocus={this.props.handleArticleFocus}
  />
  </CollectionContainer>
@@ -251,6 +244,12 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
  );
  }
 
+ private onSelectCard = (
+ cardId: string,
+ collectionId: string,
+ isSupporting: boolean
+ ) => this.props.selectCard(cardId, collectionId, this.props.id, isSupporting);
+
  private updateCollectionsStalenessFlag = () => {
  const collectionsStalenessInMillis =
  !!this.props.collectionsLastSuccessfulFetchTimestamp &&