Merge pull request #12 from fission-suite/add-username-debounce

Add debounce to username available check

src/components/auth/Register.svelte

@@ -13,8 +13,6 @@
 
     usernameValid = await isUsernameValid(username)
 
-    console.log(username, ' is valid: ', usernameValid)
-
     if (usernameValid) {
       usernameAvailable = await isUsernameAvailable(username)
       console.log(username, ' is available: ', usernameAvailable)

src/lib/common/utils.ts

@@ -0,0 +1,25 @@
+export function asyncDebounce<A extends unknown[], R>(
+  fn: (...args: A) => Promise<R>,
+  wait: number
+): (...args: A) => Promise<R> {
+  let lastTimeoutId: ReturnType<typeof setTimeout> | undefined = undefined 
+
+  return (...args: A): Promise<R> => {
+    clearTimeout(lastTimeoutId)
+
+    return new Promise((resolve, reject) => {
+      const currentTimeoutId = setTimeout(async () => {
+        try {
+          if (currentTimeoutId === lastTimeoutId) {
+            const result = await fn(...args)
+            resolve(result)
+          }
+        } catch (err) {
+          reject(err)
+        }
+      }, wait)
+
+      lastTimeoutId = currentTimeoutId
+    })
+  }
+}

src/lib/common/webnative.ts

@@ -3,6 +3,7 @@ import * as webnative from 'webnative'
 import type FileSystem from 'webnative/fs/index'
 import { USE_WNFS_IMPLEMENTATION } from 'webnative/auth/implementation/use-wnfs'
 import { setup } from 'webnative'
+import { asyncDebounce } from '$lib/common/utils'
 
 // runfission.net = staging
 setup.endpoints({ api: 'https://runfission.net', user: 'fissionuser.net' })
@@ -61,9 +62,12 @@ export const isUsernameValid = async (username: string): Promise<boolean> => {
   return webnative.account.isUsernameValid(username)
 }
 
+const debouncedIsUsernameAvailable = asyncDebounce(webnative.account.isUsernameAvailable, 300)
+
 export const isUsernameAvailable = async (username: string): Promise<boolean> => {
-  return webnative.account.isUsernameAvailable(username)
+  return debouncedIsUsernameAvailable(username)
 }
+
 // interface StateFS {
 //   fs?: FileSystem
 // }