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

---