first install node moduels

npm install

TO start

npm start

How it work

The idea of this widget is not built html its give all what you need to connect with asana auth2 and specific jobs by giving you many props in store and many actions

simply its connect with asana and set all needed data in store so any developer can use at as he need

How to use it

in your store add reducers and apply middlewares (thunk , asanaWidgetAuthMiddleware) import {asanaWidgetAuthMiddleware, asanaWidgetReducer, asanaAuthReducer as auth} from "react-asana-widget";

const store = createStore(
    combineReducers({
        asanaWidget: asanaWidgetReducer,
        auth
    }),
     applyMiddleware(
        thunk,
        asanaWidgetAuthMiddleware
    )
)

Reducers Name must be the same (asanaWidget , auth)

In your containers import {AsanaWidget, asanaWidgetActions} from "react-asana-widget";

<AsanaWidget
            clientId="yourAsanaClientApp"
            secret="yourAsanaClientSecret"
            projectId="TargetProjcetIdFromAsana web app url"
            workspace="TheWorkspaceName like exporo"    
            loginBtnlabel="Asana Login"
            loginBtnClassName="btn"
            id="TheIdOfTasks"
            type="TheTypeOfTasks"
        >
 
        // here you can add any components you want it to load after asana login success //
 
        
 </AsanaWidget>

All data you need you can find it in asanaWidget reducer so you can use it throw your application

its have

    tasks: [],                  // tasks list after filter
    filterKey: null,            // the key used for filter
    openTask: null,             // open task for edit
    workspaceId: null,          // workspace  
    projectId: null,            // project id
    id: null,                   // TheIdOfTasks
    type: null,                 // TheTypeOfTasks
    saveTaskInProgress: false,  // status of add new task data
    updateTaskInProgress: false, // status of update task data

Also all actions you can use from widget

import {asanaWidgetActions} from "react-asana-widget";
asanaWidgetActions.filterTasks(key) to filter tasks list and the result will be in asanaWdiget,tasks 
asanaWidgetActions.saveNewTask({name:'taskname',notes:'taskNotes'})
asanaWidgetActions.updateTask({taskId:123,name:'taskname',notes:'taskNotes'})

Example

You can find full example under example folder