From 2fc78a5b7d8c1cbe249dca911e97dae9d1c70a39 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 27 Feb 2023 09:31:11 +0100
Subject: [PATCH] :recycle: Improve new version popup polling

Use react-query to trigger the request more intelligently than with a timeout
---
 .../src/components/NewVersionPopup.tsx        | 34 +++++--------------
 .../dashboard/api/getAppVersionProcedure.ts   |  5 +++
 apps/builder/src/pages/api/version.ts         |  1 +
 .../src/utils/server/routers/v1/trpcRouter.ts |  2 ++
 4 files changed, 17 insertions(+), 25 deletions(-)
 create mode 100644 apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts

diff --git a/apps/builder/src/components/NewVersionPopup.tsx b/apps/builder/src/components/NewVersionPopup.tsx
index bf09858a8..d1123a575 100644
--- a/apps/builder/src/components/NewVersionPopup.tsx
+++ b/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
-    let cancelRequest = false
-    const interval = setInterval(async () => {
-      const { data } = await sendRequest<{
-        commitSha: string | undefined
-      }>('/api/version')
-      if (!data || cancelRequest) return
-      if (!currentVersion) {
-        setCurrentVersion(data.commitSha)
-        return
-      }
-      if (currentVersion !== data.commitSha) {
-        setIsNewVersionAvailable(true)
-      }
-    }, intervalDuration)
-
-    return () => {
-      cancelRequest = true
-      clearInterval(interval)
-    }
-  }, [currentVersion, isNewVersionAvailable])
+    if (!data?.commitSha) return
+    if (currentVersion === data.commitSha) return
+    setCurrentVersion(data.commitSha)
+    if (currentVersion === undefined) return
+    setIsNewVersionAvailable(true)
+  }, [data, currentVersion])
 
   const saveAndReload = async () => {
     if (isReloading) return
diff --git a/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts b/apps/builder/src/features/dashboard/api/getAppVersionProcedure.ts
new file mode 100644
index 000000000..21f460e8a
--- /dev/null
+++ b/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 }
+})
diff --git a/apps/builder/src/pages/api/version.ts b/apps/builder/src/pages/api/version.ts
index 20bc11e9f..82e965184 100644
--- a/apps/builder/src/pages/api/version.ts
+++ b/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) => {
diff --git a/apps/builder/src/utils/server/routers/v1/trpcRouter.ts b/apps/builder/src/utils/server/routers/v1/trpcRouter.ts
index dc78b5a5a..e1a0acb01 100644
--- a/apps/builder/src/utils/server/routers/v1/trpcRouter.ts
+++ b/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,