Attempt to implement settings syncing

ReactView.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import App from "./view/App";
 
-export const ReactView = () => {
-  return <App />;
-};
+export default function ReactView(props: any){
+  return(
+    <App username={props.userID} apiToken={props.tokenAPI}/>
+  )
+}

main.ts

@@ -4,9 +4,13 @@ import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
 
 interface ExamplePluginSettings {
     dateFormat: string
+    userID: string
+    apiToken: string
 }
 const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
-    dateFormat: "YYYY-MM-DD"
+    dateFormat: "YYYY-MM-DD",
+    userID: "",
+    apiToken: ""
 }
 export default class ExamplePlugin extends Plugin {
     settings: ExamplePluginSettings;

old_view.ts

@@ -1,12 +1,14 @@
 import { ItemView,WorkspaceLeaf } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { ReactView } from "./ReactView";
+import ReactView from "./ReactView";
+import ExamplePlugin from "main";
 
 
 export const VIEW_TYPE_EXAMPLE = "example-view"
 
 export class ExampleView extends ItemView {
+    plugin: ExamplePlugin;
     constructor(leaf: WorkspaceLeaf) {
         super(leaf)
     }

package.json

@@ -17,8 +17,11 @@
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "css-loader": "^6.4.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
     "rollup": "^2.32.1",
+    "style-loader": "^3.3.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
   },

settings.ts

@@ -26,5 +26,31 @@ export class ExampleSettingsTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     })
             );
+
+        new Setting(containerEl)
+        .setName("Habitica User ID")
+        .setDesc("Can be found in Settings > API")
+        .addText((text) => 
+            text
+                .setPlaceholder("User ID")
+                .setValue(this.plugin.settings.userID)
+                .onChange(async (value) => {
+                    this.plugin.settings.userID = value;
+                    await this.plugin.saveSettings();
+                })
+        );
+
+        new Setting(containerEl)
+        .setName("Habitica API Token")
+        .setDesc("Can be found in Settings > API")
+        .addText((text) => 
+            text
+                .setPlaceholder("API Token")
+                .setValue(this.plugin.settings.apiToken)
+                .onChange(async (value) => {
+                    this.plugin.settings.apiToken = value;
+                    await this.plugin.saveSettings();
+                })
+        );
     }
 }

styles.css

@@ -12,3 +12,24 @@
   .book__author {
     color: var(--text-muted);
   }
+
+.todo-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0px 0px 0;
+  width: 80%;
+  border-bottom: 1px solid #cecece;
+  font-family: Roboto, sans-serif;
+  font-weight: normal;
+  font-size: 16px;
+  color: #ffffff;
+}
+
+input[type=checkbox] {
+  margin-right: 10px;
+}
+
+input[type=checkbox]:focus {
+  outline: 0;
+}

tsconfig.json

@@ -19,5 +19,5 @@
   },
   "include": [
     "**/*.ts"
-  ]
+, "view/TodoItem.tsx"  ]
 }

view.tsx

@@ -0,0 +1,34 @@
+import { ItemView,WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ReactView from "./ReactView";
+import ExamplePlugin from "main";
+
+
+export const VIEW_TYPE_EXAMPLE = "example-view"
+
+export class ExampleView extends ItemView {
+    plugin: ExamplePlugin;
+    constructor(leaf: WorkspaceLeaf) {
+        super(leaf)
+          console.log(this.plugin.settings)    }
+
+    getViewType() {
+        return VIEW_TYPE_EXAMPLE
+    }
+
+    getDisplayText() {
+        return "Example View"
+    }
+
+    async onOpen() {
+        ReactDOM.render(
+            <ReactView userID = {this.plugin.settings.userID} tokenAPI = {this.plugin.settings.apiToken}/>,
+           this.containerEl.children[1]
+        )
+    }
+
+    async onClose(){
+        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+    }
+}

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