Merge pull request #69 from ahonn/feat/focus-after-create-task

feat: refactor task creation process, force focus after create new task
ahonn · Feb 4, 2024 · ece3b5d · ece3b5d
2 parents 843c17b + c7dc80e
commit ece3b5d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 36 deletions.
diff --git a/src/api.ts b/src/api.ts
@@ -20,11 +20,7 @@ export function isTodayTask(task: TaskEntityObject) {
   return dayjs(new Date()).format('YYYYMMDD') === scheduled.toString();
 }
 
-export async function createNewTask(
-  date: string,
-  content: string,
-  opts: ITaskOptions,
-) {
+export async function createNewTask(date: string, content: string, opts: ITaskOptions) {
   const { marker, priority, whereToPlaceNewTask } = opts;
   const rawContent = `${marker} ${priority ? `[#${priority}]` : ''} ${content}`;
   let page = await window.logseq.Editor.getPage(date);
@@ -37,29 +33,23 @@ export async function createNewTask(
   const blocksTree = await window.logseq.Editor.getPageBlocksTree(date);
 
   if (whereToPlaceNewTask) {
-    let parentBlock = blocksTree.find((block: BlockEntity) => block.content === whereToPlaceNewTask);
+    let parentBlock = blocksTree.find(
+      (block: BlockEntity) => block.content === whereToPlaceNewTask,
+    );
     if (parentBlock === undefined) {
       parentBlock = (await window.logseq.Editor.appendBlockInPage(
         page!.name,
         whereToPlaceNewTask,
       )) as BlockEntity;
     }
-    await window.logseq.Editor.insertBlock(
-      parentBlock!.uuid,
-      rawContent,
-    );
+    await window.logseq.Editor.insertBlock(parentBlock!.uuid, rawContent);
   } else {
-    await window.logseq.Editor.appendBlockInPage(
-      page!.name,
-      rawContent,
-    );
+    await window.logseq.Editor.appendBlockInPage(page!.name, rawContent);
   }
 
   if (blocksTree.length === 1 && blocksTree[0].content === '') {
     await window.logseq.Editor.removeBlock(blocksTree[0].uuid);
   }
-
-  window.logseq.Editor.exitEditingMode(true);
 }
 
 export async function toggleTaskStatus(
@@ -68,10 +58,7 @@ export async function toggleTaskStatus(
 ) {
   const { uuid, completed, marker } = task;
   const nextMarker = completed ? options.marker : TaskMarker.DONE;
-  await window.logseq.Editor.updateBlock(
-    uuid,
-    task.rawContent.replace(marker, nextMarker),
-  );
+  await window.logseq.Editor.updateBlock(uuid, task.rawContent.replace(marker, nextMarker));
 }
 
 interface IOpenTaskOptions {
@@ -86,10 +73,7 @@ export function openTask(task: TaskEntityObject, opts?: IOpenTaskOptions) {
   return window.logseq.Editor.scrollToBlockInPage(task.page.name, uuid);
 }
 
-export function openTaskPage(
-  page: TaskEntityObject['page'],
-  opts?: IOpenTaskOptions,
-) {
+export function openTaskPage(page: TaskEntityObject['page'], opts?: IOpenTaskOptions) {
   if (opts?.openInRightSidebar) {
     return window.logseq.Editor.openInRightSidebar(page.uuid);
   }
@@ -109,10 +93,7 @@ export async function toggleTaskMarker(
   await window.logseq.Editor.updateBlock(uuid, newRawContent);
 }
 
-export async function setTaskScheduled(
-  task: TaskEntityObject,
-  date: Date | null,
-) {
+export async function setTaskScheduled(task: TaskEntityObject, date: Date | null) {
   const { uuid, rawContent } = task;
   let newRawContent = task.rawContent;
   if (date === null) {
@@ -121,9 +102,7 @@ export async function setTaskScheduled(
     return;
   }
 
-  const scheduledString = `SCHEDULED: <${dayjs(date).format(
-    'YYYY-MM-DD ddd',
-  )}>`;
+  const scheduledString = `SCHEDULED: <${dayjs(date).format('YYYY-MM-DD ddd')}>`;
   if (rawContent.includes('SCHEDULED')) {
     newRawContent = rawContent.replace(/SCHEDULED: <[^>]+>/, scheduledString);
   } else {

diff --git a/src/components/TaskInput.tsx b/src/components/TaskInput.tsx
@@ -1,22 +1,24 @@
 import React, { useImperativeHandle, useRef } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { CirclePlus } from 'tabler-icons-react';
 import { inputState } from '../state/input';
 import { themeStyleState } from '../state/theme';
+import { visibleState } from '../state/visible';
 
 export interface ITaskInputRef {
   focus: () => void;
 }
 
 export interface ITaskInputProps {
-  onCreateTask(content: string): void;
+  onCreateTask(content: string): Promise<void>;
 }
 
 const TaskInput: React.ForwardRefRenderFunction<
   ITaskInputRef,
   ITaskInputProps
 > = (props, ref) => {
   const [input, setInput] = useRecoilState(inputState);
+  const setVisible = useSetRecoilState(visibleState);
   const inputRef = useRef<HTMLInputElement>(null);
   const themeStyle = useRecoilValue(themeStyleState);
 
@@ -46,11 +48,17 @@ const TaskInput: React.ForwardRefRenderFunction<
           value={input}
           onChange={(e) => setInput(e.target.value)}
           placeholder="Type to search, enter to create"
-          onKeyPress={(e) => {
-            if (e.key === 'Enter') {
+          onKeyPress={async (e) => {
+            if (e.key === 'Enter' && input.trim() !== '') {
               e.preventDefault();
-              props.onCreateTask(input);
+              await props.onCreateTask(input);
               setInput('');
+              // HACK: Force focus to solve the problem that the focus cannot be
+              // focused after creating the task on current page
+              setVisible(false);
+              setTimeout(() => {
+                setVisible(true);
+              });
             }
           }}
         />