Infinity-tasker NPM

Tasker

Getting Started

using the infinity-tasker requires you to place the build directory in your project and use it as a package.

in order to communicate with the authentication service the package must be initialized using the user's session token.

import tasker from './infinity-tasker';
tasker(token);

Usage

Toaster

import React from 'react';
import { Toaster } from './infinity-tasker';

const App = () => {
  return (
    <>
      <Toaster />
      <div>...</div>
    </>
  );
}

UserTasks, Task

import React, { useState } from 'react';
import { UserTasks, Task } from './infinity-tasker';

const App = () => {
  const [ taskId, setTaskId ] = useState(null);

  return (
    taskId === null
    ? <UserTasks onTaskClick={ setTaskId } />
    : <Task taskId={ taskId } />
  );
}

CreateTask

import React from 'react';
import { CreateTask } from './infinity-tasker';

const initialName = 'New Task';
const initialUsers = [
    {
        "id": "5e6e588ea152c76154a6b6c3",
        "firstName": "foo"
        "lastName": "fee"
    },
    {
        "id": "5e6e588da152c76154a6b6c1",
        "firstName": "bar",
        "lastName": "bara"
    },
];
const otherUsers = [
    {
        "id": "5e6e588ea152c753d4a6b6c3",
        "firstName": "tar"
        "lastName": "gz"
    },
    {
        "id": "5e6e588da152c735a4a6b6c1",
        "firstName": "biz",
        "lastName": "com"
    },
];
const initialItems = [
    { name: 'item1' },
    { name: 'item2' },
    { name: 'item3' },
];

const initialObjectives = [
    {
        name: 'keywords',
        statuses: [
            {
                name: 'todo',
                alert: false,
                color: 'grey'
            },
            {
                name: 'doing',
                alert: false,
                color: 'yellow'
            },
            {
                name: 'done',
                alert: false,
                color: 'green'
            },
            {
                name: 'need help',
                alert: true,
                color: 'red'
            },
        ]
    },
    {
        name: 'questions',
        statuses: [
            {
                name: 'todo',
                alert: false,
                color: 'grey'
            },
            {
                name: 'doing',
                alert: false,
                color: 'yellow'
            },
            {
                name: 'done',
                alert: false,
                color: 'green'
            },
            {
                name: 'need help',
                alert: true,
                color: 'red'
            },
        ]
    },
    {
        name: 'exercises',
        statuses: [
            {
                name: 'todo',
                alert: false,
                color: 'grey'
            },
            {
                name: 'doing',
                alert: false,
                color: 'yellow'
            },
            {
                name: 'done',
                alert: false,
                color: 'green'
            },
            {
                name: 'need help',
                alert: true,
                color: 'red'
            },
        ]
    },
];

const App = () => {
  return (
    <CreateTask 
      onChooseUsers={ setUsersList => setUsersList(otherUsers) }
      initialName={ initialName }
      initialObjectives={ initialObjectives }
      initialItems={ initialItems }
      initialUsers={ initialUsers }
      initialDeadline={ new Date() }
      initialReviewRequired={ true }
      onSuccess={ res => console.log(res) }
    />
  );
}

Data Types

colors: grey yellow green blue red

Components

Create Task

props	default	required	type
onSuccess	-	`true`	`Function`: res => { ... }
onChooseUsers	-	`true`	`Function`: setUsers => { ...; setUsers(...) }
initialName	''	`false`	`String`
initialDeadline	-	`false`	`Date`
initialReviewRequired	false	`false`	`boolean`
initialUsers	[]	`false`	`List` - { id: string, firstName: string, lastNAme: string }
initialItems	[]	`false`	`List` - { name: string }
initialObjectives	[]	`false`	`List` - { name: string, statuses: { name: string, color: string, alert: boolean } }