Skip to content

Commit 9e289d1

Browse files
sravan-sSravan S
sravan-s
and
Sravan S
authored
[UK-943]Add open and group samples (#63)
Add samples to show how real world project might look like Todo - Read values from .env Co-authored-by: Sravan S <[email protected]>
1 parent d22bee1 commit 9e289d1

37 files changed

+63759
-0
lines changed

‎samples/groupchannel/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎samples/groupchannel/package-lock.json‎

Lines changed: 29072 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/groupchannel/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "1-2-customization-basic-format",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"prop-types": "^15.7.2",
9+
"react": "17.0.0",
10+
"react-dom": "17.0.0",
11+
"react-scripts": "3.0.1",
12+
"sendbird-uikit": "2.5.0"
13+
},
14+
"devDependencies": {
15+
"babel-eslint": "^10.0.1",
16+
"typescript": "3.8.3"
17+
},
18+
"scripts": {
19+
"start": "REACT_APP_SECRET_CODE=123 react-scripts start",
20+
"build": "react-scripts build",
21+
"test": "react-scripts test --env=jsdom",
22+
"eject": "react-scripts eject"
23+
},
24+
"browserslist": [
25+
">0.2%",
26+
"not dead",
27+
"not ie <= 11",
28+
"not op_mini all"
29+
]
30+
}

‎samples/groupchannel/public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎samples/groupchannel/src/App.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
import { SendBirdProvider as SBProvider } from "sendbird-uikit";
3+
import "sendbird-uikit/dist/index.css";
4+
5+
import CustomizedApp from "./CustomizedApp";
6+
import "./styles.css";
7+
8+
import { APP_ID, USER_ID, NICKNAME } from "./const";
9+
10+
export default function App() {
11+
if (!APP_ID) {
12+
return (
13+
<p>Set APP_ID in const.js</p>
14+
)
15+
}
16+
return (
17+
<SBProvider appId={APP_ID} userId={USER_ID} nickname={NICKNAME}>
18+
<CustomizedApp />
19+
</SBProvider>
20+
);
21+
}

‎samples/groupchannel/src/CustomizedApp.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { useState, useCallback } from "react";
2+
3+
import {
4+
Channel as SBConversation,
5+
ChannelList as SBChannelList,
6+
ChannelSettings as SBChannelSettings,
7+
withSendBird
8+
} from "sendbird-uikit";
9+
10+
function CustomizedApp(props) {
11+
// default props
12+
const {
13+
stores: { sdkStore, userStore },
14+
config: {
15+
isOnline,
16+
userId,
17+
appId,
18+
accessToken,
19+
theme,
20+
userListQuery,
21+
logger,
22+
pubSub
23+
}
24+
} = props;
25+
const logDefaultProps = useCallback(() => {
26+
console.log(
27+
"SDK store list log",
28+
sdkStore.initialized,
29+
sdkStore.sdk,
30+
sdkStore.loading,
31+
sdkStore.error
32+
);
33+
console.log(
34+
"User store list log",
35+
userStore.initialized,
36+
userStore.user,
37+
userStore.loading
38+
);
39+
console.log(
40+
"Config list log",
41+
isOnline,
42+
userId,
43+
appId,
44+
accessToken,
45+
theme,
46+
userListQuery,
47+
logger,
48+
pubSub
49+
);
50+
}, [
51+
sdkStore.initialized,
52+
sdkStore.sdk,
53+
sdkStore.loading,
54+
sdkStore.error,
55+
userStore.initialized,
56+
userStore.user,
57+
userStore.loading,
58+
isOnline,
59+
userId,
60+
appId,
61+
accessToken,
62+
theme,
63+
userListQuery,
64+
logger,
65+
pubSub
66+
]);
67+
logDefaultProps();
68+
69+
// useState
70+
const [showSettings, setShowSettings] = useState(false);
71+
const [currentChannelUrl, setCurrentChannelUrl] = useState("");
72+
73+
return (
74+
<div className="customized-app">
75+
<div className="sendbird-app__wrap">
76+
<div className="sendbird-app__channellist-wrap">
77+
<SBChannelList
78+
onChannelSelect={(channel) => {
79+
if (channel && channel.url) {
80+
setCurrentChannelUrl(channel.url);
81+
}
82+
}}
83+
/>
84+
</div>
85+
<div className="sendbird-app__conversation-wrap">
86+
<SBConversation
87+
channelUrl={currentChannelUrl}
88+
onChatHeaderActionClick={() => {
89+
setShowSettings(true);
90+
}}
91+
/>
92+
</div>
93+
</div>
94+
{showSettings && (
95+
<div className="sendbird-app__settingspanel-wrap">
96+
<SBChannelSettings
97+
channelUrl={currentChannelUrl}
98+
onCloseClick={() => {
99+
setShowSettings(false);
100+
}}
101+
/>
102+
</div>
103+
)}
104+
</div>
105+
);
106+
}
107+
108+
export default withSendBird(CustomizedApp);

‎samples/groupchannel/src/const.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// put your own APP_ID here
2+
// get your app_id -> https://dashboard.sendbird.com/auth/signin
3+
export const APP_ID = "";
4+
// set your own USER_ID and NICKNAME
5+
export const USER_ID = "sendbirdian-200720";
6+
export const NICKNAME = "Sendbirdian84";
7+
8+
export default {
9+
APP_ID,
10+
USER_ID,
11+
NICKNAME
12+
};

‎samples/groupchannel/src/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
import App from "./App";
5+
6+
const rootElement = document.getElementById("root");
7+
ReactDOM.render(<App />, rootElement);

‎samples/groupchannel/src/styles.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.customized-app {
2+
height: calc(100vh - 20px);
3+
}
4+
5+
/* will be duplicated */
6+
.sendbird-channel-preview__avatar .sendbird-chat-header__avatar {
7+
width: 56px !important;
8+
height: 56px !important;
9+
}
10+
.sendbird-channel-preview__avatar
11+
.sendbird-chat-header__avatar
12+
.sendbird-image-renderer.sendbird-avatar-img {
13+
width: 56px !important;
14+
height: 56px !important;
15+
}

‎samples/groupchannel/src/styles.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)