Add lastAnswerDate to webhooks response and display updatedAt event field on the updateWebsite hover

Author: HugoGresse

functions/src/api/routes/deploy/updateWebsiteActions/triggerWebhooks.ts

@@ -42,6 +42,7 @@ export const triggerWebhooks = async (firebaseApp: firebase.app.App, event: Even
             updatedWebhooks[index] = {
                 ...webhook,
                 lastAnswer: `code: ${responseCode}, body: ${responseText ? responseText : 'empty'}`,
+                lastAnswerDate: new Date() as any, // Firestore expect a JS date but return a Timestamp object
             }
         }
     }

src/events/page/layouts/EventDrawerContent.tsx

@@ -1,12 +1,13 @@
 import { useState, useRef } from 'react'
-import { CircularProgress, Divider, List, ListItemText, Toolbar } from '@mui/material'
+import { CircularProgress, Divider, List, ListItemText, Toolbar, Tooltip } from '@mui/material'
 import { EventScreenMenuItems } from '../EventScreenMenuItems'
 import { LoadingButton } from '@mui/lab'
 import { Event } from '../../../types'
 import { useNotification } from '../../../hooks/notificationHook'
 import { updateWebsiteTriggerWebhooksAction } from '../../actions/updateWebsiteTriggerWebhooksAction'
 import { EventSelector } from '../../../components/EventSelector'
 import confetti from 'canvas-confetti'
+import { DateTime } from 'luxon'
 
 export type EventDrawerContentProps = {
     event: Event
@@ -17,6 +18,11 @@ export const EventDrawerContent = ({ event }: EventDrawerContentProps) => {
     const { createNotification } = useNotification()
     const buttonRef = useRef<HTMLButtonElement>(null)
 
+    const getRelativeTime = () => {
+        if (!event.updatedAt) return 'Never updated'
+        return `Last updated ${DateTime.fromJSDate(event.updatedAt).toRelative()}`
+    }
+
     return (
         <>
             <Toolbar
@@ -31,44 +37,47 @@ export const EventDrawerContent = ({ event }: EventDrawerContentProps) => {
             <Divider />
             <List component="nav">
                 <EventScreenMenuItems />
-                <LoadingButton
-                    ref={buttonRef}
-                    variant="contained"
-                    loading={loading}
-                    disabled={loading}
-                    onClick={async () => {
-                        setLoading(true)
-                        await updateWebsiteTriggerWebhooksAction(event, createNotification)
-                        setLoading(false)
+                <Tooltip title={getRelativeTime()} arrow placement="top">
+                    <LoadingButton
+                        ref={buttonRef}
+                        variant="contained"
+                        loading={loading}
+                        disabled={loading}
+                        onClick={async () => {
+                            setLoading(true)
+                            await updateWebsiteTriggerWebhooksAction(event, createNotification)
+                            setLoading(false)
 
-                        // Trigger confetti effect from button position
-                        if (buttonRef.current) {
-                            const rect = buttonRef.current.getBoundingClientRect()
-                            const x = rect.left + rect.width / 2
-                            const y = rect.top + rect.height / 2
+                            // Trigger confetti effect from button position
+                            if (buttonRef.current) {
+                                const rect = buttonRef.current.getBoundingClientRect()
+                                const x = rect.left + rect.width / 2
+                                const y = rect.top + rect.height / 2
 
-                            confetti({
-                                origin: {
-                                    x: x / window.innerWidth,
-                                    y: y / window.innerHeight,
-                                },
-                                spread: 70,
-                                startVelocity: 30,
-                                particleCount: 100,
-                                angle: 20,
-                                gravity: -0.4,
-                                zIndex: 2000,
-                                drift: 0.5,
-                            })
-                        }
-                    }}
-                    sx={{
-                        margin: 1,
-                        whiteSpace: 'break-spaces',
-                    }}
-                    loadingIndicator={<CircularProgress color="secondary" size={16} />}>
-                    <ListItemText primary={'Update website'} />
-                </LoadingButton>
+                                confetti({
+                                    origin: {
+                                        x: x / window.innerWidth,
+                                        y: y / window.innerHeight,
+                                    },
+                                    spread: 70,
+                                    startVelocity: 30,
+                                    particleCount: 100,
+                                    angle: 20,
+                                    gravity: -0.4,
+                                    zIndex: 2000,
+                                    drift: 0.5,
+                                })
+                            }
+                        }}
+                        sx={{
+                            margin: 1,
+                            whiteSpace: 'break-spaces',
+                            width: 'calc(100% - 16px)',
+                        }}
+                        loadingIndicator={<CircularProgress color="secondary" size={16} />}>
+                        <ListItemText primary={'Update website'} />
+                    </LoadingButton>
+                </Tooltip>
             </List>
         </>
     )

src/events/page/settings/components/WebhooksFields.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useState } from 'react'
 import {
     Box,
@@ -14,13 +13,14 @@ import {
 import { Control, TextFieldElement, useFieldArray } from 'react-hook-form-mui'
 import { Add, Delete } from '@mui/icons-material'
 import { Event, EventSettingForForm, Webhooks } from '../../../../types'
-
+import { DateTime } from 'luxon'
 export type WebhooksFieldsProps = {
     control: Control<EventSettingForForm, any>
     isSubmitting: boolean
     event: Event
 }
 type WebhooksWithKey = Webhooks & { id: string }
+
 export const WebhooksFields = ({ control, isSubmitting, event }: WebhooksFieldsProps) => {
     const [selectedWebhook, setSelectedWebhook] = useState<null | Webhooks>(null)
     const { fields, append, remove } = useFieldArray({
@@ -37,6 +37,10 @@ export const WebhooksFields = ({ control, isSubmitting, event }: WebhooksFieldsP
             <Box paddingLeft={2}>
                 {fields.map((webhook: WebhooksWithKey, index) => {
                     const eventWebhook = event.webhooks.find((w) => w.url === webhook.url)
+                    console.log(eventWebhook)
+                    const lastAnswerRelativeToNow = eventWebhook?.lastAnswerDate
+                        ? DateTime.fromJSDate(eventWebhook.lastAnswerDate.toDate()).toRelative()
+                        : 'never'
 
                     return (
                         <Box display="flex" flexDirection="column" key={webhook.id}>
@@ -81,7 +85,7 @@ export const WebhooksFields = ({ control, isSubmitting, event }: WebhooksFieldsP
                                 size="small">
                                 Last answer:{' '}
                                 {eventWebhook && eventWebhook.lastAnswer
-                                    ? eventWebhook.lastAnswer.slice(0, 15) + '...'
+                                    ? `${lastAnswerRelativeToNow}, ${eventWebhook.lastAnswer.slice(0, 15)}...`
                                     : 'none'}
                             </Button>
                         </Box>
@@ -94,6 +98,7 @@ export const WebhooksFields = ({ control, isSubmitting, event }: WebhooksFieldsP
                             url: '',
                             token: null,
                             lastAnswer: null,
+                            lastAnswerDate: null,
                         })
                     }}>
                     <Add />

src/types.ts

@@ -9,6 +9,7 @@ export interface Track {
 
 export interface Webhooks {
     lastAnswer: string | null
+    lastAnswerDate: Timestamp | null
     url: string
     token: string | null
 }