feat(agenda3): ✨ add log for plugin mode

haydenull · Nov 7, 2023 · 443867f · 443867f
1 parent 50eed1a
commit 443867f
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 40 deletions.
diff --git a/.env.plugin b/.env.plugin
@@ -1 +1,3 @@
-VITE_MODE=plugin
+VITE_MODE=plugin
+VITE_UMAMI_WEBSITE_ID=ea1402a1-0f40-4bd4-b648-46f92f562dfb
+VITE_UMAMI_AUTO_TRACK=false
diff --git a/.env.web b/.env.web
@@ -1 +1,3 @@
-VITE_MODE=web
+VITE_MODE=web
+VITE_UMAMI_WEBSITE_ID=a03b71ea-7abc-4eb0-816b-3f663f672f1c
+VITE_UMAMI_AUTO_TRACK=true
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Agenda</title>
-    <script async src="https://umami.haydenhayden.com/script.js" data-website-id="ea1402a1-0f40-4bd4-b648-46f92f562dfb"></script>
+    <script async src="https://umami.haydenhayden.com/script.js" data-website-id="%VITE_UMAMI_WEBSITE_ID%" data-auto-track="%VITE_UMAMI_AUTO_TRACK%"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.3",
     "utility-types": "^3.10.0",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vite-plugin-importer": "^0.2.5",
     "vitest": "^0.34.3",
     "vue": "^3.2.47",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.tsx b/src/main.tsx
@@ -28,6 +28,7 @@ import { listenEsc, log, managePluginTheme, setPluginTheme, toggleAppTransparent
 import NewMainApp from './apps/NewMainApp'
 import TaskListApp from './apps/TaskListApp'
 import i18n from './locales/i18n'
+import { track } from './newHelper/umami'
 import './style/index.less'
 
 echarts.use([
@@ -50,7 +51,7 @@ let root: Root | null = null
 if (import.meta.env.VITE_MODE === 'web') {
   // run in browser
   console.log('[faiz:] === meta.env.VITE_LOGSEQ_API_SERVER', import.meta.env.VITE_LOGSEQ_API_SERVER)
-  console.log(`%c[version]: v${window.__APP_VERSION__}`, 'background-color: #60A5FA; color: white; padding: 4px;')
+  console.log(`%c[version]: v${__APP_VERSION__}`, 'background-color: #60A5FA; color: white; padding: 4px;')
   proxyLogseq({
     config: {
       apiServer: import.meta.env.VITE_LOGSEQ_API_SERVER,
@@ -83,12 +84,14 @@ if (import.meta.env.VITE_MODE === 'web') {
     // ===== logseq plugin model start =====
     logseq.provideModel({
       show() {
+        track('Show Agenda2', { version: __APP_VERSION__ })
         renderApp(false)
         managePluginTheme()
         logseq.showMainUI()
         window.isMounted = false
       },
       showAgenda3() {
+        track('Show Agenda', { version: __APP_VERSION__ })
         if (window.isMounted !== true) {
           renderApp(true)
           window.isMounted = true

diff --git a/src/newHelper/umami.ts b/src/newHelper/umami.ts
@@ -0,0 +1,13 @@
+export const track = (name: string, data?: Record<string, number | string>) => {
+  if (!umami) return console.error('umami is not defined')
+  if (import.meta.env.VITE_MODE === 'plugin') {
+    // @ts-expect-error type correct
+    return umami.track((params) => ({
+      ...params,
+      hostname: 'plugin',
+      name,
+      data,
+    }))
+  }
+  return umami.track(name, data)
+}
diff --git a/src/pages/NewDashboard/components/Calendar.tsx b/src/pages/NewDashboard/components/Calendar.tsx
@@ -14,6 +14,7 @@ import useAgendaTasks from '@/hooks/useAgendaTasks'
 import { deleteTask as deleteTaskBlock, genDurationString, updateDateInfo } from '@/newHelper/block'
 import { transformAgendaTaskToCalendarEvent } from '@/newHelper/fullCalendar'
 import { formatTaskTitle } from '@/newHelper/task'
+import { track } from '@/newHelper/umami'
 import { settingsAtom } from '@/newModel/settings'
 import { tasksWithStartAtom } from '@/newModel/tasks'
 import type { CalendarEvent } from '@/types/fullcalendar'
@@ -185,25 +186,25 @@ const Calendar = ({ onCalendarTitleChange }: CalendarProps, ref) => {
         // drag external kanban element to calendar
         eventReceive={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Calendar: Receive Event', { calendarView: info.view.type })
+          track('Calendar: Receive Event', { calendarView: info.view.type })
         }}
         // resize duration
         eventResize={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Calendar: Resize Event', { calendarView: info.view.type })
+          track('Calendar: Resize Event', { calendarView: info.view.type })
         }}
         // drag move
         eventDrop={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Calendar: Move Event', { calendarView: info.view.type })
+          track('Calendar: Move Event', { calendarView: info.view.type })
         }}
         // click event
         eventClick={(info) => {
           onEventClick(info)
-          umami.track('Calendar: Click Event', { calendarView: info.view.type })
+          track('Calendar: Click Event', { calendarView: info.view.type })
         }}
         select={(info) => {
-          umami.track('Calendar: Select Event', { calendarView: info.view.type })
+          track('Calendar: Select Event', { calendarView: info.view.type })
           if (info.allDay) {
             const endDay = dayjs(info.end).subtract(1, 'day')
             const startDay = dayjs(info.start)

diff --git a/src/pages/NewDashboard/components/KanBan.tsx b/src/pages/NewDashboard/components/KanBan.tsx
@@ -17,6 +17,7 @@ import {
   separateTasksInDay,
   transformTasksToKanbanTasks,
 } from '@/newHelper/task'
+import { track } from '@/newHelper/umami'
 import { appAtom } from '@/newModel/app'
 import { logseqAtom } from '@/newModel/logseq'
 import { settingsAtom } from '@/newModel/settings'
@@ -160,8 +161,7 @@ const KanBan = (props, ref) => {
             )}
             <TaskModal onOk={addNewTask} info={{ type: 'create', initialData: { startDateVal: day } }}>
               <div
-                data-umami-event="KanBan: Add Task Button"
-                data-umami-event-today={isToday}
+                onClick={() => track('KanBan: Add Task Button', { today: String(isToday) })}
                 className={cn(
                   'bg-white rounded-md p-2 my-2 text-gray-400 text-sm flex items-center hover:shadow cursor-pointer group justify-between',
                   {
@@ -211,7 +211,7 @@ const KanBan = (props, ref) => {
                   start: startDay,
                   allDay: task.allDay,
                 })
-                umami.track('KanBan: Drag Task')
+                track('KanBan: Drag Task')
               }}
             >
               {_dayTasks.map((task) => {

diff --git a/src/pages/NewDashboard/components/MultipleView.tsx b/src/pages/NewDashboard/components/MultipleView.tsx
@@ -6,6 +6,7 @@ import { FiPower, FiSettings, FiX, FiXCircle } from 'react-icons/fi'
 import { LuCalendarDays, LuKanbanSquare } from 'react-icons/lu'
 
 import i18n from '@/locales/i18n'
+import { track } from '@/newHelper/umami'
 import { type App, appAtom } from '@/newModel/app'
 import { cn } from '@/util/util'
 
@@ -46,7 +47,7 @@ const MultipleView = ({ className }: { className?: string }) => {
     } else {
       kanbanRef.current?.scrollToToday()
     }
-    umami.track('Today Button', { view: app.view })
+    track('Today Button', { view: app.view })
   }
 
   return (
@@ -65,7 +66,7 @@ const MultipleView = ({ className }: { className?: string }) => {
                 className="!bg-gray-200 !mr-3"
                 onChange={(view) => {
                   calendarRef.current?.changeView(view as CalendarView)
-                  umami.track('Calendar View Change', { calendarView: view })
+                  track('Calendar View Change', { calendarView: view })
                 }}
               />
               <Button
@@ -74,7 +75,7 @@ const MultipleView = ({ className }: { className?: string }) => {
                 className="!bg-transparent mr-1"
                 onClick={() => {
                   calendarRef.current?.prev()
-                  umami.track('Calendar Previous Button')
+                  track('Calendar Previous Button')
                 }}
               />
               <Button
@@ -83,7 +84,7 @@ const MultipleView = ({ className }: { className?: string }) => {
                 className="!bg-transparent"
                 onClick={() => {
                   calendarRef.current?.next()
-                  umami.track('Calendar Next Button')
+                  track('Calendar Next Button')
                 }}
               />
             </div>
@@ -99,7 +100,7 @@ const MultipleView = ({ className }: { className?: string }) => {
             items={VIEWS}
             onChange={(key) => {
               setApp({ view: key as App['view'] })
-              umami.track('View Change', { view: key })
+              track('View Change', { view: key })
             }}
             // renderTabBar={(props, DefaultTabBar) => <DefaultTabBar />}
             tabBarStyle={{ height: '36px', margin: 0 }}
@@ -108,7 +109,7 @@ const MultipleView = ({ className }: { className?: string }) => {
           />
           <UploadIcs className="text-lg cursor-pointer" />
           <SettingsModal>
-            <FiSettings className="text-lg cursor-pointer" data-umami-event="Settings Button" />
+            <FiSettings className="text-lg cursor-pointer" onClick={() => track('Settings Button')} />
           </SettingsModal>
           {import.meta.env.VITE_MODE === 'plugin' ? (
             <FiXCircle className="text-lg cursor-pointer" onClick={() => logseq.hideMainUI()} />

diff --git a/src/pages/NewDashboard/components/TaskModal/index.tsx b/src/pages/NewDashboard/components/TaskModal/index.tsx
@@ -11,6 +11,7 @@ import TimeSelect from '@/components/TaskModal/components/TimeSelect'
 import { SHOW_DATETIME_FORMATTER, SHOW_DATE_FORMATTER } from '@/constants/agenda'
 import { deleteTask } from '@/newHelper/block'
 import { type BlockFromQuery, transformBlockToAgendaTask } from '@/newHelper/task'
+import { track } from '@/newHelper/umami'
 import type { AgendaTask, TimeLog } from '@/types/task'
 
 import ProjectSelect from '../ProjectSelect'
@@ -68,7 +69,7 @@ const TaskModal = ({
     onCancel?.()
   }
   const handleOk = async () => {
-    umami.track(`Task Modal: Ok Button`, { type: info.type })
+    track(`Task Modal: Ok Button`, { type: info.type })
     const block = await action()
     if (!block) return message.error('Failed to create/edit task block')
     const page = await logseq.Editor.getPage(block?.page?.id ?? block?.page)

diff --git a/src/pages/NewDashboard/components/TimeBox.tsx b/src/pages/NewDashboard/components/TimeBox.tsx
@@ -16,6 +16,7 @@ import useAgendaTasks from '@/hooks/useAgendaTasks'
 import { deleteTask as deleteTaskBlock, genDurationString, updateDateInfo } from '@/newHelper/block'
 import { transformAgendaTaskToCalendarEvent } from '@/newHelper/fullCalendar'
 import { formatTaskTitle } from '@/newHelper/task'
+import { track } from '@/newHelper/umami'
 import { settingsAtom } from '@/newModel/settings'
 import { tasksWithStartAtom } from '@/newModel/tasks'
 import type { CalendarEvent } from '@/types/fullcalendar'
@@ -173,17 +174,17 @@ const TimeBox = ({ onChangeType }: { onChangeType: () => void }) => {
         // drag external kanban element to calendar
         eventReceive={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Time Box: Receive Event')
+          track('Time Box: Receive Event')
         }}
         // resize duration
         eventResize={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Time Box: Resize Event')
+          track('Time Box: Resize Event')
         }}
         // drag move
         eventDrop={(info) => {
           onEventScheduleUpdate(info)
-          umami.track('Time Box: Move Event')
+          track('Time Box: Move Event')
         }}
         // click
         // eventClick={onEventClick}
@@ -196,7 +197,7 @@ const TimeBox = ({ onChangeType }: { onChangeType: () => void }) => {
               estimatedTime: genDurationString(dayjs(info.end).diff(info.start, 'minute')),
             },
           })
-          umami.track('Time Box: Select Event')
+          track('Time Box: Select Event')
         }}
         eventContent={(info) => {
           const taskData = info.event.extendedProps

diff --git a/src/pages/NewDashboard/components/UploadIcs.tsx b/src/pages/NewDashboard/components/UploadIcs.tsx
@@ -5,6 +5,7 @@ import { useAtomValue } from 'jotai'
 import { FiUploadCloud } from 'react-icons/fi'
 
 import useSettings from '@/hooks/useSettings'
+import { track } from '@/newHelper/umami'
 import { logseqAtom } from '@/newModel/logseq'
 import { tasksWithStartAtom } from '@/newModel/tasks'
 import { uploadIcsHttp } from '@/services/ics'
@@ -20,6 +21,7 @@ const UploadIcs = ({ className }: { className?: string }) => {
   const { runAsync: doUpload, loading } = useRequest(uploadIcsHttp, { manual: true })
 
   const onClickUpload = async () => {
+    track('Upload ICS Button')
     const { repo, token } = ics ?? {}
     if (!repo || !token) return message.error('Please set repo and token')
     const events: EventAttributes[] = tasks.map((task) => transformAgendaTaskToICSEvent(task, currentGraph?.name ?? ''))
@@ -37,11 +39,7 @@ const UploadIcs = ({ className }: { className?: string }) => {
 
   return (
     <div className="relative">
-      <FiUploadCloud
-        className={cn('text-lg', className)}
-        onClick={onClickUpload}
-        data-umami-event="Upload ICS Button"
-      />
+      <FiUploadCloud className={cn('text-lg', className)} onClick={onClickUpload} />
       {loading ? (
         <span className="animate-pulse absolute w-2 h-2 rounded-full bg-orange-500 top-0 right-0"></span>
       ) : null}

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -17,8 +17,8 @@ interface Window {
   unmountPomodoroApp: () => void
   interruptionMap: Map<number, IInterruption[]>
   mockSettings: Record<string, unknown>
-  __APP_VERSION__: string
 }
+declare const __APP_VERSION__: string
 
 interface ImportMetaEnv {
   readonly VITE_LOGSEQ_API_SERVER: string

diff --git a/vite.config.ts b/vite.config.ts
@@ -46,6 +46,7 @@ export default defineConfig(async ({ command, mode }) => {
     define: {
       mockSettings: getMockSettings(mode === 'web'),
       __APP_VERSION__: JSON.stringify(packageJSON.version),
+      faizVal: JSON.stringify('test'),
     },
     test: {
       globals: true,