Skip to content

Commit ab39017

Browse files
balramgoyalbalramgoyal
committed
Update README.md file
1 parent f5b47da commit ab39017

File tree

4 files changed

+66
-67
lines changed

4 files changed

+66
-67
lines changed

‎Example.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import React, { Component } from 'react';
22
import { Provider } from 'react-redux';
33

4-
import { store } from './src/store';
5-
import App from './src/components/App';
6-
import ConversationWindow from './src/components/ConversationWindow';
7-
import ConversationList from './src/components/ConversationList';
4+
import { App, ConversationList, ConversationWindow, store } from './src';
85
import { Channelize } from './channelize-websdk/dist/index';
96

107
if (process.env.NODE_ENV === 'development') {
@@ -15,7 +12,6 @@ if (process.env.NODE_ENV === 'development') {
1512
const PUBLIC_KEY; //Channelize.io public key
1613
const LOGGEDIN_USER_ID;//User id of loggedin user
1714
const CH_ACCESS_TOKEN; //Channelize access token of loggedin userid
18-
const ANOTHER_USER_ID; //The user id of another user to start chat
1915

2016
export default class Example extends Component {
2117
constructor(props) {

‎README.md

+57-56
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
## Setup
2-
1. Install React Native CLI
2+
1. Git clone
3+
```
4+
git clone https://github.com/ChannelizeIO/Channelize-React-Native-Redux
5+
```
6+
7+
2. Install React Native CLI
38
```
49
npm install -g react-native-cli
510
```
6-
2. Install npm dependencies
11+
3. Install npm dependencies
712
```
813
npm run install
914
```
10-
3. **For Android**: (Please see all the steps in detail in [React native doc](https://reactnative.dev/docs/environment-setup))
15+
4. **For Android**: (Please see all the steps in detail in [React native doc](https://reactnative.dev/docs/environment-setup))
1116
a) Install Android Studio (https://developer.android.com/studio/index.html)
1217
b) Install Android SDK
1318
c) Configure the ANDROID_HOME environment variable
1419
d) Connect Android device or Virtual device to Android Studio
1520

16-
4. Run the react native application by following commands:
21+
5. Run the react native application by following commands:
1722

1823
```
1924
npm run start
@@ -55,88 +60,84 @@ To add the components, you need channelize public key and access token which can
5560
To add the components, you need channelize public key and access token which can explore more [here](https://docs.channelize.io/platform-api-authentication-public/)
5661

5762
```
58-
import ConversationList from './src/components/ConversationList';
59-
import ConversationWindow from './src/components/ConversationWindow';
60-
import { Channelize } from 'channelize-chat';
63+
import { App, ConversationList, ConversationWindow, store } from './src';
64+
// You can use your store file also
6165
66+
import { Channelize } from 'channelize-chat';
6267
import { Provider } from 'react-redux';
63-
import { store } from './src/store';
64-
// You can use your store file also
6568
6669
export default = (props) => {
67-
var client = new Channelize.client({publicKey: PUBLIC_KEY});
68-
69-
return (
70-
<Provider store={store}>
71-
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
72-
<ConversationList />
73-
<ConversationWindow />
74-
</App>
75-
</Provider>
76-
)
70+
var client = new Channelize.client({publicKey: PUBLIC_KEY});
71+
72+
return (
73+
<Provider store={store}>
74+
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
75+
<ConversationList />
76+
<ConversationWindow />
77+
</App>
78+
</Provider>
79+
)
7780
}
7881
```
7982

8083
## Conversation window `userId` prop
8184

8285
```
83-
import ConversationWindow from './src/components/ConversationList';
84-
import { Channelize } from 'channelize-chat';
86+
import { App, ConversationWindow, store } from './src';
87+
// You can use your store file also
8588
89+
import { Channelize } from 'channelize-chat';
8690
import { Provider } from 'react-redux';
87-
import { store } from './src/store';
88-
// You can use your store file also
8991
9092
export default (props) => {
91-
var client = new Channelize.client({publicKey: PUBLIC_KEY});
92-
93-
return (
94-
<Provider store={store}>
95-
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
96-
<ConversationWindow userId={USER_ID}/>
97-
</App>
98-
</Provider>
99-
)
93+
var client = new Channelize.client({publicKey: PUBLIC_KEY});
94+
95+
return (
96+
<Provider store={store}>
97+
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
98+
<ConversationWindow userId={USER_ID}/>
99+
</App>
100+
</Provider>
101+
)
100102
}
101103
```
102104

103105
## Conversation window `conversation` prop
104106

105107
```
106108
import React, { useEffect, useState } from 'react';
107-
import ConversationWindow from './src/components/ConversationList';
108-
import { Channelize } from 'channelize-chat';
109+
import { App, ConversationWindow, store } from './src';
110+
// You can use your store file also
109111
112+
import { Channelize } from 'channelize-chat';
110113
import { Provider } from 'react-redux';
111-
import { store } from './src/store';
112-
// You can use your store file also
113114
114115
export default (props) => {
115-
const [conversation, setConversation] = useState('');
116+
const [conversation, setConversation] = useState('');
116117
117-
const client = new Channelize.client({publicKey: PUBLIC_KEY});
118+
const client = new Channelize.client({publicKey: PUBLIC_KEY});
118119
119-
useEffect(() => {
120-
getConversation();
121-
}, [conversation]);
120+
useEffect(() => {
121+
getConversation();
122+
}, []);
122123
123-
const getConversation = async () => {
124-
const res = await client.connect(USER_ID, ACCESS_TOKEN);
125-
const conversation = await client.Conversation.getConversation(CONVERSATION_ID)
126-
setConversation(conversation);
127-
};
124+
const getConversation = async () => {
125+
const res = await client.connect(USER_ID, ACCESS_TOKEN);
126+
const conversation = await client.Conversation.getConversation(CONVERSATION_ID)
127+
setConversation(conversation);
128+
};
128129
129-
if (!conversation) {
130-
return null;
131-
}
130+
if (!conversation) {
131+
return null;
132+
}
132133
133134
134-
return (
135-
<Provider store={store}>
136-
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
137-
<ConversationWindow conversation={conversation}/>
138-
</App>
139-
</Provider>
140-
)
135+
return (
136+
<Provider store={store}>
137+
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
138+
<ConversationWindow conversation={conversation}/>
139+
</App>
140+
</Provider>
141+
)
141142
}
142143
```

‎src/components/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { Avatar } from './Avatar';
2-
export { App } from './App';
3-
export { ConversationList } from './ConversationList';
4-
export { ConversationWindow } from './ConversationWindow';
1+
export Avatar from './Avatar';
2+
export App from './App';
3+
export ConversationList from './ConversationList';
4+
export ConversationWindow from './ConversationWindow';

‎src/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export * from './components';
22

3-
export * from '../utils';
4-
export * from '../context';
3+
export * from './utils';
4+
export * from './context';
5+
6+
export * from './store';

0 commit comments

Comments
 (0)