konnosDashboard
use-check-latest-deploy.tsx93 lines · main
1import { IS_PLATFORM } from 'common'
2import dayjs from 'dayjs'
3import { useRouter } from 'next/router'
4import { useEffect, useRef, useState } from 'react'
5import { toast } from 'sonner'
6import { Button, StatusIcon } from 'ui'
7
8import { useDeploymentCommitQuery } from '@/data/utils/deployment-commit-query'
9
10const DeployCheckToast = ({ id }: { id: string | number }) => {
11 const router = useRouter()
12
13 return (
14 <div className="flex gap-3 flex-col w-full">
15 <div className="flex gap-3 flex-row">
16 <StatusIcon variant="default" className="mt-0.5" />
17 <div className="flex w-full justify-between flex-col text-sm">
18 <p className="text-foreground">A new version of this page is available</p>
19 <p className="text-foreground-light">Refresh to see the latest changes.</p>
20 </div>
21 </div>
22
23 <div className="flex gap-5 justify-end">
24 <Button type="outline" onClick={() => toast.dismiss(id)}>
25 Not now
26 </Button>
27 <Button onClick={() => router.reload()}>Refresh</Button>
28 </div>
29 </div>
30 )
31}
32
33// This hook checks if the user is using old Studio pages and shows a toast to refresh the page. It's only triggered if
34// there's a new version of Studio is available, and the user has been on the old dashboard (based on commit) for more than 24 hours.
35// [Joshen] K-Dog has a suggestion here to bring down the time period here by checking commits
36export function useCheckLatestDeploy() {
37 const [currentCommitTime, setCurrentCommitTime] = useState('')
38 const [isToastShown, setIsToastShown] = useState(false)
39
40 const { data: commit } = useDeploymentCommitQuery({
41 enabled: IS_PLATFORM,
42 staleTime: 1000 * 60 * 10, // 10 minutes
43 })
44
45 const commitLoggedRef = useRef(false)
46 useEffect(() => {
47 if (commit && !commitLoggedRef.current) {
48 const commitTime =
49 commit.commitTime === 'unknown'
50 ? 'unknown time'
51 : dayjs(commit.commitTime).format('YYYY-MM-DD HH:mm:ss Z')
52 console.log(
53 `Briven Studio is running commit ${commit.commitSha} deployed at ${commitTime}.`
54 )
55 commitLoggedRef.current = true
56 }
57 }, [commit])
58
59 useEffect(() => {
60 if (!commit || commit.commitTime === 'unknown') {
61 return
62 }
63
64 // set the current commit on first load
65 if (!currentCommitTime) {
66 setCurrentCommitTime(commit.commitTime)
67 return
68 }
69
70 // if the current commit is the same as the fetched commit, do nothing
71 if (currentCommitTime === commit.commitTime) {
72 return
73 }
74
75 // prevent showing the toast again if user has already seen and dismissed it
76 if (isToastShown) {
77 return
78 }
79
80 // check if the time difference between commits is more than 24 hours
81 const hourDiff = dayjs(commit.commitTime).diff(dayjs(currentCommitTime), 'hour')
82 if (hourDiff < 24) {
83 return
84 }
85
86 // show the toast
87 toast.custom((id) => <DeployCheckToast id={id} />, {
88 duration: Infinity,
89 position: 'bottom-right',
90 })
91 setIsToastShown(true)
92 }, [commit, isToastShown, currentCommitTime])
93}