Multiple Changes

This commit is contained in:
Leoh 2021-10-19 10:54:06 +05:30
parent a4ebd7aab3
commit 30dd6590ec
19 changed files with 330 additions and 278 deletions

View file

@ -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);
}

View file

@ -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

View file

@ -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);
}

View file

@ -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}/>

View file

@ -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);
}
}

View file

@ -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

View file

@ -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);
}
}

View file

@ -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);
}
}

View file

@ -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);
}
}

View file

@ -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);
}