fixed stats display, and fixed react warning for keys

view/App.tsx

@@ -12,47 +12,59 @@ 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
-                    })
-                }
-            )
-        
-        getStats(username, credentials)
-        .then(res => res.json())
-        .then(
-            result => {
-                this.setState({
-                    isLoaded: true,
-                    stats: result.data
-                })
-            },
-            (error) => {
-                this.setState({
-                    isLoaded: true,
-                    error
                 })
             }
-        )
+            )
 
     }
     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 above")
+    console.log("stats") //can't print stats from here since the response is still an unresolved promise
     return (response)
 }