From 3ee7e5d653c3a23edd994901051d58a2c42086a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carsten=20G=C3=B6tzinger?= <carsten.goetzinger@concedro.com>
Date: Thu, 6 Apr 2023 10:10:45 +0200
Subject: [PATCH] chore(user-agent-parser): some more changes requested by code
 review

---
 src/tools/user-agent-parser/index.ts           |  1 +
 .../user-agent-parser.types.ts                 | 12 ++++++++++++
 .../user-agent-parser/user-agent-parser.vue    | 13 +++----------
 .../user-agent-result-cards.vue                | 18 +++++-------------
 4 files changed, 21 insertions(+), 23 deletions(-)
 create mode 100644 src/tools/user-agent-parser/user-agent-parser.types.ts

diff --git a/src/tools/user-agent-parser/index.ts b/src/tools/user-agent-parser/index.ts
index d75bf5d9..1ae05d14 100644
--- a/src/tools/user-agent-parser/index.ts
+++ b/src/tools/user-agent-parser/index.ts
@@ -8,4 +8,5 @@ export const tool = defineTool({
   keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
   component: () => import('./user-agent-parser.vue'),
   icon: Browser,
+  createdAt: new Date('2023-04-06'),
 });
diff --git a/src/tools/user-agent-parser/user-agent-parser.types.ts b/src/tools/user-agent-parser/user-agent-parser.types.ts
new file mode 100644
index 00000000..f84719fc
--- /dev/null
+++ b/src/tools/user-agent-parser/user-agent-parser.types.ts
@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+import { UAParser } from 'ua-parser-js';
+
+export type UserAgentResultSection = {
+  heading: string;
+  icon?: Component;
+  content: {
+    label: string;
+    getValue: (blocks: UAParser.IResult) => string | undefined;
+    undefinedFallback?: string;
+  }[];
+};
diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue
index 18c1f000..a256ec6a 100644
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -15,11 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { UAParser } from 'ua-parser-js';
 import { withDefaultOnError } from '@/utils/defaults';
 import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
 import UserAgentResultCards from './user-agent-result-cards.vue';
+import type { UserAgentResultSection } from './user-agent-parser.types';
 
 const ua = ref(navigator.userAgent as string);
 
@@ -32,15 +33,7 @@ const getUserAgentInfo = (userAgent: string) =>
     : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
 const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
 
-const sections: {
-  heading: string;
-  icon?: PropType<any>;
-  content: {
-    label: string;
-    getValue: (blocks: UAParser.IResult) => string | undefined;
-    undefinedFallback?: string;
-  }[];
-}[] = [
+const sections: UserAgentResultSection[] = [
   {
     heading: 'Browser',
     icon: Browser,
diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue
index 6c592003..d79a5283 100644
--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@@ -16,12 +16,11 @@
 
           <n-space>
             <span v-for="{ label, getValue } in content" :key="label">
-              <n-tooltip trigger="hover">
+              <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                 <template #trigger>
-                  <n-tag v-if="getValue(userAgentInfo)" type="success" size="large" round :bordered="false">
+                  <n-tag type="success" size="large" round :bordered="false">
                     {{ getValue(userAgentInfo) }}
                   </n-tag>
-                  <span v-else />
                 </template>
                 {{ label }}
               </n-tooltip>
@@ -39,20 +38,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue';
+import { toRefs } from 'vue';
 import { UAParser } from 'ua-parser-js';
+import type { UserAgentResultSection } from './user-agent-parser.types';
 
 const props = defineProps<{
   userAgentInfo?: UAParser.IResult;
-  sections: {
-    heading: string;
-    icon?: PropType<any>;
-    content: {
-      label: string;
-      getValue: (blocks: UAParser.IResult) => string | undefined;
-      undefinedFallback?: string;
-    }[];
-  }[];
+  sections: UserAgentResultSection[];
 }>();
 const { userAgentInfo, sections } = toRefs(props);
 </script>