From fe0cf9360428185d261dad4065a7bea1dd8d8d59 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 4 Jan 2024 12:58:16 +0100
Subject: [PATCH] fix(front): fix debouncing instances filtering

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/i18n/en_US.json               |  3 ++-
 src/i18n/fr_FR.json               |  3 ++-
 src/views/Admin/InstancesView.vue | 29 ++++++++++++-----------------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 45ecd1415..f0dc97d7a 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -1641,5 +1641,6 @@
   "Announcements for {eventTitle}": "Announcements for {eventTitle}",
   "Visit {instance_domain}": "Visit {instance_domain}",
   "Software details: {software_details}": "Software details: {software_details}",
-  "Only instances with an application actor can be followed": "Only instances with an application actor can be followed"
+  "Only instances with an application actor can be followed": "Only instances with an application actor can be followed",
+  "Domain or instance name": "Domain or instance name"
 }
\ No newline at end of file
diff --git a/src/i18n/fr_FR.json b/src/i18n/fr_FR.json
index 0121d0bcc..b3babdb35 100644
--- a/src/i18n/fr_FR.json
+++ b/src/i18n/fr_FR.json
@@ -1635,5 +1635,6 @@
   "Announcements for {eventTitle}": "Annonces pour {eventTitle}",
   "Visit {instance_domain}": "Visiter {instance_domain}",
   "Software details: {software_details}": "Détails du logiciel : {software_details}",
-  "Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies"
+  "Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies",
+  "Domain or instance name": "Domaine ou nom de l'instance"
 }
diff --git a/src/views/Admin/InstancesView.vue b/src/views/Admin/InstancesView.vue
index f37562736..49a6ceb96 100644
--- a/src/views/Admin/InstancesView.vue
+++ b/src/views/Admin/InstancesView.vue
@@ -54,15 +54,14 @@
           >
         </o-field>
         <o-field
-          :label="t('Domain')"
+          :label="t('Domain or instance name')"
           label-for="domain-filter"
           class="flex-auto"
         >
           <o-input
             id="domain-filter"
             :placeholder="t('mobilizon-instance.tld')"
-            :value="filterDomain"
-            @input="debouncedUpdateDomainFilter"
+            v-model="filterDomain"
           />
         </o-field>
       </div>
@@ -223,7 +222,6 @@ import { Paginate } from "@/types/paginate";
 import RouteName from "../../router/name";
 import { IInstance } from "@/types/instance.model";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
-import debounce from "lodash/debounce";
 import {
   InstanceFilterFollowStatus,
   InstanceFollowStatus,
@@ -254,12 +252,16 @@ const followStatus = useRouteQuery(
 
 const { result: instancesResult } = useQuery<{
   instances: Paginate<IInstance>;
-}>(INSTANCES, () => ({
-  page: instancePage.value,
-  limit: INSTANCES_PAGE_LIMIT,
-  filterDomain: filterDomain.value,
-  filterFollowStatus: followStatus.value,
-}));
+}>(
+  INSTANCES,
+  () => ({
+    page: instancePage.value,
+    limit: INSTANCES_PAGE_LIMIT,
+    filterDomain: filterDomain.value,
+    filterFollowStatus: followStatus.value,
+  }),
+  { debounce: 500 }
+);
 
 const instances = computed(() => instancesResult.value?.instances);
 
@@ -276,13 +278,6 @@ const newRelayAddress = ref("");
 
 // relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
 
-const updateDomainFilter = (event: InputEvent) => {
-  const newValue = (event.target as HTMLInputElement).value;
-  filterDomain.value = newValue;
-};
-
-const debouncedUpdateDomainFilter = debounce(updateDomainFilter, 500);
-
 const hasFilter = computed((): boolean => {
   return (
     followStatus.value !== InstanceFilterFollowStatus.ALL ||