Add tooltip to show when data was last updated (#28)

Author: Aliamondo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "daily-helper",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "private": true,
   "scripts": {
     "start": "vite",

src/components/AppBar.tsx

@@ -24,11 +24,13 @@ import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import packageData from '../../package.json'
 import { settingsHandler } from '../helpers/settingsHandler'
+import { useRelativeTime } from '../hooks/useRelativeTime'
 
 type AppBarElementProps = {
   handleReload: (teamName: string, isValidToken: boolean) => void
   loadingProgress: number
   isLoadingAnimationPlaying: boolean
+  lastUpdated?: Date | null
   showDrawbar?: (marginTop?: number) => ReactElement | null
   drawbarName: string
   isDrawbarOpen: boolean
@@ -38,11 +40,13 @@ export default function AppBarElement({
   handleReload: initialHandleReload,
   loadingProgress,
   isLoadingAnimationPlaying,
+  lastUpdated = null,
   showDrawbar,
   drawbarName,
   isDrawbarOpen,
   setIsDrawbarOpen,
 }: AppBarElementProps) {
+  const relativeTime = useRelativeTime(lastUpdated)
   const [teamTabValue, setTeamTabValue] = useState(0)
   const [teamNames, setTeamNames] = useState(settingsHandler.loadTeamNames())
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
@@ -88,10 +92,10 @@ export default function AppBarElement({
 
   return (
     <>
-      <AppBar>
+      <AppBar sx={{ overflow: 'visible' }}>
         <Toolbar
           ref={toolbarRef}
-          sx={{ paddingBottom: isLoadingAnimationPlaying ? 0 : 0.5 }}
+          sx={{ paddingBottom: 0.5 }}
           onKeyUp={({ code }: KeyboardEvent) => {
             code === 'Escape' && handleHideDrawbar()
           }}
@@ -149,7 +153,13 @@ export default function AppBarElement({
             isLoading={isLoadingAnimationPlaying}
           />
 
-          <Tooltip title="Refresh pull requests">
+          <Tooltip
+            title={
+              relativeTime
+                ? `Refresh pull requests · Updated ${relativeTime}`
+                : 'Refresh pull requests'
+            }
+          >
             <IconButton
               edge="end"
               size="large"
@@ -162,7 +172,11 @@ export default function AppBarElement({
         </Toolbar>
 
         {isLoadingAnimationPlaying && (
-          <LinearProgress variant="determinate" value={loadingProgress} />
+          <LinearProgress
+            variant="determinate"
+            value={loadingProgress}
+            sx={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
+          />
         )}
       </AppBar>
     </>

src/helpers/dataFetcher.ts

@@ -501,38 +501,8 @@ async function fetchPullRequests({
     uniquePullRequests.set(pr.id, pr),
   )
 
-  const pullRequests = Array.from(uniquePullRequests.values()).map(
-    (pr): PullRequest => ({
-      id: pr.id,
-      author: pr.author,
-      title: pr.title,
-      number: pr.number,
-      url: pr.permalink,
-      repositoryUrl: pr.repository.url,
-      repositoryName: pr.repository.name,
-      repositoryBaseRef: pr.repository.defaultBranchRef.name,
-      baseRef: pr.baseRef.name,
-      state: pr.state,
-      isDraft: pr.isDraft,
-      reviewDecision: pr.reviewDecision,
-      createdAt: new Date(pr.createdAt),
-      labels: pr.labels.nodes,
-      reviews: formatReviews(pr.reviews.nodes),
-      comments: calculateNumberOfComments(
-        pr.comments.totalCount,
-        pr.reviews.nodes,
-      ),
-      requestedReviewers: getReviewers(pr.reviewRequests.nodes),
-      contributors: getContributors(pr.commits.nodes, pr.author),
-      assignees: pr.assignees.nodes,
-      lastCommitChecks:
-        includeChecks && pr.lastCommit?.nodes[0]
-          ? getLastCommitChecks(
-              pr.lastCommit.nodes[0].commit,
-              pr.baseRef.branchProtectionRule?.requiredStatusCheckContexts,
-            )
-          : null,
-    }),
+  const pullRequests = Array.from(uniquePullRequests.values()).map(pr =>
+    normalizePR(pr, includeChecks),
   )
 
   pullRequests.sort((a, b) => b.createdAt.valueOf() - a.createdAt.valueOf())
@@ -543,6 +513,43 @@ async function fetchPullRequests({
   return pullRequests
 }
 
+function normalizePR(
+  pr: GraphQL_PullRequest,
+  includeChecks: boolean,
+): PullRequest {
+  return {
+    id: pr.id,
+    author: pr.author,
+    title: pr.title,
+    number: pr.number,
+    url: pr.permalink,
+    repositoryUrl: pr.repository.url,
+    repositoryName: pr.repository.name,
+    repositoryBaseRef: pr.repository.defaultBranchRef.name,
+    baseRef: pr.baseRef.name,
+    state: pr.state,
+    isDraft: pr.isDraft,
+    reviewDecision: pr.reviewDecision,
+    createdAt: new Date(pr.createdAt),
+    labels: pr.labels.nodes,
+    reviews: formatReviews(pr.reviews.nodes),
+    comments: calculateNumberOfComments(
+      pr.comments.totalCount,
+      pr.reviews.nodes,
+    ),
+    requestedReviewers: getReviewers(pr.reviewRequests.nodes),
+    contributors: getContributors(pr.commits.nodes, pr.author),
+    assignees: pr.assignees.nodes,
+    lastCommitChecks:
+      includeChecks && pr.lastCommit?.nodes[0]
+        ? getLastCommitChecks(
+            pr.lastCommit.nodes[0].commit,
+            pr.baseRef.branchProtectionRule?.requiredStatusCheckContexts,
+          )
+        : null,
+  }
+}
+
 async function fetchTeamRepositories(
   orgName: string,
   teamName: string,

src/helpers/time.ts

@@ -1,5 +1,12 @@
 const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
 
+export function fromNowShort(date: Date): string {
+  const seconds = Math.round((Date.now() - date.getTime()) / 1000)
+  if (seconds < 10) return 'just now'
+  if (seconds < 60) return 'less than a minute ago'
+  return fromNow(date)
+}
+
 export function fromNow(date: Date): string {
   const seconds = Math.round((Date.now() - date.getTime()) / 1000)
   if (seconds < 60) return rtf.format(-seconds, 'second')

src/helpers/useOnScreen.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import { fromNowShort } from '../helpers/time'
+
+export function useRelativeTime(date: Date | null): string {
+  const [, setTick] = useState(0)
+
+  useEffect(() => {
+    if (!date) return
+    const id = setInterval(() => setTick(t => t + 1), 10_000)
+    return () => clearInterval(id)
+  }, [date])
+
+  return date ? fromNowShort(date) : ''
+}

src/hooks/useRelativeTime.ts

@@ -52,6 +52,7 @@ export default function DailyHelper() {
   const [isLoadingAnimationPlaying, setIsLoadingAnimationPlaying] = useState(
     !isInvalidToken && Boolean(orgName) && teamNames.length > 0,
   )
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   const [isDrawbarOpen, setIsDrawbarOpen] = useState(false)
   const [
     isPullRequestsWithoutLabelsHidden,
@@ -110,6 +111,7 @@ export default function DailyHelper() {
         })
         .then(pullRequests => {
           setPullRequests(pullRequests)
+          setLastUpdated(new Date())
           setIsLoadingAnimationPlaying(false)
         })
       setShouldLoad(false)
@@ -256,6 +258,7 @@ export default function DailyHelper() {
       <AppBar
         loadingProgress={loadingProgress}
         isLoadingAnimationPlaying={isLoadingAnimationPlaying}
+        lastUpdated={lastUpdated}
         handleReload={handleReload}
         showDrawbar={getDrawer({
           allLabels,