Multiple Changes

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

@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function DailyItem(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.daily_text}</p>
+        </div>
+    )
+}
+
+export default DailyItem

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/Dailiesview/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/Dailiesview/tabs.ts

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

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/Habitsview/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/Habitsview/tabs.ts

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

src/view/Components/Taskview/Todoview/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/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/Todoview/react-tabs.css

@@ -0,0 +1,58 @@
+.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;
+}
+
+.re
+
+.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/Todoview/tabs.ts

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

src/view/Components/Taskview/index.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
-import TodoItem from "./TodoItem"
-import Taskview from "../Taskview"
-import Dailiesview from "../Dailiesview"
-import Habitsview from "../Habitsview"
-import Todoview from "../Todoview"
+import Dailiesview from "./Dailiesview"
+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);
-}                
+}