feature: edit task

src/i18n/zh-cn.json

@@ -12,6 +12,7 @@
     "No Dailies Present": "目前每日任务为空",
     "No habits present.": "目前习惯为空",
     "No Rewards present.": "目前奖励为空",
+    "No Todos present.": "目前待办事项为空",
     "There was an error running the cron. Please try again later.": "运行定时失败出错，请稍后再试。",
     "Login Failed, Please check credentials and try again!": "登录失败, 请检查凭据后再次尝试",
     "API Error: Please check credentials": "API错误，请检查凭据",

src/view/App.tsx

@@ -168,9 +168,9 @@ class App extends React.Component<any, any> {
         }
     }
 
-    async sendUpdateTask(id: string, type: string, message: string, title: string, notes: string) {
+    async sendUpdateTask(id: string, type: string, message: string, title: string, notes: string, coin: string = null) {
         try {
-            let response = await updateTask(this.username, this.credentials, id, type, title, notes);
+            let response = await updateTask(this.username, this.credentials, id, type, title, notes, coin);
             let result = await response.json();
             if (result.success === true) {
                 new Notice(message);
@@ -183,7 +183,6 @@ class App extends React.Component<any, any> {
             console.log(e);
             new Notice(i18next.t('API Error: Please check credentials'))
         }
-        // console.log(id, type,title,notes)
     }
 
     handleChangeTodos(event: any) {
@@ -194,9 +193,12 @@ class App extends React.Component<any, any> {
             this.state.tasks.todos.forEach((element: any) => {
                 if (element.id == event.target.id) {
                     if (event.type == "click") {
-                        console.log(event)
                         if (event.target.innerText == 'clear') {
                             this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
+                        } else if (event.target.attributes.title.value == 'submit') {
+                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                            this.sendUpdateTask(event.target.id, 'todo', i18next.t("Update!"), task_title, task_notes)
                         }
                     } else {
                         if (!element.completed) {
@@ -218,18 +220,20 @@ class App extends React.Component<any, any> {
         } else {
             this.state.tasks.dailys.forEach((element: any) => {
                 if (element.id == event.target.id) {
-                    if (element.id == event.target.id) {
-                        if (event.target.attributes.title.value == 'submit') {
-                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
-                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
-                            this.sendUpdateTask(event.target.id, 'daily', "Update!", task_title, task_notes)
-                        } else if (event.target.attributes.title.value == 'delete') {
-                            this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
-                        } else if (!element.completed) {
+                    if (event.target.type == 'checkbox') {
+                        if (!element.completed) {
                             this.sendScore(event.target.id, "up", i18next.t('Checked!'))
                         } else {
                             this.sendScore(event.target.id, "down", i18next.t('Un-Checked!'))
                         }
+                    } else {
+                        if (event.target.attributes.title.value == 'submit') {
+                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                            this.sendUpdateTask(event.target.id, 'daily', i18next.t("Update!"), task_title, task_notes)
+                        } else if (event.target.attributes.title.value == 'delete') {
+                            this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
+                        }
                     }
                 }
             })
@@ -240,26 +244,23 @@ class App extends React.Component<any, any> {
         if (event.target.id == "add-habit") {
             const title = event.target.name
             this.sendAddTask("habit", title, i18next.t('Add!'))
+        } else if (event.target.innerText == 'clear') {
+            this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
         } else {
-            if (event.target.innerText == 'clear') {
-                this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
-            } else {
-                const target_id = event.target.id.slice(4)
-                if (event.target.id.slice(0, 4) == "plus") {
-                    this.state.tasks.habits.forEach((element: any) => {
-                        if (element.id == target_id) {
-                            this.sendScore(target_id, "up", i18next.t('Plus!'))
-                        }
-                    })
+            this.state.tasks.habits.forEach((element: any) => {
+                if (event.target.attributes.title.value == 'submit') {
+                    const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                    const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                    this.sendUpdateTask(event.target.id, 'daily', i18next.t("Update!"), task_title, task_notes)
+                } else {
+                    const target_id = event.target.id.slice(4)
+                    if (event.target.id.slice(0, 4) == "plus") {
+                        this.sendScore(target_id, "up", i18next.t('Plus!'))
+                    } else {
+                        this.sendScore(target_id, "down", i18next.t("Minus :("))
+                    }
                 }
-                else {
-                    this.state.tasks.habits.forEach((element: any) => {
-                        if (element.id == target_id) {
-                            this.sendScore(target_id, "down", i18next.t("Minus :("))
-                        }
-                    })
-                }
-            }
+            })
         }
     }
 
@@ -274,8 +275,11 @@ class App extends React.Component<any, any> {
                 if (element.id == target_id) {
                     if (event.target.innerText == 'clear') {
                         this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
-                    } else if (event.target.innerText == 'create') {
-                        this.sendUpdateTask(event.target.id, 'reward', i18next.t('Edit!'), "1", "1")
+                    } else if (event.target.attributes.title.value == 'submit') {
+                        const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                        const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                        const task_coin = event.target.attributes['data-coin'].value ? event.target.attributes['data-coin'].value : element.reward_value
+                        this.sendUpdateTask(event.target.id, 'reward', i18next.t('Edit!'), task_title, task_notes, task_coin)
                     } else {
                         this.sendReward(target_id, "down", i18next.t('Cost!'))
                     }

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

src/view/habiticaAPI.ts

@@ -85,7 +85,7 @@ export async function deleteTask(username: string, credentials: string, id: stri
     return(response)
 }
 
-export async function updateTask(username: string, credentials: string, id: string, type: string, title: string, notes: string) {
+export async function updateTask(username: string, credentials: string, id: string, type: string, title: string, notes: string, coin: string) {
     const url = "https://habitica.com/api/v4/tasks/".concat(id)
     const response = fetch(url, {
         method: 'PUT',
@@ -95,7 +95,7 @@ export async function updateTask(username: string, credentials: string, id: stri
             "x-api-user": username,
             "x-api-key": credentials,
         },
-        body: JSON.stringify({id: id,type: type, text: title,notes: notes})
+        body: type === 'reward' ? JSON.stringify({id: id,type: type, text: title,notes: notes, coin: coin}):JSON.stringify({id: id,type: type, text: title,notes: notes})
     })
     return(response)
 }

styles.css

@@ -111,10 +111,12 @@ input[type=checkbox] {
 }
 
 .submit-button {
-    padding: 5px 15px;
+    /* padding: 5px 5px; */
     font-size: 15px;
     border: 1px solid #aaa;
-    white-space: nowrap;
+    /* white-space: nowrap; */
+    /* margin: 10px; */
+    margin: 0;
 }
 
 input[type=checkbox]:focus {
@@ -236,6 +238,34 @@ ul li:not(.task-list-item)::before {
 
 .task-operation {
   align-self: center;
+  margin: 0;
+  padding: 0;
+}
+
+.edit-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.edit-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.task-submit {
+  display: grid;
+  grid-template-columns: 10fr 5fr;
+}
+
+.add-task-input {
+  display: block;
+  width: 100%;
+}
+
+.task-input-box {
+  margin-right: 10px;
 }
 
 button {