From 15f48d4e90ea74cfc79f65d15bebdcfa27df7c50 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Tue, 25 Jul 2023 19:38:22 +0200
Subject: [PATCH] feat(shared): Component to reload the account

---
 sites/org/pages/index.mjs                     |  2 +
 .../account/force-account-check.mjs           | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 sites/shared/components/account/force-account-check.mjs

diff --git a/sites/org/pages/index.mjs b/sites/org/pages/index.mjs
index 24f1bc83ec1..af8de11cb92 100644
--- a/sites/org/pages/index.mjs
+++ b/sites/org/pages/index.mjs
@@ -7,6 +7,7 @@ import { PageWrapper } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
+import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
 
 /*
  * Each page MUST be wrapped in the PageWrapper component.
@@ -21,6 +22,7 @@ const HomePage = ({ page }) => (
     </Head>
     <div>
       <div className="max-w-xl m-auto my-32 px-6">
+        <ForceAccountCheck />
         <Popout fixme>
           Create homepage. Meanwhile check <PageLink href="/signup" txt="the signup flow" />
         </Popout>
diff --git a/sites/shared/components/account/force-account-check.mjs b/sites/shared/components/account/force-account-check.mjs
new file mode 100644
index 00000000000..d2e3dad03a5
--- /dev/null
+++ b/sites/shared/components/account/force-account-check.mjs
@@ -0,0 +1,40 @@
+// Dependencies
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'next-i18next'
+// Hooks
+import { useAccount } from 'shared/hooks/use-account.mjs'
+import { useBackend } from 'shared/hooks/use-backend.mjs'
+import { useToast } from 'shared/hooks/use-toast.mjs'
+
+export const ns = ['account', 'toast']
+
+export const ForceAccountCheck = ({ showWelcome = false, trigger = null }) => {
+  // Hooks
+  const { account, setAccount, token, logout } = useAccount()
+  const backend = useBackend(token)
+  const { t } = useTranslation(ns)
+  const toast = useToast()
+
+  // State
+  const [lastCheck, setLastCheck] = useState(Date.now())
+
+  // The actual check
+  useEffect(() => {
+    const age = Date.now() - lastCheck
+    if (account.status && age < 500) {
+      const checkAccount = async () => {
+        const result = await backend.reloadAccount()
+        if (result.success) {
+          setAccount(result.data.account)
+        } else {
+          // Login expired. Logout user.
+          logout()
+        }
+      }
+      checkAccount()
+    }
+  }, [trigger])
+
+  // Don't return anything. This is all about the useEffect hook.
+  return null
+}