From 4bcefb5b05518126e82b9fd35b46fff286125eb0 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Fri, 14 Jul 2023 00:25:30 +0900
Subject: [PATCH] (fix) build error: move server list to client cps

---
 components/servers/Finder.vue | 217 ++++++++++++++++++++++++++++++++++
 locales/ja-JP.yml             |   1 +
 pages/servers.vue             | 191 +++---------------------------
 3 files changed, 233 insertions(+), 176 deletions(-)
 create mode 100644 components/servers/Finder.vue

diff --git a/components/servers/Finder.vue b/components/servers/Finder.vue
new file mode 100644
index 00000000..0f3db66e
--- /dev/null
+++ b/components/servers/Finder.vue
@@ -0,0 +1,217 @@
+<template>
+    <div class="container mx-auto max-w-screen-xl px-6 grid server-list gap-8">
+        <aside class="hidden lg:block">
+            <div class="sticky top-24 py-2 space-y-4">
+                <h3 class="text-xl font-bold">{{ $t('_servers._search.title') }}</h3>
+                <form @submit.prevent="() => { f_query = f_query_partial }">
+                    <label class="form-label" for="query">{{ $t('_servers._search.query') }}</label>
+                    <div class="input-group">
+                        <input class="form-control" type="search" autocomplete="off" id="query" v-model="f_query_partial" />
+                        <button type="submit" class="btn btn-outline-primary hover:!text-white">
+                            <GIcon :icon="'search'" class="stroke-[0.5] stroke-current" />
+                        </button>
+                    </div>
+                </form>
+                <div>
+                    <label class="form-label" for="languages">{{ $t('_servers._search.lang') }}</label>
+                    <select id="languages" v-model="f_langs" class="form-select">
+                        <option :value="null">{{ $t('_servers._search.all') }}</option>
+                        <option v-for="lang in langs" :value="lang.lang">{{ lang.label }}</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="form-label" for="orderBy">{{ $t('_servers._search.orderBy') }}</label>
+                    <div class="input-group">
+                        <select id="orderBy" v-model="f_orderBy" class="form-select">
+                            <option value="recomendded">{{ $t('_servers._search.recomendded') }}</option>
+                            <option value="notesCount">{{ $t('_servers._search.notesCount') }}</option>
+                            <option value="usersCount">{{ $t('_servers._search.usersCount') }}</option>
+                        </select>
+                        <button class="btn btn-outline-primary hover:!text-white" @click="switchOrder()">
+                            <GIcon :icon="'sort-down'" v-if="f_order === 'desc'" class="stroke-[0.5] stroke-current" />
+                            <GIcon :icon="'sort-down-alt'" v-else class="stroke-[0.5] stroke-current" />
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <div class="mb-1">{{ $t('_servers._registerAcceptance.title') }}</div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" :value="null" id="registerAcceptance0">
+                        <label class="form-check-label" for="registerAcceptance0">
+                            {{ $t('_servers._search.all') }}
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="public" id="registerAcceptance1">
+                        <label class="form-check-label" for="registerAcceptance1">
+                            {{ $t('_servers._registerAcceptance.public') }}
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="inviteOnly" id="registerAcceptance2">
+                        <label class="form-check-label" for="registerAcceptance2">
+                            {{ $t('_servers._registerAcceptance.inviteOnly') }}
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        <div>
+            <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
+                <ServersItem v-if="filteredInstances.length > 0" v-for="item in filteredInstances.slice(0, f_limit)" :instance="item" />
+                <div v-else class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
+                    <div class="mx-auto text-center">
+                        <img src="https://xn--931a.moe/assets/info.jpg" class="rounded-lg mx-auto mb-4" />
+                        <p class="max-w-xs">{{ $t('_servers._list.notFound') }}</p>
+                    </div>
+                </div>
+                <button v-if="f_limit < filteredInstances.length" @click="f_limit += 20" class="btn btn-outline-primary btn-lg hover:!text-white block sm:col-span-2 md:col-span-2 lg:col-span-2 px-4">
+                    <GIcon :icon="'arrow-down-circle'" />{{ $t('_servers._list.showMore') }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { InstanceInfo, InstanceItem } from '@/types/instances-info';
+import { resolveObjPath } from '@/assets/js/misc';
+import langs from '@/assets/data/lang';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const emits = defineEmits<{
+    (e: 'load', value?: { 
+        notesCount?: number;
+        usersCount?: number;
+        instancesCount?: number;
+    }): void;
+}>();
+
+// ▼フォームデータ初期化▼
+type MiHubSFStorage = {
+    f_langs: string;
+    f_orderBy: 'recomendded' | 'notesCount' | 'usersCount';
+    f_order: 'asc' | 'desc';
+    f_registerAcceptance: 'public' | 'inviteOnly' | null;
+};
+
+let savedSettings: MiHubSFStorage | null = null;
+if (process.client) {
+    savedSettings = JSON.parse(window.localStorage.getItem('miHub_server_finder') ?? 'null') as MiHubSFStorage | null;
+}
+
+const f_query_partial = ref<string>("");
+
+const f_query = ref<string>("");
+const f_langs = ref<MiHubSFStorage['f_langs']>(savedSettings?.f_langs ?? locale.value);
+const f_orderBy = ref<MiHubSFStorage['f_orderBy']>(savedSettings?.f_orderBy ?? 'recomendded');
+const f_order = ref<MiHubSFStorage['f_order']>(savedSettings?.f_order ?? 'desc');
+const f_registerAcceptance = ref<MiHubSFStorage['f_registerAcceptance']>(savedSettings?.f_registerAcceptance || null);
+
+const f_limit = ref<number>(20);
+// ▲フォームデータ初期化▲
+
+// ▼フォームデータ保存処理▼
+watch([f_langs, f_orderBy, f_order, f_registerAcceptance], (to, from) => {
+    f_limit.value = 20;
+
+    const newSettings: MiHubSFStorage = {
+        f_langs: to[0],
+        f_orderBy: to[1],
+        f_order: to[2],
+        f_registerAcceptance: to[3],
+    };
+
+    if (process.client) {
+        window.localStorage.setItem('miHub_server_finder', JSON.stringify(newSettings));
+    }
+});
+// ▲フォームデータ保存処理▲
+
+route.meta.title = t('_servers.title');
+route.meta.description = t('_servers.description');
+
+const { data } = await useFetch<InstanceInfo>('https://instanceapp.misskey.page/instances.json', {
+    onRequestError: () => {
+        alert(t('_servers._system.fetchError'));
+    }
+});
+
+if (data.value?.stats.usersCount) {
+    emits('load', {
+        notesCount: data.value.stats.notesCount,
+        usersCount: data.value.stats.usersCount,
+        instancesCount: data.value.stats.instancesCount,
+    });
+}
+
+watch(data, (to) => {
+    if (to?.stats.usersCount) {
+        emits('load', {
+            notesCount: to.stats.notesCount,
+            usersCount: to.stats.usersCount,
+            instancesCount: to.stats.instancesCount,
+        });
+    }
+}, {
+    deep: true,
+});
+
+const filteredInstances = computed<InstanceItem[]>(() => {
+    let instances = data.value?.instancesInfos ?? [];
+
+    if (instances.length === 0) {
+        return [];
+    }
+
+    if (f_query.value) {
+        instances = instances.filter((instance) => instance.name.includes(f_query.value) || instance.description?.includes(f_query.value));
+    }
+    if (f_langs.value) {
+        instances = instances.filter((instance) => instance.langs.includes(f_langs.value));
+    }
+    if (f_registerAcceptance.value) {
+        instances = instances.filter((instance) => {
+            if (f_registerAcceptance.value === 'inviteOnly') {
+                return instance.meta?.disableRegistration;
+            } else {
+                return !instance.meta?.disableRegistration ?? true;
+            }
+        });
+    }
+    if (f_orderBy.value) {
+        instances.sort((a, b) => {
+            let orderKey: string;
+            
+            switch(f_orderBy.value) {
+                case 'recomendded':
+                    orderKey = 'value';
+                    break;
+                case 'notesCount':
+                    orderKey = 'stats.originalNotesCount';
+                    break;
+                case 'usersCount':
+                    orderKey = 'stats.originalUsersCount';
+                    break;
+            }
+
+            if (f_order.value === 'desc') {
+                return resolveObjPath(a, orderKey) > resolveObjPath(b, orderKey) ? -1 : 1;
+            } else {
+                return resolveObjPath(a, orderKey) < resolveObjPath(b, orderKey) ? -1 : 1;
+            }
+        });
+    }
+
+    return instances;
+});
+
+function switchOrder() {
+    f_order.value = f_order.value === 'asc' ? 'desc' : 'asc';
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 90960259..ba3db396 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1,5 +1,6 @@
 noScript: "現在Javascriptが無効になっています。サイトの表示にはJavascriptが必須となりますので有効にしてください。"
 learnMore: "詳しく知る"
+loading: "読み込み中…"
 _seo:
   siteName: "Misskey Hub"
   defaultTitleTagline: "ノートでひろがるネットワーク"
diff --git a/pages/servers.vue b/pages/servers.vue
index d7008520..dd18ccb5 100644
--- a/pages/servers.vue
+++ b/pages/servers.vue
@@ -15,207 +15,46 @@
                     <div class="relative bg-white dark:bg-slate-800 shadow-lg rounded-lg lg:w-72 p-6 space-y-4">
                         <dl>
                             <dt>{{ $t('_servers._statistics.notes') }}</dt>
-                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.notesCount.toLocaleString() }}</dd>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ instancesStats?.notesCount?.toLocaleString() || $t('loading') }}</dd>
                         </dl>
                         <dl>
                             <dt>{{ $t('_servers._statistics.users') }}</dt>
-                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.usersCount.toLocaleString() }}</dd>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ instancesStats?.usersCount?.toLocaleString() || $t('loading') }}</dd>
                         </dl>
                         <dl>
                             <dt>{{ $t('_servers._statistics.servers') }}</dt>
-                            <dd class="font-bold text-accent-600 text-2xl">{{ data?.stats.instancesCount.toLocaleString() }}</dd>
+                            <dd class="font-bold text-accent-600 text-2xl">{{ instancesStats?.instancesCount?.toLocaleString() || $t('loading') }}</dd>
                         </dl>
                     </div>
                 </div>
             </template>
         </GHero>
         <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
-            <div class="container mx-auto max-w-screen-xl px-6 grid server-list gap-8">
-                <aside class="hidden lg:block">
-                    <div class="sticky top-24 py-2 space-y-4">
-                        <h3 class="text-xl font-bold">{{ $t('_servers._search.title') }}</h3>
-                        <form @submit.prevent="() => { f_query = f_query_partial }">
-                            <label class="form-label" for="query">{{ $t('_servers._search.query') }}</label>
-                            <div class="input-group">
-                                <input class="form-control" type="search" autocomplete="off" id="query" v-model="f_query_partial" />
-                                <button type="submit" class="btn btn-outline-primary hover:!text-white">
-                                    <GIcon :icon="'search'" class="stroke-[0.5] stroke-current" />
-                                </button>
-                            </div>
-                        </form>
-                        <div>
-                            <label class="form-label" for="languages">{{ $t('_servers._search.lang') }}</label>
-                            <select id="languages" v-model="f_langs" class="form-select">
-                                <option :value="null">{{ $t('_servers._search.all') }}</option>
-                                <option v-for="lang in langs" :value="lang.lang">{{ lang.label }}</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label class="form-label" for="orderBy">{{ $t('_servers._search.orderBy') }}</label>
-                            <div class="input-group">
-                                <select id="orderBy" v-model="f_orderBy" class="form-select">
-                                    <option value="recomendded">{{ $t('_servers._search.recomendded') }}</option>
-                                    <option value="notesCount">{{ $t('_servers._search.notesCount') }}</option>
-                                    <option value="usersCount">{{ $t('_servers._search.usersCount') }}</option>
-                                </select>
-                                <button class="btn btn-outline-primary hover:!text-white" @click="switchOrder()">
-                                    <GIcon :icon="'sort-down'" v-if="f_order === 'desc'" class="stroke-[0.5] stroke-current" />
-                                    <GIcon :icon="'sort-down-alt'" v-else class="stroke-[0.5] stroke-current" />
-                                </button>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="mb-1">{{ $t('_servers._registerAcceptance.title') }}</div>
-                            <div class="form-check">
-                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" :value="null" id="registerAcceptance0">
-                                <label class="form-check-label" for="registerAcceptance0">
-                                    {{ $t('_servers._search.all') }}
-                                </label>
-                            </div>
-                            <div class="form-check">
-                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="public" id="registerAcceptance1">
-                                <label class="form-check-label" for="registerAcceptance1">
-                                    {{ $t('_servers._registerAcceptance.public') }}
-                                </label>
-                            </div>
-                            <div class="form-check">
-                                <input class="form-check-input" type="radio" name="registerAcceptance" v-model="f_registerAcceptance" value="inviteOnly" id="registerAcceptance2">
-                                <label class="form-check-label" for="registerAcceptance2">
-                                    {{ $t('_servers._registerAcceptance.inviteOnly') }}
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                </aside>
-                <div>
-                    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
-                        <ServersItem v-if="filteredInstances.length > 0" v-for="item in filteredInstances.slice(0, f_limit)" :instance="item" />
-                        <div v-else class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
-                            <div class="mx-auto text-center">
-                                <img src="https://xn--931a.moe/assets/info.jpg" class="rounded-lg mx-auto mb-4" />
-                                <p class="max-w-xs">{{ $t('_servers._list.notFound') }}</p>
-                            </div>
-                        </div>
-                        <button v-if="f_limit < filteredInstances.length" @click="f_limit += 20" class="btn btn-outline-primary btn-lg hover:!text-white block sm:col-span-2 md:col-span-2 lg:col-span-2 px-4">
-                            <GIcon :icon="'arrow-down-circle'" />{{ $t('_servers._list.showMore') }}
-                        </button>
-                    </div>
-                </div>
-            </div>
+            <ClientOnly>
+                <ServersFinder @load="setServerStats" />
+            </ClientOnly>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import type { InstanceInfo, InstanceItem } from '@/types/instances-info';
-import { resolveObjPath } from '@/assets/js/misc';
-import langs from '@/assets/data/lang';
-
 const { t, locale } = useI18n();
 const route = useRoute();
 
-// ▼フォームデータ初期化▼
-type MiHubSFStorage = {
-    f_langs: string;
-    f_orderBy: 'recomendded' | 'notesCount' | 'usersCount';
-    f_order: 'asc' | 'desc';
-    f_registerAcceptance: 'public' | 'inviteOnly' | null;
+type InstancesStatsObj = { 
+    notesCount?: number;
+    usersCount?: number;
+    instancesCount?: number;
 };
 
-let savedSettings: MiHubSFStorage | null = null;
-if (process.client) {
-    savedSettings = JSON.parse(window.localStorage.getItem('miHub_server_finder') ?? 'null') as MiHubSFStorage | null;
+const instancesStats = ref<InstancesStatsObj>();
+
+function setServerStats(val: InstancesStatsObj) {
+    console.log(val);
+    instancesStats.value = val;
 }
 
-const f_query_partial = ref<string>("");
-
-const f_query = ref<string>("");
-const f_langs = ref<MiHubSFStorage['f_langs']>(savedSettings?.f_langs ?? locale.value);
-const f_orderBy = ref<MiHubSFStorage['f_orderBy']>(savedSettings?.f_orderBy ?? 'recomendded');
-const f_order = ref<MiHubSFStorage['f_order']>(savedSettings?.f_order ?? 'desc');
-const f_registerAcceptance = ref<MiHubSFStorage['f_registerAcceptance']>(savedSettings?.f_registerAcceptance || null);
-
-const f_limit = ref<number>(20);
-// ▲フォームデータ初期化▲
-
-// ▼フォームデータ保存処理▼
-watch([f_langs, f_orderBy, f_order, f_registerAcceptance], (to, from) => {
-    f_limit.value = 20;
-
-    const newSettings: MiHubSFStorage = {
-        f_langs: to[0],
-        f_orderBy: to[1],
-        f_order: to[2],
-        f_registerAcceptance: to[3],
-    };
-
-    if (process.client) {
-        window.localStorage.setItem('miHub_server_finder', JSON.stringify(newSettings));
-    }
-});
-// ▲フォームデータ保存処理▲
-
 route.meta.title = t('_servers.title');
-route.meta.description = t('_servers.description');
-
-const { data } = await useFetch<InstanceInfo>('https://instanceapp.misskey.page/instances.json', {
-    onRequestError: () => {
-        alert(t('_servers._system.fetchError'));
-    }
-});
-
-const filteredInstances = computed<InstanceItem[]>(() => {
-    let instances = data.value?.instancesInfos ?? [];
-
-    if (instances.length === 0) {
-        return [];
-    }
-
-    if (f_query.value) {
-        instances = instances.filter((instance) => instance.name.includes(f_query.value) || instance.description?.includes(f_query.value));
-    }
-    if (f_langs.value) {
-        instances = instances.filter((instance) => instance.langs.includes(f_langs.value));
-    }
-    if (f_registerAcceptance.value) {
-        instances = instances.filter((instance) => {
-            if (f_registerAcceptance.value === 'inviteOnly') {
-                return instance.meta?.disableRegistration;
-            } else {
-                return !instance.meta?.disableRegistration ?? true;
-            }
-        });
-    }
-    if (f_orderBy.value) {
-        instances.sort((a, b) => {
-            let orderKey: string;
-            
-            switch(f_orderBy.value) {
-                case 'recomendded':
-                    orderKey = 'value';
-                    break;
-                case 'notesCount':
-                    orderKey = 'stats.originalNotesCount';
-                    break;
-                case 'usersCount':
-                    orderKey = 'stats.originalUsersCount';
-                    break;
-            }
-
-            if (f_order.value === 'desc') {
-                return resolveObjPath(a, orderKey) > resolveObjPath(b, orderKey) ? -1 : 1;
-            } else {
-                return resolveObjPath(a, orderKey) < resolveObjPath(b, orderKey) ? -1 : 1;
-            }
-        });
-    }
-
-    return instances;
-});
-
-function switchOrder() {
-    f_order.value = f_order.value === 'asc' ? 'desc' : 'asc';
-}
 </script>
 
 <style scoped>