diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx index c45216e03..3f0b262b5 100644 --- a/app/soapbox/components/status_list.tsx +++ b/app/soapbox/components/status_list.tsx @@ -137,6 +137,7 @@ const StatusList: React.FC = ({ ); }; diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index 7ab86c2c0..871b76d06 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/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 = ({ card, impression }) => { +const Ad: React.FC = ({ card, impression, expires }) => { + const queryClient = useQueryClient(); const instance = useAppSelector(state => state.instance); + const timer = useRef(undefined); const infobox = useRef(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 = ({ 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 (
diff --git a/app/soapbox/normalizers/soapbox/ad.ts b/app/soapbox/normalizers/soapbox/ad.ts index c29ee9a3e..115ad529c 100644 --- a/app/soapbox/normalizers/soapbox/ad.ts +++ b/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. */