chat-frontend-library

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

---