From af7c85b787cc2ad1f95df572f7ced67d9941a338 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 18 Mar 2022 07:38:13 +0800
Subject: [PATCH] website: make sidebar ad unit refresh periodically

---
 website/src/components/SidebarAd/index.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
index ba38ef30..ae23e4ae 100644
--- a/website/src/components/SidebarAd/index.js
+++ b/website/src/components/SidebarAd/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
 import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
+const AD_REFRESH_RATE = 20 * 1000;
+
 const BACKGROUNDS = [
   styles.backgroundPurplin,
   styles.backgroundFirewatch,
@@ -125,13 +127,22 @@ function EducativeSystemDesign({className, position}) {
 }
 
 export default React.memo(function SidebarAd({position}) {
+  const [counter, setCounter] = useState(0);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCounter((counter) => counter + 1);
+    }, AD_REFRESH_RATE);
+
+    return () => clearTimeout(timer);
+  }, [counter]);
+
   const backgroundClass =
     BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
 
   // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
   // we'll render this on the browser only.
   return (
-    <BrowserOnly>
+    <BrowserOnly key={counter}>
       {() => {
         const path = window.location.pathname;
         // Ugly hack to show conditional sidebar content.