new feature: add task(daily,hatit,todo,reward)

src/view/App.tsx

@@ -40,6 +40,7 @@ class App extends React.Component<any, any> {
             todos: [],
             dailys: [],
             habits: [],
+            input_task: "",
         }
         this.handleChangeTodos = this.handleChangeTodos.bind(this);
         this.handleChangeDailys = this.handleChangeDailys.bind(this);
@@ -59,7 +60,7 @@ class App extends React.Component<any, any> {
             );
         }
         else {
-            return null
+            return <div className="cron"></div>
         };
     }
     async runCron() {
@@ -132,7 +133,7 @@ class App extends React.Component<any, any> {
         }
     }
 
-    async sendDaily(type: string, title: string, message: string) {
+    async sendAddTask(type: string, title: string, message: string) {
         try {
             let response = await addTask(this.username, this.credentials, title, type);
             let result = await response.json();
@@ -167,11 +168,15 @@ class App extends React.Component<any, any> {
     }
 
     handleChangeTodos(event: any) {
+        if (event.target.id == "add-todo") {
+            const title = event.target.name
+            this.sendAddTask("todo", title, "Add!")
+        } else {
             this.state.tasks.todos.forEach((element: any) => {
                 if (element.id == event.target.id) {
-                if ( event.type == "click" ) {
+                    if (event.type == "click") {
                         console.log(event)
-                    if ( event.target.innerText == 'clear' ) {
+                        if (event.target.innerText == 'clear') {
                             this.sendDeleteTask(event.target.id, "Deleted!")
                         }
                     } else {
@@ -183,18 +188,22 @@ class App extends React.Component<any, any> {
                     }
                 }
             })
-        
+        }
     }
 
 
     handleChangeDailys(event: any) {
+        if (event.target.id == "add-daily") {
+            const title = event.target.name
+            this.sendAddTask("daily", title, "Add!")
+        } else {
             this.state.tasks.dailys.forEach((element: any) => {
                 if (element.id == event.target.id) {
                     if (element.id == event.target.id) {
                         if (!element.completed && event.target.innerText != 'clear') {
                             this.sendScore(event.target.id, "up", "Checked!")
                         }
-                    else if (event.target.innerText == 'clear'){
+                        else if (event.target.innerText == 'clear') {
                             this.sendDeleteTask(event.target.id, "Deleted!")
                         } else {
                             this.sendScore(event.target.id, "down", "Un-Checked!")
@@ -203,14 +212,15 @@ class App extends React.Component<any, any> {
                 }
             })
         }
-
+    }
-
 
     handleChangeHabits(event: any) {
-        if ( event.type == "click" ) {
+        if (event.target.id == "add-habit") {
-            if ( event.target.innerText == 'clear' ) {
+            const title = event.target.name
+            this.sendAddTask("habit", title, "Add!")
+        } else {
+            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") {
@@ -229,22 +239,26 @@ class App extends React.Component<any, any> {
                 }
             }
         }
+    }
+
     handleChangeRewards(event: any) {
+        if (event.target.id == "add-reward") {
+            const title = event.target.name
+            this.sendAddTask("reward", title, "Add!")
+        } else {
             const target_id = event.target.id
             this.state.tasks.rewards.forEach((element: any) => {
-            if (element.id == event.target.id) {
+                if (element.id == target_id) {
-                if ( event.type == "click" ) {
+                    if (event.target.innerText == 'clear') {
-                    if ( event.target.innerText == 'clear' ) {
                         this.sendDeleteTask(event.target.id, "Deleted!")
                     }
-                } else {
+                    else {
-                    if (element.id == target_id) {
                         this.sendReward(target_id, "down", "Cost!")
                     }
                 }
-            }
             })
         }
+    }
     render() {
         let content = this.CheckCron(this.state.user_data.lastCron);
         if (this.state.error)
@@ -256,7 +270,6 @@ class App extends React.Component<any, any> {
                 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
                 <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} />
                 {content}
-                <div></div>
                 <Statsview user_data={this.state.user_data} />
             </div>
             );

src/view/Components/Taskview/AddTask.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { Trans } from 'react-i18next';
-
-type FormData = {
-  title: string;
-};
-
-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"
-    const response = fetch(url, {
-      method: 'POST',
-      headers: {
-        "Content-Type": "application/json",
-        "x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
-        "x-api-user": this.app.plugins.plugins["obsidian-habitica-integration"].settings.userID,
-        "x-api-key": this.app.plugins.plugins["obsidian-habitica-integration"].settings.apiToken,
-      },
-      body: JSON.stringify({ type: props.type, text: data.title })
-    })
-  })
-  return (
-    <form className="add-task-input" onSubmit={onSubmit}>
-      <input type="text" defaultValue="" {...register("title")}></input>
-      <button className="submit-button" type="submit" ><Trans>submit</Trans></button>
-    </form>
-  );
-}

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

@@ -11,6 +11,7 @@ function DailyItem(props: any) {
                     <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>

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

@@ -1,32 +1,39 @@
 import * as React from "react";
 import DailyItem from "./DailyItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import { useTranslation, Trans, Translation } from 'react-i18next';
+import { Trans } from 'react-i18next';
-import { useForm, SubmitHandler } from "react-hook-form";
-import AddTask from "../AddTask";
 
-export default function Index(props: any){
+export default function Index(props: any) {
-    if(props.dailys == undefined) {
+    const [title, setTitle] = React.useState('')
-        return <div id="classDisplay"><Trans>No Dailies Present</Trans></div>
+    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>
     }
     else {
         const incompleteDailies = props.dailys.map((daily: any) => {
-                if(!daily.completed)
+            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}/>
+                return (
+                    <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) => {
-            if(daily.completed)
+            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}/>
+                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>
                     <Tab><Trans>Active</Trans></Tab>
                     <Tab><Trans>Completed</Trans></Tab>
                 </TabList>
-                            <AddTask type="daily" onChange={props.onChange}></AddTask>
                 <TabPanel>
+                    <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>
                     <ul>{incompleteDailies}</ul>
                 </TabPanel>
                 <TabPanel>
@@ -35,7 +42,7 @@ export default function Index(props: any){
             </Tabs>
 
         </div>
-        return(display);
+        return (display);
     }
 
 }

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

@@ -1,11 +1,13 @@
 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){
+    const [title, setTitle] = React.useState('')
     if(props.habits == undefined) {
         return (<div id="classDisplay">
+                    <input type="text" placeholder="添加习惯" 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>)
     }
@@ -13,8 +15,11 @@ export default function Index(props: any){
         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}/>
         })
+        
+
         const display = <div id="classDisplay">
-                        <AddTask type="habit"></AddTask>
+                            <input type="text" placeholder="添加习惯" 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>
 

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

@@ -1,11 +1,13 @@
 import * as React from "react";
 import RewardItem from "./RewardItem"
-import { useTranslation, Trans, Translation } from 'react-i18next'
+import { Trans } from 'react-i18next'
-import AddTask from "../AddTask";
 
 export default function Index(props: any){
+    const [title, setTitle] = React.useState('')
     if(props.rewards == undefined) {
         return (<div id="classDisplay">
+                    <input type="text" placeholder="添加奖励" 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>)
     }
@@ -14,7 +16,8 @@ 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">
-                        <AddTask type="reward"></AddTask>
+                            <input type="text" placeholder="添加奖励" 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>
 

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

@@ -1,12 +1,16 @@
 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 { Trans } from 'react-i18next'
-import AddTask from "../AddTask";
 
 export default function Index(props: any){
+    const [title, setTitle] = React.useState('')
     if(props.todos == undefined) {
-        return <div id="classDisplay">No Todos present.</div>
+        return <div id="classDisplay">
+            <input type="text" placeholder="添加待办事项" 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>
     }
     else {
         const incompleteTodos = props.todos.map((todo: any) => {
@@ -23,8 +27,9 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
-                            <AddTask type="todo"></AddTask>
                             <TabPanel>
+                                <input type="text" placeholder="添加待办事项" 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>

src/view/Components/Taskview/Todoview/tabs.ts

@@ -1 +0,0 @@
-import * as React from "react"

src/view/Components/Taskview/index.tsx

@@ -4,7 +4,6 @@ import Habitsview from "./Habitsview"
 import Todoview from "./Todoview"
 import Rewardview from "./Rewardview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     const display = <div className="task-view">

src/view/habiticaAPI.ts

@@ -57,7 +57,7 @@ export async function costReward(username: string, credentials: string, taskID:
 
 
 export async function addTask(username: string, credentials: string, title: string, type: string) {
-    const url = "https://habitica.com/api/v4/tasks/user".concat(title)
+    const url = "https://habitica.com/api/v4/tasks/user"
     const response = fetch(url, {
         method: 'POST',
         headers: {