MM-69280: Filter undefined blocks before sorting updated time/by properties (#213)

* MM-69280: Filter undefined blocks before sorting updated time/by properties

* Add getLatestUpdatedBlock test for undefined content and comment

Author: jgheithcock

webapp/src/properties/latestUpdatedBlock.test.ts

@@ -0,0 +1,33 @@
+// Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {createCard} from '../blocks/card'
+import {createCommentBlock} from '../blocks/commentBlock'
+
+import {definedBlocksForLatestUpdate, getLatestUpdatedBlock} from './latestUpdatedBlock'
+
+describe('properties/latestUpdatedBlock', () => {
+    test('excludes undefined content and comment blocks before sorting', () => {
+        const card = createCard()
+        card.updateAt = Date.parse('10 Jun 2021 16:22:00')
+
+        expect(definedBlocksForLatestUpdate(card, undefined, undefined)).toEqual([card])
+    })
+
+    test('returns the card when content and comment are undefined', () => {
+        const card = createCard()
+        card.updateAt = Date.parse('10 Jun 2021 16:22:00')
+
+        expect(getLatestUpdatedBlock(card, undefined, undefined)).toBe(card)
+    })
+
+    test('returns the block with the most recent updateAt', () => {
+        const card = createCard()
+        card.updateAt = Date.parse('10 Jun 2021 16:22:00')
+
+        const comment = createCommentBlock()
+        comment.updateAt = Date.parse('15 Jun 2021 16:22:00')
+
+        expect(getLatestUpdatedBlock(card, undefined, comment)).toBe(comment)
+    })
+})

webapp/src/properties/latestUpdatedBlock.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Block} from '../blocks/block'
+
+export function definedBlocksForLatestUpdate(card: Block, lastContent?: Block, lastComment?: Block): Block[] {
+    return [card, lastContent, lastComment].filter((block): block is Block => Boolean(block))
+}
+
+export function getLatestUpdatedBlock(card: Block, lastContent?: Block, lastComment?: Block): Block {
+    const allBlocks = definedBlocksForLatestUpdate(card, lastContent, lastComment)
+    return allBlocks.sort((a, b) => b.updateAt - a.updateAt)[0] ?? card
+}

webapp/src/properties/updatedBy/updatedBy.tsx

@@ -4,25 +4,21 @@
 
 import React from 'react'
 
-import {Block} from '../../blocks/block'
 import {useAppSelector} from '../../store/hooks'
 import {getLastCardContent} from '../../store/contents'
 import {getLastCardComment} from '../../store/comments'
+import {getLatestUpdatedBlock} from '../latestUpdatedBlock'
 import Person from '../person/person'
 
 import {PropertyProps} from '../types'
 
 const LastModifiedBy = (props: PropertyProps): JSX.Element => {
-    const lastContent = useAppSelector(getLastCardContent(props.card.id || '')) as Block
-    const lastComment = useAppSelector(getLastCardComment(props.card.id)) as Block
+    const lastContent = useAppSelector(getLastCardContent(props.card.id || ''))
+    const lastComment = useAppSelector(getLastCardComment(props.card.id))
 
-    let latestBlock: Block = props.card
-    if (props.board) {
-        const allBlocks: Block[] = [props.card, lastContent, lastComment]
-        const sortedBlocks = allBlocks.sort((a, b) => b.updateAt - a.updateAt)
-
-        latestBlock = sortedBlocks.length > 0 ? sortedBlocks[0] : latestBlock
-    }
+    const latestBlock = props.board ?
+        getLatestUpdatedBlock(props.card, lastContent, lastComment) :
+        props.card
 
     return (
         <Person

webapp/src/properties/updatedTime/updatedTime.tsx

@@ -6,27 +6,23 @@ import React from 'react'
 
 import {useIntl} from 'react-intl'
 
-import {Block} from '../../blocks/block'
 import {Utils} from '../../utils'
 import {useAppSelector} from '../../store/hooks'
 import {getLastCardContent} from '../../store/contents'
 import {getLastCardComment} from '../../store/comments'
+import {getLatestUpdatedBlock} from '../latestUpdatedBlock'
 import './updatedTime.scss'
 
 import {PropertyProps} from '../types'
 
 const UpdatedTime = (props: PropertyProps): JSX.Element => {
     const intl = useIntl()
-    const lastContent = useAppSelector(getLastCardContent(props.card.id || '')) as Block
-    const lastComment = useAppSelector(getLastCardComment(props.card.id)) as Block
+    const lastContent = useAppSelector(getLastCardContent(props.card.id || ''))
+    const lastComment = useAppSelector(getLastCardComment(props.card.id))
 
-    let latestBlock: Block = props.card
-    if (props.card) {
-        const allBlocks = [props.card, lastContent, lastComment]
-        const sortedBlocks = allBlocks.sort((a, b) => b.updateAt - a.updateAt)
-
-        latestBlock = sortedBlocks.length > 0 ? sortedBlocks[0] : latestBlock
-    }
+    const latestBlock = props.card ?
+        getLatestUpdatedBlock(props.card, lastContent, lastComment) :
+        props.card
 
     return (
         <div className={`UpdatedTime ${props.property.valueClassName(true)}`}>