Multiple Changes

src/view/App.tsx

@@ -28,7 +28,11 @@ class App extends React.Component<any,any> {
             dailys: [],
             habits: [],
         }
-        this.handleChange = this.handleChange.bind(this)
+        this.handleChangeTodos = this.handleChangeTodos.bind(this)
+        this.handleChangeDailys = this.handleChangeDailys.bind(this)
+        this.handleChangeHabits = this.handleChangeHabits.bind(this)
+
+
     }
     sendNotice(message: string){
         this.props.plugin.displayNotice(message)
@@ -48,9 +52,6 @@ class App extends React.Component<any,any> {
                             isLoaded: true,
                             user_data: result,
                             tasks: result.tasks,
-                            todos: result.tasks.todos,
-                            dailys: result.tasks.dailys,
-                            habits: result.tasks.habits
                         })
                     }
                 },
@@ -65,8 +66,8 @@ class App extends React.Component<any,any> {
     componentDidMount() {
         this.reloadData()
     }
-    handleChange(event: any){
+    handleChangeTodos(event: any){
-        this.state.todos.forEach((element: any) => {
+        this.state.tasks.todos.forEach((element: any) => {
             if(element.id == event.target.id){
                 if(!element.completed){
                     scoreTask(username, credentials, event.target.id, "up")
@@ -109,7 +110,9 @@ class App extends React.Component<any,any> {
                 }
             }
         })
-        this.state.todos.forEach((element: any) => {
+    }
+    handleChangeDailys(event: any){
+        this.state.tasks.dailys.forEach((element: any) => {
             if(element.id == event.target.id){
                 if(!element.completed){
                     scoreTask(username, credentials, event.target.id, "up")
@@ -152,34 +155,19 @@ class App extends React.Component<any,any> {
                 }
             }
         })
-        this.state.dailys.forEach((element: any) => {
+    }
-            if(element.id == event.target.id){
+    handleChangeHabits(event: any){
-                if(!element.completed){
+        const target_id = event.target.id.slice(4)
-                    scoreTask(username, credentials, event.target.id, "up")
+        console.log(target_id)
+        if(event.target.id.slice(0,4) == "plus"){
+            this.state.tasks.habits.forEach((element: any) => {
+                if(element.id == target_id){
+                    scoreTask(username, credentials, target_id, "up")
                         .then(res => res.json())
                         .then(
                             result => {
                                 if(result.success) {
-                                    this.sendNotice("Checked!")
+                                    this.sendNotice("Plus!")
-                                    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 {
@@ -193,9 +181,32 @@ class App extends React.Component<any,any> {
                             }
                         )
                 }
-            }
+            })
-        })
+        }
-        
+        else {
+            this.state.tasks.habits.forEach((element: any) => {
+                if(element.id == target_id){
+                    scoreTask(username, credentials, target_id, "down")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success) {
+                                    this.sendNotice("Minus :(")
+                                    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(){
@@ -207,7 +218,7 @@ class App extends React.Component<any,any> {
             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 state={this.state.tasks} onChange={this.handleChange} />
+                <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits}/>
                 </div>
             );
         }

src/view/Components/Dailiesview/index.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import DailyItem from "./DailyItem"
-import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-
-export default function Index(props: any){
-    const incompleteDailies = props.dailys.map((daily: any) => {
-            if(!daily.completed)
-                return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
-    })
-    const completedDailies = props.dailys.map((daily: any) => {
-        if(daily.completed)
-            return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
-    })
-    const display = <div id="classDisplay">
-                        <Tabs>
-                        <TabList>
-                            <Tab>Active</Tab>
-                            <Tab>Completed</Tab>
-                        </TabList>
-                        <TabPanel>
-                            <ul>{incompleteDailies}</ul>
-                        </TabPanel>
-                        <TabPanel>
-                            <ul>{completedDailies}</ul>
-                        </TabPanel>
-                        </Tabs>
-                    </div>
-
-    return(display);
-}
-

src/view/Components/Habitsview/HabitItem.tsx

@@ -1,18 +0,0 @@
- import * as React from "react";
-
-function HabitItem(props: any) {
-    console.log(props);
-    return (
-        <div className="habit-item" id={props.id}>
-            <button className="habit-plus" onClick={() => this.handleClick()}>
-                +
-            </button>
-            <p>{props.habit_text}</p>
-            <button className="habit-minus" onClick={() => this.handleClick()}>
-                -
-            </button>
-        </div>
-    )
-}
-
-export default HabitItem

src/view/Components/Habitsview/index.tsx

@@ -1,15 +0,0 @@
-import * as React from "react";
-import HabitItem from "./HabitItem"
-
-export default function Index(props: any){
-    console.log("habits = " + props.habits);
-    const allHabits = props.habits.map((habit: any) => {
-        return <HabitItem key={habit.id} id={habit.id}habit_text={habit.text} onChange={props.onChange}/>
-    })
-    const display = <div id="classDisplay">
-                        <ul>{allHabits}</ul>
-                    </div>
-
-    return(display);
-}
-

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -1,7 +1,6 @@
  import * as React from "react";
 
 function DailyItem(props: any) {
-    console.log(props);
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import DailyItem from "./DailyItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    if(props.dailys == undefined) {
+        return <div id="classDisplay">No Dailies Present</div>
+    }
+    else {
+        const incompleteDailies = props.dailys.map((daily: any) => {
+                if(!daily.completed)
+                    return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+        })
+        const completedDailies = props.dailys.map((daily: any) => {
+            if(daily.completed)
+                return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+        })
+        const display = <div id="classDisplay">
+                            <Tabs>
+                            <TabList>
+                                <Tab>Active</Tab>
+                                <Tab>Completed</Tab>
+                            </TabList>
+                            <TabPanel>
+                                <ul>{incompleteDailies}</ul>
+                            </TabPanel>
+                            <TabPanel>
+                                <ul>{completedDailies}</ul>
+                            </TabPanel>
+                            </Tabs>
+                        </div>
+        return(display);
+    }
+        
+}
+

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -0,0 +1,18 @@
+ import * as React from "react";
+
+function HabitItem(props: any) {
+    console.log("plus"+props.id)
+    return (
+        <div className="habit-item" id={props.id}>
+            <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
+                +{props.upCount}
+            </button>
+            <p>{props.habit_text}</p>
+            <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
+                -{props.downCount}
+            </button>
+        </div>
+    )
+}
+
+export default HabitItem

src/view/Components/Taskview/Habitsview/index.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import HabitItem from "./HabitItem"
+
+export default function Index(props: any){
+    if(props.habits == undefined) {
+        return (<div id="classDisplay">
+                    No habits present.
+                </div>)
+    }
+    else {
+        console.log("habits = " + props.habits);
+        const allHabits = props.habits.map((habit: any) => {
+            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
+        })
+        const display = <div id="classDisplay">
+                            <ul>{allHabits}</ul>
+                        </div>
+
+        return(display);
+    }
+}
+

src/view/Components/Taskview/Todoview/index.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import TodoItem from "./TodoItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    if(props.todos == undefined) {
+        return <div id="classDisplay">No Todos present.</div>
+    }
+    else {
+        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</Tab>
+                                <Tab>Completed</Tab>
+                            </TabList>
+                            <TabPanel>
+                                <ul>{incompleteTodos}</ul>
+                            </TabPanel>
+                            <TabPanel>
+                                <ul>{completedTodos}</ul>
+                            </TabPanel>
+                            </Tabs>
+                        </div>
+                        
+
+        return(display);
+    }
+}

src/view/Components/Taskview/index.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
-import TodoItem from "./TodoItem"
+import Dailiesview from "./Dailiesview"
-import Taskview from "../Taskview"
+import Habitsview from "./Habitsview"
-import Dailiesview from "../Dailiesview"
+import Todoview from "./Todoview"
-import Habitsview from "../Habitsview"
-import Todoview from "../Todoview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 
 export default function Index(props: any){
@@ -21,16 +19,16 @@ export default function Index(props: any){
                         </Tab>
                     </TabList>
                     <TabPanel>
-                        <Habitsview habits={props.state.habits} onChange={props.handleChange} />
+                        <Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
                     </TabPanel>
                     <TabPanel>
-                        <Dailiesview dailys={props.state.dailys} onChange={props.handleChange} />
+                        <Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} />
                     </TabPanel>
                     <TabPanel>
-                    <Todoview todos={props.state.todos} onChange={props.handleChange} />
+                    <Todoview todos={props.data.todos} onChange={props.handleChangeTodos} />
                     </TabPanel>
                     </Tabs>
                 </div>
     return(display);
-}                
+}                 
 

src/view/Components/Todoview/index.tsx

@@ -1,31 +0,0 @@
-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</Tab>
-                            <Tab>Completed</Tab>
-                        </TabList>
-                        <TabPanel>
-                            <ul>{incompleteTodos}</ul>
-                        </TabPanel>
-                        <TabPanel>
-                            <ul>{completedTodos}</ul>
-                        </TabPanel>
-                        </Tabs>
-                    </div>
-                    
-
-    return(display);
-}