feat: add task creation via /tt

Author: mxschll

src/App.tsx

@@ -1,60 +1,145 @@
-import "@logseq/libs";
+import '@logseq/libs';
+import moment from 'moment';
+import TickTick from './ticktick/ticktick';
+import { NewTask, Subtask } from './ticktick/task';
+import { logseq as PackageLogseq } from '../package.json';
+import { settingsSchema, getTickTickSettings } from './settings';
+import { BlockEntity } from '@logseq/libs/dist/LSPlugin';
 
-import React from "react";
-import * as ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
+const pluginId = PackageLogseq.id;
+const ticktick = new TickTick();
 
-import { logseq as PL } from "../package.json";
+const priorityToNum = (text: string): 0 | 1 | 3 | 5  => {
+  const priority = text.match(/\[#([A-C])\]/);
+  if (priority) {
+    switch (priority[1]) {
+      case 'A':
+        return 5;
+      case 'B':
+        return 3;
+      case 'C':
+        return 1;
+    }
+  }
+  return 0;
+};
+
+const priorityToTag = (priority: 0 | 1 | 3 | 5 | undefined): string => {
+  switch (priority) {
+    case 5:
+      return ' [#A] ';
+    case 3:
+      return ' [#B] ';
+    case 1:
+      return ' [#C] ';
+  }
+  return '';
+};
 
-// @ts-expect-error
-const css = (t, ...args) => String.raw(t, ...args);
+const parseTask = (text: string): NewTask => {
+  // parse priority and remove it from the title
+  const priority = priorityToNum(text);
+  let title = text.replace(/\[#([A-C])\]/, '');
+  title = title.replace(/TODO/, '');
 
-const pluginId = PL.id;
+  return {
+    title,
+    priority,
+    items: [],
+  };
+};
 
-function main() {
-  console.info(`#${pluginId}: MAIN`);
-  const root = ReactDOM.createRoot(document.getElementById("app")!);
-
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  );
-
-  function createModel() {
-    return {
-      show() {
-        logseq.showMainUI();
-      },
-    };
+const getTreeContent: (block: BlockEntity) => Promise<BlockEntity | null> = async (block) => {
+  const blockEntity = await logseq.Editor.getBlock(block.uuid, { includeChildren: true });
+
+  return blockEntity;
+}
+
+const flattenTree: (node: BlockEntity) => BlockEntity[] = (node) => {
+  const result: BlockEntity[] = [node];
+
+  if (node.children) {
+    for (const child of node.children) {
+      result.push(...flattenTree(child as BlockEntity));
+    }
   }
 
-  logseq.provideModel(createModel());
-  logseq.setMainUIInlineStyle({
-    zIndex: 11,
+  return result;
+}
+
+const main: () => Promise<void> = async () => {
+  console.info(`#${pluginId}: MAIN`);
+
+  logseq.useSettingsSchema(settingsSchema);
+  let settings = getTickTickSettings();
+  
+  logseq.onSettingsChanged(() => {
+    settings = getTickTickSettings();
+
+    if (
+      settings.accessToken === '' &&
+      settings.accessCode !== '' &&
+      settings.clientId !== '' &&
+      settings.clientSecret !== '' &&
+      settings.redirectUri !== ''
+    ) {
+      ticktick
+        .getAccessToken(
+          settings.clientId,
+          settings.clientSecret,
+          settings.accessCode,
+          settings.redirectUri,
+        )
+        .then((accessToken) => {
+          logseq.updateSettings({ accessToken });
+          logseq.UI.showMsg(
+            'TickTick access token updated successfully.',
+            'success',
+          );
+        });
+    }
   });
 
-  const openIconName = "template-plugin-open";
+  if (settings.accessToken !== '') {
+    ticktick.setAccessToken(settings.accessToken);
+  }
 
-  logseq.provideStyle(css`
-    .${openIconName} {
-      opacity: 0.55;
-      font-size: 20px;
-      margin-top: 4px;
+  logseq.Editor.registerSlashCommand('tt', async () => {
+    const blockEntity = await logseq.Editor.getCurrentBlock();
+    if (!blockEntity) {
+      console.error('No block selected');
+      return;
     }
 
-    .${openIconName}:hover {
-      opacity: 0.9;
+    let contentTree = await getTreeContent(blockEntity);
+    if (!contentTree) {
+      console.error('Cannot get tree content from block entity');
+      return;
     }
-  `);
 
-  logseq.App.registerUIItem("toolbar", {
-    key: openIconName,
-    template: `
-      <div data-on-click="show" class="${openIconName}">⚙️</div>
-    `,
+    const flatContentTree = flattenTree(contentTree);
+    console.log(flatContentTree);
+
+    const subtasks: Subtask[] = flatContentTree.slice(1).map(child => {
+      const subtask: Subtask = {
+        title: child.content.replace(/TODO/, '').replace(/\[#([A-C])\]/, ''),
+      };
+      return subtask;
+    });
+
+    const task = parseTask(flatContentTree[0]?.content || '');
+    task.items = subtasks; 
+
+    try {
+      const newTask = await ticktick.createTask(task);
+      await logseq.Editor.updateBlock(
+        blockEntity.uuid,
+        `TODO${priorityToTag(newTask.priority)}[${newTask.title}](${newTask.taskUrl})`,
+      );
+    } catch (error) {
+      logseq.UI.showMsg('TickTick access token is invalid.', 'error');
+    }
   });
 }
 
-logseq.ready(main).catch(console.error);
+logseq.ready(main).catch(console.error);

src/main.tsx

@@ -2,46 +2,47 @@ import { SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin';
 
 export const settingsSchema: SettingSchemaDesc[] = [
   {
-    key: 'ticktick.client_id',
+    key: 'client_id',
     type: 'string',
-    title: 'Client ID',
+    title: 'TickTick Client ID',
     description: 'TickTick Client ID',
     default: '',
   },
   {
-    key: 'ticktick.client_secret',
+    key: 'client_secret',
     type: 'string',
-    title: 'Client Secret',
+    title: 'TickTick Client Secret',
     description: 'TickTick Client Secret',
     default: '',
   },
   {
-    key: 'ticktick.redirect_uri',
+    key: 'redirect_uri',
     type: 'string',
-    title: 'Redirect URI',
+    title: 'TickTick Redirect URI',
     description: 'TickTick Redirect URI',
     default: '',
   },
   {
-    key: 'ticktick.code',
+    key: 'access_code',
     type: 'string',
-    title: 'Code',
+    title: 'TickTick Access Code',
     description: 'TickTick Code',
     default: 'https://mxschll.github.io/logseq-ticktick-plugin',
   },
 ];
 
 export const getTickTickSettings = () => {
-  const clientId = logseq.settings!['ticktick.client_id'];
-  const clientSecret = logseq.settings!['ticktick.client_secret'];
-  const redirectUri = logseq.settings!['ticktick.redirect_uri'];
-  const code = logseq.settings!['ticktick.code'];
-  const accessToken = logseq.settings!['ticktick.access_token'] || '';
+  const clientId = logseq.settings!['client_id'];
+  const clientSecret = logseq.settings!['client_secret'];
+  const redirectUri = logseq.settings!['redirect_uri'];
+  const accessCode = logseq.settings!['access_code'];
+  const accessToken = logseq.settings!['access_token'];
+
   return {
-    clientId,
-    clientSecret,
-    redirectUri,
-    code,
-    accessToken,
+    clientId: clientId || '',
+    clientSecret: clientSecret || '',
+    redirectUri: redirectUri || '',
+    accessCode: accessCode || '',
+    accessToken: accessToken || '',
   };
 };

src/settings.ts

@@ -33,6 +33,10 @@ class TickTick {
         return data.access_token;
     }
 
+    public setAccessToken(accessToken: string): void {
+        this.accessToken = accessToken;
+    }
+
     private generateTaskUrl(task: Task): string {
         return `${this.WEB_URL}/#p/${encodeURIComponent(task.projectId)}/task/${encodeURIComponent(task.id)}`;
     }