Periodically update the time of reference for questions

src/components/tiles/question-tile.tsx

@@ -1,4 +1,6 @@
 'use client';
+import { useEffect, useState } from 'react';
+
 import { PresentationWithDates } from '@/models/models';
 
 import { PresentationTile } from '../presentation/PresentationGrid';
@@ -11,8 +13,14 @@ type Props = {
 const MARGIN_MINUTES = 10;
 
 export function RoomQuestion({ presentations, room, delay }: Props) {
-  const now = new Date();
-  now.setMinutes(now.getMinutes() - delay);
+  const [now, setNow] = useState(new Date(0));
+
+  useEffect(() => {
+    setNow(getNow(delay));
+    const id = setInterval(() => setNow(getNow(delay)), 30000);
+    return () => clearInterval(id);
+  }, []);
+
   const presentationInRoom = presentations.filter((p) => {
     const endDateWithMargin = new Date(p.endDate);
     endDateWithMargin.setMinutes(endDateWithMargin.getMinutes() + MARGIN_MINUTES);
@@ -30,3 +38,9 @@ export function RoomQuestion({ presentations, room, delay }: Props) {
     </p>
   );
 }
+
+function getNow(delay: number): Date {
+  const now = new Date();
+  now.setMinutes(now.getMinutes() - delay);
+  return now;
+}