From c4e959b94ff965c54c8efbf1b252a51998bc29d2 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Sun, 6 Jul 2025 05:48:13 +0000
Subject: [PATCH] Migrate DeepLinkErrorView.vue to PlatformServiceMixin with
 Vue 3 to Options API conversion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert Vue 3 Composition API to Options API with vue-facing-decorator
- Add PlatformServiceMixin for consistent database and logging patterns
- Replace logConsoleAndDb() with this.$logAndConsole() mixin method
- Remove legacy databaseUtil import dependency
- Convert computed properties to class getters
- Convert onMounted lifecycle to mounted() method
- Add comprehensive TODO with testing guidance

Technical Changes:
- useRoute/useRouter → this.$route/this.$router
- computed() refs → class getters with proper typing
- Composition API imports → vue-facing-decorator imports

Migration Status: 12% complete (11/91 components)
Passes lint checks and maintains all original functionality
---
 src/views/DeepLinkErrorView.vue | 138 +++++++++++++++++++-------------
 1 file changed, 82 insertions(+), 56 deletions(-)

diff --git a/src/views/DeepLinkErrorView.vue b/src/views/DeepLinkErrorView.vue
index e65d3b58..861d737e 100644
--- a/src/views/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -38,65 +38,91 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
+<script lang="ts">
+// TODO: Testing Required - Vue 3 to Options API + PlatformServiceMixin Migration
+// Priority: Medium | Migrated: 2025-01-06 | Author: Matthew Raymer
+//
+// MIGRATION DETAILS: Converted from Vue 3 Composition API to Options API for PlatformServiceMixin
+// - Replaced logConsoleAndDb() with this.$logAndConsole()
+// - Converted computed properties to getters
+// - Converted onMounted to mounted() lifecycle hook
+//
+// TESTING NEEDED:
+// 1. Test invalid deep link triggering (easy to test)
+// 2. Verify error logging works correctly
+// 3. Test error page display and navigation
+// 4. Test "Report Issue" functionality
+//
+// Test URL: timesafari://invalid/path?param=test
+
+import { Component, Vue } from "vue-facing-decorator";
 import { VALID_DEEP_LINK_ROUTES } from "../interfaces/deepLinks";
-import { logConsoleAndDb } from "../db/databaseUtil";
 import { logger } from "../utils/logger";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+
+@Component({
+  mixins: [PlatformServiceMixin],
+})
+export default class DeepLinkErrorView extends Vue {
+  validRoutes = VALID_DEEP_LINK_ROUTES;
+
+  // Extract error information from query params
+  get errorCode(): string {
+    return (this.$route.query.errorCode as string) || "UNKNOWN_ERROR";
+  }
+
+  get errorMessage(): string {
+    return (
+      (this.$route.query.message as string) ||
+      "The deep link you followed is invalid or not supported."
+    );
+  }
+
+  get originalPath(): string {
+    return this.$route.query.originalPath as string;
+  }
+
+  // Format the path and include any parameters
+  get formattedPath(): string {
+    if (!this.originalPath) return "";
+    const path = this.originalPath.replace(/^\/+/, "");
 
-const route = useRoute();
-const router = useRouter();
-
-// Extract error information from query params
-const errorCode = computed(
-  () => (route.query.errorCode as string) || "UNKNOWN_ERROR",
-);
-const errorMessage = computed(
-  () =>
-    (route.query.message as string) ||
-    "The deep link you followed is invalid or not supported.",
-);
-const originalPath = computed(() => route.query.originalPath as string);
-const validRoutes = VALID_DEEP_LINK_ROUTES;
-
-// Format the path and include any parameters
-const formattedPath = computed(() => {
-  if (!originalPath.value) return "";
-  const path = originalPath.value.replace(/^\/+/, "");
-
-  // Log for debugging
-  logger.log(
-    "[DeepLinkError] Original Path:",
-    originalPath.value,
-    "Route Params:",
-    route.params,
-    "Route Query:",
-    route.query,
-  );
-
-  return path;
-});
-
-// Navigation methods
-const goHome = () => router.replace({ name: "home" });
-const reportIssue = () => {
-  // Open a support form or email
-  window.open(
-    "mailto:support@timesafari.app?subject=Invalid Deep Link&body=" +
-      encodeURIComponent(
-        `I encountered an error with a deep link: timesafari://${originalPath.value}\nError: ${errorMessage.value}`,
-      ),
-  );
-};
-
-// Log the error for analytics
-onMounted(() => {
-  logConsoleAndDb(
-    `[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}, params: ${JSON.stringify(route.params)}`,
-    true,
-  );
-});
+    // Log for debugging
+    logger.log(
+      "[DeepLinkError] Original Path:",
+      this.originalPath,
+      "Route Params:",
+      this.$route.params,
+      "Route Query:",
+      this.$route.query,
+    );
+
+    return path;
+  }
+
+  // Navigation methods
+  goHome(): void {
+    this.$router.replace({ name: "home" });
+  }
+
+  reportIssue(): void {
+    // Open a support form or email
+    window.open(
+      "mailto:support@timesafari.app?subject=Invalid Deep Link&body=" +
+        encodeURIComponent(
+          `I encountered an error with a deep link: timesafari://${this.originalPath}\nError: ${this.errorMessage}`,
+        ),
+    );
+  }
+
+  // Log the error for analytics
+  async mounted(): Promise<void> {
+    this.$logAndConsole(
+      `[DeepLink] Error page displayed for path: ${this.originalPath}, code: ${this.errorCode}, params: ${JSON.stringify(this.$route.params)}`,
+      true,
+    );
+  }
+}
 </script>
 
 <style scoped>