Merge pull request #2 from SuperChamp234/show-stats

Stats displayed

main.ts

@@ -3,12 +3,10 @@ import { ExampleSettingsTab } from "./settings";
 import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
 
 interface ExamplePluginSettings {
-    dateFormat: string
     userID: string
     apiToken: string
 }
 const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
-    dateFormat: "YYYY-MM-DD",
     userID: "",
     apiToken: ""
 }
@@ -23,7 +21,7 @@ export default class ExamplePlugin extends Plugin {
             VIEW_TYPE_EXAMPLE,
             (leaf) => (this.view = new ExampleView(leaf, this))
           );
-        this.addRibbonIcon("dice", "Activate view", () => {  //activate view
+        this.addRibbonIcon("dice", "Open Habitica Pane", () => {  //activate view
             this.activateView();
         });
     }

manifest.json

@@ -1,10 +1,10 @@
 {
-	"id": "test-plugin",
-	"name": "Test Plugin",
+	"id": "obsidian-habitica-integration",
+	"name": "AAA Obsidian Habitica Integration",
 	"version": "0.0.1",
 	"minAppVersion": "0.9.12",
-	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
-	"author": "Leoh",
+	"description": "This plugin helps integrate Habitica user tasks and stats into Obsidian",
+	"author": "Leoh and Ran",
 	"authorUrl": "",
 	"isDesktopOnly": false
 }

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "test-plugin",
+  "name": "obsidian-habitica-integration",
   "version": "0.12.0",
-  "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
+  "description": "This plugin allows for Habitica integration into Obsidian",
   "main": "main.js",
   "scripts": {
     "dev": "rollup --config rollup.config.js -w",

view/App.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { getTasks } from "./habiticaAPI"
+import { getTasks, getStats } from "./habiticaAPI"
 import TodoItem from "./TodoItem"
 
 let username = ""
@@ -12,41 +12,74 @@ class App extends React.Component<any,any> {
         credentials = this.props.apiToken
         this.state = {
             isLoaded: false,
-            tasks: ""
+            user_data: {
+                profile: {
+                    name: "",
+                },
+                stats: {
+                    hp: 0,
+                    lvl: 0,
+                }
+            },
+            tasks: []    //gave an error if the the tasks thing was string so better keep it an array for .map to work :)
         }
     }
     componentDidMount() {
-        getTasks(username, credentials)
+        // 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
                     this.setState({
                         isLoaded: true,
-                        tasks: result.data
-                    })
+                        user_data: result,
+                        tasks: result.tasks.todos
+                })
                 },
                 (error) => {
                     this.setState({
                         isLoaded: true,
                         error
-                    })
-                }
+                })
+            }
             )
 
     }
     render(){
         const { error, isLoaded, tasks } = this.state;
+        const user_data = this.state.user_data
         if (error) {
             return <div>Error: {error.message}</div>;
         } else if (!isLoaded) {
             return <div>Loading...</div>;
         } else {
             const listItems = tasks.map((tasks: any) =>
+            <div>
                 <TodoItem key={tasks.id} task={tasks}/>
-                
+            </div>
             );
-            return (
+            return (<div>
+                <h3>{user_data.profile.name}</h3>{"\n"}
+                <div>HP: {user_data.stats.hp}</div><div> XP: {user_data.stats.lvl}</div>{"\n"}
                 <ul>{listItems}</ul>
+                </div>
             );
         }
     }

view/TodoItem.tsx

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

view/habiticaAPI.ts

@@ -14,3 +14,18 @@ export async function getTasks(username: string, credentials: string){
     })
     return (response)
 }
+
+export async function getStats(username: string, credentials: string){
+    const url = "https://habitica.com/export/userdata.json"
+    const response = fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": username.concat("-testAPI"),
+            "x-api-user": username,
+            "x-api-key": credentials,
+        },
+    })
+    console.log("stats") //can't print stats from here since the response is still an unresolved promise
+    return (response)
+}