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";




`

---

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.

---

$3

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

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 |

---

$3

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

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 |

---