feature: edit task

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

@@ -6,7 +6,7 @@ function DailyItem(props: any) {
     const [state, setState] = React.useState('view')
     const [title, setTitle] = React.useState('')
     const [notes, setNotes] = React.useState('')
-    if (state == 'view') {
+    if (state === 'view') {
         return (
             <div className="todo-item" id={props.id}>
                 <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
@@ -14,7 +14,7 @@ function DailyItem(props: any) {
                     <p><Emoji text={props.daily_text}></Emoji></p>
                     <ReactMarkdown children={props.daily_notes} />
                 </div>
-                <button className="task-operation"  >
+                <button className="task-operation">
                     <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
                 </button>
                 <button className="task-operation">
@@ -24,11 +24,13 @@ function DailyItem(props: any) {
         )
     } else {
         return (
-            <div className="edit-daily-item">
+            <div className="edit-daily-item edit-item">
                 <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.daily_text}></input>
                 <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.daily_notes}></input>
-                <button className="task-operation"  ><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
-                <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                <div className="edit-daily-button edit-button">
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
             </div>
         )
     }

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

@@ -5,11 +5,13 @@ import { Trans, useTranslation } from 'react-i18next';
 
 export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
-    let { t ,i18n} = useTranslation()
+    let { t, i18n } = useTranslation()
     if (props.dailys == undefined) {
         return <div id="classDisplay">
-            <input type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} />
-            <button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <Trans>No Dailies Present</Trans>
         </div>
     }
@@ -17,7 +19,7 @@ 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} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} status="view" />
+                    <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} />
                 )
         })
         const completedDailies = props.dailys.map((daily: any) => {
@@ -32,12 +34,13 @@ export default function Index(props: any) {
                     <Tab><Trans>Completed</Trans></Tab>
                 </TabList>
                 <TabPanel>
-                    <input type="text" id="task-input-box" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
-                    <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    <div className="task-submit">
+                        <input className="task-input-box" type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
+                        <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
                     <div className="task-panel">
                         <ul>{incompleteDailies}</ul>
                     </div>
-
                 </TabPanel>
                 <TabPanel>
                     <ul>{completedDailies}</ul>

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

@@ -3,26 +3,43 @@ import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
 function HabitItem(props: any) {
-    return (
-        <div className="habit-item" id={props.id}>
-            <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
-                +{props.upCount}
-            </button>
-            <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
-                -{props.downCount}
-            </button>
-            <div>
-                <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
-                <ReactMarkdown children={props.habit_notes} />
-            </div>
-            <button className="task-operation" >
-                    <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    if (state == 'view') {
+        return (
+            <div className="habit-item" id={props.id}>
+                <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
+                    +{props.upCount}
+                </button>
+                <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
+                    -{props.downCount}
+                </button>
+                <div>
+                    <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+                    <ReactMarkdown children={props.habit_notes} />
+                </div>
+                <button className="task-operation">
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
                 </button>
                 <button className="task-operation">
-                    <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
-            </button>
-        </div>
-    )
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
+                </button>
+            </div>
+        )
+    } else {
+        return (
+            <div className="edit-habit-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.habit_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.habit_notes}></input>
+                <div className="edit-habit-button edit-button">
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+    }
+
 }
 
 export default HabitItem

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

@@ -1,30 +1,32 @@
 import * as React from "react";
 import HabitItem from "./HabitItem"
-import { useTranslation, Trans, Translation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 
-export default function Index(props: any){
+export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
-    let { t ,i18n} = useTranslation()
-    if(props.habits == undefined) {
+    let { t, i18n } = useTranslation()
+    if (props.habits == undefined) {
         return (<div id="classDisplay">
-                    <input type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} />
-                    <button className="submit-button" id="add-habit" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-                    <Trans>No habits present.</Trans>
-                </div>)
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
+            <Trans>No habits present.</Trans>
+        </div>)
     }
     else {
         const allHabits = props.habits.map((habit: any) => {
-            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
+            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange} />
         })
-        
-
         const display = <div id="classDisplay">
-                            <input type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} />
-                            <button className="submit-button" id="add-habit" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-                            <ul>{allHabits}</ul>
-                        </div>
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
+            <ul>{allHabits}</ul>
+        </div>
 
-        return(display);
+        return (display);
     }
 }
 

src/view/Components/Taskview/Rewardview/RewardItem.tsx

@@ -2,21 +2,40 @@ import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 function RewardItem(props: any) {
-    return (
-        <div className="reward-item" id={props.id}>
-            <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
-            <div>
-            <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
-            <ReactMarkdown children={props.reward_notes} />
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    const [coin, setCoin] = React.useState(0)
+    if (state === 'view') {
+        return (
+            <div className="reward-item" id={props.id}>
+                <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
+                <div>
+                    <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
+                    <ReactMarkdown children={props.reward_notes} />
+                </div>
+                <button className="task-operation" >
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
+                </button>
+                <button className="task-operation">
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
+                </button>
             </div>
-            <button className="task-operation" >
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
-            </button>
-            <button className="task-operation">
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
-            </button>
-        </div>
-    )
+        )
+    } else {
+        return (
+            <div className="edit-reward-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.reward_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.reward_notes}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.reward_value}></input>
+                <div className="edit-reward-button edit-button">
+                    <button className="task-operation"  ><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes} data-coin={coin}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+
+    }
 }
 
 export default RewardItem

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

@@ -1,28 +1,32 @@
 import * as React from "react";
 import RewardItem from "./RewardItem"
-import { Trans,useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
-export default function Index(props: any){
+export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
-    let { t ,i18n} = useTranslation()
-    if(props.rewards == undefined) {
+    let { t, i18n } = useTranslation()
+    if (props.rewards == undefined) {
         return (<div id="classDisplay">
-                    <input type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} />
-                    <button className="submit-button" id="add-reward" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-                    <Trans>No Rewards present.</Trans>
-                </div>)
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
+            <Trans>No Rewards present.</Trans>
+        </div>)
     }
     else {
         const allRewards = props.rewards.map((reward: any) => {
-            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
+            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange} />
         })
         const display = <div id="classDisplay">
-                            <input type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} />
-                            <button className="submit-button" id="add-reward" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-                            <ul>{allRewards}</ul>
-                        </div>
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
+            <ul>{allRewards}</ul>
+        </div>
 
-        return(display);
+        return (display);
     }
 }
 

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

@@ -3,21 +3,37 @@ import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
 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}/>
-            <div>
-                <p><Emoji text={props.todo_text}></Emoji></p>
-                <ReactMarkdown children={props.todo_notes} />
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    if (state === 'view') {
+        return (
+            <div className="todo-item" id={props.id}>
+                <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
+                <div>
+                    <p><Emoji text={props.todo_text}></Emoji></p>
+                    <ReactMarkdown children={props.todo_notes} />
+                </div>
+                <button className="task-operation" >
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
+                </button>
+                <button className="task-operation">
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
+                </button>
             </div>
-            <button className="task-operation" >
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
-            </button>
-            <button className="task-operation">
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
-            </button>
-        </div>
-    )
+        )
+    } else {
+        return (
+            <div className="edit-todo-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.todo_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.todo_notes}></input>
+                <div className="edit-todo-button edit-button">
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+    }
 }
 
 export default TodoItem

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

@@ -1,43 +1,47 @@
 import * as React from "react";
 import TodoItem from "./TodoItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import { Trans,useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
-export default function Index(props: any){
+export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
-    let { t ,i18n} = useTranslation()
-    if(props.todos == undefined) {
+    let { t, i18n } = useTranslation()
+    if (props.todos == undefined) {
         return <div id="classDisplay">
-            <input type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} />
-            <button className="submit-button" id="add-todo" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-            No Todos present.
+            <div className="task-submit">
+                <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
             </div>
+            <Trans>No Todos present.</Trans>
+        </div>
     }
     else {
         const incompleteTodos = props.todos.map((todo: any) => {
-                if(!todo.completed)
-                    return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
+            if (!todo.completed)
+                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} 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} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
+            if (todo.completed)
+                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed} />
         })
         const display = <div id="classDisplay">
-                            <Tabs>
-                            <TabList>
-                                <Tab><Trans>Active</Trans></Tab>
-                                <Tab><Trans>Completed</Trans></Tab>
-                            </TabList>
-                            <TabPanel>
-                                <input type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} />
-                                <button className="submit-button" id="add-todo" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
-                                <ul>{incompleteTodos}</ul>
-                            </TabPanel>
-                            <TabPanel>
-                                <ul>{completedTodos}</ul>
-                            </TabPanel>
-                            </Tabs>
-                        </div>
-        return(display);
+            <Tabs>
+                <TabList>
+                    <Tab><Trans>Active</Trans></Tab>
+                    <Tab><Trans>Completed</Trans></Tab>
+                </TabList>
+                <TabPanel>
+                    <div className="task-submit">
+                        <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
+                        <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
+                    <ul>{incompleteTodos}</ul>
+                </TabPanel>
+                <TabPanel>
+                    <ul>{completedTodos}</ul>
+                </TabPanel>
+            </Tabs>
+        </div>
+        return (display);
     }
 }