1.0.6 • Published 6 years ago
react-asana-widget v1.0.6
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