Install

npm install chat-frontend-library --save

Usage

Create Redux store:

import { configureStore } from '@reduxjs/toolkit';
import { chatApi, chatAppSlice, commonApi } from 'chat-frontend-library';

 const store = configureStore({
  reducer: {
    [commonApi.reducerPath]: commonApi.reducer,
    [chatApi.reducerPath]: chatApi.reducer,
    [chatAppSlice.name]: chatAppSlice.reducer,
    ...
    //Add your reducers if necessary
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(commonApi.middleware, chatApi.middleware, ...),
});
export default store;

Wrap your root component file in a Provider:

import store from './store';
import { Provider } from "react-redux";

 <Provider store={store}>
   <App />
 </Provider>

Imports

Import the components and constants from the package into the file:

import { Chat, ChatList, LS_TOKEN_KEY, LS_USER_ID } from "chat-frontend-library";

Important

After logging the user into your application, you should set the access token in the local storage of the browser for the chat components:

localStorage.setItem(LS_TOKEN_KEY, access_token);

After calling the function to refresh a token from your app, the new received token must be installed in local storage of the browser under the key LS_TOKEN_KEY and returned from the function.

Chat Component

import { Chat } from "chat-frontend-library";

  <Chat
    opponent_id="opponent_id"
    user_id="user_id"
    user_locale="locale"
    isOnlyChat={true}
    cbHandleCloseChat={cbCloseChat}
    handleRefreshToken={cbRefreshToken}
    classHeader="customCSSClass"
    classMessages="customCSSClass"
  />

Chat props

| prop | default | type | description | | :----------------- | :------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | | opponent_id | none | string | User opponent ID | | user_id | none | string | User id got from the access token by decoding | | user_locale | ru/en | string | Chat interface language. The browser language is set by default | | isOnlyChat | none | boolean | true value is set when only the chat close functionality is used. false allows more chat functionality | | cbHandleCloseChat | none | function | A callback function that is called when the user clicks the close chat button | | handleRefreshToken | none | function | An asynchronous callback function that is called if the chat API call returns an error. Takes an axios error as an argument. Should return the new user token | | classHeader | " " | string | Adds a custom style class for the Chat header | | classMessages | " " | string | Adds a custom style class for the box with messages |

ChatList Component

import { ChatList } from "chat-frontend-library";

  <ChatList
    user_id="user_id"
    user_locale="locale"
    isOnlyChatList={true}
    cbHandleCloseChatList={handleCloseList}
    handleRefreshToken={handleRefreshToken}
    classList="customCSSClass"
    cbHandleOpenChat={handleOpenChat}
  />

ChatList props

| prop | default | type | description | | :-------------------- | :------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | user_id | none | string | User id got from the access token by decoding | | user_locale | ru/en | string | ChatList interface language. The browser language is set by default. | | isOnlyChatList | none | boolean | true value is set when only the chat list close functionality is used. false allows more chat list functionality. | | cbHandleCloseChatList | none | function | A callback function that is called when the user clicks the close chat button. | | cbHandleOpenChat | none | function | A callback function that is called when the user clicks on a specific chat in the list. Takes an object as a function argument: {chat_id:string; opponent_id:string} | | handleRefreshToken | none | function | An asynchronous callback function that is called if the chat API call returns an error. Takes an axios error as an argument. Should return the new user token. | | classList | " " | string | Adds a custom style class for the ChatList wrapper |