Skip to content

Commit abffa69

Browse files
mkilincaslanmkilincaslan
authored
Merge pull request #1 from commt/readme-service-project
Update ReadMe & Service
2 parents 3d44d16 + 1828d2d commit abffa69

File tree

8 files changed

+191
-21
lines changed

8 files changed

+191
-21
lines changed

‎Readme.md‎

Lines changed: 169 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,169 @@
1-
# COMMT React Native SDK
1+
# COMMT: Secure Chat Plugin for React Native
2+
3+
![npm](https://img.shields.io/npm/dw/%40commt%2Fcommt-rn-sdk)
4+
![npm](https://img.shields.io/npm/v/%40commt%2Fcommt-rn-sdk)
5+
![NPM](https://img.shields.io/npm/l/%40commt%2Fcommt-rn-sdk?color=blue)
6+
7+
8+
<p align="center">
9+
<img src="https://commt.co/images/logo/commt-logo.png" width="300" />
10+
</p>
11+
<br />
12+
13+
Welcome to Commt, a powerful chat plugin designed to seamlessly integrate secure and customizable chat functionalities into your React Native applications. Offering AES encryption as the default and end-to-end (E2E) support, Commt ensures a secure and reliable communication experience for your users.
14+
15+
## Features
16+
- Written in **TypeScript**
17+
- Fully customizable pre-build components
18+
- Multiple projects support with only one client configuration
19+
- AES encryption as default and end-to-end (E2E) support
20+
- Webhooks usage flexibility
21+
- Customizable and easy to manage system messages
22+
- `Typing`, `user online` and `message read` indicators
23+
- Emoji keyboard and all emoji types support
24+
- Hooks usage flexibility
25+
26+
## Installation
27+
28+
- NPM: `npm i -S @commt/commt-rn-sdk`
29+
- Yarn: `yarn add @commt/commt-rn-sdk`
30+
31+
For detailed installation instructions and configuration options, please refer to our [documentation](https://commt.co/doc/react-native#installation).
32+
33+
## Usage
34+
35+
Get started with Commt in just a few steps:
36+
37+
- Initialize Commt: Import the Provider module and set up the chat plugin in your application by wrap your app with it.
38+
- Customize UI: Tailor the UI elements to match your app's aesthetics. Trigger the `useTheme` hook by passing theme values and make the components custom.
39+
- Implement Secure Chat: Utilize the secure and encrypted chat functionalities.
40+
41+
Check out our [documentation](https://commt.co/doc/react-native#introduction) for comprehensive usage examples and API reference.
42+
43+
## Example
44+
45+
You can get client configs info from [Commt Dashboard](https://dashboard.commt.co)
46+
47+
**App.tsx**
48+
```
49+
import CommtProvider from "@commt/commt-rn-sdk";
50+
import useInitiate from "@commt/commt-rn-sdk/hooks/useInitiate";
51+
52+
const ClientConfig = {
53+
apiKey: "123456789?",
54+
subscriptionKey: "0987654321?",
55+
tenantId: "AD768342asdf?9892",
56+
secret: "123456789018A_7JzPo?23F+4y#erPL"
57+
};
58+
59+
function App(): JSX.Element {
60+
useInitiate(ClientConfig); // Initiate a client
61+
62+
return (
63+
<CommtProvider>
64+
{/* All your ThemeProvider, NavigationContainer, etc. */}
65+
</CommtProvider>
66+
);
67+
}
68+
```
69+
70+
**Home.tsx**
71+
```
72+
import { useSetMessages, useSetRooms, useSetUsers } from "@commt/commt-rn-sdk/hooks";
73+
74+
const Home = () => {
75+
// ...
76+
77+
useEffect(async () => {
78+
await useSetUsers(usersArray); // Set users for commt
79+
await useSetRooms(roomsArray); // Set rooms for commt
80+
useSetMessages(messagesArray); // Set messages for commt
81+
}, [usersArray, roomsArray, messagesArray]);
82+
83+
// ...
84+
85+
return (
86+
<SafeAreaView>
87+
<Text
88+
style={styles.buttonText}
89+
onPress={() => navigation.navigate("Messages")}>
90+
Go Messages
91+
</Text>
92+
</SafeAreaView>
93+
);
94+
};
95+
```
96+
**Messages-List.tsx**
97+
```
98+
import {
99+
QuickChat,
100+
MessageList,
101+
SearchInput,
102+
MessagesHeader
103+
} from "@commt/commt-rn-sdk/components";
104+
105+
const Messages = () => {
106+
// ...
107+
108+
return (
109+
<Container>
110+
<MessagesHeader />
111+
<SearchInput />
112+
<InnerContainer>
113+
<QuickChat onPress={navigateToChat} />
114+
<MessageList onPress={navigateToChat} />
115+
</InnerContainer>
116+
</Container>
117+
);
118+
};
119+
```
120+
<p align="center">
121+
<img src="https://commt.co/images/media/Messages-List-Screen.png" width="200" />
122+
</p>
123+
124+
**Chat.tsx**
125+
```
126+
import { ChatHeader, Chat } from "@commt/commt-rn-sdk/components";
127+
128+
const Chats = () => {
129+
const route = useRoute<RouteProp<RootStackParamList, "Chats">>();
130+
const roomId = route.params.roomId;
131+
const participants = route.params.participants;
132+
133+
return (
134+
<Container>
135+
<ChatHeader roomId={roomId} participants={participants} />
136+
<Chat
137+
roomId={roomId}
138+
participants={participants}
139+
loadMoreMessages={YOUR_LOAD_MORE_MESSAGES_ACTION}
140+
/>
141+
</Container>
142+
);
143+
};
144+
```
145+
146+
<p align="center">
147+
<img src="https://commt.co/images/media/Chat-Screen.png" width="200" />
148+
</p>
149+
150+
## Compatibility
151+
152+
Commt is compatible with:
153+
154+
- [React Native](https://commt.co/doc#react-native)
155+
- [ReactJS](https://commt.co/doc#reactjs)
156+
- [NodeJS](https://commt.co/doc#nodejs)
157+
158+
## Support and Feedback
159+
160+
For any questions, feedback or issues, feel free to reach out to us via <contact@commt.co>.
161+
162+
## License
163+
164+
[MIT](https://github.com/commt/commt-rn/blob/master/LICENSE)
165+
166+
## Contributors
167+
168+
- Mesut KILINCASLAN [mkilincaslan](https://github.com/mkilincaslan)
169+
- Sedanur Akçil [sedanurakcil](https://github.com/sedanurakcil)

‎hooks/useInitiate.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { InitiateProps, initiate } from "../Services";
1+
import { InitiateProps, initiate } from "../service";
22

33
import { useCallback, useContext, useEffect, useState } from "react";
44
import { CommtContext } from "../context/Context";

‎hooks/useSetRooms.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useContext } from "react";
22
import { CommtContext } from "../context/Context";
33
import { setRooms } from "../context/actions/roomsActions";
44
import { RoomProps } from "../context/reducers/roomsReducer";
5-
import { getRoomsReadToken } from "../Services";
5+
import { getRoomsReadToken } from "../service";
66
import { IndicatorProps } from "../context/reducers/appReducer";
77

88
const useSetRooms = () => {

‎hooks/useSetUsers.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useContext } from "react";
22
import { CommtContext } from "../context/Context";
33
import { setUsers } from "../context/actions/usersActions";
44
import { UserProps } from "../context/reducers/usersReducer";
5-
import { getUsersOnlineInfo } from "../Services";
5+
import { getUsersOnlineInfo } from "../service";
66
import { IndicatorProps } from "../context/reducers/appReducer";
77

88
const useSetUsers = () => {

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@commt/commt-rn-sdk",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "Ultimate chat plugin for react native applications",
55
"main": "index.tsx",
66
"scripts": {
@@ -30,15 +30,15 @@
3030
},
3131
"keywords": [
3232
"commt",
33-
"react-native-chat-sdk",
34-
"react-native-chat-plugin",
3533
"commt-chat-sdk",
36-
"dayjs",
37-
"node-forge",
38-
"styled-components",
39-
"socket-io",
40-
"react-native-gifted-chat",
41-
"custom-chat-plugin"
34+
"chat",
35+
"react-native",
36+
"react",
37+
"message",
38+
"messenger",
39+
"custom-chat-plugin",
40+
"react-native-chat-sdk",
41+
"react-native-chat-plugin"
4242
],
4343
"contributors": [
4444
{"name": "Mesut KILINCASLAN"},
@@ -47,7 +47,7 @@
4747
"bugs": {
4848
"url": "https://github.com/commt/commt-rn.git/issues"
4949
},
50-
"homepage": "https://github.com/commt/commt-rn.git#readme",
50+
"homepage": "https://commt.co/doc",
5151
"license": "MIT",
5252
"author": "Mesut KILINCASLAN"
5353
}

Services/Axios.ts renamed to service/Axios.ts

File renamed without changes.

Services/index.ts renamed to service/index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { UserProps } from "../context/reducers/usersReducer";
22
import axios from "./Axios";
33
import { ConfigsProps } from "../context/reducers/appReducer";
44
import { RoomProps } from "../context/reducers/roomsReducer";
5+
import PackageJson from "../package.json";
56

67
interface AuthKeysProps {
78
apiKey: string;
@@ -30,6 +31,11 @@ type ReadTokenReturnProps = Pick<
3031
"chatRoomAuthId" | "lastMessageReadToken"
3132
>;
3233

34+
const project = {
35+
name: "React Native SDK",
36+
version: PackageJson.version,
37+
};
38+
3339
export const initiate = async (props: InitiateProps) => {
3440
const { tenantId, apiKey, subscriptionKey } = props;
3541

@@ -40,6 +46,8 @@ export const initiate = async (props: InitiateProps) => {
4046
params: {
4147
tenantId,
4248
plugin: true, // This is for backend compatibility
49+
project: project.name, // This is for backend compatibility & analytics
50+
version: project.version, // This is for backend compatibility & analytics
4351
},
4452
headers: {
4553
apiKey,

‎utils/socket.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ICustomMessage } from "../context/reducers/messagesReducer";
22
import { Socket, io } from "socket.io-client";
33
import * as types from "./emitTypes";
44
import { RoomProps } from "../context/reducers/roomsReducer";
5-
import PackageJson from "../package.json";
65

76
export type MessageInfoProps = {
87
message: ICustomMessage;
@@ -75,15 +74,10 @@ interface ConnectProps {
7574

7675
export let socket: Socket<ServerToClientEvents, ClientToServerEvents>;
7776

78-
const project = {
79-
name: "React Native SDK",
80-
version: PackageJson.version,
81-
};
82-
8377
export const connect = (props: ConnectProps) => {
8478
const { chatAuthId, tenantId, auth } = props;
8579
socket = io("https://service.commt.co", {
86-
query: { chatAuthId, tenantId, project },
80+
query: { chatAuthId, tenantId },
8781
auth,
8882
});
8983
};

0 commit comments

Comments
 (0)