From 73f4cbd16bf849b21fcaf545b953444720bdd08b Mon Sep 17 00:00:00 2001
From: kkzzhizhou <806508401@qq.com>
Date: Tue, 23 Nov 2021 23:00:47 +0800
Subject: [PATCH] new feature:delete task

---
 package.json                                  |  3 +-
 src/view/App.tsx                              | 85 ++++++++++++++-----
 src/view/Components/Taskview/AddTask.tsx      |  1 +
 .../Taskview/Dailiesview/DailyItem.tsx        | 28 +++---
 .../Components/Taskview/Dailiesview/index.tsx |  2 +-
 .../Taskview/Habitsview/HabitItem.tsx         | 10 +--
 .../Components/Taskview/Habitsview/index.tsx  |  7 +-
 .../Taskview/Rewardview/RewardItem.tsx        |  8 +-
 .../Components/Taskview/Rewardview/index.tsx  |  7 +-
 .../Components/Taskview/Todoview/TodoItem.tsx |  8 +-
 .../Components/Taskview/Todoview/index.tsx    |  7 +-
 src/view/habiticaAPI.ts                       | 14 +++
 styles.css                                    |  5 ++
 13 files changed, 118 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 5aed428..bddf93e 100644
--- a/package.json
+++ b/package.json
@@ -22,13 +22,14 @@
     "css-loader": "^6.4.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
-    "obsidian-plugin-cli": "^0.4.3",
+    "obsidian-plugin-cli": "^0.8.1",
     "rollup": "^2.32.1",
     "style-loader": "^3.3.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
   },
   "dependencies": {
+    "@mui/icons-material": "^5.2.0",
     "i18next": "^21.5.2",
     "i18next-browser-languagedetector": "^6.1.2",
     "node": "^16.10.0",
diff --git a/src/view/App.tsx b/src/view/App.tsx
index 5e5e775..5fde03a 100644
--- a/src/view/App.tsx
+++ b/src/view/App.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask, makeCronReq, costReward, addTask } from "./habiticaAPI"
+import { getStats, scoreTask, makeCronReq, costReward, addTask, deleteTask } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"
 import "../i18n"
@@ -149,16 +149,41 @@ class App extends React.Component<any, any> {
         }
     }
 
+    async sendDeleteTask(id: string, message: string) {
+        try {
+            let response = await deleteTask(this.username, this.credentials, id);
+            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")
+        }        
+    }
+
     handleChangeTodos(event: any) {
         this.state.tasks.todos.forEach((element: any) => {
             if (element.id == event.target.id) {
-                if (!element.completed) {
-                    this.sendScore(event.target.id, "up", "Checked!")
+                if ( event.type == "click" ) {
+                    console.log(event)
+                    if ( event.target.innerText == 'clear' ) {
+                        this.sendDeleteTask(event.target.id, "Deleted!")
+                    }
                 } else {
-                    this.sendScore(event.target.id, "down", "Un-Checked!")
+                    if (!element.completed) {
+                        this.sendScore(event.target.id, "up", "Checked!")
+                    } else {
+                        this.sendScore(event.target.id, "down", "Un-Checked!")
+                    }
                 }
             }
         })
+        
     }
 
 
@@ -166,8 +191,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 (!element.completed) {
+                    if (!element.completed && event.target.innerText != 'clear') {
                         this.sendScore(event.target.id, "up", "Checked!")
+                    }
+                    else if (event.target.innerText == 'clear'){
+                        this.sendDeleteTask(event.target.id, "Deleted!")
                     } else {
                         this.sendScore(event.target.id, "down", "Un-Checked!")
                     }
@@ -177,30 +205,43 @@ class App extends React.Component<any, any> {
     }
 
 
+
     handleChangeHabits(event: any) {
-        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", "Plus!")
-                }
-            })
-        }
-        else {
-            this.state.tasks.habits.forEach((element: any) => {
-                if (element.id == target_id) {
-                    this.sendScore(target_id, "down", "Minus :(")
-                }
-            })
+        if ( event.type == "click" ) {
+            if ( event.target.innerText == 'clear' ) {
+                this.sendDeleteTask(event.target.id, "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", "Plus!")
+                    }
+                })
+            }
+            else {
+                this.state.tasks.habits.forEach((element: any) => {
+                    if (element.id == target_id) {
+                        this.sendScore(target_id, "down", "Minus :(")
+                    }
+                })
+            }
         }
     }
     handleChangeRewards(event: any) {
         const target_id = event.target.id
         this.state.tasks.rewards.forEach((element: any) => {
             if (element.id == event.target.id) {
-                if (element.id == target_id) {
-                    this.sendReward(target_id, "down", "Cost!")
-                }
+                if ( event.type == "click" ) {
+                    if ( event.target.innerText == 'clear' ) {
+                        this.sendDeleteTask(event.target.id, "Deleted!")
+                    }
+                } else {
+                    if (element.id == target_id) {
+                        this.sendReward(target_id, "down", "Cost!")
+                    }
+               }
             }
         })
     }
diff --git a/src/view/Components/Taskview/AddTask.tsx b/src/view/Components/Taskview/AddTask.tsx
index 997dd23..338a343 100644
--- a/src/view/Components/Taskview/AddTask.tsx
+++ b/src/view/Components/Taskview/AddTask.tsx
@@ -7,6 +7,7 @@ type FormData = {
 };
 
 export default function Index(props: any) {
+  console.log(props)
   const { register, setValue, handleSubmit, formState: { errors } } = useForm<FormData>();
   const onSubmit = handleSubmit(data => {
     const url = "https://habitica.com/api/v4/tasks/user"
diff --git a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
index 09af3d6..98d8340 100644
--- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
+++ b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
@@ -2,24 +2,22 @@ import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
+
 function DailyItem(props: any) {
     return (
-        <div className="todo-item" id={props.id}>
-            {console.log(props)}
-            <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 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" >
+                    <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>
-            <button className="modify-todo" id={props.id}>
-                <span className="material-icons md-24">create</span>
-            </button>
-            <button className="delete-todo" id={props.id}>
-                <span className="material-icons md-24">clear</span>
-            </button>
-
-
-        </div>
     )
 }
 
diff --git a/src/view/Components/Taskview/Dailiesview/index.tsx b/src/view/Components/Taskview/Dailiesview/index.tsx
index d8388a2..3d707b9 100644
--- a/src/view/Components/Taskview/Dailiesview/index.tsx
+++ b/src/view/Components/Taskview/Dailiesview/index.tsx
@@ -25,7 +25,7 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
-                            <AddTask type="daily"></AddTask>
+                            <AddTask type="daily" onChange={props.onChange}></AddTask>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
                             </TabPanel>
diff --git a/src/view/Components/Taskview/Habitsview/HabitItem.tsx b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
index 47c3cba..055d2d7 100644
--- a/src/view/Components/Taskview/Habitsview/HabitItem.tsx
+++ b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
@@ -15,12 +15,12 @@ function HabitItem(props: any) {
                 <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
                 <ReactMarkdown children={props.habit_notes} />
             </div>
-                <button className="modify-habit" id={props.id}>
-                    <span className="material-icons md-24">create</span>
-                </button>
-                <button className="delete-habit" id={props.id}>
-                    <span className="material-icons md-24">clear</span>
+            <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>
     )
 }
diff --git a/src/view/Components/Taskview/Habitsview/index.tsx b/src/view/Components/Taskview/Habitsview/index.tsx
index c2535ec..c71ee31 100644
--- a/src/view/Components/Taskview/Habitsview/index.tsx
+++ b/src/view/Components/Taskview/Habitsview/index.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import HabitItem from "./HabitItem"
 import { useTranslation, Trans, Translation } from 'react-i18next'
+import AddTask from "../AddTask";
 
 export default function Index(props: any){
     if(props.habits == undefined) {
@@ -13,11 +14,7 @@ export default function Index(props: 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}/>
         })
         const display = <div id="classDisplay">
-                            <div className="add-task-input">
-                                <input type="text">
-                                </input>
-                                <button className="submit-button"><Trans>submit</Trans></button>
-                            </div>
+                        <AddTask type="habit"></AddTask>
                             <ul>{allHabits}</ul>
                         </div>
 
diff --git a/src/view/Components/Taskview/Rewardview/RewardItem.tsx b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
index b281cf5..ec9e2df 100644
--- a/src/view/Components/Taskview/Rewardview/RewardItem.tsx
+++ b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
@@ -9,11 +9,11 @@ function RewardItem(props: any) {
             <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
             <ReactMarkdown children={props.reward_notes} />
             </div>
-            <button className="modify-reward" id={props.id}>
-                <span className="material-icons md-24">create</span>
+            <button className="task-operation" >
+                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
             </button>
-            <button className="delete-reward" id={props.id}>
-                <span className="material-icons md-24">clear</span>
+            <button className="task-operation">
+                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
             </button>
         </div>
     )
diff --git a/src/view/Components/Taskview/Rewardview/index.tsx b/src/view/Components/Taskview/Rewardview/index.tsx
index a294016..409b5fa 100644
--- a/src/view/Components/Taskview/Rewardview/index.tsx
+++ b/src/view/Components/Taskview/Rewardview/index.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import RewardItem from "./RewardItem"
 import { useTranslation, Trans, Translation } from 'react-i18next'
+import AddTask from "../AddTask";
 
 export default function Index(props: any){
     if(props.rewards == undefined) {
@@ -13,11 +14,7 @@ export default function Index(props: any){
             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">
-                            <div className="add-task-input">
-                                <input type="text">
-                                </input>
-                                <button className="submit-button"><Trans>submit</Trans></button>
-                            </div>
+                        <AddTask type="reward"></AddTask>
                             <ul>{allRewards}</ul>
                         </div>
 
diff --git a/src/view/Components/Taskview/Todoview/TodoItem.tsx b/src/view/Components/Taskview/Todoview/TodoItem.tsx
index edd0835..c33ab2d 100644
--- a/src/view/Components/Taskview/Todoview/TodoItem.tsx
+++ b/src/view/Components/Taskview/Todoview/TodoItem.tsx
@@ -10,11 +10,11 @@ function TodoItem(props: any) {
                 <p><Emoji text={props.todo_text}></Emoji></p>
                 <ReactMarkdown children={props.todo_notes} />
             </div>
-            <button className="modify-todo" id={props.id}>
-                <span className="material-icons md-24">create</span>
+            <button className="task-operation" >
+                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
             </button>
-            <button className="delete-todo" id={props.id}>
-                <span className="material-icons md-24">clear</span>
+            <button className="task-operation">
+                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
             </button>
         </div>
     )
diff --git a/src/view/Components/Taskview/Todoview/index.tsx b/src/view/Components/Taskview/Todoview/index.tsx
index 03cdb68..08bb67b 100644
--- a/src/view/Components/Taskview/Todoview/index.tsx
+++ b/src/view/Components/Taskview/Todoview/index.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import TodoItem from "./TodoItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useTranslation, Trans, Translation } from 'react-i18next'
+import AddTask from "../AddTask";
 
 export default function Index(props: any){
     if(props.todos == undefined) {
@@ -22,11 +23,7 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
-                            <div className="add-task-input">
-                                <input type="text">
-                                </input>
-                                <button className="submit-button"><Trans>submit</Trans></button>
-                            </div>
+                            <AddTask type="todo"></AddTask>
                             <TabPanel>
                                 <ul>{incompleteTodos}</ul>
                             </TabPanel>
diff --git a/src/view/habiticaAPI.ts b/src/view/habiticaAPI.ts
index e801287..8cdce8e 100644
--- a/src/view/habiticaAPI.ts
+++ b/src/view/habiticaAPI.ts
@@ -69,4 +69,18 @@ export async function addTask(username: string, credentials: string, title: stri
         body: JSON.stringify({type: type, text: title})
     })
     return(response)
+}
+
+export async function deleteTask(username: string, credentials: string, id: string) {
+    const url = "https://habitica.com/api/v4/tasks/".concat(id)
+    const response = fetch(url, {
+        method: 'DELETE',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
+            "x-api-user": username,
+            "x-api-key": credentials,
+        }
+    })
+    return(response)
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 62f557a..91e1f8d 100644
--- a/styles.css
+++ b/styles.css
@@ -228,6 +228,11 @@ ul li:not(.task-list-item)::before {
   font-weight: bold;
   text-shadow: 0 0 0.5em transparent;
 }
+
+.task-operation {
+  align-self: center;
+}
+
 button {
   margin: auto;
   margin-bottom: 5px;