From cf16cb195d1e8d50424308fe734021fd6f1d8393 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 29 Mar 2023 21:12:20 +0200
Subject: [PATCH] refactor(token-generator): now using computedRefreshable

---
 .../token-generator/token-generator.tool.vue    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue
index c2dcb0f4..123e337e 100644
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -53,28 +53,25 @@
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
-import { ref, watch } from 'vue';
 import { useQueryParam } from '@/composable/queryParams';
+import { computedRefreshable } from '@/composable/computedRefreshable';
 import { createToken } from './token-generator.service';
 
-const token = ref('');
 const length = useQueryParam({ name: 'length', defaultValue: 64 });
-const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
-
 const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
 const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
 const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
 const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });
 
-watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });
-
-function refreshToken() {
-  token.value = createToken({
+const [token, refreshToken] = computedRefreshable(() =>
+  createToken({
     length: length.value,
     withUppercase: withUppercase.value,
     withLowercase: withLowercase.value,
     withNumbers: withNumbers.value,
     withSymbols: withSymbols.value,
-  });
-}
+  }),
+);
+
+const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
 </script>