new feature: add task

src/view/App.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask, makeCronReq, costReward } from "./habiticaAPI"
+import { getStats, scoreTask, makeCronReq, costReward, addTask } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"
 import "../i18n"
@@ -52,15 +52,11 @@ class App extends React.Component<any, any> {
         let cronDate = new Date(lastCron);
         let now = new Date();
         if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
-            // return (
-            //     <div className="cron">
-            //         <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
-            //         <button onClick={this.runCron}>Continue</button>
-            //     </div>
-            // ); 
             return (
-                <div className="cron"></div>
+                <div className="cron">
-            )
+                    <button onClick={this.runCron}>Refresh</button>
+                </div>
+            );
         }
         else {
             return null
@@ -136,6 +132,23 @@ class App extends React.Component<any, any> {
         }
     }
 
+    async sendDaily(type: string, title: string, message: string) {
+        try {
+            let response = await addTask(this.username, this.credentials, title, type);
+            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) {
@@ -162,6 +175,8 @@ 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") {

src/view/Components/Statsview/index.tsx

@@ -6,7 +6,7 @@ export default function Index(props: any) {
     return(
         <div className="stats">
             {/* <div id="profile-name">{props.user_data.profile.name}</div> */}
-            {console.log(props)}
+            {/* {console.log(props)} */}
             <div className = "substats" id="hp"><i className="material-icons">favorite</i>{t('HP')}: {(props.user_data.stats.hp).toPrecision(2)}</div>
             <div className = "substats" id="lvl"><i className="material-icons">star</i>{t('LEVEL')}: {props.user_data.stats.lvl}</div>
             <div className = "substats" id="gold"><i className="material-icons">credit_card</i>{t('GOLD')}: {(props.user_data.stats.gp).toPrecision(2)}</div>

src/view/Components/Taskview/AddTask.tsx

@@ -0,0 +1,30 @@
+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) {
+  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

@@ -5,6 +5,7 @@ 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>

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

@@ -1,13 +1,9 @@
 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 { useTranslation, Trans, Translation } from 'react-i18next';
 import { useForm, SubmitHandler } from "react-hook-form";
-import { addDaily } from "src/view/habiticaAPI";
+import AddTask from "../AddTask";
-
-type Inputs = {
-    title: string
-};
 
 export default function Index(props: any){
     if(props.dailys == undefined) {
@@ -22,10 +18,6 @@ export default function Index(props: 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 { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
-        const onSubmit: SubmitHandler<Inputs> = data => {
-            addDaily(this.props.plugin.settings.userID,this.props.plugin.settings.apiToken,data.title)
-        }
         
         const display = <div id="classDisplay">
                             <Tabs>
@@ -33,10 +25,7 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
-                            <form className="add-task-input" onSubmit={handleSubmit(onSubmit)}>
+                            <AddTask type="daily"></AddTask>
-                                <input type="text" defaultValue="" {...register("title")}></input>
-                                <button className="submit-button" type="submit"><Trans>submit</Trans></button>
-                            </form>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
                             </TabPanel>

src/view/habiticaAPI.ts

@@ -56,7 +56,7 @@ export async function costReward(username: string, credentials: string, taskID:
 }
 
 
-export async function addDaily(username: string, credentials: string, title: string) {
+export async function addTask(username: string, credentials: string, title: string, type: string) {
     const url = "https://habitica.com/api/v4/tasks/user".concat(title)
     const response = fetch(url, {
         method: 'POST',
@@ -66,7 +66,7 @@ export async function addDaily(username: string, credentials: string, title: str
             "x-api-user": username,
             "x-api-key": credentials,
         },
-        body: JSON.stringify({type: "daliy", text: title})
+        body: JSON.stringify({type: type, text: title})
     })
     return(response)
 }

styles.css

@@ -121,10 +121,6 @@ input[type=checkbox]:focus {
   outline: 0;
 }
 
-.task-view {
-  overflow: scroll;
-}
-
 ::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
@@ -132,13 +128,20 @@ input[type=checkbox]:focus {
 .plugin-root {
   min-width: 260px;
   display: grid;
-  grid-template-rows: 93% 5% 2%;
+  grid-template-rows: 97% 1% 0.5%;
   height: inherit;
 }
 
+#classDisplay {
+  height: 100%;
+}
+
 .substats {
   font-size: medium;
+}
 
+ul {
+  margin: 0;
 }
 
 /* react-tabs internal file :wink: */
@@ -157,7 +160,7 @@ input[type=checkbox]:focus {
 
 .react-tabs {
   -webkit-tap-highlight-color: transparent;
-  
+  height: 100%;
 }
 
 .react-tabs__tab-list {
@@ -208,6 +211,8 @@ input[type=checkbox]:focus {
 .react-tabs__tab-panel {
   display: none;
   left: 0px;
+  height: 88%;
+  overflow: scroll;
 }
 
 .react-tabs__tab-panel--selected {
@@ -223,7 +228,7 @@ ul li:not(.task-list-item)::before {
   font-weight: bold;
   text-shadow: 0 0 0.5em transparent;
 }
-body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div.workspace-tabs > div.workspace-leaf > div > div.view-content > div > div.cron > button {
+button {
   margin: auto;
   margin-bottom: 5px;
   white-space: nowrap;
@@ -238,7 +243,6 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
   margin-left: 10%;
   margin-right: 10%;
   margin-bottom: 10px;
-  background-color: var(--background-secondary-alt);
   border-radius: 10px;
 }
 #cronMessage {