diff --git a/src/App.tsx b/src/App.tsx index ca4e151..dcccfa7 100644 --- a/src/App.tsx +++ b/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); diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx index 1e98b72..b6e47e3 100644 --- a/src/components/TaskItem.tsx +++ b/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 = (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 = (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 = (props) => { return (
- +
+ +
- {task.content} +

{task.content}

+ {task.scheduled && ( + + )}
); diff --git a/src/components/TaskSection.tsx b/src/components/TaskSection.tsx index 87c8997..a86586a 100644 --- a/src/components/TaskSection.tsx +++ b/src/components/TaskSection.tsx @@ -20,7 +20,7 @@ const TaskSection: React.FC = (props) => { }; return ( -
+

{title}

{tasks.map((task) => ( diff --git a/src/hooks/useUserConfigs.ts b/src/hooks/useUserConfigs.ts deleted file mode 100644 index b3bd472..0000000 --- a/src/hooks/useUserConfigs.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { AppUserConfigs } from '@logseq/libs/dist/LSPlugin'; -import { useEffect, useState } from 'react'; - -const useUserConfigs = () => { - const [configs, setConfigs] = useState(); - - useEffect(() => { - window.logseq.App.getUserConfigs().then((configs) => { - setConfigs(configs); - }); - }, []); - - return configs; -}; - -export default useUserConfigs; diff --git a/src/hooks/useUserConfigs.tsx b/src/hooks/useUserConfigs.tsx new file mode 100644 index 0000000..84f5a26 --- /dev/null +++ b/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({ + 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 =

( + WrapComponent: React.ComponentType

, +) => { + const WithUserConfigsComponent: typeof WrapComponent = (props) => { + const [configs, setConfigs] = useState(); + + useEffect(() => { + window.logseq.App.getUserConfigs().then((configs) => { + setConfigs({ + ...configs, + preferredDateFormat: fixPreferredDateFormat(configs.preferredDateFormat), + }); + }); + }, []); + + return ( + + + + ); + }; + return WithUserConfigsComponent; +}; + +const useUserConfigs = () => { + const configs = useContext(UserConfigsContext); + return configs; +}; + +export default useUserConfigs; diff --git a/src/models/Task.ts b/src/models/Task.ts index 210c7d6..6c29111 100644 --- a/src/models/Task.ts +++ b/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,7 +105,6 @@ 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(); } @@ -113,6 +112,10 @@ class Task { return this.block.marker; } + public get scheduled(): Dayjs { + return this.block.scheduled; + } + public isDone(): boolean { return this.block.marker === TaskMarker.DONE; }