feat: supports pomodoro timer

src/PomodoroApp.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import { secondsToTime } from './util/util'
+
+const PomodoroApp: React.FC<{
+  duration: number
+  uuid: string
+  initialStatus?: string
+  initialTimer?: number
+  doneCount?: number
+}> = ({ duration, uuid, initialStatus }) => {
+  const [time, setTime] = useState(duration)
+
+  const start = () => {
+    logseq.Editor.updateBlock(uuid, `test {{renderer agenda, pomodoro-timer, 40, 'timing', 0}}`)
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      console.log('[faiz:] === setInterval')
+      setTime(time => {
+        if (time <= 0) {
+          clearInterval(interval)
+          logseq.Editor.updateBlock(uuid, `test {{renderer agenda, pomodoro-timer, 40, 'end', 1}}`)
+          console.log('[faiz:] === time end', uuid)
+          return 0
+        }
+        return time - 1
+      })
+    }, 1000)
+    console.log('[faiz:] === PomodoroApp interval created', uuid, interval)
+    return () => clearInterval(interval)
+  }, [uuid])
+
+  return (
+    <div>
+      {secondsToTime(time)}
+      <i>{initialStatus}</i>
+      <b>start</b>
+    </div>
+  )
+}
+
+export default PomodoroApp

src/main.tsx

@@ -24,6 +24,7 @@ import { IScheduleValue } from '@/components/ModifySchedule'
 import { getBlockData, getBlockUuidFromEventPath, isEnabledAgendaPage, pureTaskBlockContent } from './util/logseq'
 import { LOGSEQ_PROVIDE_COMMON_STYLE } from './constants/style'
 import { transformBlockToEvent } from './helper/transform'
+import PomodoroApp from './PomodoroApp'
 
 dayjs.extend(weekday)
 dayjs.extend(isSameOrBefore)
@@ -171,40 +172,68 @@ if (isDevelopment) {
     logseq.Editor.registerSlashCommand('Agenda: Insert Task List', async () => {
       logseq.Editor.insertAtEditingCursor(`{{renderer agenda, task-list}}`)
     })
+    logseq.Editor.registerSlashCommand('Agenda: Pomodoro Timer', async () => {
+      logseq.Editor.insertAtEditingCursor(`{{renderer agenda, pomodoro-timer, 40, 'nostarted', 0}}`)
+    })
     logseq.App.onMacroRendererSlotted(async ({ slot, payload: { arguments: args, uuid } }) => {
       console.log('[faiz:] === onMacroRendererSlotted', slot, args, uuid)
-      if (args?.[0] !== 'agenda' || args?.[1] !== 'task-list') return
-      const renderered = parent.document.getElementById(slot)?.childElementCount
-      console.log('[faiz:] === is renderered', renderered)
-      if (renderered) return
+      if (args?.[0] !== 'agenda') return
+      if (args?.[1] === 'task-list') {
+        const renderered = parent.document.getElementById(slot)?.childElementCount
+        console.log('[faiz:] === is task-list renderered', renderered)
+        if (renderered) return
 
-      const id = `agenda-task-list-${slot}`
-      logseq.provideUI({
-        key: `agenda-${slot}`,
-        slot,
-        reset: true,
-        template: `<div id="${id}"></div>`,
-        // style: {},
-      })
-      logseq.provideStyle(`${LOGSEQ_PROVIDE_COMMON_STYLE}
-        #block-content-${uuid} .lsp-hook-ui-slot {
-          width: 100%;
-        }
-        #block-content-${uuid} .lsp-hook-ui-slot > div {
-          width: 100%;
-        }
-        #block-content-${uuid} .lsp-hook-ui-slot > div > div {
-          width: 100%;
-        }
-      `)
-      setTimeout(() => {
-        ReactDOM.render(
-          <React.StrictMode>
-            <TaskListApp containerId={id} />
-          </React.StrictMode>,
-          parent.document.getElementById(id)
-        )
-      }, 0)
+        const id = `agenda-task-list-${slot}`
+        logseq.provideUI({
+          key: `agenda-${slot}`,
+          slot,
+          reset: true,
+          template: `<div id="${id}"></div>`,
+          // style: {},
+        })
+        logseq.provideStyle(`${LOGSEQ_PROVIDE_COMMON_STYLE}
+          #block-content-${uuid} .lsp-hook-ui-slot {
+            width: 100%;
+          }
+          #block-content-${uuid} .lsp-hook-ui-slot > div {
+            width: 100%;
+          }
+          #block-content-${uuid} .lsp-hook-ui-slot > div > div {
+            width: 100%;
+          }
+        `)
+        setTimeout(() => {
+          ReactDOM.render(
+            <React.StrictMode>
+              <TaskListApp containerId={id} />
+            </React.StrictMode>,
+            parent.document.getElementById(id)
+          )
+        }, 0)
+      } else if (args?.[1] === 'pomodoro-timer') {
+        const renderered = parent.document.getElementById(slot)?.childElementCount
+        console.log('[faiz:] === is pomodoro-timer renderered', renderered)
+
+        const id = `agenda-pomodoro-timer-${slot}`
+        const duration = args?.[2] || 40
+        const status = args?.[3] || 'nostarted'
+        const count = args?.[4] || 0
+        logseq.provideUI({
+          key: `agenda-${slot}`,
+          slot,
+          reset: true,
+          template: `<div id="${id}"></div>`,
+          // style: {},
+        })
+        setTimeout(() => {
+          ReactDOM.render(
+            <React.StrictMode>
+              <PomodoroApp duration={Number(duration)} initialStatus={status} uuid={uuid} />
+            </React.StrictMode>,
+            parent.document.getElementById(id)
+          )
+        }, 0)
+      }
     })
 
     logseq.provideStyle(LOGSEQ_PROVIDE_COMMON_STYLE)

src/util/util.ts

@@ -145,3 +145,9 @@ export const parseUrlParams = (url: string): Record<string, string> => {
   l.forEach((val, key) => res[key] = val)
   return res
 }
+
+export const secondsToTime = (seconds: number) => {
+  const minute = Math.floor((seconds % 3600) / 60)
+  const second = Math.floor(seconds % 60)
+  return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
+}