fixed stats display, and fixed react warning for keys

view/App.tsx

@@ -12,34 +12,45 @@ 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(res => res.json())
-            .then(
+        //     .then(
-                result => {
+        //         result => {
-                    this.setState({
+        //             this.setState({
-                        isLoaded: true,
+        //                 isLoaded: true,
-                        tasks: result.data
+        //                 tasks: result.data
-                    })
+        //             })
-                },
+        //         },
-                (error) => {
+        //         (error) => {
-                    this.setState({
+        //             this.setState({
-                        isLoaded: true,
+        //                 isLoaded: true,
-                        error
+        //                 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,
-                    stats: result.data
+                        user_data: result,
+                        tasks: result.tasks.todos
                 })
                 },
                 (error) => {
@@ -52,7 +63,8 @@ class App extends React.Component<any,any> {
 
     }
     render(){
-        const { error, isLoaded, tasks, stats } = this.state;
+        const { error, isLoaded, tasks } = this.state;
+        const user_data = this.state.user_data
         if (error) {
             return <div>Error: {error.message}</div>;
         } else if (!isLoaded) {
@@ -61,11 +73,13 @@ class App extends React.Component<any,any> {
             const listItems = tasks.map((tasks: any) =>
             <div>
                 <TodoItem key={tasks.id} task={tasks}/>
-                <p>{stats}</p>
             </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

@@ -26,7 +26,6 @@ export async function getStats(username: string, credentials: string){
             "x-api-key": credentials,
         },
     })
-    console.log(response)
+    console.log("stats") //can't print stats from here since the response is still an unresolved promise
-    console.log("stats above")
     return (response)
 }