Nefarious Pomegranate Magnate

    @groupbwt/kanban-board-firebase

    1.0.13 • Public • Published

    English description | Russian description

    Kanban board firebase

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

    Content

    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: 'user@email.com', // 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: 'user@email.com', // 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();
        }, []);
        //...
    }

    Install

    npm i @groupbwt/kanban-board-firebase

    DownloadsWeekly Downloads

    2

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    42.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • groupbwt-admin
    • naymkazp
    • rezord
    • vitaliy_nedoshivko