From 6fb49946031dc093499e826bc228dbbff97e2db9 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Thu, 13 Apr 2023 23:30:33 +0200
Subject: [PATCH] refactor(uuid-generator): prevent NaN in quantity

---
 src/tools/uuid-generator/uuid-generator.vue | 54 ++++++++++-----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index 52f2c4a4..76df1138 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -1,40 +1,36 @@
 <template>
-  <div>
-    <n-card>
-      <n-space align="center" justify="center">
-        Quantity :
-        <n-input-number v-model:value="count" :min="1" :max="50" />
-      </n-space>
-      <br />
-      <n-input
-        style="text-align: center; font-family: monospace"
-        :value="uuids"
-        type="textarea"
-        placeholder="Your uuids"
-        :autosize="{ minRows: 1 }"
-        readonly
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
-      </n-space>
-    </n-card>
-  </div>
+  <n-space vertical :size="20">
+    <n-space align="center" justify="center">
+      Quantity :
+      <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
+    </n-space>
+
+    <n-input
+      style="text-align: center; font-family: monospace"
+      :value="uuids"
+      type="textarea"
+      placeholder="Your uuids"
+      :autosize="{ minRows: 1 }"
+      readonly
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+
+    <n-space justify="center">
+      <n-button secondary autofocus @click="copy"> Copy </n-button>
+      <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
+    </n-space>
+  </n-space>
 </template>
 
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { v4 as generateUUID } from 'uuid';
-import { useQueryParam } from '@/composable/queryParams';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 
-const count = useQueryParam({ defaultValue: 1, name: 'count' });
+const count = useStorage('uuid-generator:quantity', 1);
 
 const [uuids, refreshUUIDs] = computedRefreshable(() =>
   Array.from({ length: count.value }, () => generateUUID()).join('\n'),