npm package: @groupbwt/kanban-board-firebase
Description: This package helps you organize your Kanban board data using firebase.
Author: Vitaliy Nedoshivko
Latest version: 1.0.13

<p align="right">
English description | <a href="README_RU.md">Russian description</a> 
</p>

# Kanban board firebase

This package helps you organize your Kanban board data using [firebase](https://firebase.google.com/).

## Content
- [Installation](#installation)
- [Example](#example)
  - [Initialization](#initialization)
  - [Lane methods](#lane-methods)
  - [Card methods](#card-methods)
  - [Authentication](#authentication)
- [License](LICENSE.md)

## Installation

Using npm:

```shell
$ npm i @groupbwt/kanban-board-firebase
```

Note: add `--save', if you use npm <5.0.0

## Example

First you need to create a project and an application [firebase](https://firebase.google.com/).

### Initialization

Pass apiKey, authDomain, projectId in initializeApp.([Firebase config object](https://firebase.google.com/docs/web/setup#config-object))
```js
// api.js
import { initializeApp } from "@groupbwt/kanban-board-firebase";

const { lane, card, db, app } = initializeApp({
    apiKey: FIREBASE.API_KEY,
    authDomain: FIREBASE.AUTH_DOMAIN,
    projectId: FIREBASE.PROJECT_ID
});
```
Now you can use lane and card as API.

### Lane methods 
| Method                     | Description |
|-----                      |   ---- |
| [get()](#laneget)         | Get all columns and cards of this user.|
| [create()](#lanecreate)   | Add a column.|
| [update()](#laneupdate)   | Change column title.|
| [remove()](#laneremove)   | Delete column.|
| [move()](#lanemove)       | Change column position.|

#### lane.get()
Get all columns and cards of this user.

```js
import { lane } from "./api";

const getAllLanes = async () => {
    try {
       // ...
       const lanes = await lane.get();
       // ...   
    } catch (e) {
      // ...
    }
}
```

#### lane.create()
Add a column.

```js
import { lane } from "./api";

const createLane = async () => {
    try {
        // ...    
        const id = await lane.create({
            title: 'hello',
            ownerId: 'userId',
            pos: 222
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

#### lane.update()
Change column title.
```js
import { lane } from "./api";

const updateLane = async () => {
    try {
        // ...    
        await lane.update('laneId-1', {
            title: "hello world"
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

#### lane.remove()
Delete column.
```js
import { lane } from "./api";

const removeLane = async () => {
    try {
        // ...    
        await lane.remove('laneId-1');
        // ...
    } catch (e) {
      // ...
    }
}
```

#### lane.move()
Change column position.

```js
import { lane } from "./api";

const dropLane = async () => {
    try {
        // ...    
        await lane.move({
            id: 'laneId-1',
            pos: 255
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

### Card methods
| Метод                     | Описание |
|-----                      | ---- |
| [create()](#cardcreate)   | Add a card.|
| [update()](#cardupdate)   | Change card position.|
| [remove()](#cardremove)   | Delete card.|
| [move()](#cardmove)       | Change card position.|


#### card.create()
Add a card.

```js
import { card } from "./api";

const createCard = async () => {
    try {
        // ...    
        const id = await card.create({
            laneId: 'laneId-1',
            data: {
                pos: 135,
                title: 'titleCard'
            }
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

#### card.update()
Change card position.

```js
import { card } from "./api";

const updateCard = async () => {
    try {
        // ...    
        await card.update({
            laneId: 'laneId-1',
            id: 'idCard-1',
            data: {
              title: 'newTitleCard'
            }
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

#### card.remove()
Delete card.

```js
import { card } from "./api";

const removeCard = async () => {
    try {
        // ...    
        await card.remove({
            laneId: 'laneId-1',
            id: 'idCard-1'        
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

#### card.move()
Change card position.

```js
import { card } from "./api";

const dropCard = async () => {
    try {
        // ...    
        await card.move({
              fromLaneId: 'laneId-1',
              toLaneId: 'laneId-2',
              id: 'idCard',
              posTo: 1539
        });
        // ...
    } catch (e) {
      // ...
    }
}
```

<!--Detailed information about the methods can be found on the page. -->

### Authentication
The user information is saved locally in Firebase. 
It is not necessary to save the token. User will remain even after page refresh.

#### Registration
Password and login are required for registration.

```js
import { signUp } from "@groupbwt/kanban-board-firebase";

const signUpUser = async () => {
    try {
       // ...
        const user = await signUp({
            email: 'user@email.com', // user's email 
            password: '123456' // user's password   
        });
       // ...   
    } catch (e) {
      // ...
    }
}
```
#### Authorization
Password and login are required for authorization.

```js
import { signIn } from "@groupbwt/kanban-board-firebase";

const signInUser = async () => {
    try {
       // ...
        const user = await signIn({
            email: 'user@email.com', // user's email 
            password: '123456' // user's password   
        });
       // ...   
    } catch (e) {
      // ...
    }
}
```
### To log out the user

```js
import { signOut } from "@groupbwt/kanban-board-firebase";

const signOutUser = async () => {
    try {
       // ...
        await signOut();
       // ...   
    } catch (e) {
      // ...
    }
}
```

#### Subscription to user information updates
You can subscribe to user information updates.

##### React.js example
```jsx
import { useEffect } from 'react';
import { onAuthChanged } from '@groupbwt/kanban-board-firebase';

const App = () => {
    //...
    useEffect(() => {
        const unsubscriber = onAuthChanged((user) => {
            if (user) {
                // User is signed in.
            } else {
                // No user is signed in.
            }
        });

        return () => unsubscriber();
    }, []);
    //...
}
```