feature: add/edit/delete tasks

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "^5.2.0",
+    "@react-navigation/native": "^6.0.6",
     "i18next": "^21.5.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "node": "^16.10.0",
@@ -40,6 +41,7 @@
     "react-hook-form": "^7.20.2",
     "react-i18next": "^11.14.2",
     "react-markdown": "^7.1.0",
+    "react-navigation": "^4.4.4",
     "react-tabs": "^3.2.2"
   }
 }

src/view/App.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask, makeCronReq, costReward, addTask, deleteTask } from "./habiticaAPI"
+import { getStats, scoreTask, makeCronReq, costReward, addTask, deleteTask, updateTask } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"
 import "../i18n"
+import { exit } from "process";
 
 class App extends React.Component<any, any> {
     private _username = "";
@@ -40,7 +41,6 @@ class App extends React.Component<any, any> {
             todos: [],
             dailys: [],
             habits: [],
-            input_task: "",
         }
         this.handleChangeTodos = this.handleChangeTodos.bind(this);
         this.handleChangeDailys = this.handleChangeDailys.bind(this);
@@ -167,9 +167,22 @@ class App extends React.Component<any, any> {
         }
     }
 
-    async sendEditTask(id: string, type: string) {
+    async sendUpdateTask(id: string, type: string,message: string, title: string, notes: string) {
-        console.log(id, type)
+        try {
-        return (<div className="loading">Loading....</div>)
+            let response = await updateTask(this.username, this.credentials, id, type, title, notes);
+            let result = await response.json();
+            if (result.success === true) {
+                new Notice(message);
+                this.reloadData();
+            } else {
+                new Notice("Resyncing, please try again");
+                this.reloadData();
+            }
+        } catch (e) {
+            console.log(e);
+            new Notice("API Error: Please check credentials")
+        }
+        // console.log(id, type,title,notes)
     }
 
     handleChangeTodos(event: any) {
@@ -205,9 +218,11 @@ class App extends React.Component<any, any> {
             this.state.tasks.dailys.forEach((element: any) => {
                 if (element.id == event.target.id) {
                     if (element.id == event.target.id) {
-                        if ( event.target.innerText == 'create' ) {
+                        if ( event.target.attributes.title.value == 'submit' ) {
-                            this.sendEditTask(event.target.id, "daily")
+                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value:element.text
-                        } else if (event.target.innerText == 'clear') {
+                            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, "Deleted!")
                         } else if ( !element.completed) {
                             this.sendScore(event.target.id, "up", "Checked!")
@@ -259,7 +274,7 @@ class App extends React.Component<any, any> {
                     if (event.target.innerText == 'clear') {
                         this.sendDeleteTask(event.target.id, "Deleted!")
                     } else if (event.target.innerText == 'create') {
-                        this.sendEditTask(event.target.id, "Edit!")
+                        this.sendUpdateTask(event.target.id,'reward',"Edit!","1","1")
                     } else {
                         this.sendReward(target_id, "down", "Cost!")
                     }

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

@@ -2,24 +2,36 @@ import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
-
 function DailyItem(props: any) {
-    return (
+    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 className="todo-content">
                     <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>
-                    <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>
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
                 </button>
             </div>
-    )
+        )
+    } else {
+        return (
+            <div className="edit-daily-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>
+        )
+    }
 }
 
 export default DailyItem

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

@@ -1,25 +0,0 @@
-import Emoji from "react-emoji-render";
-import * as React from "react";
-import ReactMarkdown from "react-markdown";
-
-
-function EditDailyItem(props: any) {
-    return (
-            <div className="edit-todo-item" id={props.id}>
-                <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
-                <div className="todo-content">
-                    <p><Emoji text={props.daily_text}></Emoji></p>
-                    <ReactMarkdown children={props.daily_notes} />
-                </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>
-    )
-}
-
-export default EditDailyItem

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

@@ -1,30 +1,30 @@
 import * as React from "react";
 import DailyItem from "./DailyItem"
-import EditDailyItem from "./EditDailyItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { Trans } from 'react-i18next';
 
 export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
+
     if (props.dailys == undefined) {
         return <div id="classDisplay">
             <input type="text" placeholder="添加每日任务" onChange={event => setTitle(event.target.value)} />
             <button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
             <Trans>No Dailies Present</Trans>
-            </div>
+        </div>
     }
     else {
         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} />
+                    <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} status="view" />
                 )
         })
         const completedDailies = 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} />
         })
-        
+
         const display = <div id="classDisplay">
             <Tabs>
                 <TabList>
@@ -32,9 +32,12 @@ export default function Index(props: any) {
                     <Tab><Trans>Completed</Trans></Tab>
                 </TabList>
                 <TabPanel>
-                    <input type="text" placeholder="添加每日任务" onChange={event => setTitle(event.target.value)} />
+                    <input type="text" id="task-input-box" placeholder="添加每日任务" onChange={event => setTitle(event.target.value)} value={title} />
-                    <button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                    <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
-                    <ul>{incompleteDailies}</ul>
+                    <div className="task-panel">
+                        <ul>{incompleteDailies}</ul>
+                    </div>
+
                 </TabPanel>
                 <TabPanel>
                     <ul>{completedDailies}</ul>

src/view/habiticaAPI.ts

@@ -83,4 +83,19 @@ 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) {
+    const url = "https://habitica.com/api/v4/tasks/".concat(id)
+    const response = fetch(url, {
+        method: 'PUT',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
+            "x-api-user": username,
+            "x-api-key": credentials,
+        },
+        body: JSON.stringify({id: id,type: type, text: title,notes: notes})
+    })
+    return(response)
 }

styles.css

@@ -212,7 +212,12 @@ ul {
   display: none;
   left: 0px;
   height: 88%;
+  /* overflow: scroll; */
+}
+
+.task-panel {
   overflow: scroll;
+  height: 100%;
 }
 
 .react-tabs__tab-panel--selected {