Merge pull request #311 from GetStream/CRNS-120/Message

CRNS-120/Message

Author: DanC5

.eslintrc.json

@@ -16,10 +16,16 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["babel", "markdown"],
+  "plugins": [
+    "babel",
+    "markdown",
+    "better-styled-components",
+    "sort-destructure-keys"
+  ],
   "rules": {
     "array-callback-return": 2,
     "arrow-body-style": 2,
+    "better-styled-components/sort-declarations-alphabetically": 0,
     "comma-dangle": 0,
     "babel/no-invalid-this": 2,
     "default-case": 2,
@@ -50,6 +56,10 @@
     "react/prop-types": 0,
     "require-await": 2,
     "semi": [1, "always"],
+    "sort-destructure-keys/sort-destructure-keys": [
+      2,
+      { "caseSensitive": false }
+    ],
     "sort-imports": [
       "error",
       {
@@ -120,12 +130,15 @@
         "markdown",
         "prettier",
         "react",
-        "typescript-sort-keys"
+        "typescript-sort-keys",
+        "better-styled-components",
+        "sort-destructure-keys"
       ],
       "rules": {
         "@typescript-eslint/ban-ts-comment": 0,
         "array-callback-return": 2,
         "arrow-body-style": 2,
+        "better-styled-components/sort-declarations-alphabetically": 0,
         "comma-dangle": 0,
         "babel/no-invalid-this": 2,
         "default-case": 2,
@@ -155,6 +168,10 @@
         "react/prop-types": 0,
         "require-await": 2,
         "semi": [1, "always"],
+        "sort-destructure-keys/sort-destructure-keys": [
+          2,
+          { "caseSensitive": false }
+        ],
         "sort-imports": [
           "error",
           {

CHANGELOG.md

@@ -1,12 +1,12 @@
 # Changelog
 
-## [1.3.0] 2020-09-01 (UNPUBLISHED)
+## [1.3.0] 2020-09-11 (UNPUBLISHED)
 
 **BREAKING CHANGES**
 
 *ChannelList*
 
-- We converted the ChannelList component from a class to a function and abstracted the event listener logic into custom hooks. The default event handlers can still be overriden by providing custom prop functions to the ChannelList component. Custom logic can be provided for the following events:
+- We converted the ChannelList component from a class to a function and abstracted the event listener logic into custom hooks. The default event handlers can still be overridden by providing custom prop functions to the ChannelList component. Custom logic can be provided for the following events:
 
   - `onAddedToChannel` overrides `notification.added_to_channel` default
   - `onChannelDeleted` overrides `channel.deleted` default
@@ -74,10 +74,20 @@
 
 - All contexts are exported and any values can be accessed through a higher order component (ex: `withMessagesContext`) or the `useContext` hook (ex: `const { messages } = useContext(MessagesContext);`)
 
-- Dropped support for deprecated props from MessageList component
+*Deprecated Props*
+
+- We have removed support for the `MessageList` component's `onMessageTouch` prop. Since this prop no longer exists, we have also removed `dismissKeyboardOnMessageTouch`. Please use the `onPress` prop on the `MessageSimple` component to perform an action on touch of a message.
+
+- We have removed support for the `Message` component's `readOnly` prop. Please use the `disabled` value from the `ChannelContext` instead.
+
+- We have also dropped support for the following `MessageList` props:
   - `dateSeparator` (use DateSeparator instead)
   - `headerComponent` (use HeaderComponent instead)
 
+*this Reference Removal*
+
+- We have removed the `this` class component reference from the prop functions in `MessageSimple`. For example, if you wish to override the SDK's standard long press behavior on a message, the `onLongPress` function passed in to `MessageSimple` no longer takes the `this` component reference as it's first argument. The message and the event object become the first and second arguments, respectively.
+
 ## [1.2.0] 2020-08-21
 
 **NO BREAKING CHANGES**

package.json

@@ -95,8 +95,6 @@
     "anchorme": "^1.1.2",
     "babel-plugin-macros": "^2.8.0",
     "dayjs": "^1.8.32",
-    "deep-equal": "^1.0.1",
-    "deepmerge": "^3.2.0",
     "file-loader": "^3.0.1",
     "i18next": "^19.3.1",
     "lodash-es": "^4.17.11",
@@ -142,10 +140,12 @@
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-sort-destructure-keys": "^1.3.5",
     "eslint-plugin-typescript-sort-keys": "^1.3.0",
     "husky": "^2.1.0",
     "jest": "^26.2.2",

src/components/Attachment/AttachmentActions.js

@@ -15,11 +15,11 @@ const Container = styled.View`
 const ActionButton = styled(({ buttonStyle, ...rest }) => (
   <TouchableOpacity {...rest} />
 ))`
-  background-color: ${({ theme, buttonStyle }) =>
+  background-color: ${({ buttonStyle, theme }) =>
     buttonStyle === 'primary'
       ? theme.message.actions.button.primaryBackgroundColor
       : theme.message.actions.button.defaultBackgroundColor};
-  border-color: ${({ theme, buttonStyle }) =>
+  border-color: ${({ buttonStyle, theme }) =>
     buttonStyle === 'primary'
       ? theme.message.actions.button.primaryBorderColor
       : theme.message.actions.button.defaultBorderColor};
@@ -33,7 +33,7 @@ const ActionButton = styled(({ buttonStyle, ...rest }) => (
 const ActionButtonText = styled(({ buttonStyle, ...rest }) => (
   <Text {...rest} />
 ))`
-  color: ${({ theme, buttonStyle }) =>
+  color: ${({ buttonStyle, theme }) =>
     buttonStyle === 'primary'
       ? theme.message.actions.buttonText.primaryColor
       : theme.message.actions.buttonText.defaultColor};
@@ -46,7 +46,7 @@ const ActionButtonText = styled(({ buttonStyle, ...rest }) => (
  *
  * @example ../docs/AttachmentActions.md
  */
-const AttachmentActions = ({ actions, actionHandler, id }) => (
+const AttachmentActions = ({ actionHandler, actions, id }) => (
   <Container testID='attachment-actions'>
     {actions.map((action) => (
       <ActionButton

src/components/Attachment/FileAttachment.js

@@ -28,7 +28,6 @@ const FileContainer = styled.View`
 `;
 
 const FileDetails = styled.View`
-  flex-direction: column;
   padding-left: 10px;
   ${({ theme }) => theme.message.file.details.css}
 `;

src/components/Attachment/Gallery.js

@@ -31,7 +31,7 @@ const GalleryContainer = styled.View`
     alignment === 'right' ? 16 : 2}px;
   flex-direction: row;
   flex-wrap: wrap;
-  height: ${({ theme, length }) =>
+  height: ${({ length, theme }) =>
     length >= 4
       ? theme.message.gallery.doubleSize
       : length === 3
@@ -43,11 +43,11 @@ const GalleryContainer = styled.View`
 `;
 
 const ImageContainer = styled.TouchableOpacity`
-  height: ${({ theme, length }) =>
+  height: ${({ length, theme }) =>
     length !== 3
       ? theme.message.gallery.size
       : theme.message.gallery.halfSize}px;
-  width: ${({ theme, length }) =>
+  width: ${({ length, theme }) =>
     length !== 3
       ? theme.message.gallery.size
       : theme.message.gallery.halfSize}px;
@@ -144,7 +144,11 @@ const Gallery = ({ alignment, images }) => {
 
   return (
     <>
-      <GalleryContainer alignment={alignment} length={galleryImages.length}>
+      <GalleryContainer
+        alignment={alignment}
+        length={galleryImages.length}
+        testID='image-multiple-container'
+      >
         {galleryImages.slice(0, 4).map((image, i) => (
           <ImageContainer
             activeOpacity={0.8}
@@ -155,6 +159,7 @@ const Gallery = ({ alignment, images }) => {
               setViewerModalOpen(true);
               setViewerModalImageIndex(i);
             }}
+            testID='image-multiple'
             {...additionalTouchableProps}
           >
             {i === 3 && galleryImages.length > 4 ? (

src/components/AutoCompleteInput/CommandsItem.js

@@ -13,7 +13,6 @@ const CommandDescription = styled.Text`
 `;
 
 const Container = styled.View`
-  flex-direction: column;
   padding: 10px;
   ${({ theme }) => theme.messageInput.suggestions.command.container.css}
 `;

src/components/Channel/Channel.js

@@ -258,9 +258,9 @@ const Channel = (props) => {
 
   const sendMessageRequest = async (message) => {
     const {
+      __html,
       attachments,
       created_at,
-      __html,
       html,
       id,
       mentioned_users,

src/components/Channel/__tests__/Channel.test.js

@@ -208,7 +208,7 @@ describe('Channel', () => {
     const newMessages = [generateMessage()];
     renderComponent(
       { channel },
-      ({ loadMore, messages: contextMessages, hasMore }) => {
+      ({ hasMore, loadMore, messages: contextMessages }) => {
         if (
           !contextMessages.find((message) => message.id === newMessages[0].id)
         ) {
@@ -248,7 +248,7 @@ describe('Channel', () => {
 
     renderComponent(
       { channel },
-      ({ loadMore, loadingMore }) => {
+      ({ loadingMore, loadMore }) => {
         // return a promise that hasn't resolved yet, so loadMore will be stuck in the 'await' part of the function
         jest.spyOn(channel, 'query').mockImplementationOnce(() => queryPromise);
         loadMore();
@@ -302,7 +302,7 @@ describe('Channel', () => {
 
     renderComponent(
       { channel },
-      ({ removeMessage, messages: contextMessages }) => {
+      ({ messages: contextMessages, removeMessage }) => {
         if (contextMessages.length > 0) {
           // if there are messages passed as the context, remove them
           removeMessage(contextMessages[0]);

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -178,7 +178,7 @@ describe('ChannelList', () => {
       });
 
       it('should move channel to top of the list by default', async () => {
-        const { getByText, getByTestId, getAllByRole } = render(
+        const { getAllByRole, getByTestId, getByText } = render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
@@ -202,7 +202,7 @@ describe('ChannelList', () => {
       });
 
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
-        const { getByText, getByTestId, getAllByRole } = render(
+        const { getAllByRole, getByTestId, getByText } = render(
           <Chat client={chatClient}>
             <ChannelList {...props} lockChannelOrder={true} />
           </Chat>,
@@ -235,7 +235,7 @@ describe('ChannelList', () => {
       });
 
       it('should move a channel to top of the list by default', async () => {
-        const { getByTestId, getAllByRole } = render(
+        const { getAllByRole, getByTestId } = render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,
@@ -293,7 +293,7 @@ describe('ChannelList', () => {
       });
 
       it('should move a channel to top of the list by default', async () => {
-        const { getByTestId, getAllByRole } = render(
+        const { getAllByRole, getByTestId } = render(
           <Chat client={chatClient}>
             <ChannelList {...props} />
           </Chat>,