From d3405fda4d17c3d52a4a869634adc38f9e5b3516 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Tue, 3 Aug 2021 01:17:17 +0700
Subject: [PATCH] Add visitor count

---
 src/locales/en.json              |  1 +
 src/locales/id.json              |  1 +
 src/routes/_index/welcome.svelte | 33 ++++++++++++++++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index 46b439fa..a371e4e9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,6 +18,7 @@
   "home": {
     "welcome": "Welcome to Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Help you plan what to farm with ascension calculator, also track your progress with todo and wish counter.",
+    "visitor": "{count} visitors in last 7 days",
     "banner": {
       "featured": [
         "Eula"
diff --git a/src/locales/id.json b/src/locales/id.json
index 61d1c2ed..a14296e8 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -18,6 +18,7 @@
   "home": {
     "welcome": "Selamat Datang di Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Membantu kamu merencanakan apa yang harus di farm dengan kalkulator ascension, juga catat progress mu dengan todo dan wish counter.",
+    "visitor": "{count} pengunjung dalam 7 hari terakhir",
     "banner": {
       "summoned": "Pulang",
       "percentage": "dari semua {rarity}",
diff --git a/src/routes/_index/welcome.svelte b/src/routes/_index/welcome.svelte
index 6688b2fa..149a4e5c 100644
--- a/src/routes/_index/welcome.svelte
+++ b/src/routes/_index/welcome.svelte
@@ -1,8 +1,41 @@
 <script>
+  import { createEventDispatcher, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
+
+  const numberFormat = Intl.NumberFormat('en', {
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0,
+  });
+
+  const dispatch = createEventDispatcher();
+
+  let count = '...';
+
+  async function getData() {
+    const url = new URL(`${__paimon.env.API_HOST}/visitor`);
+
+    try {
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await res.json();
+      count = `${numberFormat.format(data.count / 1000)}k`;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  onMount(async () => {
+    getData();
+    await tick();
+    dispatch('done');
+  });
 </script>
 
 <div class="bg-item rounded-xl p-4">
   <p class="text-white font-bold font-display text-xl">{$t('home.welcome')}</p>
   <p class="text-white mt-2">{$t('home.message')}</p>
+  <p class="text-gray-400 mt-2">{$t('home.visitor', { values: { count } })}</p>
 </div>