Added source code files which were left out

src/view/App.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { getStats, scoreTask } from "./habiticaAPI"
+import Statsview from "./Components/Statsview"
+import Taskview from "./Components/Taskview"
+
+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,
+            user_data: {
+                profile: {
+                    name: "",
+                },
+                stats: {
+                    hp: 0,
+                    lvl: 0,
+                }
+            },
+            todos: []
+        }
+        this.handleChange = this.handleChange.bind(this)
+    }
+    sendNotice(message: string){
+        this.props.plugin.displayNotice(message)
+    }
+    reloadData() {
+        getStats(username, credentials)
+            .then(res => res.json())
+            .then(
+                result => {
+                    if(result.success === false){
+                        this.sendNotice("Login Failed, Please check credentials and try again!")
+                        console.log(result)
+                    } else {
+                        console.log(result)
+                        console.log("data reloaded")
+                        this.setState({
+                            isLoaded: true,
+                            user_data: result,
+                            todos: result.tasks.todos
+                        })
+                    }
+                },
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error
+                })
+            }
+            )
+    }
+    componentDidMount() {
+        this.reloadData()
+    }
+    handleChange(event: any){
+        this.state.todos.forEach((element: any) => {
+            if(element.id == event.target.id){
+                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 {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (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 className="plugin-root">
+                <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+                <Statsview user_data={this.state.user_data} />
+                <Taskview todos={this.state.todos} onChange={this.handleChange} />
+                </div>
+            );
+        }
+    }
+}
+export default App

src/view/Components/Statsview/index.tsx

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

src/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

src/view/Components/Taskview/index.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import TodoItem from "./TodoItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    const incompleteTodos = props.todos.map((todo: any) => {
+            if(!todo.completed)
+                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+    })
+    const completedTodos = props.todos.map((todo: any) => {
+        if(todo.completed)
+            return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+    })
+    const display = <div id="classDisplay">
+                        <Tabs>
+                        <TabList>
+                            <Tab>Active Todos</Tab>
+                            <Tab>Completed Todos</Tab>
+                        </TabList>
+                        <TabPanel>
+                            <ul>{incompleteTodos}</ul>
+                        </TabPanel>
+                        <TabPanel>
+                            <ul>{completedTodos}</ul>
+                        </TabPanel>
+                        </Tabs>
+                    </div>
+
+    return(display);
+}

src/view/Components/Taskview/react-tabs.css

@@ -0,0 +1,56 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}

src/view/Components/Taskview/tabs.ts

@@ -0,0 +1 @@
+import * as React from "react"

src/view/habiticaAPI.ts

@@ -0,0 +1,29 @@
+// import fetch from "node-fetch";
+
+export async function getStats(username: string, credentials: string){
+    const url = "https://habitica.com/export/userdata.json"
+    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 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)
+}