Ads: bust query-cache when an ad expires

app/soapbox/components/status_list.tsx

@@ -137,6 +137,7 @@ const StatusList: React.FC<IStatusList> = ({
       <Ad
         card={ad.card}
         impression={ad.impression}
+        expires={ad.expires}
       />
     );
   };

app/soapbox/features/ads/components/ad.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import React, { useState, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -13,15 +14,23 @@ interface IAd {
   card: CardEntity,
   /** Impression URL to fetch upon display. */
   impression?: string,
+  expires?: Date,
 }
 
 /** Displays an ad in sponsored post format. */
-const Ad: React.FC<IAd> = ({ card, impression }) => {
+const Ad: React.FC<IAd> = ({ card, impression, expires }) => {
+  const queryClient = useQueryClient();
   const instance = useAppSelector(state => state.instance);
 
+  const timer = useRef<NodeJS.Timeout | undefined>(undefined);
   const infobox = useRef<HTMLDivElement>(null);
   const [showInfo, setShowInfo] = useState(false);
 
+  /** Invalidate query cache for ads. */
+  const bustCache = (): void => {
+    queryClient.invalidateQueries(['ads']);
+  };
+
   /** Toggle the info box on click. */
   const handleInfoButtonClick: React.MouseEventHandler = () => {
     setShowInfo(!showInfo);
@@ -51,6 +60,20 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
     }
   }, [impression]);
 
+  // Wait until the ad expires, then invalidate cache.
+  useEffect(() => {
+    if (expires) {
+      const delta = expires.getTime() - (new Date()).getTime();
+      timer.current = setTimeout(bustCache, delta);
+    }
+
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+  }, [expires]);
+
   return (
     <div className='relative'>
       <Card className='py-6 sm:p-5' variant='rounded'>

app/soapbox/normalizers/soapbox/ad.ts

@@ -9,6 +9,7 @@ import { CardRecord, normalizeCard } from '../card';
 export const AdRecord = ImmutableRecord({
   card: CardRecord(),
   impression: undefined as string | undefined,
+  expires: undefined as Date | undefined,
 });
 
 /** Normalizes an ad from Soapbox Config. */