@groupbwt/kanban-board-firebase

English description | Russian description

Kanban board firebase

This package helps you organize your Kanban board data using firebase.

Content

• Installation
• Example
  • Initialization
  • Lane methods
  • Card methods
  • Authentication
• License

Installation

Using npm:

$ 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.

Initialization

Pass apiKey, authDomain, projectId in initializeApp.(Firebase config object)

// 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()	Get all columns and cards of this user.
create()	Add a column.
update()	Change column title.
remove()	Delete column.
move()	Change column position.

lane.get()

Get all columns and cards of this user.

import { lane } from "./api";

const getAllLanes = async () => {
    try {
       // ...
       const lanes = await lane.get();
       // ...   
    } catch (e) {
      // ...
    }
}

lane.create()

Add a column.

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.

import { lane } from "./api";

const updateLane = async () => {
    try {
        // ...    
        await lane.update('laneId-1', {
            title: "hello world"
        });
        // ...
    } catch (e) {
      // ...
    }
}

lane.remove()

Delete column.

import { lane } from "./api";

const removeLane = async () => {
    try {
        // ...    
        await lane.remove('laneId-1');
        // ...
    } catch (e) {
      // ...
    }
}

lane.move()

Change column position.

import { lane } from "./api";

const dropLane = async () => {
    try {
        // ...    
        await lane.move({
            id: 'laneId-1',
            pos: 255
        });
        // ...
    } catch (e) {
      // ...
    }
}

Card methods

Метод	Описание
create()	Add a card.
update()	Change card position.
remove()	Delete card.
move()	Change card position.

card.create()

Add a card.

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.

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.

import { card } from "./api";

const removeCard = async () => {
    try {
        // ...    
        await card.remove({
            laneId: 'laneId-1',
            id: 'idCard-1'        
        });
        // ...
    } catch (e) {
      // ...
    }
}

card.move()

Change card position.

import { card } from "./api";

const dropCard = async () => {
    try {
        // ...    
        await card.move({
              fromLaneId: 'laneId-1',
              toLaneId: 'laneId-2',
              id: 'idCard',
              posTo: 1539
        });
        // ...
    } catch (e) {
      // ...
    }
}

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.

import { signUp } from "@groupbwt/kanban-board-firebase";

const signUpUser = async () => {
    try {
       // ...
        const user = await signUp({
            email: '[e-mail]', // user's email 
            password: '123456' // user's password   
        });
       // ...   
    } catch (e) {
      // ...
    }
}

Authorization

Password and login are required for authorization.

import { signIn } from "@groupbwt/kanban-board-firebase";

const signInUser = async () => {
    try {
       // ...
        const user = await signIn({
            email: '[e-mail]', // user's email 
            password: '123456' // user's password   
        });
       // ...   
    } catch (e) {
      // ...
    }
}

To log out the user

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

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();
    }, []);
    //...
}