Core components

​

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.

​

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:

Приведем пример кода настройки провайдера link

<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:

type QBDataStorage = {
LOCAL\_DATA\_SOURCE: LocalDataSource;
REMOTE\_DATA\_SOURCE: RemoteDataSource;
SYNC\_DIALOGS\_USE\_CASE: BaseUseCase<boolean, boolean>;
CONNECTION\_REPOSITORY: ConnectionRepository;
EVENT\_MESSAGE\_REPOSITORY: EventMessagesRepository;
};

QBDataContextType methods:

The code below (from our sample ) describe how to use hook useUIKitDataContext() to subscribe on session expired event:

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.

<DesktopLayout
      theme={theme}
      dialogsView={
        <DialogsComponent
         // ...
       />
      }
      dialogMessagesView={
          <MessagesView
           // ...
         />
      }
      dialogInfoView={
          <DialogInformation
           // ...
          />
      }
   />

List of properties of DesktopLayout component:

​

QuickBloxUIKitDesktopLayout

The QuickBloxUIKitDesktopLayout component is a wrapper around DesktopLayout and hides the useEffect hooks.