supabase/apps/studio/hooks/use-check-latest-deploy.tsx

import { IS_PLATFORM } from 'common'
import dayjs from 'dayjs'
import { useRouter } from 'next/router'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'sonner'
import { Button, StatusIcon } from 'ui'

import { useDeploymentCommitQuery } from '@/data/utils/deployment-commit-query'

const DeployCheckToast = ({ id }: { id: string | number }) => {
  const router = useRouter()

  return (
    <div className="flex gap-3 flex-col w-full">
      <div className="flex gap-3 flex-row">
        <StatusIcon variant="default" className="mt-0.5" />
        <div className="flex w-full justify-between flex-col text-sm">
          <p className="text-foreground">A new version of this page is available</p>
          <p className="text-foreground-light">Refresh to see the latest changes.</p>
        </div>
      </div>

      <div className="flex gap-5 justify-end">
        <Button variant="outline" onClick={() => toast.dismiss(id)}>
          Not now
        </Button>
        <Button
          variant="primary"
          onClick={() => {
            // Vercel never pins document navigations to a deployment, so a
            // plain reload lands on the latest one.
            router.reload()
          }}
        >
          Refresh
        </Button>
      </div>
    </div>
  )
}

// This hook checks if the user is using old Studio pages and shows a toast to refresh the page. It's only triggered if
// 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.
// [Joshen] K-Dog has a suggestion here to bring down the time period here by checking commits
export function useCheckLatestDeploy() {
  const [currentCommitTime, setCurrentCommitTime] = useState('')
  const [isToastShown, setIsToastShown] = useState(false)

  const { data: commit } = useDeploymentCommitQuery({
    enabled: IS_PLATFORM,
    staleTime: 1000 * 60 * 10, // 10 minutes
  })

  const commitLoggedRef = useRef(false)
  useEffect(() => {
    if (commit && !commitLoggedRef.current) {
      const commitTime =
        commit.commitTime === 'unknown'
          ? 'unknown time'
          : dayjs(commit.commitTime).format('YYYY-MM-DD HH:mm:ss Z')
      console.log(
        `Supabase Studio is running commit ${commit.commitSha} deployed at ${commitTime}.`
      )
      commitLoggedRef.current = true
    }
  }, [commit])

  useEffect(() => {
    if (!commit || commit.commitTime === 'unknown') {
      return
    }

    // set the current commit on first load
    if (!currentCommitTime) {
      setCurrentCommitTime(commit.commitTime)
      return
    }

    // if the current commit is the same as the fetched commit, do nothing
    if (currentCommitTime === commit.commitTime) {
      return
    }

    // prevent showing the toast again if user has already seen and dismissed it
    if (isToastShown) {
      return
    }

    // check if the time difference between commits is more than 24 hours
    const hourDiff = dayjs(commit.commitTime).diff(dayjs(currentCommitTime), 'hour')
    if (hourDiff < 24) {
      return
    }

    // show the toast
    toast.custom((id) => <DeployCheckToast id={id} />, {
      duration: Infinity,
      position: 'bottom-right',
    })
    setIsToastShown(true)
  }, [commit, isToastShown, currentCommitTime])
}