Merge pull request #3 from SuperChamp234/checkboxes-sync

Multiple Updates

.gitignore

@@ -15,10 +15,3 @@ data.json
 
 #vscode
 .vscode
-
-#buildfiles
-settings.js
-view/App.js
-ReactView.js
-settings.js
-view.js

ReactView.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+import App from "./view/App";
+export const ReactView = () => {
+    return React.createElement(App, null);
+};

ReactView.tsx

@@ -3,6 +3,6 @@ import App from "./view/App";
 
 export default function ReactView(props: any){
   return(
-    <App username={props.userID} apiToken={props.tokenAPI}/>
+    <App username={props.userID} apiToken={props.tokenAPI} plugin={props.plugin}/>
   )
 }

main.ts

@@ -1,4 +1,4 @@
-import { Plugin } from "obsidian";
+import { Notice, Plugin } from "obsidian";
 import { ExampleSettingsTab } from "./settings";
 import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
 
@@ -14,6 +14,9 @@ export default class ExamplePlugin extends Plugin {
     settings: ExamplePluginSettings;
     view: ExampleView;
 
+    displayNotice(message: string){
+        new Notice(message)
+    }
     async onload() {
         await this.loadSettings();
         this.addSettingTab(new ExampleSettingsTab(this.app, this));

settings.js

@@ -0,0 +1,23 @@
+import { __awaiter } from "tslib";
+import { PluginSettingTab, Setting } from "obsidian";
+export class ExampleSettingsTab extends PluginSettingTab {
+    constructor(app, plugin) {
+        super(app, plugin);
+        this.plugin = plugin;
+    }
+    display() {
+        let { containerEl } = this;
+        containerEl.empty();
+        new Setting(containerEl)
+            .setName("Date format")
+            .setDesc("Default date format")
+            .addText((text) => text
+            .setPlaceholder("MMMM dd, yyyy")
+            .setValue(this.plugin.settings.dateFormat)
+            .onChange((value) => __awaiter(this, void 0, void 0, function* () {
+            this.plugin.settings.dateFormat = value;
+            yield this.plugin.saveSettings();
+        })));
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dGluZ3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJzZXR0aW5ncy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFPLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUUxRCxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsZ0JBQWdCO0lBR3BELFlBQVksR0FBUSxFQUFFLE1BQXFCO1FBQ3ZDLEtBQUssQ0FBQyxHQUFHLEVBQUUsTUFBTSxDQUFDLENBQUE7UUFDbEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7SUFDeEIsQ0FBQztJQUVELE9BQU87UUFDSCxJQUFJLEVBQUUsV0FBVyxFQUFFLEdBQUcsSUFBSSxDQUFDO1FBQzNCLFdBQVcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUVwQixJQUFJLE9BQU8sQ0FBQyxXQUFXLENBQUM7YUFDbkIsT0FBTyxDQUFDLGFBQWEsQ0FBQzthQUN0QixPQUFPLENBQUMscUJBQXFCLENBQUM7YUFDOUIsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FFZCxJQUFJO2FBQ0MsY0FBYyxDQUFDLGVBQWUsQ0FBQzthQUMvQixRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO2FBQ3pDLFFBQVEsQ0FBQyxDQUFPLEtBQUssRUFBRSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7WUFDeEMsTUFBTSxJQUFJLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3JDLENBQUMsQ0FBQSxDQUFDLENBQ1QsQ0FBQztJQUNWLENBQUM7Q0FDSiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBFeGFtcGxlUGx1Z2luIGZyb20gXCJtYWluXCI7XHJcbmltcG9ydCB7IEFwcCwgUGx1Z2luU2V0dGluZ1RhYiwgU2V0dGluZyB9IGZyb20gXCJvYnNpZGlhblwiO1xyXG5cclxuZXhwb3J0IGNsYXNzIEV4YW1wbGVTZXR0aW5nc1RhYiBleHRlbmRzIFBsdWdpblNldHRpbmdUYWIge1xyXG4gICAgcGx1Z2luOiBFeGFtcGxlUGx1Z2luO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKGFwcDogQXBwLCBwbHVnaW46IEV4YW1wbGVQbHVnaW4pIHtcclxuICAgICAgICBzdXBlcihhcHAsIHBsdWdpbilcclxuICAgICAgICB0aGlzLnBsdWdpbiA9IHBsdWdpblxyXG4gICAgfVxyXG5cclxuICAgIGRpc3BsYXkoKTogdm9pZCB7XHJcbiAgICAgICAgbGV0IHsgY29udGFpbmVyRWwgfSA9IHRoaXM7XHJcbiAgICAgICAgY29udGFpbmVyRWwuZW1wdHkoKTtcclxuICAgICAgICBcclxuICAgICAgICBuZXcgU2V0dGluZyhjb250YWluZXJFbClcclxuICAgICAgICAgICAgLnNldE5hbWUoXCJEYXRlIGZvcm1hdFwiKVxyXG4gICAgICAgICAgICAuc2V0RGVzYyhcIkRlZmF1bHQgZGF0ZSBmb3JtYXRcIilcclxuICAgICAgICAgICAgLmFkZFRleHQoKHRleHQpID0+IFxyXG4gICAgICAgICAgICBcclxuICAgICAgICAgICAgICAgIHRleHRcclxuICAgICAgICAgICAgICAgICAgICAuc2V0UGxhY2Vob2xkZXIoXCJNTU1NIGRkLCB5eXl5XCIpXHJcbiAgICAgICAgICAgICAgICAgICAgLnNldFZhbHVlKHRoaXMucGx1Z2luLnNldHRpbmdzLmRhdGVGb3JtYXQpXHJcbiAgICAgICAgICAgICAgICAgICAgLm9uQ2hhbmdlKGFzeW5jICh2YWx1ZSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnBsdWdpbi5zZXR0aW5ncy5kYXRlRm9ybWF0ID0gdmFsdWU7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGF3YWl0IHRoaXMucGx1Z2luLnNhdmVTZXR0aW5ncygpO1xyXG4gICAgICAgICAgICAgICAgICAgIH0pXHJcbiAgICAgICAgICAgICk7XHJcbiAgICB9XHJcbn0iXX0=

view.js

@@ -0,0 +1,28 @@
+import { __awaiter } from "tslib";
+import { ItemView } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactView } from "./ReactView";
+export const VIEW_TYPE_EXAMPLE = "example-view";
+export class ExampleView extends ItemView {
+    constructor(leaf) {
+        super(leaf);
+    }
+    getViewType() {
+        return VIEW_TYPE_EXAMPLE;
+    }
+    getDisplayText() {
+        return "Example View";
+    }
+    onOpen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            ReactDOM.render(React.createElement(ReactView), this.containerEl.children[1]);
+        });
+    }
+    onClose() {
+        return __awaiter(this, void 0, void 0, function* () {
+            ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+        });
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInZpZXcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQWdCLE1BQU0sVUFBVSxDQUFDO0FBQ2xELE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQy9CLE9BQU8sS0FBSyxRQUFRLE1BQU0sV0FBVyxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFHeEMsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsY0FBYyxDQUFBO0FBRS9DLE1BQU0sT0FBTyxXQUFZLFNBQVEsUUFBUTtJQUNyQyxZQUFZLElBQW1CO1FBQzNCLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUNmLENBQUM7SUFFRCxXQUFXO1FBQ1AsT0FBTyxpQkFBaUIsQ0FBQTtJQUM1QixDQUFDO0lBRUQsY0FBYztRQUNWLE9BQU8sY0FBYyxDQUFBO0lBQ3pCLENBQUM7SUFFSyxNQUFNOztZQUNSLFFBQVEsQ0FBQyxNQUFNLENBQ1gsS0FBSyxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsRUFDOUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQy9CLENBQUE7UUFDTCxDQUFDO0tBQUE7SUFFSyxPQUFPOztZQUNULFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2xFLENBQUM7S0FBQTtDQUNKIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSXRlbVZpZXcsV29ya3NwYWNlTGVhZiB9IGZyb20gXCJvYnNpZGlhblwiO1xyXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcclxuaW1wb3J0ICogYXMgUmVhY3RET00gZnJvbSBcInJlYWN0LWRvbVwiO1xyXG5pbXBvcnQgeyBSZWFjdFZpZXcgfSBmcm9tIFwiLi9SZWFjdFZpZXdcIjtcclxuXHJcblxyXG5leHBvcnQgY29uc3QgVklFV19UWVBFX0VYQU1QTEUgPSBcImV4YW1wbGUtdmlld1wiXHJcblxyXG5leHBvcnQgY2xhc3MgRXhhbXBsZVZpZXcgZXh0ZW5kcyBJdGVtVmlldyB7XHJcbiAgICBjb25zdHJ1Y3RvcihsZWFmOiBXb3Jrc3BhY2VMZWFmKSB7XHJcbiAgICAgICAgc3VwZXIobGVhZilcclxuICAgIH1cclxuXHJcbiAgICBnZXRWaWV3VHlwZSgpIHtcclxuICAgICAgICByZXR1cm4gVklFV19UWVBFX0VYQU1QTEVcclxuICAgIH1cclxuXHJcbiAgICBnZXREaXNwbGF5VGV4dCgpIHtcclxuICAgICAgICByZXR1cm4gXCJFeGFtcGxlIFZpZXdcIlxyXG4gICAgfVxyXG5cclxuICAgIGFzeW5jIG9uT3BlbigpIHtcclxuICAgICAgICBSZWFjdERPTS5yZW5kZXIoXHJcbiAgICAgICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoUmVhY3RWaWV3KSxcclxuICAgICAgICAgICAgdGhpcy5jb250YWluZXJFbC5jaGlsZHJlblsxXVxyXG4gICAgICAgIClcclxuICAgIH1cclxuXHJcbiAgICBhc3luYyBvbkNsb3NlKCl7XHJcbiAgICAgICAgUmVhY3RET00udW5tb3VudENvbXBvbmVudEF0Tm9kZSh0aGlzLmNvbnRhaW5lckVsLmNoaWxkcmVuWzFdKTtcclxuICAgIH1cclxufSJdfQ==

view.tsx

@@ -24,7 +24,7 @@ export class ExampleView extends ItemView {
 
     async onOpen() {
         ReactDOM.render(
-            <ReactView userID = {this.plugin.settings.userID} tokenAPI = {this.plugin.settings.apiToken}/>,
+            <ReactView userID = {this.plugin.settings.userID} tokenAPI = {this.plugin.settings.apiToken} plugin={this.plugin}/>,
            this.containerEl.children[1]
         )
     }

view/App.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { tasks } from "./habiticaAPI";
+const username = "ebbdcbab-e0dc-404b-aa50-9824f0678adf";
+const credentials = "bed67d72-63cc-479c-88d3-8845569b04f8";
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        const data = tasks(username, credentials);
+        console.log(data);
+    }
+    render() {
+        return (React.createElement("h2", null, "Hello"));
+    }
+}
+export default App;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQXBwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiQXBwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMvQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBRXJDLE1BQU0sUUFBUSxHQUFHLHNDQUFzQyxDQUFBO0FBQ3ZELE1BQU0sV0FBVyxHQUFHLHNDQUFzQyxDQUFBO0FBRTFELE1BQU0sR0FBSSxTQUFRLEtBQUssQ0FBQyxTQUFTO0lBQzdCLFlBQVksS0FBVTtRQUNsQixLQUFLLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDWixNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFFLFdBQVcsQ0FBQyxDQUFBO1FBQ3pDLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUNELE1BQU07UUFBRyxPQUFNLENBQ1gsd0NBQWMsQ0FDakIsQ0FBQTtJQUNELENBQUM7Q0FDSjtBQUNELGVBQWUsR0FBRyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSBcInJlYWN0XCI7XHJcbmltcG9ydCB7IHRhc2tzIH0gZnJvbSBcIi4vaGFiaXRpY2FBUElcIlxyXG5cclxuY29uc3QgdXNlcm5hbWUgPSBcImViYmRjYmFiLWUwZGMtNDA0Yi1hYTUwLTk4MjRmMDY3OGFkZlwiXHJcbmNvbnN0IGNyZWRlbnRpYWxzID0gXCJiZWQ2N2Q3Mi02M2NjLTQ3OWMtODhkMy04ODQ1NTY5YjA0ZjhcIlxyXG5cclxuY2xhc3MgQXBwIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcclxuICAgIGNvbnN0cnVjdG9yKHByb3BzOiBhbnkpIHtcclxuICAgICAgICBzdXBlcihwcm9wcylcclxuICAgICAgICBjb25zdCBkYXRhID0gdGFza3ModXNlcm5hbWUsIGNyZWRlbnRpYWxzKVxyXG4gICAgICAgIGNvbnNvbGUubG9nKGRhdGEpO1xyXG4gICAgfVxyXG4gICAgcmVuZGVyKCl7cmV0dXJuKFxyXG4gICAgICAgIDxoMj5IZWxsbzwvaDI+XHJcbiAgICApXHJcbiAgICB9XHJcbn1cclxuZXhwb3J0IGRlZmF1bHQgQXBwIl19

view/App.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { getTasks, getStats } from "./habiticaAPI"
+import { getStats, scoreTask } from "./habiticaAPI"
-import TodoItem from "./TodoItem"
+import Statsview from "./Components/Statsview"
+import Taskview from "./Components/Taskview"
 
 let username = ""
 let credentials = ""
@@ -21,36 +22,24 @@ class App extends React.Component<any,any> {
                     lvl: 0,
                 }
             },
-            tasks: []    //gave an error if the the tasks thing was string so better keep it an array for .map to work :)
+            todos: []
         }
+        this.handleChange = this.handleChange.bind(this)
     }
-    componentDidMount() {
+    sendNotice(message: string){
-        // getTasks(username, credentials)
+        this.props.plugin.displayNotice(message)
-        //     .then(res => res.json())
+    }
-        //     .then(
+    reloadData() {
-        //         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
+                    console.log(result)
+                    console.log("data reloaded")
                     this.setState({
                         isLoaded: true,
                         user_data: result,
-                        tasks: result.tasks.todos
+                        todos: result.tasks.todos
                 })
                 },
                 (error) => {
@@ -60,25 +49,65 @@ class App extends React.Component<any,any> {
                 })
             }
             )
-
     }
-    render(){
+    componentDidMount() {
-        const { error, isLoaded, tasks } = this.state;
+        this.reloadData()
-        const user_data = this.state.user_data
+    }
-        if (error) {
+    handleChange(event: any){
-            return <div>Error: {error.message}</div>;
+        this.state.todos.forEach((element: any) => {
-        } else if (!isLoaded) {
+            if(element.id == event.target.id){
-            return <div>Loading...</div>;
+                if(!element.completed){
+                    scoreTask(username, credentials, event.target.id, "up")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success) {
+                                    this.sendNotice("Checked!")
+                                    console.log(result)
+                                    this.reloadData()
                                 } else {
-            const listItems = tasks.map((tasks: any) =>
+                                    this.sendNotice("Resyncing, please try again")
-            <div>
+                                    this.reloadData()
-                <TodoItem key={tasks.id} task={tasks}/>
+                                }
-            </div>
+                            },
-            );
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                } else {
+                    scoreTask(username, credentials, event.target.id, "down")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success){
+                                    this.sendNotice("Un-checked!")
+                                    console.log(result)
+                                    this.reloadData()
+                                } else {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                }
+            }
+        })
+    }
+
+    render(){
+        if(this.state.error)
+            return(<div className="loading">Loading....</div>)
+        else if(!this.state.isLoaded)
+            return <div className="loading">Loading....</div>
+        else {
             return (<div>
-                <h3>{user_data.profile.name}</h3>{"\n"}
+                <Statsview user_data={this.state.user_data} />
-                <div>HP: {user_data.stats.hp}</div><div> XP: {user_data.stats.lvl}</div>{"\n"}
+                <Taskview todos={this.state.todos} onChange={this.handleChange} />
-                <ul>{listItems}</ul>
                 </div>
             );
         }

view/Components/Statsview/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function Index(props: any) {
+    return(
+        <div id="stats">
+            <div id="profile-name">{props.user_data.profile.name}</div>
+            <div id="hp">HP: {props.user_data.stats.hp}</div>
+            <div id="lvl">LVL: {props.user_data.stats.lvl}</div>
+        </div>
+    );
+}

view/Components/Taskview/TodoItem.tsx

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

view/Components/Taskview/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import TodoItem from "./TodoItem"
+
+export default function Index(props: any){
+    const listItems = props.todos.map((todo: any) => {
+            return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+    })
+    return(<ul>{listItems}</ul>);
+}

view/TodoItem.tsx

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

view/habiticaAPI.ts

@@ -1,20 +1,5 @@
 // import fetch from "node-fetch";
 
-
-export async function getTasks(username: string, credentials: string){
-    const url = "https://habitica.com/api/v3/tasks/user?type=todos"
-    const response = fetch(url, {
-        method: 'GET',
-        headers: {
-            "Content-Type": "application/json",
-            "x-client": username.concat("-testAPI"),
-            "x-api-user": username,
-            "x-api-key": credentials,
-        },
-    })
-    return (response)
-}
-
 export async function getStats(username: string, credentials: string){
     const url = "https://habitica.com/export/userdata.json"
     const response = fetch(url, {
@@ -26,6 +11,19 @@ export async function getStats(username: string, credentials: string){
             "x-api-key": credentials,
         },
     })
-    console.log("stats") //can't print stats from here since the response is still an unresolved promise
     return (response)
 }
+
+export async function scoreTask(username: string, credentials: string, taskID: string, direction: string) {
+    const url = "https://habitica.com/api/v3/tasks/".concat(taskID).concat("/score/").concat(direction)
+    const response = fetch(url, {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": username.concat("-testAPI"),
+            "x-api-user": username,
+            "x-api-key": credentials,
+        }
+    })
+    return(response)
+}