Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
833ed47
Tests setup
vishalnarkhede Jul 22, 2020
bd502b0
Merge branch 'master' of github.com:GetStream/stream-chat-react-nativ…
vishalnarkhede Jul 27, 2020
47bea70
Merge branch 'vishal/RN-2.0' of github.com:GetStream/stream-chat-reac…
vishalnarkhede Jul 27, 2020
a3e5a5a
Cleanup
vishalnarkhede Jul 27, 2020
8f80d79
Adding hooks to ChannelPreviewMessenger and ChannelPreview
vishalnarkhede Jul 27, 2020
064d08b
memoize ChannelPreview component
Jul 28, 2020
8363ecb
Update src/components/ChannelPreview/hooks/useChannelPreviewDisplayNa…
DanC5 Jul 28, 2020
078b5fa
Update src/components/ChannelPreview/hooks/useChannelPreviewDisplayNa…
DanC5 Jul 28, 2020
f76c071
Update src/components/ChannelPreview/hooks/useChannelPreviewDisplayAv…
DanC5 Jul 28, 2020
d82db82
Update src/components/ChannelPreview/ChannelPreviewMessenger.js
DanC5 Jul 28, 2020
adad340
Update src/components/ChannelPreview/ChannelPreviewMessenger.js
DanC5 Jul 28, 2020
114d934
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
e7d2776
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
f61cd25
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
ea7293f
Update src/components/ChannelPreview/__tests__/ChannelPreviewMessenge…
DanC5 Jul 28, 2020
82ed932
Update src/components/ChannelPreview/__tests__/ChannelPreviewMessenge…
DanC5 Jul 28, 2020
b65c1c7
Update src/components/ChannelPreview/ChannelPreviewMessenger.js
DanC5 Jul 28, 2020
000c79b
Update src/components/ChannelPreview/ChannelPreviewMessenger.js
DanC5 Jul 28, 2020
716b69b
Update src/components/ChannelPreview/ChannelPreview.js
DanC5 Jul 28, 2020
9fe7c83
Update src/components/ChannelPreview/ChannelPreviewMessenger.js
DanC5 Jul 28, 2020
c408777
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
d660779
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
3f52e4c
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
12b5df6
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
ed90646
Update src/components/ChannelPreview/__tests__/ChannelPreview.test.js
DanC5 Jul 28, 2020
c621c34
Merge branch 'vishal/channel-preview-messenger-tests' of github.com:G…
Jul 28, 2020
87dbf01
PR comments and clean up
Jul 28, 2020
896699c
fix useLatestMessagePreview hook
Jul 28, 2020
ab3f107
add dependency arrays
Jul 28, 2020
444f98a
add comment re. inner componene usage
Jul 28, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
presets: ['@babel/env', '@babel/react', '@babel/preset-flow'],
plugins: [
'macros',
'@babel/proposal-class-properties',
'@babel/transform-runtime',
'babel-plugin-styled-components',
],
env: {
production: {
presets: [
[
'@babel/env',
{
modules: false,
},
],
],
},
},
overrides: [
{
compact: false,
},
],
};
13 changes: 13 additions & 0 deletions jest-setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { registerNativeHandlers } from './src/native';

registerNativeHandlers({
NetInfo: {
addEventListener: () => {},
fetch: () =>
new Promise((resolve) => {
resolve();
}),
},
pickImage: () => null,
pickDocument: () => null,
});
19 changes: 19 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const jestPreset = require('@testing-library/react-native/jest-preset');

module.exports = Object.assign(jestPreset, {
testRegex: [
/**
* If you want to test single file, mention it here
* e.g.,
* "src/components/ChannelList/__tests__/ChannelList.test.js",
* "src/components/MessageList/__tests__/MessageList.test.js"
*/
],
testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
moduleNameMapper: {
'mock-builders(.*)$': '<rootDir>/src/mock-builders$1',
'@stream-io/styled-components':
'<rootDir>/node_modules/@stream-io/styled-components/native/dist/styled-components.native.cjs.js',
},
setupFiles: [...jestPreset.setupFiles, require.resolve('./jest-setup.js')],
});
18 changes: 9 additions & 9 deletions native-package/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -895,10 +895,10 @@
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==

"@stream-io/react-native-simple-markdown@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@stream-io/react-native-simple-markdown/-/react-native-simple-markdown-1.2.0.tgz#f1ea7db1e16712a3428b79fdd522464ae2caccdb"
integrity sha512-rqs625+3v+Nz4yUocmMr/Ar6Jb31HZWXDOqEi4MjU3IDLCRi9XaIeH7FlCD4GrabqUEYjq8EY709fxpVBjaSxw==
"@stream-io/react-native-simple-markdown@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@stream-io/react-native-simple-markdown/-/react-native-simple-markdown-1.2.1.tgz#ce3c909fda4e087f77a68ab051c3a8f034bc9adb"
integrity sha512-Yj1IxO+Y632DHqSrUfUkMGlEi7qD30Qi2+7etVxaZb/7hr++VFoU9BQdyKPCarRJfIzFMvVZ/DJFvz8JhybfUQ==
dependencies:
lodash "^4.17.15"
simple-markdown "^0.7.2"
Expand Down Expand Up @@ -6272,13 +6272,13 @@ stream-browserify@^2.0.1:
inherits "~2.0.1"
readable-stream "^2.0.2"

stream-chat-react-native-core@v0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.14.0.tgz#f4f406b056e3cbbeb9219a342170e044d3f0a609"
integrity sha512-LtEu7iUi4El4FSczrs+yhMddVF4lsII6DCuuk8dKTk4BPxW2ItGmNeZ1bOMa30YClj0DuDRnSiMEbJTnXMdLbQ==
stream-chat-react-native-core@v0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.15.0.tgz#2041b2986f2233e2635181abbf40971c194cd531"
integrity sha512-pCzua3KwzkT3b6SSrx/4P/RIu68aArP00Z9Sb9ZJ+4DiAdfGAbOsHVGOGHytmtOcTm/bBY1bpj5eXl98T35zxw==
dependencies:
"@babel/runtime" "^7.1.2"
"@stream-io/react-native-simple-markdown" "^1.2.0"
"@stream-io/react-native-simple-markdown" "^1.2.1"
"@stream-io/styled-components" "^4.2.1"
anchorme "^1.1.2"
babel-plugin-macros "^2.5.1"
Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,9 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.3",
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.0.0",
"@testing-library/react-native": "^5.0.3",
"@types/react": "^16.8.23",
"@types/react-native": "^0.57.0",
"ast-pretty-print": "^2.0.1",
Expand All @@ -121,8 +123,10 @@
"prettier": "^1.16.4",
"react": "^16.5.0",
"react-dom": "^16.8.6",
"react-native": "0.61.5",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there a reason why we're a couple versions behind on RN?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanC5 Yeah, I can't seem to remember exactly but it was breaking for 0.62 and 0.63. But give it a shot!!

"react-native-web": "^0.11.4",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "^16.13.1",
"rollup": "^0.68.2",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.1.8",
Expand Down
141 changes: 47 additions & 94 deletions src/components/ChannelPreview/ChannelPreview.js
Original file line number Diff line number Diff line change
@@ -1,107 +1,60 @@
import React, { PureComponent } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';

import { withTranslationContext } from '../../context';

class ChannelPreview extends PureComponent {
constructor(props) {
super(props);

this.state = {
unread: 0,
lastMessage: {},
lastRead: new Date(),
import { ChatContext } from '../../context';
import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';

/**
* NOTE: We created an inner component which only receives `client` from the ChatContext. This
* practice will prevent unnecessary renders of the component when items in ChatContext change
*/
const ChannelPreviewWithContext = React.memo((props) => {
const { channel, client } = props;
const [lastMessage, setLastMessage] = useState({});
const [unread, setUnread] = useState(channel.countUnread());
const latestMessage = useLatestMessagePreview(channel, lastMessage);

useEffect(() => {
const handleNewMessageEvent = (e) => {
setLastMessage(e.message);
setUnread(channel.countUnread());
};
}

static propTypes = {
channel: PropTypes.object.isRequired,
client: PropTypes.object.isRequired,
setActiveChannel: PropTypes.func,
Preview: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
};

static defaultProps = {
// Preview: ChannelPreviewCountOnly,
};

componentDidMount() {
// listen to change...
const channel = this.props.channel;
this.setState({ unread: channel.countUnread() });
channel.on('message.new', this.handleNewMessageEvent);
channel.on('message.read', this.handleReadEvent);
}

componentWillUnmount() {
const channel = this.props.channel;
channel.off('message.new', this.handleNewMessageEvent);
channel.off('message.read', this.handleReadEvent);
}

handleReadEvent = (event) => {
if (event.user.id === this.props.client.userID) {
this.setState({ unread: this.props.channel.countUnread() });
}
};
channel.on('message.new', handleNewMessageEvent);

handleNewMessageEvent = (event) => {
const channel = this.props.channel;
this.setState({
lastMessage: event.message,
unread: channel.countUnread(),
});
};

getLatestMessage = () => {
const { channel, t, tDateTimeParser } = this.props;
const message = channel.state.messages[channel.state.messages.length - 1];
return () => {
channel.off('message.new', handleNewMessageEvent);
};
}, []);

const latestMessage = {
text: '',
created_at: '',
messageObject: { ...message },
useEffect(() => {
const handleReadEvent = (e) => {
if (e.user.id === client.userID) {
setUnread(0);
}
};

if (!message) {
latestMessage.text = t('Nothing yet...');
return latestMessage;
}
if (message.deleted_at) {
latestMessage.text = t('Message deleted');
return latestMessage;
}
channel.on('message.read', handleReadEvent);

if (message.text) {
latestMessage.text = message.text;
} else {
if (message.command) {
latestMessage.text = '/' + message.command;
} else if (message.attachments.length) {
latestMessage.text = t('🏙 Attachment...');
} else {
latestMessage.text = t('Empty message...');
}
}
return () => {
channel.off('message.read', handleReadEvent);
};
}, []);

if (tDateTimeParser(message.created_at).isSame(new Date(), 'day'))
latestMessage.created_at = tDateTimeParser(message.created_at).format(
'LT',
);
else {
latestMessage.created_at = tDateTimeParser(message.created_at).format(
'L',
);
}
const { Preview } = props;
return <Preview {...props} latestMessage={latestMessage} unread={unread} />;
});

return latestMessage;
};
const ChannelPreview = (props) => {
const { client } = useContext(ChatContext);
return <ChannelPreviewWithContext {...props} {...{ client }} />;
};

render() {
const props = { ...this.state, ...this.props };
const { Preview } = this.props;
return <Preview {...props} latestMessage={this.getLatestMessage()} />;
}
}
ChannelPreview.propTypes = {
channel: PropTypes.object.isRequired,
client: PropTypes.object.isRequired,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is no longer a required prop as we're pulling it from ChatContext, right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true, and we're going to axe all these prop types anyways shortly with TS

setActiveChannel: PropTypes.func,
Preview: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
};

export default withTranslationContext(ChannelPreview);
export default ChannelPreview;
Loading