Core components

Overview

Core components play a crucial role in UIKit for React. 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 UI Kit

Components similar to QuickBloxUIKitDesktopLayout and DesktopLayout, designed for displaying the UI Kit 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:

Приведем пример кода настройки провайдера 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:

📘

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:

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.

👍

Customize Your Layout: Explore QuickBloxUIKitDesktopLayout and DesktopLayout

You 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