Skip to content

Commit bba3cb7

Browse files
Artem-K-KoltunovArtem-K-Koltunov
committed
v2.16.4 update live demo UI Kit
1 parent 2f61824 commit bba3cb7

File tree

9 files changed

+139
-80
lines changed

9 files changed

+139
-80
lines changed

‎samples/react-chat-ui-kit-demo-app/package-lock.json‎

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

‎samples/react-chat-ui-kit-demo-app/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat",
3-
"version": "1.0.14",
3+
"version": "1.0.17",
44
"private": true,
55
"dependencies": {
66
"@emotion/react": "^11.11.0",
@@ -12,8 +12,8 @@
1212
"@types/react": "^18.2.6",
1313
"@types/react-dom": "^18.2.4",
1414
"node-sass": "^8.0.0",
15-
"quickblox": "^2.16.1",
16-
"quickblox-react-ui-kit": "0.2.8",
15+
"quickblox": "^2.16.4",
16+
"quickblox-react-ui-kit": "0.3.1",
1717
"react": "^17.0.0 || ^18.0.0",
1818
"react-dom": "^17.0.0 || ^18.0.0",
1919
"react-router-dom": "^6.4.3",

‎samples/react-chat-ui-kit-demo-app/src/App.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
}
1111

1212
body{
13+
font-family: 'Roboto';
1314
justify-content: center;
1415
align-content: center;
1516
width: 100%;
1617
max-width: 100%;
18+
//to hide the scrollbars if DialogInfo clicked
19+
overflow: hidden !important;
20+
scrollbar-width: none !important;
1721
}

‎samples/react-chat-ui-kit-demo-app/src/App.tsx‎

Lines changed: 83 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,38 @@ import SignUp from "./SignUp/SignUp";
1919
function App() {
2020
const qbUIKitContext: QBDataContextType = useQbUIKitDataContext();
2121

22+
const [isOnline, setIsOnline] = useState<boolean>(
23+
navigator.onLine
24+
);
25+
26+
qbUIKitContext.storage.CONNECTION_REPOSITORY.subscribe((status) => {
27+
console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
28+
if (status) {setIsOnline(true);}
29+
else {
30+
setIsOnline(false);
31+
setErrorMessage('Error! No Connection.');
32+
}
33+
});
34+
35+
useEffect(() => {
36+
const handleOnline = () => setIsOnline(true);
37+
const handleOffline = () => setIsOnline(false);
38+
39+
window.addEventListener('online', handleOnline);
40+
window.addEventListener('offline', handleOffline);
41+
42+
return () => {
43+
window.removeEventListener('online', handleOnline);
44+
window.removeEventListener('offline', handleOffline);
45+
};
46+
}, []);
47+
48+
useEffect(() => {
49+
if (isOnline) {
50+
setErrorMessage('');
51+
}
52+
}, [isOnline]);
53+
2254
const [isUserAuthorized, setUserAuthorized] = React.useState(false);
2355
const [isSDKInitialized, setSDKInitialized] = React.useState(false);
2456

@@ -34,46 +66,59 @@ function App() {
3466
const navigate = useNavigate();
3567

3668
const loginHandler = async (data: any): Promise<void> => {
37-
setErrorMessage('');
38-
const loginData: LoginData = {
39-
login: data.login,
40-
password: data.password
69+
if (isOnline) {
70+
setErrorMessage('');
71+
const loginData: LoginData = {
72+
login: data.login,
73+
password: data.password
74+
}
75+
setCurrentUser(loginData);
76+
setTheme(data.nameTheme);
77+
await loginAction(loginData);
78+
document.documentElement.setAttribute('data-theme', data.nameTheme);
79+
} else {
80+
setErrorMessage('Error! No connection.')
4181
}
42-
setCurrentUser(loginData);
43-
setTheme(data.nameTheme);
44-
await loginAction(loginData);
4582
};
4683

4784
const createUserHandler = async (data: UserData): Promise<void> => {
48-
setErrorMessage('');
49-
50-
const resultCreateUser = await createUserAction(data);
51-
52-
logout();
53-
switch (resultCreateUser) {
54-
case UserCreationStatus.UserCreated:
55-
setUserAuthorized(false);
56-
navigate('/sign-in');
57-
break;
58-
case UserCreationStatus.UserExists:
59-
setErrorMessage('User already exists');
60-
setUserAuthorized(false);
61-
navigate('/sign-up');
62-
break;
63-
default:
64-
setErrorMessage('Auth Fail');
65-
setUserAuthorized(false);
66-
navigate('/sign-up');
67-
break;
85+
if (isOnline) {
86+
setErrorMessage('');
87+
88+
const resultCreateUser = await createUserAction(data);
89+
90+
logout();
91+
switch (resultCreateUser) {
92+
case UserCreationStatus.UserCreated:
93+
setUserAuthorized(false);
94+
navigate('/sign-in');
95+
break;
96+
case UserCreationStatus.UserExists:
97+
setErrorMessage('User already exists');
98+
setUserAuthorized(false);
99+
navigate('/sign-up');
100+
break;
101+
default:
102+
setErrorMessage('Auth Fail');
103+
setUserAuthorized(false);
104+
navigate('/sign-up');
105+
break;
106+
}
107+
} else {
108+
setErrorMessage('Error! No connection.');
68109
}
69110
};
70111

71112
const logoutUIKitHandler = async () => {
72-
qbUIKitContext.release();
73-
setCurrentUser({login: '', password: ''});
74-
setUserAuthorized(false);
75-
document.documentElement.setAttribute('data-theme', 'light');
76-
navigate('/sign-in');
113+
if (isOnline) {
114+
qbUIKitContext.release();
115+
setCurrentUser({login: '', password: ''});
116+
setUserAuthorized(false);
117+
document.documentElement.setAttribute('data-theme', 'light');
118+
navigate('/sign-in');
119+
} else {
120+
setErrorMessage('Error! No connection.')
121+
}
77122
}
78123

79124
const loginAction = async (loginData: LoginData): Promise<void> => {
@@ -149,16 +194,15 @@ function App() {
149194
login: currentUser.login,
150195
password: currentUser.password,
151196
}}
152-
qbConfig={{...QBConfig}} // NEW !!!
197+
qbConfig={{...QBConfig}}
153198
>
154-
<div className="App">
199+
<div>
155200

156201
<Routes>
157202
<Route
158203
path="/" element={
159204
isUserAuthorized
160205
?
161-
<div>
162206
<div>
163207
<div className="main-buttons-wrapper">
164208
<MainButton
@@ -185,13 +229,12 @@ function App() {
185229
/>
186230
</div>
187231
{/*<QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />*/}
188-
<QuickBloxUIKitDesktopLayout uikitHeightOffset={"32px"} />
232+
<QuickBloxUIKitDesktopLayout uikitHeightOffset="32px"/>
189233
</div>
190-
</div>
191234
:
192-
<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage}/>} />} />
193-
<Route path="/sign-in" element={<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage}/>} />}/>
194-
<Route path="/sign-up" element={<Auth children={<SignUp signUpHandler={createUserHandler} errorMessage={errorMessage} />} />}/>
235+
<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage} isOnline={isOnline}/>} />} />
236+
<Route path="/sign-in" element={<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage} isOnline={isOnline}/>} />}/>
237+
<Route path="/sign-up" element={<Auth children={<SignUp signUpHandler={createUserHandler} errorMessage={errorMessage} isOnline={isOnline} />} />}/>
195238
</Routes>
196239
</div>
197240
</QuickBloxUIKitProvider>

‎samples/react-chat-ui-kit-demo-app/src/QBHeplers.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {AuthorizationData, LoginData, stringifyError} from "quickblox-react-ui-kit";
2-
import QB from "quickblox/quickblox";
2+
import QB, {QBUser} from "quickblox/quickblox";
33
import {QBConfig as QBConf} from "./QBconfig";
44

55
export type UserData = {
@@ -42,7 +42,7 @@ export const prepareSDK = async (): Promise<void> => {
4242

4343
};
4444

45-
export const createUser = (user: QBUser): Promise<QBUser> => {
45+
export const createUser = (user: QBUserExtended): Promise<QBUser> => {
4646
const QBLib = (window as any).QB;
4747
return new Promise((resolve, reject) => {
4848
const userLoginData = {
@@ -110,7 +110,7 @@ export const connectToChatServer = async (paramsConnect: ParamsConnect, userLogi
110110
});
111111
};
112112

113-
export const canLogin = async (user: QBUser) => {
113+
export const canLogin = async (user: QBUserExtended) => {
114114
const QBLib = (window as any).QB;
115115
return new Promise((resolve, reject) => {
116116
QBLib.login(user, (loginErr: any, loginRes: any) => {
@@ -128,16 +128,16 @@ export const logout = () => {
128128
QBLib.chat.disconnect();
129129
QBLib.destroySession(() => null);
130130
}
131-
132-
const isUserExist = async (user: QBUser): Promise<boolean> => {
131+
export type QBUserExtended = QBUser & {password?: string};
132+
const isUserExist = async (user: QBUserExtended): Promise<boolean> => {
133133
let userExists = true;
134134
await canLogin(user).catch(() => {
135135
userExists = false;
136136
});
137137
return userExists;
138138
}
139139

140-
export const qbDefaultUser: QBUser = {
140+
export const qbDefaultUser: QBUserExtended = {
141141
id: 0,
142142
full_name: '',
143143
email: '',
@@ -161,7 +161,7 @@ export const qbDefaultUser: QBUser = {
161161
export const createUserAction = async (data: UserData): Promise<UserCreationStatus> => {
162162
let resultCreateUserAction: UserCreationStatus = UserCreationStatus.UserCreated;
163163
createAppSession().then(async () => {
164-
const user: QBUser = qbDefaultUser;
164+
const user: QBUserExtended = qbDefaultUser;
165165
user.login = data.login;
166166
user.full_name = data.fullName || '';
167167
user.password = data.password;

‎samples/react-chat-ui-kit-demo-app/src/SignIn/SignIn.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.form-col{
6-
border: 10px solild #0275d8;
6+
border: 10px solid #0275d8;
77
border-radius: .5rem;
88
padding:3%;
99
}

0 commit comments

Comments
 (0)