From 08c9a14b6eb73997087806d4ae85d2bfde43a4ea Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Tue, 5 Sep 2023 01:32:06 +0300
Subject: [PATCH] chore(landing): use client rendered stats

---
 .../src/components/index/StatsList.astro      | 56 -----------------
 .../src/components/index/StatsList.vue        | 61 +++++++++++++++++++
 frontend/landing/src/pages/index.astro        |  4 +-
 3 files changed, 63 insertions(+), 58 deletions(-)
 delete mode 100644 frontend/landing/src/components/index/StatsList.astro
 create mode 100644 frontend/landing/src/components/index/StatsList.vue

diff --git a/frontend/landing/src/components/index/StatsList.astro b/frontend/landing/src/components/index/StatsList.astro
deleted file mode 100644
index d4a728d29..000000000
--- a/frontend/landing/src/components/index/StatsList.astro
+++ /dev/null
@@ -1,56 +0,0 @@
----
-import { type Response } from '@twir/grpc/generated/api/api/stats';
-
-import { unProtectedClient } from '../../api/twirp.js';
-
-let res: Response | undefined;
-
-try {
-	const { response } = await unProtectedClient.getStats({}, { timeout: 1000 });
-	res = response;
-} catch (e) {
-	console.error(e)
-}
-
-const formatter = Intl.NumberFormat('en-US', {
-	notation: 'compact',
-	maximumFractionDigits: 1,
-});
-
-const stats = [
-	{
-		key: 'Users',
-		value: formatter.format(res?.users ?? 0),
-	},
-	{
-		key: 'Channels',
-		value: formatter.format(res?.channels ?? 0),
-	},
-	{
-		key: 'Commands',
-		value: formatter.format(res?.commands ?? 0),
-	},
-	{
-		key: 'Messages',
-		value: formatter.format(res?.messages ?? 0),
-	},
-	{
-		key: 'Used emotes',
-		value: formatter.format(res?.usedEmotes ?? 0),
-	},
-];
----
-
-
-<div class="bg-[#17171A] px-5 py-6 gap-32 flex flex-wrap justify-center">
-	{stats.map((item) =>
-		<div class="inline-flex flex-col items-center justify-center">
-		<span class="font-semibold lg:text-6xl text-[min(40px,11vw)] text-white leading-[1.2] tracking-tight">
-			{item.value}
-		</span>
-			<span class="text-[#ADB0B8] lg:text-lg lg:mt-2 leading-normal whitespace-nowrap">
-			{item.key}
-		</span>
-		</div>)}
-</div>
-
diff --git a/frontend/landing/src/components/index/StatsList.vue b/frontend/landing/src/components/index/StatsList.vue
new file mode 100644
index 000000000..c283df4ed
--- /dev/null
+++ b/frontend/landing/src/components/index/StatsList.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+
+const stats = ref({
+	Users: 0,
+	Channels: 0,
+	Commands: 0,
+	Messages: 0,
+	'Used Emotes': 0,
+});
+
+async function fetchStats() {
+	const { browserUnProtectedClient } = await import('../../api/twirp-browser.js');
+
+	const req = await browserUnProtectedClient.getStats({});
+	const res = await req.response;
+	const formatter = Intl.NumberFormat('en-US', {
+		notation: 'compact',
+		maximumFractionDigits: 1,
+	});
+
+	stats.value.Users = formatter.format(res.users);
+	stats.value.Channels = formatter.format(res.channels);
+	stats.value.Commands = formatter.format(res.commands);
+	stats.value.Messages = formatter.format(res.messages);
+	stats.value['Used Emotes'] = formatter.format(res.usedEmotes);
+}
+
+let interval;
+
+onMounted(async () => {
+	if (typeof window === 'undefined') return;
+	await fetchStats();
+	interval = setInterval(fetchStats, 5 * 1000);
+});
+
+onUnmounted(() => {
+	clearInterval(interval);
+});
+</script>
+
+<template>
+	<div class="bg-[#17171A] px-5 py-6 gap-32 flex flex-wrap justify-center">
+		<div
+			v-for="key of Object.keys(stats)"
+			:key="key"
+			class="inline-flex flex-col items-center justify-center"
+		>
+			<span
+				class="font-semibold lg:text-6xl text-[min(40px,11vw)] text-white leading-[1.2] tracking-tight"
+			>
+				{{ stats[key] }}
+			</span>
+			<span class="text-[#ADB0B8] lg:text-lg lg:mt-2 leading-normal whitespace-nowrap">
+				{{ key }}
+			</span>
+		</div>
+	</div>
+</template>
+
diff --git a/frontend/landing/src/pages/index.astro b/frontend/landing/src/pages/index.astro
index 575a78af9..541535b2b 100644
--- a/frontend/landing/src/pages/index.astro
+++ b/frontend/landing/src/pages/index.astro
@@ -6,7 +6,7 @@ import Integrations from '../components/index/Integrations.astro';
 import Reviews from '../components/index/Reviews.vue';
 import Team from '../components/index/Team.astro';
 import Footer from '../components/index/Footer.astro';
-import StatsList from '../components/index/StatsList.astro';
+import StatsList from '../components/index/StatsList.vue';
 ---
 
 <Layout title="Twir - Main page">
@@ -14,7 +14,7 @@ import StatsList from '../components/index/StatsList.astro';
 		<Hero/>
 	</section>
 	<section id="stats">
-		<StatsList/>
+		<StatsList client:load/>
 	</section>
 	<section id="features">
 		<Features/>