ack PR comments

Author: waleedlatif1

apps/sim/app/(landing)/components/footer/components/status-indicator.tsx

@@ -1,11 +1,9 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
 import Link from 'next/link'
 import { StatusDotIcon } from '@/components/icons'
-import type { StatusResponse, StatusType } from '@/app/api/status/types'
-
-const POLLING_INTERVAL = 60000
+import type { StatusType } from '@/app/api/status/types'
+import { useStatus } from '@/hooks/queries/status'
 
 const STATUS_COLORS: Record<StatusType, string> = {
   operational: 'text-[#10B981] hover:text-[#059669]',
@@ -17,45 +15,15 @@ const STATUS_COLORS: Record<StatusType, string> = {
 }
 
 export default function StatusIndicator() {
-  const [status, setStatus] = useState<StatusType>('loading')
-  const [message, setMessage] = useState<string>('Checking Status...')
-  const [statusUrl, setStatusUrl] = useState<string>('https://status.sim.ai')
-
-  const fetchStatus = useCallback(async () => {
-    try {
-      const response = await fetch('/api/status')
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch status')
-      }
-
-      const data: StatusResponse = await response.json()
-
-      setStatus(data.status)
-      setMessage(data.message)
-      setStatusUrl(data.url)
-    } catch (error) {
-      console.error('Error fetching status:', error)
-      setStatus('error')
-      setMessage('Status Unknown')
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchStatus()
-
-    const poll = () => {
-      fetchStatus().finally(() => {
-        setTimeout(poll, POLLING_INTERVAL)
-      })
-    }
-
-    const timeoutId = setTimeout(poll, POLLING_INTERVAL)
-
-    return () => {
-      clearTimeout(timeoutId)
-    }
-  }, [fetchStatus])
+  const { data, isLoading, isError } = useStatus()
+
+  const status = isLoading ? 'loading' : isError ? 'error' : data?.status || 'error'
+  const message = isLoading
+    ? 'Checking Status...'
+    : isError
+      ? 'Status Unknown'
+      : data?.message || 'Status Unknown'
+  const statusUrl = data?.url || 'https://status.sim.ai'
 
   return (
     <Link

apps/sim/app/api/status/route.ts

@@ -1,5 +1,8 @@
 import { NextResponse } from 'next/server'
-import type { IncidentIOWidgetResponse, StatusResponse, StatusType } from './types'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { IncidentIOWidgetResponse, StatusResponse, StatusType } from '@/app/api/status/types'
+
+const logger = createLogger('StatusAPI')
 
 let cachedResponse: { data: StatusResponse; timestamp: number } | null = null
 const CACHE_TTL = 2 * 60 * 1000
@@ -75,7 +78,7 @@ export async function GET() {
       },
     })
   } catch (error) {
-    console.error('Error fetching status from incident.io:', error)
+    logger.error('Error fetching status from incident.io:', error)
 
     const errorResponse: StatusResponse = {
       status: 'error',

apps/sim/hooks/queries/status.ts

@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query'
+import type { StatusResponse } from '@/app/api/status/types'
+
+/**
+ * Query key factories for status-related queries
+ * This ensures consistent cache invalidation across the app
+ */
+export const statusKeys = {
+  all: ['status'] as const,
+  current: () => [...statusKeys.all, 'current'] as const,
+}
+
+/**
+ * Fetch current system status from the API
+ * The API proxies incident.io and caches for 2 minutes server-side
+ */
+async function fetchStatus(): Promise<StatusResponse> {
+  const response = await fetch('/api/status')
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch status')
+  }
+
+  return response.json()
+}
+
+/**
+ * Hook to fetch current system status
+ * - Polls every 60 seconds to keep status up-to-date
+ * - Refetches when user returns to tab for immediate updates
+ * - Caches for 1 minute to reduce unnecessary requests
+ */
+export function useStatus() {
+  return useQuery({
+    queryKey: statusKeys.current(),
+    queryFn: fetchStatus,
+    staleTime: 60 * 1000, // 1 minute
+    refetchInterval: 60 * 1000, // Poll every 60 seconds
+    refetchOnWindowFocus: true, // Refetch when user returns to tab
+    retry: 2,
+  })
+}