♻️ Improve new version popup polling

Use react-query to trigger the request more intelligently than with a timeout

apps/builder/src/components/NewVersionPopup.tsx

@@ -1,4 +1,5 @@
 import { useTypebot } from '@/features/editor'
+import { trpc } from '@/lib/trpc'
 import {
   Button,
   DarkMode,
@@ -9,39 +10,22 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
-import { sendRequest } from 'utils'
 import { PackageIcon } from './icons'
 
-const intervalDuration = 1000 * 60
-
 export const NewVersionPopup = () => {
   const { typebot, save } = useTypebot()
+  const [isReloading, setIsReloading] = useState(false)
+  const { data } = trpc.getAppVersionProcedure.useQuery()
   const [currentVersion, setCurrentVersion] = useState<string>()
   const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false)
-  const [isReloading, setIsReloading] = useState(false)
 
   useEffect(() => {
-    if (isNewVersionAvailable) return
+    if (!data?.commitSha) return
-    let cancelRequest = false
+    if (currentVersion === data.commitSha) return
-    const interval = setInterval(async () => {
+    setCurrentVersion(data.commitSha)
-      const { data } = await sendRequest<{
+    if (currentVersion === undefined) return
-        commitSha: string | undefined
+    setIsNewVersionAvailable(true)
-      }>('/api/version')
+  }, [data, currentVersion])
-      if (!data || cancelRequest) return
-      if (!currentVersion) {
-        setCurrentVersion(data.commitSha)
-        return
-      }
-      if (currentVersion !== data.commitSha) {
-        setIsNewVersionAvailable(true)
-      }
-    }, intervalDuration)
-
-    return () => {
-      cancelRequest = true
-      clearInterval(interval)
-    }
-  }, [currentVersion, isNewVersionAvailable])
 
   const saveAndReload = async () => {
     if (isReloading) return

apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts

@@ -0,0 +1,5 @@
+import { publicProcedure } from '@/utils/server/trpc'
+
+export const getAppVersionProcedure = publicProcedure.query(async () => {
+  return { commitSha: process.env.VERCEL_GIT_COMMIT_SHA }
+})

apps/builder/src/pages/api/version.ts

@@ -1,3 +1,4 @@
+// TODO: Remove when all clients are up to date
 import { NextApiRequest, NextApiResponse } from 'next'
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse) => {

apps/builder/src/utils/server/routers/v1/trpcRouter.ts

@@ -1,11 +1,13 @@
 import { billingRouter } from '@/features/billing/api/router'
 import { webhookRouter } from '@/features/blocks/integrations/webhook/api'
+import { getAppVersionProcedure } from '@/features/dashboard/api/getAppVersionProcedure'
 import { resultsRouter } from '@/features/results/api'
 import { typebotRouter } from '@/features/typebot/api'
 import { workspaceRouter } from '@/features/workspace/api'
 import { router } from '../../trpc'
 
 export const trpcRouter = router({
+  getAppVersionProcedure,
   workspace: workspaceRouter,
   typebot: typebotRouter,
   webhook: webhookRouter,