From dfdbd30f5be4c0063837186062f7dadefb3f90d4 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 1 Nov 2023 10:53:05 +0100
Subject: [PATCH] refactor(composable): mutualized computedCatch

---
 src/composable/computed/catchedComputed.ts | 22 ++++++++++++++++++++++
 src/tools/encryption/encryption.vue        | 17 +++++------------
 2 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 src/composable/computed/catchedComputed.ts

diff --git a/src/composable/computed/catchedComputed.ts b/src/composable/computed/catchedComputed.ts
new file mode 100644
index 00000000..fd00a128
--- /dev/null
+++ b/src/composable/computed/catchedComputed.ts
@@ -0,0 +1,22 @@
+import { type Ref, ref, watchEffect } from 'vue';
+
+export { computedCatch };
+
+function computedCatch<T, D>(getter: () => T, { defaultValue }: { defaultValue: D; defaultErrorMessage?: string }): [Ref<T | D>, Ref<string | undefined>];
+function computedCatch<T, D>(getter: () => T, { defaultValue, defaultErrorMessage = 'Unknown error' }: { defaultValue?: D; defaultErrorMessage?: string } = {}) {
+  const error = ref<string | undefined>();
+  const value = ref<T | D | undefined>();
+
+  watchEffect(() => {
+    try {
+      error.value = undefined;
+      value.value = getter();
+    }
+    catch (err) {
+      error.value = err instanceof Error ? err.message : err?.toString() ?? defaultErrorMessage;
+      value.value = defaultValue;
+    }
+  });
+
+  return [value, error] as const;
+}
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index f4ebf380..2ad47b51 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AES, RC4, Rabbit, TripleDES, enc } from 'crypto-js';
+import { computedCatch } from '@/composable/computed/catchedComputed';
 
 const algos = { AES, TripleDES, Rabbit, RC4 };
 
@@ -11,17 +12,9 @@ const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.
 const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
 const decryptAlgo = ref<keyof typeof algos>('AES');
 const decryptSecret = ref('my secret key');
-const decryptError = ref<Error | null>(null);
-const decryptOutput = ref('');
-watchEffect(() => {
-  try {
-    decryptOutput.value = algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8);
-    decryptError.value = null;
-  }
-  catch (e) {
-    decryptOutput.value = '';
-    decryptError.value = e as Error;
-  }
+const [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8), {
+  defaultValue: '',
+  defaultErrorMessage: 'Unable to decrypt your text',
 });
 </script>
 
@@ -72,7 +65,7 @@ watchEffect(() => {
         />
       </div>
     </div>
-    <c-alert v-if="decryptError" type="error" mt-5>
+    <c-alert v-if="decryptError" type="error" mt-12 title="Error while decrypting">
       {{ decryptError }}
     </c-alert>
     <c-input-text