Skip to content

Commit

Permalink
Loading
Loading status checks…
v2.16.4 update live demo UI Kit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Artem-K-Koltunov
Artem-K-Koltunov committed Apr 30, 2024
1 parent 2f61824 commit bba3cb7
Showing 9 changed files with 139 additions and 80 deletions.
45 changes: 27 additions & 18 deletions samples/react-chat-ui-kit-demo-app/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions samples/react-chat-ui-kit-demo-app/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-chat",
"version": "1.0.14",
"version": "1.0.17",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.0",
@@ -12,8 +12,8 @@
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",
"node-sass": "^8.0.0",
"quickblox": "^2.16.1",
"quickblox-react-ui-kit": "0.2.8",
"quickblox": "^2.16.4",
"quickblox-react-ui-kit": "0.3.1",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0",
"react-router-dom": "^6.4.3",
4 changes: 4 additions & 0 deletions samples/react-chat-ui-kit-demo-app/src/App.scss
View file
Original file line number Diff line number Diff line change
@@ -10,8 +10,12 @@
}

body{
font-family: 'Roboto';
justify-content: center;
align-content: center;
width: 100%;
max-width: 100%;
//to hide the scrollbars if DialogInfo clicked
overflow: hidden !important;
scrollbar-width: none !important;
}
123 changes: 83 additions & 40 deletions samples/react-chat-ui-kit-demo-app/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -19,6 +19,38 @@ import SignUp from "./SignUp/SignUp";
function App() {
const qbUIKitContext: QBDataContextType = useQbUIKitDataContext();

const [isOnline, setIsOnline] = useState<boolean>(
navigator.onLine
);

qbUIKitContext.storage.CONNECTION_REPOSITORY.subscribe((status) => {
console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
if (status) {setIsOnline(true);}
else {
setIsOnline(false);
setErrorMessage('Error! No Connection.');
}
});

useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);

window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);

return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);

useEffect(() => {
if (isOnline) {
setErrorMessage('');
}
}, [isOnline]);

const [isUserAuthorized, setUserAuthorized] = React.useState(false);
const [isSDKInitialized, setSDKInitialized] = React.useState(false);

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

const loginHandler = async (data: any): Promise<void> => {
setErrorMessage('');
const loginData: LoginData = {
login: data.login,
password: data.password
if (isOnline) {
setErrorMessage('');
const loginData: LoginData = {
login: data.login,
password: data.password
}
setCurrentUser(loginData);
setTheme(data.nameTheme);
await loginAction(loginData);
document.documentElement.setAttribute('data-theme', data.nameTheme);
} else {
setErrorMessage('Error! No connection.')
}
setCurrentUser(loginData);
setTheme(data.nameTheme);
await loginAction(loginData);
};

const createUserHandler = async (data: UserData): Promise<void> => {
setErrorMessage('');

const resultCreateUser = await createUserAction(data);

logout();
switch (resultCreateUser) {
case UserCreationStatus.UserCreated:
setUserAuthorized(false);
navigate('/sign-in');
break;
case UserCreationStatus.UserExists:
setErrorMessage('User already exists');
setUserAuthorized(false);
navigate('/sign-up');
break;
default:
setErrorMessage('Auth Fail');
setUserAuthorized(false);
navigate('/sign-up');
break;
if (isOnline) {
setErrorMessage('');

const resultCreateUser = await createUserAction(data);

logout();
switch (resultCreateUser) {
case UserCreationStatus.UserCreated:
setUserAuthorized(false);
navigate('/sign-in');
break;
case UserCreationStatus.UserExists:
setErrorMessage('User already exists');
setUserAuthorized(false);
navigate('/sign-up');
break;
default:
setErrorMessage('Auth Fail');
setUserAuthorized(false);
navigate('/sign-up');
break;
}
} else {
setErrorMessage('Error! No connection.');
}
};

const logoutUIKitHandler = async () => {
qbUIKitContext.release();
setCurrentUser({login: '', password: ''});
setUserAuthorized(false);
document.documentElement.setAttribute('data-theme', 'light');
navigate('/sign-in');
if (isOnline) {
qbUIKitContext.release();
setCurrentUser({login: '', password: ''});
setUserAuthorized(false);
document.documentElement.setAttribute('data-theme', 'light');
navigate('/sign-in');
} else {
setErrorMessage('Error! No connection.')
}
}

const loginAction = async (loginData: LoginData): Promise<void> => {
@@ -149,16 +194,15 @@ function App() {
login: currentUser.login,
password: currentUser.password,
}}
qbConfig={{...QBConfig}} // NEW !!!
qbConfig={{...QBConfig}}
>
<div className="App">
<div>

<Routes>
<Route
path="/" element={
isUserAuthorized
?
<div>
<div>
<div className="main-buttons-wrapper">
<MainButton
@@ -185,13 +229,12 @@ function App() {
/>
</div>
{/*<QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />*/}
<QuickBloxUIKitDesktopLayout uikitHeightOffset={"32px"} />
<QuickBloxUIKitDesktopLayout uikitHeightOffset="32px"/>
</div>
</div>
:
<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage}/>} />} />
<Route path="/sign-in" element={<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage}/>} />}/>
<Route path="/sign-up" element={<Auth children={<SignUp signUpHandler={createUserHandler} errorMessage={errorMessage} />} />}/>
<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage} isOnline={isOnline}/>} />} />
<Route path="/sign-in" element={<Auth children={<SignIn signInHandler={loginHandler} errorMessage={errorMessage} isOnline={isOnline}/>} />}/>
<Route path="/sign-up" element={<Auth children={<SignUp signUpHandler={createUserHandler} errorMessage={errorMessage} isOnline={isOnline} />} />}/>
</Routes>
</div>
</QuickBloxUIKitProvider>
14 changes: 7 additions & 7 deletions samples/react-chat-ui-kit-demo-app/src/QBHeplers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {AuthorizationData, LoginData, stringifyError} from "quickblox-react-ui-kit";
import QB from "quickblox/quickblox";
import QB, {QBUser} from "quickblox/quickblox";
import {QBConfig as QBConf} from "./QBconfig";

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

};

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

export const canLogin = async (user: QBUser) => {
export const canLogin = async (user: QBUserExtended) => {
const QBLib = (window as any).QB;
return new Promise((resolve, reject) => {
QBLib.login(user, (loginErr: any, loginRes: any) => {
@@ -128,16 +128,16 @@ export const logout = () => {
QBLib.chat.disconnect();
QBLib.destroySession(() => null);
}

const isUserExist = async (user: QBUser): Promise<boolean> => {
export type QBUserExtended = QBUser & {password?: string};
const isUserExist = async (user: QBUserExtended): Promise<boolean> => {
let userExists = true;
await canLogin(user).catch(() => {
userExists = false;
});
return userExists;
}

export const qbDefaultUser: QBUser = {
export const qbDefaultUser: QBUserExtended = {
id: 0,
full_name: '',
email: '',
@@ -161,7 +161,7 @@ export const qbDefaultUser: QBUser = {
export const createUserAction = async (data: UserData): Promise<UserCreationStatus> => {
let resultCreateUserAction: UserCreationStatus = UserCreationStatus.UserCreated;
createAppSession().then(async () => {
const user: QBUser = qbDefaultUser;
const user: QBUserExtended = qbDefaultUser;
user.login = data.login;
user.full_name = data.fullName || '';
user.password = data.password;
2 changes: 1 addition & 1 deletion samples/react-chat-ui-kit-demo-app/src/SignIn/SignIn.scss
View file
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
}

.form-col{
border: 10px solild #0275d8;
border: 10px solid #0275d8;
border-radius: .5rem;
padding:3%;
}
Loading
Oops, something went wrong.

0 comments on commit bba3cb7

Please sign in to comment.