feat: add withUserConfigs

src/App.tsx

@@ -4,7 +4,7 @@ import useAppVisible from './hooks/useAppVisible';
 import useIconPosition from './hooks/useIconPosition';
 import dayjs from 'dayjs';
 import TaskInput from './components/TaskInput';
-import useUserConfigs from './hooks/useUserConfigs';
+import useUserConfigs, { withUserConfigs } from './hooks/useUserConfigs';
 import TaskSection from './components/TaskSection';
 import Task from './models/Task';
 
@@ -22,15 +22,7 @@ function App() {
 
   const createNewTask = async (content: string) => {
     const { preferredDateFormat, preferredTodo } = userConfigs!;
-    const format = preferredDateFormat
-      .replace('yyyy', 'YYYY')
-      .replace('dd', 'DD')
-      .replace('do', 'Do')
-      .replace('EEEE', 'dddd')
-      .replace('EEE', 'ddd')
-      .replace('EE', 'dd')
-      .replace('E', 'dd');
-    const date = dayjs().format(format);
+    const date = dayjs().format(preferredDateFormat);
     let page = await window.logseq.Editor.getPage(date);
     if (page === null) {
       page = await window.logseq.Editor.createPage(date, {
@@ -72,4 +64,4 @@ function App() {
   );
 }
 
-export default App;
+export default withUserConfigs(App);

src/components/TaskItem.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classnames from 'classnames';
+import dayjs from 'dayjs';
 import Checkbox from 'rc-checkbox';
-import 'rc-checkbox/assets/index.css';
 import Task from '../models/Task';
+import useUserConfigs from '../hooks/useUserConfigs';
+import 'rc-checkbox/assets/index.css';
 
 export interface ITaskItemProps {
   item: Task;
@@ -12,6 +14,7 @@ export interface ITaskItemProps {
 const TaskItem: React.FC<ITaskItemProps> = (props) => {
   const { item: task, onChange } = props;
   const [checked, setChecked] = React.useState(task.isDone());
+  const { preferredDateFormat } = useUserConfigs();
 
   const handleTaskChange = async () => {
     await task.toggle();
@@ -20,7 +23,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
   };
 
   const contentClassName = classnames(
-    'flex-1 border-b pb-1 text-sm leading-normal',
+    'flex-1 border-b border-gray-100 pb-2 pt-1 text-sm leading-normal',
     {
       'line-through': checked,
       'text-gray-400': checked,
@@ -29,13 +32,20 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
 
   return (
     <div key={task.uuid} className="flex flex-row pb-1">
-      <Checkbox
-        checked={checked}
-        onChange={handleTaskChange}
-        className="py-1 mr-2"
-      />
+      <div>
+        <Checkbox
+          checked={checked}
+          onChange={handleTaskChange}
+          className="pt-1 mr-2"
+        />
+      </div>
       <div className={contentClassName}>
-        {task.content}
+        <p>{task.content}</p>
+        {task.scheduled && (
+          <time className="text-xs text-gray-400">
+            {dayjs(task.scheduled.toString(), 'YYYYMMDD').format(preferredDateFormat)}
+          </time>
+        )}
       </div>
     </div>
   );

src/components/TaskSection.tsx

@@ -20,7 +20,7 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
   };
 
   return (
-    <div>
+    <div className="py-2">
       <h2 className="py-1 text-red-500 font-semibold">{title}</h2>
       <div>
         {tasks.map((task) => (

src/hooks/useUserConfigs.tsx

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { AppUserConfigs } from '@logseq/libs/dist/LSPlugin';
+import { useEffect, useState } from 'react';
+
+// @ts-ignore
+const UserConfigsContext = React.createContext<AppUserConfigs>({
+  preferredLanguage: 'en',
+  preferredThemeMode: 'light',
+  preferredFormat: 'markdown',
+  preferredWorkflow: 'now',
+  preferredTodo: 'LATER',
+  preferredDateFormat: 'MMM do, yyyy',
+});
+
+function fixPreferredDateFormat(preferredDateFormat: string) {
+  const format = preferredDateFormat
+    .replace('yyyy', 'YYYY')
+    .replace('dd', 'DD')
+    .replace('do', 'Do')
+    .replace('EEEE', 'dddd')
+    .replace('EEE', 'ddd')
+    .replace('EE', 'dd')
+    .replace('E', 'dd');
+  return format;
+}
+
+export const withUserConfigs = <P extends {}>(
+  WrapComponent: React.ComponentType<P>,
+) => {
+  const WithUserConfigsComponent: typeof WrapComponent = (props) => {
+    const [configs, setConfigs] = useState<AppUserConfigs>();
+
+    useEffect(() => {
+      window.logseq.App.getUserConfigs().then((configs) => {
+        setConfigs({
+          ...configs,
+          preferredDateFormat: fixPreferredDateFormat(configs.preferredDateFormat),
+        });
+      });
+    }, []);
+
+    return (
+      <UserConfigsContext.Provider value={configs!}>
+        <WrapComponent {...props} />
+      </UserConfigsContext.Provider>
+    );
+  };
+  return WithUserConfigsComponent;
+};
+
+const useUserConfigs = () => {
+  const configs = useContext(UserConfigsContext);
+  return configs;
+};
+
+export default useUserConfigs;

src/models/Task.ts

@@ -1,5 +1,5 @@
-import { BlockEntity } from "@logseq/libs/dist/LSPlugin";
-import dayjs from "dayjs";
+import { BlockEntity } from '@logseq/libs/dist/LSPlugin';
+import dayjs, { Dayjs } from 'dayjs';
 
 export enum TaskMarker {
   LATER = 'LATER',
@@ -35,7 +35,7 @@ class Task {
             [?b :block/scheduled ?d]
             [?b :block/deadline ?d])
           [(= ?d ${today})]))]
-    `
+    `;
     return query;
   }
 
@@ -57,7 +57,7 @@ class Task {
             [?b :block/scheduled ?d]
             [?b :block/deadline ?d])
           [(< ?d ${today})]))]
-    `
+    `;
     return query;
   }
 
@@ -73,7 +73,7 @@ class Task {
          [?b :block/scheduled ?d]
          [?b :block/deadline ?d])
        [(> ?d ${today})]]
-    `
+    `;
     return query;
   }
 
@@ -87,12 +87,12 @@ class Task {
        (not [?p :block/journal? true])]
        (not [?b :block/scheduled])
        (not [?b :block/deadline])]
-    `
+    `;
     return query;
   }
 
   public get uuid(): string {
-    if (typeof this.block.uuid === "string") {
+    if (typeof this.block.uuid === 'string') {
       return this.block.uuid;
     }
     // @ts-ignore
@@ -105,14 +105,17 @@ class Task {
     content = content.replace(/SCHEDULED: <[^>]+>/, '');
     content = content.replace(/DEADLINE: <[^>]+>/, '');
     content = content.replace(/(:LOGBOOK:)|(\*\s.*)|(:END:)|(CLOCK:.*)/gm, '');
-    content = content.replace(/\[\[([^\]]+)\]\]/g, '\n');
     return content.trim();
   }
 
   public get marker(): TaskMarker {
     return this.block.marker;
   }
 
+  public get scheduled(): Dayjs {
+    return this.block.scheduled;
+  }
+
   public isDone(): boolean {
     return this.block.marker === TaskMarker.DONE;
   }