trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Migrate DeepLinkErrorView.vue to PlatformServiceMixin with Vue 3 to Options API conversion

Browse Source 
- 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
This commit is contained in:
Matthew Raymer
2025-07-06 05:48:13 +00:00
parent 34563c2240
commit e97559ba9d
1 changed files with 76 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/DeepLinkErrorView.vue
View File

@@ -38,65 +38,91 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts">
import { computed, onMounted } from "vue"; // TODO: Testing Required - Vue 3 to Options API + PlatformServiceMixin Migration
import { useRoute, useRouter } from "vue-router"; // 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 { VALID_DEEP_LINK_ROUTES } from "../interfaces/deepLinks";
import { logConsoleAndDb } from "../db/databaseUtil";
import { logger } from "../utils/logger"; import { logger } from "../utils/logger";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
const route = useRoute(); @Component({
const router = useRouter(); mixins: [PlatformServiceMixin],
})
export default class DeepLinkErrorView extends Vue {
validRoutes = VALID_DEEP_LINK_ROUTES;
// Extract error information from query params // Extract error information from query params
const errorCode = computed( get errorCode(): string {
() => (route.query.errorCode as string) || "UNKNOWN_ERROR", return (this.$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 get errorMessage(): string {
const formattedPath = computed(() => { return (
if (!originalPath.value) return ""; (this.$route.query.message as string) ||
const path = originalPath.value.replace(/^\/+/, ""); "The deep link you followed is invalid or not supported."
);
}
// Log for debugging get originalPath(): string {
logger.log( return this.$route.query.originalPath as string;
"[DeepLinkError] Original Path:", }
originalPath.value,
"Route Params:",
route.params,
"Route Query:",
route.query,
);
return path; // Format the path and include any parameters
}); get formattedPath(): string {
if (!this.originalPath) return "";
const path = this.originalPath.replace(/^\/+/, "");
// Navigation methods // Log for debugging
const goHome = () => router.replace({ name: "home" }); logger.log(
const reportIssue = () => { "[DeepLinkError] Original Path:",
// Open a support form or email this.originalPath,
window.open( "Route Params:",
"mailto:support@timesafari.app?subject=Invalid Deep Link&body=" + this.$route.params,
encodeURIComponent( "Route Query:",
`I encountered an error with a deep link: timesafari://${originalPath.value}\nError: ${errorMessage.value}`, this.$route.query,
), );
);
};
// Log the error for analytics return path;
onMounted(() => { }
logConsoleAndDb(
`[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}, params: ${JSON.stringify(route.params)}`, // Navigation methods
true, 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> </script>
<style scoped> <style scoped>