From 944e4198bbaf95e78b2be6b6a1270029f0fa226a Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Tue, 21 May 2019 10:32:06 -0300 Subject: [PATCH] [FIX] Message grouping not re-rendering (#911) --- .../__snapshots__/Storyshots.test.js.snap | 192 ------------------ app/containers/message/Message.js | 8 +- app/containers/message/MessageAvatar.js | 2 +- app/containers/message/index.js | 6 +- 4 files changed, 4 insertions(+), 204 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index fdde76ee..a01fda88 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -318,8 +318,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -524,8 +522,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -730,8 +726,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -918,8 +912,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -1056,8 +1048,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -1144,8 +1134,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -1282,8 +1270,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -1438,8 +1424,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -1594,8 +1578,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -1796,8 +1778,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -2016,8 +1996,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -2222,8 +2200,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -2428,8 +2404,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -2634,8 +2608,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -2924,8 +2896,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -3130,8 +3100,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -3378,8 +3346,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -3584,8 +3550,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -4082,8 +4046,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -4943,8 +4905,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -5131,8 +5091,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -5319,8 +5277,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -5507,8 +5463,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -5713,8 +5667,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -5966,8 +5918,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -6151,8 +6101,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -6289,8 +6237,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -6516,8 +6462,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -6722,8 +6666,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -6964,8 +6906,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -7237,8 +7177,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -7482,8 +7420,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -7700,8 +7636,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -8044,8 +7978,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -8132,8 +8064,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -8413,8 +8343,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -8662,8 +8590,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -8979,8 +8905,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -9273,8 +9197,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -9598,8 +9520,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -9867,8 +9787,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -10216,8 +10134,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -10434,8 +10350,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -10652,8 +10566,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -10870,8 +10782,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -11088,8 +10998,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -11306,8 +11214,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -11524,8 +11430,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -11660,8 +11564,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -11934,8 +11836,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12077,8 +11977,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12220,8 +12118,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12436,8 +12332,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12579,8 +12473,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12722,8 +12614,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -12865,8 +12755,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -13001,8 +12889,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -13274,8 +13160,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -13549,8 +13433,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -13824,8 +13706,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -14117,8 +13997,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -14431,8 +14309,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -14645,8 +14521,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - undefined, - undefined, ] } > @@ -14831,8 +14705,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -15353,8 +15225,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -15951,8 +15821,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -16234,8 +16102,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -16469,10 +16335,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - Object { - "marginLeft": 10, - }, - false, ] } > @@ -16637,10 +16499,6 @@ exports[`Storyshots Message list 1`] = ` "marginLeft": 46, }, false, - false, - Object { - "marginLeft": 0, - }, ] } > @@ -16796,8 +16654,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17002,8 +16858,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17213,8 +17067,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17355,8 +17207,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17497,8 +17347,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17639,8 +17487,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17781,8 +17627,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -17923,8 +17767,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18065,8 +17907,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18207,8 +18047,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18349,8 +18187,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18491,8 +18327,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18633,8 +18467,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18775,8 +18607,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -18917,8 +18747,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -19059,8 +18887,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -19201,8 +19027,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -19343,8 +19167,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -19549,8 +19371,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -19822,8 +19642,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -20173,8 +19991,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -20415,8 +20231,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -20620,8 +20434,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -20874,8 +20686,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > @@ -21091,8 +20901,6 @@ exports[`Storyshots Message list 1`] = ` Object { "marginLeft": 10, }, - undefined, - undefined, ] } > diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js index 9176735e..1ba56ee4 100644 --- a/app/containers/message/Message.js +++ b/app/containers/message/Message.js @@ -51,9 +51,7 @@ const Message = React.memo((props) => { @@ -69,9 +67,7 @@ const Message = React.memo((props) => { diff --git a/app/containers/message/MessageAvatar.js b/app/containers/message/MessageAvatar.js index 24f5fe43..eb1dc671 100644 --- a/app/containers/message/MessageAvatar.js +++ b/app/containers/message/MessageAvatar.js @@ -22,7 +22,7 @@ const MessageAvatar = React.memo(({ ); } return null; -}, () => true); +}, (prevProps, nextProps) => prevProps.isHeader === nextProps.isHeader); MessageAvatar.propTypes = { isHeader: PropTypes.bool, diff --git a/app/containers/message/index.js b/app/containers/message/index.js index 40126800..c9b32296 100644 --- a/app/containers/message/index.js +++ b/app/containers/message/index.js @@ -49,7 +49,7 @@ export default class MessageContainer extends React.Component { shouldComponentUpdate(nextProps) { const { - status, item, _updatedAt, previousItem + status, item, _updatedAt } = this.props; if (status !== nextProps.status) { @@ -59,10 +59,6 @@ export default class MessageContainer extends React.Component { return true; } - if (!previousItem && !!nextProps.previousItem) { - return true; - } - return _updatedAt.toISOString() !== nextProps._updatedAt.toISOString(); }