|
| 1 | +import React, {useEffect, useState} from 'react'; |
| 2 | +import {prepareSDK, createUserAction, logout, createUserSession, connectToChatServer, |
| 3 | + UserCreationStatus, UserData} from './QBHeplers'; |
| 4 | +import { |
| 5 | + LoginData, |
| 6 | + MainButton, |
| 7 | + useQbUIKitDataContext, |
| 8 | + QuickBloxUIKitDesktopLayout, |
| 9 | + QuickBloxUIKitProvider, |
| 10 | + TypeButton, QBDataContextType, |
| 11 | +} from 'quickblox-react-ui-kit'; |
| 12 | +import './App.scss'; |
| 13 | +import {QBConfig} from "./QBconfig"; |
| 14 | +import {Route, Routes, useNavigate} from "react-router-dom"; |
| 15 | +import Auth from "./layout/Auth/Auth"; |
| 16 | +import SignIn from "./SignIn/SignIn"; |
| 17 | +import SignUp from "./SignUp/SignUp"; |
| 18 | + |
| 19 | +function App() { |
| 20 | + const qbUIKitContext: QBDataContextType = useQbUIKitDataContext(); |
| 21 | + |
| 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 | + |
| 54 | + const [isUserAuthorized, setUserAuthorized] = React.useState(false); |
| 55 | + const [isSDKInitialized, setSDKInitialized] = React.useState(false); |
| 56 | + |
| 57 | + const [theme, setTheme] = useState('lightTheme'); |
| 58 | + const [errorMessage, setErrorMessage] = useState(''); |
| 59 | + |
| 60 | + const initLoginData: LoginData = { |
| 61 | + login: '', |
| 62 | + password: '', |
| 63 | + }; |
| 64 | + |
| 65 | + const [currentUser, setCurrentUser] = React.useState(initLoginData); |
| 66 | + const navigate = useNavigate(); |
| 67 | + |
| 68 | + const loginHandler = async (data: any): Promise<void> => { |
| 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.') |
| 81 | + } |
| 82 | + }; |
| 83 | + |
| 84 | + const createUserHandler = async (data: UserData): Promise<void> => { |
| 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.'); |
| 109 | + } |
| 110 | + }; |
| 111 | + |
| 112 | + const logoutUIKitHandler = async () => { |
| 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 | + } |
| 122 | + } |
| 123 | + |
| 124 | + const loginAction = async (loginData: LoginData): Promise<void> => { |
| 125 | + if (isSDKInitialized && !isUserAuthorized) { |
| 126 | + if (loginData.login.length > 0 && loginData.password.length > 0) { |
| 127 | + await createUserSession(loginData) |
| 128 | + .then( async resultUserSession => { |
| 129 | + await connectToChatServer( |
| 130 | + resultUserSession, |
| 131 | + currentUser.login) |
| 132 | + .then( async authData => { |
| 133 | + await qbUIKitContext.authorize(authData); |
| 134 | + qbUIKitContext.setSubscribeOnSessionExpiredListener(() => { |
| 135 | + console.timeLog('call OnSessionExpiredListener ... start') |
| 136 | + logoutUIKitHandler(); |
| 137 | + console.log('OnSessionExpiredListener ... end'); |
| 138 | + }); |
| 139 | + setSDKInitialized(true); |
| 140 | + setUserAuthorized(true); |
| 141 | + document.documentElement.setAttribute('data-theme', theme); |
| 142 | + navigate('/'); |
| 143 | + }) |
| 144 | + .catch( errorChatConnection => { |
| 145 | + handleError(errorChatConnection); |
| 146 | + }); |
| 147 | + }) |
| 148 | + .catch( errorUserSession => { |
| 149 | + handleError(errorUserSession); |
| 150 | + }); |
| 151 | + } |
| 152 | + } |
| 153 | + }; |
| 154 | + |
| 155 | + const handleError = (error: any): void => { |
| 156 | + console.log('error:', JSON.stringify(error)); |
| 157 | + const errorToShow = error.message.errors[0] || 'Unexpected error'; |
| 158 | + setErrorMessage(errorToShow ); |
| 159 | + setUserAuthorized(false); |
| 160 | + navigate('/sign-in'); |
| 161 | + }; |
| 162 | + |
| 163 | + useEffect(() => { |
| 164 | + if (isSDKInitialized) { |
| 165 | + if (currentUser |
| 166 | + && currentUser.login.length > 0 |
| 167 | + && currentUser.password.length > 0) { |
| 168 | + loginAction(currentUser); |
| 169 | + } else { |
| 170 | + console.log('auth flow has canceled ...'); |
| 171 | + } |
| 172 | + } |
| 173 | + |
| 174 | + }, [isSDKInitialized]); |
| 175 | + |
| 176 | + useEffect(() => { |
| 177 | + if (!isSDKInitialized) { |
| 178 | + prepareSDK().then(result => { |
| 179 | + setSDKInitialized(true); |
| 180 | + setUserAuthorized(false); |
| 181 | + }).catch( |
| 182 | + e => { |
| 183 | + console.log('init SDK has error: ', e) |
| 184 | + }); |
| 185 | + } |
| 186 | + }, []); |
| 187 | + |
| 188 | + |
| 189 | + return ( |
| 190 | + <QuickBloxUIKitProvider |
| 191 | + maxFileSize={100 * 1000000} |
| 192 | + accountData={{ ...QBConfig.credentials }} |
| 193 | + loginData={{ |
| 194 | + login: currentUser.login, |
| 195 | + password: currentUser.password, |
| 196 | + }} |
| 197 | + qbConfig={{...QBConfig}} |
| 198 | + > |
| 199 | + <div> |
| 200 | + |
| 201 | + <Routes> |
| 202 | + <Route |
| 203 | + path="/" element={ |
| 204 | + isUserAuthorized |
| 205 | + ? |
| 206 | + <div> |
| 207 | + <div className="main-buttons-wrapper"> |
| 208 | + <MainButton |
| 209 | + typeButton={TypeButton.outlined} |
| 210 | + title="Light Theme" |
| 211 | + styleBox={{width: "200px", height: "20px"}} |
| 212 | + clickHandler = {() => { |
| 213 | + document.documentElement.setAttribute('data-theme', 'light'); |
| 214 | + }} |
| 215 | + /> |
| 216 | + <MainButton |
| 217 | + typeButton={TypeButton.defaultDisabled} |
| 218 | + title="Dark Theme" |
| 219 | + styleBox={{width: "200px", height: "20px"}} |
| 220 | + clickHandler = {() => { |
| 221 | + document.documentElement.setAttribute('data-theme', 'dark'); |
| 222 | + }} |
| 223 | + /> |
| 224 | + <MainButton |
| 225 | + typeButton={TypeButton.danger} |
| 226 | + title="Log Out" |
| 227 | + styleBox={{width: "200px", height: "20px"}} |
| 228 | + clickHandler = { logoutUIKitHandler } |
| 229 | + /> |
| 230 | + </div> |
| 231 | + {/*<QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />*/} |
| 232 | + <QuickBloxUIKitDesktopLayout uikitHeightOffset="32px"/> |
| 233 | + </div> |
| 234 | + : |
| 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} />} />}/> |
| 238 | + </Routes> |
| 239 | + </div> |
| 240 | + </QuickBloxUIKitProvider> |
| 241 | + ); |
| 242 | +} |
| 243 | + |
| 244 | +export default App; |
0 commit comments