improvement(schedules): use tanstack query to fetch schedule data, cleanup ui on schedule info component

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useState } from 'react'
-import { AlertTriangle } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { createLogger } from '@/lib/logs/console/logger'
+import { Badge } from '@/components/emcn'
 import { parseCronToHumanReadable } from '@/lib/workflows/schedules/utils'
+import { useRedeployWorkflowSchedule, useScheduleQuery } from '@/hooks/queries/schedules'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 
-const logger = createLogger('ScheduleStatus')
-
 interface ScheduleInfoProps {
   blockId: string
   isPreview?: boolean
@@ -20,172 +17,88 @@ interface ScheduleInfoProps {
 export function ScheduleInfo({ blockId, isPreview = false }: ScheduleInfoProps) {
   const params = useParams()
   const workflowId = params.workflowId as string
-  const [scheduleStatus, setScheduleStatus] = useState<'active' | 'disabled' | null>(null)
-  const [nextRunAt, setNextRunAt] = useState<Date | null>(null)
-  const [lastRanAt, setLastRanAt] = useState<Date | null>(null)
-  const [failedCount, setFailedCount] = useState<number>(0)
-  const [isLoadingStatus, setIsLoadingStatus] = useState(true)
-  const [savedCronExpression, setSavedCronExpression] = useState<string | null>(null)
-  const [isRedeploying, setIsRedeploying] = useState(false)
-  const [hasSchedule, setHasSchedule] = useState(false)
 
   const scheduleTimezone = useSubBlockStore((state) => state.getValue(blockId, 'timezone'))
 
-  const fetchScheduleStatus = useCallback(async () => {
-    if (isPreview) return
-
-    setIsLoadingStatus(true)
-    try {
-      const response = await fetch(`/api/schedules?workflowId=${workflowId}&blockId=${blockId}`)
-      if (response.ok) {
-        const data = await response.json()
-        if (data.schedule) {
-          setHasSchedule(true)
-          setScheduleStatus(data.schedule.status)
-          setNextRunAt(data.schedule.nextRunAt ? new Date(data.schedule.nextRunAt) : null)
-          setLastRanAt(data.schedule.lastRanAt ? new Date(data.schedule.lastRanAt) : null)
-          setFailedCount(data.schedule.failedCount || 0)
-          setSavedCronExpression(data.schedule.cronExpression || null)
-        } else {
-          // No schedule exists (workflow not deployed or no schedule block)
-          setHasSchedule(false)
-          setScheduleStatus(null)
-          setNextRunAt(null)
-          setLastRanAt(null)
-          setFailedCount(0)
-          setSavedCronExpression(null)
-        }
-      }
-    } catch (error) {
-      logger.error('Error fetching schedule status', { error })
-    } finally {
-      setIsLoadingStatus(false)
-    }
-  }, [workflowId, blockId, isPreview])
-
-  useEffect(() => {
-    if (!isPreview) {
-      fetchScheduleStatus()
-    }
-  }, [isPreview, fetchScheduleStatus])
+  const { data: schedule, isLoading } = useScheduleQuery(workflowId, blockId, {
+    enabled: !isPreview,
+  })
 
-  /**
-   * Handles redeploying the workflow when schedule is disabled due to failures.
-   * Redeploying will recreate the schedule with reset failure count.
-   */
-  const handleRedeploy = async () => {
-    if (isPreview || isRedeploying) return
+  const redeployMutation = useRedeployWorkflowSchedule()
 
-    setIsRedeploying(true)
-    try {
-      const response = await fetch(`/api/workflows/${workflowId}/deploy`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ deployChatEnabled: false }),
-      })
-
-      if (response.ok) {
-        // Refresh schedule status after redeploy
-        await fetchScheduleStatus()
-        logger.info('Workflow redeployed successfully to reset schedule', { workflowId, blockId })
-      } else {
-        const errorData = await response.json()
-        logger.error('Failed to redeploy workflow', { error: errorData.error })
-      }
-    } catch (error) {
-      logger.error('Error redeploying workflow', { error })
-    } finally {
-      setIsRedeploying(false)
-    }
+  const handleRedeploy = () => {
+    if (isPreview || redeployMutation.isPending) return
+    redeployMutation.mutate({ workflowId, blockId })
   }
 
-  // Don't render anything if there's no deployed schedule
-  if (!hasSchedule && !isLoadingStatus) {
+  if (!schedule || isLoading) {
     return null
   }
 
+  const timezone = scheduleTimezone || schedule?.timezone || 'UTC'
+  const failedCount = schedule?.failedCount || 0
+  const isDisabled = schedule?.status === 'disabled'
+  const nextRunAt = schedule?.nextRunAt ? new Date(schedule.nextRunAt) : null
+
   return (
-    <div className='mt-2'>
-      {isLoadingStatus ? (
-        <div className='flex items-center gap-2 text-muted-foreground text-sm'>
-          <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-          Loading schedule status...
-        </div>
-      ) : (
+    <div className='space-y-1.5'>
+      {/* Status badges */}
+      {(failedCount > 0 || isDisabled) && (
         <div className='space-y-1'>
-          {/* Failure badge with redeploy action */}
-          {failedCount >= 10 && scheduleStatus === 'disabled' && (
-            <button
-              type='button'
-              onClick={handleRedeploy}
-              disabled={isRedeploying}
-              className='flex w-full cursor-pointer items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-left text-destructive text-sm transition-colors hover:bg-destructive/20 disabled:cursor-not-allowed disabled:opacity-50'
-            >
-              {isRedeploying ? (
-                <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-              ) : (
-                <AlertTriangle className='h-4 w-4 flex-shrink-0' />
-              )}
-              <span>
-                {isRedeploying
-                  ? 'Redeploying...'
-                  : `Schedule disabled after ${failedCount} failures - Click to redeploy`}
-              </span>
-            </button>
-          )}
-
-          {/* Show warning for failed runs under threshold */}
-          {failedCount > 0 && failedCount < 10 && (
-            <div className='flex items-center gap-2'>
-              <span className='text-destructive text-sm'>
-                ⚠️ {failedCount} failed run{failedCount !== 1 ? 's' : ''}
-              </span>
-            </div>
-          )}
-
-          {/* Cron expression human-readable description */}
-          {savedCronExpression && (
-            <p className='text-muted-foreground text-sm'>
-              Runs{' '}
-              {parseCronToHumanReadable(
-                savedCronExpression,
-                scheduleTimezone || 'UTC'
-              ).toLowerCase()}
+          <div className='flex flex-wrap items-center gap-2'>
+            {failedCount >= 10 && isDisabled ? (
+              <Badge
+                variant='outline'
+                className='cursor-pointer'
+                style={{
+                  borderColor: 'var(--warning)',
+                  color: 'var(--warning)',
+                }}
+                onClick={handleRedeploy}
+              >
+                {redeployMutation.isPending ? 'redeploying...' : 'disabled'}
+              </Badge>
+            ) : failedCount > 0 ? (
+              <Badge
+                variant='outline'
+                style={{
+                  borderColor: 'var(--warning)',
+                  color: 'var(--warning)',
+                }}
+              >
+                {failedCount} failed
+              </Badge>
+            ) : null}
+          </div>
+          {failedCount >= 10 && isDisabled && (
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Disabled after 10 consecutive failures
             </p>
           )}
+        </div>
+      )}
 
-          {/* Next run time */}
-          {nextRunAt && (
-            <p className='text-sm'>
-              <span className='font-medium'>Next run:</span>{' '}
-              {nextRunAt.toLocaleString('en-US', {
-                timeZone: scheduleTimezone || 'UTC',
-                year: 'numeric',
-                month: 'numeric',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: '2-digit',
-                hour12: true,
-              })}{' '}
-              {scheduleTimezone || 'UTC'}
-            </p>
+      {/* Schedule info - only show when active */}
+      {!isDisabled && (
+        <div className='text-[12px] text-[var(--text-tertiary)]'>
+          {schedule?.cronExpression && (
+            <span>{parseCronToHumanReadable(schedule.cronExpression, timezone)}</span>
           )}
-
-          {/* Last ran time */}
-          {lastRanAt && (
-            <p className='text-muted-foreground text-sm'>
-              <span className='font-medium'>Last ran:</span>{' '}
-              {lastRanAt.toLocaleString('en-US', {
-                timeZone: scheduleTimezone || 'UTC',
-                year: 'numeric',
-                month: 'numeric',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: '2-digit',
-                hour12: true,
-              })}{' '}
-              {scheduleTimezone || 'UTC'}
-            </p>
+          {nextRunAt && (
+            <>
+              {schedule?.cronExpression && <span className='mx-1'>·</span>}
+              <span>
+                Next:{' '}
+                {nextRunAt.toLocaleString('en-US', {
+                  timeZone: timezone,
+                  month: 'short',
+                  day: 'numeric',
+                  hour: 'numeric',
+                  minute: '2-digit',
+                  hour12: true,
+                })}
+              </span>
+            </>
           )}
         </div>
       )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-schedule-info.ts

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from 'react'
-import { createLogger } from '@/lib/logs/console/logger'
-import { parseCronToHumanReadable } from '@/lib/workflows/schedules/utils'
+import { useCallback } from 'react'
+import {
+  useReactivateSchedule,
+  useScheduleInfo as useScheduleInfoQuery,
+} from '@/hooks/queries/schedules'
 import type { ScheduleInfo } from '../types'
 
-const logger = createLogger('useScheduleInfo')
-
 /**
  * Return type for the useScheduleInfo hook
  */
@@ -18,7 +18,7 @@ export interface UseScheduleInfoReturn {
 }
 
 /**
- * Custom hook for fetching schedule information
+ * Custom hook for fetching schedule information using TanStack Query
  *
  * @param blockId - The ID of the block
  * @param blockType - The type of the block
@@ -30,96 +30,37 @@ export function useScheduleInfo(
   blockType: string,
   workflowId: string
 ): UseScheduleInfoReturn {
-  const [isLoading, setIsLoading] = useState(false)
-  const [scheduleInfo, setScheduleInfo] = useState<ScheduleInfo | null>(null)
-
-  const fetchScheduleInfo = useCallback(
-    async (wfId: string) => {
-      if (!wfId) return
-
-      try {
-        setIsLoading(true)
-
-        const params = new URLSearchParams({
-          workflowId: wfId,
-          blockId,
-        })
-
-        const response = await fetch(`/api/schedules?${params}`, {
-          cache: 'no-store',
-          headers: { 'Cache-Control': 'no-cache' },
-        })
-
-        if (!response.ok) {
-          setScheduleInfo(null)
-          return
-        }
-
-        const data = await response.json()
-
-        if (!data.schedule) {
-          setScheduleInfo(null)
-          return
-        }
-
-        const schedule = data.schedule
-        const scheduleTimezone = schedule.timezone || 'UTC'
-
-        setScheduleInfo({
-          scheduleTiming: schedule.cronExpression
-            ? parseCronToHumanReadable(schedule.cronExpression, scheduleTimezone)
-            : 'Unknown schedule',
-          nextRunAt: schedule.nextRunAt,
-          lastRanAt: schedule.lastRanAt,
-          timezone: scheduleTimezone,
-          status: schedule.status,
-          isDisabled: schedule.status === 'disabled',
-          failedCount: schedule.failedCount || 0,
-          id: schedule.id,
-        })
-      } catch (error) {
-        logger.error('Error fetching schedule info:', error)
-        setScheduleInfo(null)
-      } finally {
-        setIsLoading(false)
-      }
-    },
-    [blockId]
+  const { scheduleInfo: queryScheduleInfo, isLoading } = useScheduleInfoQuery(
+    workflowId,
+    blockId,
+    blockType
   )
 
+  const reactivateMutation = useReactivateSchedule()
+
   const reactivateSchedule = useCallback(
     async (scheduleId: string) => {
-      try {
-        const response = await fetch(`/api/schedules/${scheduleId}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ action: 'reactivate' }),
-        })
-
-        if (response.ok && workflowId) {
-          await fetchScheduleInfo(workflowId)
-        } else {
-          logger.error('Failed to reactivate schedule')
-        }
-      } catch (error) {
-        logger.error('Error reactivating schedule:', error)
-      }
+      await reactivateMutation.mutateAsync({
+        scheduleId,
+        workflowId,
+        blockId,
+      })
     },
-    [workflowId, fetchScheduleInfo]
+    [reactivateMutation, workflowId, blockId]
   )
 
-  useEffect(() => {
-    if (blockType === 'schedule' && workflowId) {
-      fetchScheduleInfo(workflowId)
-    } else {
-      setScheduleInfo(null)
-      setIsLoading(false)
-    }
-
-    return () => {
-      setIsLoading(false)
-    }
-  }, [blockType, workflowId, fetchScheduleInfo])
+  const scheduleInfo: ScheduleInfo | null = queryScheduleInfo
+    ? {
+        scheduleTiming: queryScheduleInfo.scheduleTiming,
+        nextRunAt: queryScheduleInfo.nextRunAt,
+        lastRanAt: queryScheduleInfo.lastRanAt,
+        timezone: queryScheduleInfo.timezone,
+        status: queryScheduleInfo.status,
+        isDisabled: queryScheduleInfo.isDisabled,
+        failedCount: queryScheduleInfo.failedCount,
+        id: queryScheduleInfo.id,
+      }
+    : null
 
   return {
     scheduleInfo,