Merge pull request #1 from SuperChamp234/settings-sync

Working settings Sync, user can just add their API keys and userIDs in the settings tab for the plugin

.gitignore

@@ -14,4 +14,11 @@ main.js
 data.json
 
 #vscode
-.vscode
+.vscode
+
+#buildfiles
+settings.js
+view/App.js
+ReactView.js
+settings.js
+view.js

ReactView.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import App from "./view/App";
 
-export const ReactView = () => {
+export default function ReactView(props: any){
-  return <App />;
+  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;
@@ -17,7 +21,7 @@ export default class ExamplePlugin extends Plugin {
         this.addSettingTab(new ExampleSettingsTab(this.app, this));
         this.registerView(
             VIEW_TYPE_EXAMPLE,
-            (leaf) => (this.view = new ExampleView(leaf))
+            (leaf) => (this.view = new ExampleView(leaf, this))
           );
         this.addRibbonIcon("dice", "Activate view", () => {  //activate view
             this.activateView();

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

@@ -12,19 +12,31 @@ export class ExampleSettingsTab extends PluginSettingTab {
     display(): void {
         let { containerEl } = this;
         containerEl.empty();
-        
+
         new Setting(containerEl)
-            .setName("Date format")
+        .setName("Habitica User ID")
-            .setDesc("Default date format")
+        .setDesc("Can be found in Settings > API")
-            .addText((text) => 
+        .addText((text) => 
-            
+            text
-                text
+                .setPlaceholder("User ID")
-                    .setPlaceholder("MMMM dd, yyyy")
+                .setValue(this.plugin.settings.userID)
-                    .setValue(this.plugin.settings.dateFormat)
+                .onChange(async (value) => {
-                    .onChange(async (value) => {
+                    this.plugin.settings.userID = value;
-                        this.plugin.settings.dateFormat = value;
+                    await this.plugin.saveSettings();
-                        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

@@ -11,4 +11,25 @@
   
   .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,35 @@
+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, plugin: ExamplePlugin) {
+        super(leaf)
+        this.plugin = plugin
+    }
+
+    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>"
+let username = ""
-const credentials = "<key>"
+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: ""
@@ -17,7 +20,6 @@ class App extends React.Component<any,any> {
             .then(res => res.json())
             .then(
                 result => {
-                    console.log(result.data)
                     this.setState({
                         isLoaded: true,
                         tasks: result.data
@@ -40,7 +42,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