feat: Update ChannelPreview to support MFM lastMessage. (#722)

Fixes: [UIKIT-4351](https://sendbird.atlassian.net/browse/UIKIT-4351)

Update ChannelPreview to support MFM lastMessage.

Author: chohongm

.eslintrc.js

@@ -12,39 +12,39 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
   },
-  parser: "@babel/eslint-parser",
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  plugins: [ 'react', 'babel', '@typescript-eslint' ],
+  plugins: ['react', 'babel', '@typescript-eslint'],
   rules: {
     // uncomment 'linebreak-style' to build in windows - its not adviced to commit from windows
     // read more - https://community.perforce.com/s/article/3096
     // ['linebreak-style']: 0,
-    "import/extensions": [
-      "error",
-      "ignorePackages",
+    'import/extensions': [
+      'error',
+      'ignorePackages',
       {
-        "js": "never",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never",
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
       },
     ],
-    "react/forbid-prop-types": 0,
+    'react/forbid-prop-types': 0,
     // we don't want to force to define function component only
-    "react/function-component-definition": "off",
-    "no-unused-expressions": "off",
-    "@typescript-eslint/no-unused-expressions": ["error"],
+    'react/function-component-definition': 'off',
+    'no-unused-expressions': 'off',
+    '@typescript-eslint/no-unused-expressions': ['error'],
   },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
   },

src/modules/ChannelList/components/ChannelPreview/__tests__/ChannelPreview.spec.js

@@ -13,9 +13,45 @@ jest.setSystemTime(new Date('March 2, 2022 08:15:52'));
 describe('ChannelPreview', () => {
   test('utils/getLastMessage returns lastMessage', function () {
     const text = 'example-text';
-    const channel = {};
-    const channel2 = { lastMessage: { message: '' } };
-    const channel3 = { lastMessage: { message: text } };
+    const channel = {
+      lastMessage: {
+        isUserMessage: () => true,
+        isFileMessage: () => false,
+        isMultipleFilesMessage: () => false,
+      }
+    };
+    const channel2 = {
+      lastMessage: {
+        message: '',
+        isUserMessage: () => true,
+        isFileMessage: () => false,
+        isMultipleFilesMessage: () => false,
+      }
+    };
+    const channel3 = {
+      lastMessage: {
+        message: text,
+        isUserMessage: () => true,
+        isFileMessage: () => false,
+        isMultipleFilesMessage: () => false,
+      }
+    };
+    const channel4 = {
+      lastMessage: {
+        name: 'file1',
+        isUserMessage: () => false,
+        isFileMessage: () => true,
+        isMultipleFilesMessage: () => false,
+      }
+    };
+    const channel5 = {
+      lastMessage: {
+        fileInfoList: [{ fileName: 'file1' }, { fileName: 'file2' }],
+        isUserMessage: () => false,
+        isFileMessage: () => false,
+        isMultipleFilesMessage: () => true,
+      }
+    };
     expect(
       getLastMessage(channel)
     ).toBe('');
@@ -25,6 +61,12 @@ describe('ChannelPreview', () => {
     expect(
       getLastMessage(channel3)
     ).toBe(text);
+    expect(
+      getLastMessage(channel4)
+    ).toBe('file1');
+    expect(
+      getLastMessage(channel5)
+    ).toBe('file1');
   });
 
   test('utils/getChannelTitle returns channelTitle', function () {

src/modules/ChannelList/components/ChannelPreview/utils.js

@@ -2,7 +2,6 @@ import isToday from 'date-fns/isToday';
 import format from 'date-fns/format';
 import isThisYear from 'date-fns/isThisYear';
 import isYesterday from 'date-fns/isYesterday';
-
 import { truncateString } from '../../../../utils';
 import { LabelStringSet } from '../../../../ui/Label';
 
@@ -51,13 +50,20 @@ export const getTotalMembers = (channel) => (
     : 0
 );
 
-const getPrettyLastMessage = (message = {}) => {
+const getPrettyLastMessage = (message = null) => {
   const MAXLEN = 30;
-  const { messageType, name } = message;
-  if (messageType === 'file') {
-    return truncateString(name, MAXLEN);
+  if (!message) return '';
+  if (message.isFileMessage()) {
+    return truncateString(message.name, MAXLEN);
+  }
+  if (message.isMultipleFilesMessage()) {
+    const { fileInfoList } = message;
+    if (fileInfoList.length > 0) {
+      return truncateString(fileInfoList[0].fileName, MAXLEN);
+    }
+    return '';
   }
-  return message.message;
+  return message.message ?? '';
 };
 
 export const getLastMessage = (channel) => (channel?.lastMessage ? getPrettyLastMessage(channel?.lastMessage) : '');