​
Overview

UIKit includes two main components: QuickBloxUIKitProvider and useUIKitDataContext. They are responsible for handling and storing all the data needed for the client application to function. Working together, they create and implement views. While they don’t provide a user interface themselves, there are specific components dedicated to building the interface. Currently, the following interface components are included: QuickBloxUIKitDesktopLayout and DesktopLayout. QuickBloxUIKitDesktopLayout arranges user components in three columns, optimized for desktop browsers. DesktopLayout manages the routing logic when changing active dialogs. These components serve as wrappers for all interface components to be discussed in the next section Screen Module.
New Updates: Mobile Browser Components Coming Soon to UIKitComponents similar to QuickBloxUIKitDesktopLayout and DesktopLayout, designed for displaying the UIKit on mobile browsers, will be added in future updates.

​
QuickBloxUIKitProvider

The QuickBloxUIKitProvider is the most important component in UIKit for React because it’s the context provider that passes data to the child components. The React Context API is used to easily pass down data through components. By using the useUIKitDataContext() component, you can integrate QuickBlox SDK for React into any of the components under QuickBloxUIKitProvider. The following table shows a list of properties of the QuickBloxUIKitProvider component. List of properties of QuickBloxUIKitProvider:
Property nameTypeDescription
maxFileSizeNumberThe maxFileSize parameter is responsible for the size of files that can be used as attachments in messages. This value depends on the type of your account and affects the duration of the audio message. By default, it does not exceed 10 MB.
accountDataObjectСontains information about SDK initialization settings, such as appId, accountKey, authKey, authSecret, and sessionToken. (Usually matching the credentials section in the settings file)The appId and accountKey parameters are mandatory.While the authKey and authSecret parameters are filled only when storing data in the app. If the initialization occurs on the server using a sessionToken, the authKey and authSecret parameters remain empty. It’s important to note that the accountData structure always includes all fields but fills only the necessary ones./type AccountData = {appId: number;accountKey: string;authSecret?: string;authKey?: string;sessionToken?: string;}; /
loginDataObjectNot required field. It contains data about the logged-in user (login and password, which can be empty). If this structure is used and has changed, it triggers the relogin flow.
Приведем пример кода настройки провайдера link
TypeScript
<QuickBloxUIKitProvider
       maxFileSize={100 * 1000000}
       accountData={{ ...QBConfig.credentials }}
       loginData={{
           login: currentUser.login,
           password: currentUser.password,
       }}
   >
// ...
   </QuickBloxUIKitProvider>

​
useUIKitDataContext

By using the custom hook useUIKitDataContext(), you can integrate QuickBlox SDK for React into any of the components that are inside QuickBloxUIKitProvider in the component hierarchy. This hook is responsible for storing all the data needed for the client application and encapsulates parts of the MVVM pattern such as Source and Repositories. This hook returns the QBDataContextType context variable, whose fields, methods and event are described in the table below. QBDataContextType fields:
Property nameTypeDescription
storageQBDataStorageThis property holds an object of type QBDataStorage, representing some data storage specific to the QBDataContext.The QBDataStorage structure is part of a project implementing the MVVM pattern and provides abstractions for managing various data sources and interacting with business logic.
InitParamsInitParamsThis property holds an object of type InitParams, which likely contains initialization parameters required for the QBDataContext./export type InitParams = {maxFileSize: number;accountData: AccountData;qbConfig?: QBConfig;loginData?: LoginData;}; /
Quick Insights into QBDataStorage: An Overview
type QBDataStorage = {
LOCAL\_DATA\_SOURCE: LocalDataSource;
REMOTE\_DATA\_SOURCE: RemoteDataSource;
SYNC\_DIALOGS\_USE\_CASE: BaseUseCase<boolean, boolean>;
CONNECTION\_REPOSITORY: ConnectionRepository;
EVENT\_MESSAGE\_REPOSITORY: EventMessagesRepository;
};
LOCAL_DATA_SOURCE: This field represents the local data source (LocalDataSource) for storing and managing local information in the project. In our case, it is SessionStorage.REMOTE_DATA_SOURCE: This field represents the remote data source (RemoteDataSource) for handling requests to a remote server or API. In our project, it is a class responsible for handling network requests and fetching data from the server - it acts as a wrapper for all calls to our SDK.SYNC_DIALOGS_USE_CASE: This field represents an instance of a class implementing the base use case (BaseUseCase) for synchronizing dialogs or chats. Use case is a part of the MVVM pattern, denoting a specific action that can be performed when interacting with the user interface or other system components.CONNECTION_REPOSITORY: This field represents the repository (ConnectionRepository) for managing the network or internet connection. It is responsible for checking the availability of the internet connection, managing the network state, and handling network interaction errors.EVENT_MESSAGE_REPOSITORY: This field represents the repository (EventMessagesRepository) for managing messages or events in the system. It is a class that processes and stores information about messages, events, or notifications that should be displayed to the user.
QBDataContextType methods:
method namedescription
updateQBInitParamsThis method allows updating the InitParams property of the QBDataContext with a new value of type InitParams.
releaseThis method is intended to perform some cleanup or resource deallocation when it’s called.
authorizeThis method is an asynchronous function that takes an object of type AuthorizationData as an argument. It is likely used to handle authorization and authentication processes related to the QBDataContext.
setSubscribeOnSessionExpiredListenerThis method sets a listener for handling a session expiration event. It takes a callback function of type CallBackFunction as an argument
The code below (from our sample ) describe how to use hook useUIKitDataContext() to subscribe on session expired event:
TypeScript
const qbUIKitContext: QBDataContextType = useUIKitDataContext();
/*
const authData: AuthorizationData = {
                    userId: 'VALUE_FROM_USER_SESSION',
                    password: 'SESSION_TOKEN',
                    userName: 'LOGIN_USER',
                    sessionToken: 'SESSION_TOKEN',
                };
*/
//...
await qbUIKitContext.authorize(authData);
qbUIKitContext.setSubscribeOnSessionExpiredListener(() => {
                                        console.log('Session has Expired');
                                    });

​
DesktopLayout

The DesktopLayout component represents the main layout structure for desktop browsers. It includes three sections and theme. Sections mean columns, each of which contains special components.
  • The first section, dialogsView, is intended to display the list of dialogs. The DialogsComponent component is responsible for displaying this section.
  • The second section, dialogMessagesView, allows viewing the list of messages from the selected dialog (chat). The MessagesView component handles the display and logic of this section.
  • The third section, dialogInfoView, is responsible for showing the settings of a specific chat, such as the list of participants, name, and icon. The DialogInformation component handles the display and logic of this section.
Thus, the DesktopLayout component combines these three sections (columns) into a convenient and functional structure for representing and interacting with dialog and chat data in the application.
TypeScript
<DesktopLayout
      theme={theme}
      dialogsView={
        <DialogsComponent
         // ...
       />
      }
      dialogMessagesView={
          <MessagesView
           // ...
         />
      }
      dialogInfoView={
          <DialogInformation
           // ...
          />
      }
   />
List of properties of DesktopLayout component:
Property nameTypeDescription
themeUiKitThemeThe custom or default UIKit theme is used to style all the inner components. link
dialogsViewReact Node Element (React.ReactNode)The components responsible for creating the layout of the dialogs list and handling its functionality. Usually, this is the DialogsComponent component from our UIKit, which serves as the View part of the MVVM pattern.
dialogMessagesViewReact Node Element (React.ReactNode)The components responsible for creating the layout of the selected dialog’s messages list and handling its functionality - what we call the chat. Usually, this is the MessagesView component from our UIKit, which serves as the View part of the MVVM pattern.
dialogInfoViewReact Node Element (React.ReactNode)The components responsible for creating the layout of the selected dialog’s information - changing the name, adding or removing participants from the dialog. Usually, this is the DialogInformation component from our UIKit, which serves as the View part of the MVVM pattern.

​
QuickBloxUIKitDesktopLayout

The QuickBloxUIKitDesktopLayout component is a wrapper around DesktopLayout and hides the useEffect hooks.
Customize Your Layout: Explore QuickBloxUIKitDesktopLayout and DesktopLayoutYou can find the code for QuickBloxUIKitDesktopLayout and DesktopLayout in *src/Presentation/components/layouts/Desktop. Pay attention to DesktopLayout.scss, where you can make changes to the markup, such as sizing and ordering of columns. link