Checkboxes sync enabled

view/App.tsx

@@ -1,5 +1,6 @@
+import { Tasks } from "obsidian";
 import * as React from "react";
-import { getTasks, getStats } from "./habiticaAPI"
+import { getStats, scoreTask } from "./habiticaAPI"
 import TodoItem from "./TodoItem"
 
 let username = ""
@@ -21,32 +22,17 @@ class App extends React.Component<any,any> {
                     lvl: 0,
                 }
             },
-            tasks: []    //gave an error if the the tasks thing was string so better keep it an array for .map to work :)
+            tasks: []
         }
+        this.handleChange = this.handleChange.bind(this)
     }
-    componentDidMount() {
+    reloadData() {
-        // getTasks(username, credentials)
-        //     .then(res => res.json())
-        //     .then(
-        //         result => {
-        //             this.setState({
-        //                 isLoaded: true,
-        //                 tasks: result.data
-        //             })
-        //         },
-        //         (error) => {
-        //             this.setState({
-        //                 isLoaded: true,
-        //                 error
-        //             })
-        //         }
-        //     )
-        
         getStats(username, credentials)
             .then(res => res.json())
             .then(
                 result => {
-                    console.log(result) //yup this prints out correctly! since the promise is handled by .then
+                    console.log(result)
+                    console.log("data reloaded")
                     this.setState({
                         isLoaded: true,
                         user_data: result,
@@ -60,8 +46,38 @@ class App extends React.Component<any,any> {
                 })
             }
             )
-
     }
+    componentDidMount() {
+        this.reloadData()
+    }
+    handleChange(event: any){
+        this.state.tasks.forEach((element: any) => {
+            if(element.id == event.target.id){
+                if(!element.completed){
+                    scoreTask(username, credentials, event.target.id, "up")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                console.log("Checked!")
+                                console.log(result)
+                                this.reloadData()
+                            }
+                        )
+                } else {
+                    scoreTask(username, credentials, event.target.id, "down")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                console.log("unchecked!")
+                                console.log(result)
+                                this.reloadData()
+                            }
+                        )
+                }
+            }
+        })
+    }
+
     render(){
         const { error, isLoaded, tasks } = this.state;
         const user_data = this.state.user_data
@@ -71,9 +87,7 @@ class App extends React.Component<any,any> {
             return <div>Loading...</div>;
         } else {
             const listItems = tasks.map((tasks: any) =>
-            <div>
+                <TodoItem  key={tasks.id} id={tasks.id} task={tasks} completed={tasks.completed} onChange={this.handleChange}/>
-                <TodoItem key={tasks.id} task={tasks}/>
-            </div>
             );
             return (<div>
                 <h3>{user_data.profile.name}</h3>{"\n"}

view/TodoItem.tsx

@@ -2,8 +2,8 @@
 
 function TodoItem(props: any) {
     return (
-        <div className="todo-item" key = {props.key}>
+        <div className="todo-item" id={props.id}>
-            <input type="checkbox" />
+            <input type="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
             <p>{props.task.text}</p>
         </div>
     )

view/habiticaAPI.ts

@@ -1,20 +1,5 @@
 // import fetch from "node-fetch";
 
-
-export async function getTasks(username: string, credentials: string){
-    const url = "https://habitica.com/api/v3/tasks/user?type=todos"
-    const response = fetch(url, {
-        method: 'GET',
-        headers: {
-            "Content-Type": "application/json",
-            "x-client": username.concat("-testAPI"),
-            "x-api-user": username,
-            "x-api-key": credentials,
-        },
-    })
-    return (response)
-}
-
 export async function getStats(username: string, credentials: string){
     const url = "https://habitica.com/export/userdata.json"
     const response = fetch(url, {
@@ -26,6 +11,19 @@ export async function getStats(username: string, credentials: string){
             "x-api-key": credentials,
         },
     })
-    console.log("stats") //can't print stats from here since the response is still an unresolved promise
+    return (response)
+}
+
+export async function scoreTask(username: string, credentials: string, taskID: string, direction: string) {
+    const url = "https://habitica.com/api/v3/tasks/".concat(taskID).concat("/score/").concat(direction)
+    const response = fetch(url, {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": username.concat("-testAPI"),
+            "x-api-user": username,
+            "x-api-key": credentials,
+        }
+    })
     return(response)
 }