Attempt to implement settings syncing

view/App.tsx

@@ -1,12 +1,15 @@
 import * as React from "react";
 import { getTasks } from "./habiticaAPI"
+import TodoItem from "./TodoItem"
 
-const username = "<key>"
-const credentials = "<key>"
+let username = ""
+let credentials = ""
 
 class App extends React.Component<any,any> {
     constructor(props: any) {
         super(props)
+        username = this.props.username
+        credentials = this.props.apiToken
         this.state = {
             isLoaded: false,
             tasks: ""
@@ -40,7 +43,8 @@ class App extends React.Component<any,any> {
             return <div>Loading...</div>;
         } else {
             const listItems = tasks.map((tasks: any) =>
-                <li>{tasks.text}</li>
+                <TodoItem key={tasks.id} task={tasks}/>
+                
             );
             return (
                 <ul>{listItems}</ul>

view/TodoItem.tsx

@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function TodoItem(props: any) {
+    return (
+        <div className="todo-item">
+            <input type="checkbox" />
+            <p>{props.task.text}</p>
+        </div>
+    )
+}
+
+export default TodoItem