From 2d13c5b6b9cf7728181223d19ebeeaa6769bc70a Mon Sep 17 00:00:00 2001
From: sairamg <sairamg@ideyalabs.com>
Date: Mon, 25 Aug 2025 15:18:30 +0530
Subject: [PATCH 1/2] test(RouterHooks): implement router state testing in init
 hook

---
 src/pages/RouterHooks.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/pages/RouterHooks.js b/src/pages/RouterHooks.js
index ec448cb..a60edfc 100644
--- a/src/pages/RouterHooks.js
+++ b/src/pages/RouterHooks.js
@@ -8,6 +8,9 @@ const hookPageTemplate = {
       color="#fff"
       :effects="[{type: 'radialGradient', props: {colors: ['#b43fcb', '#6150cb'], pivot: [0.5, 1.1], width: 2400, height: 800}}]"
     >
+      <Element :show="$stateInfo !== undefined">
+        <Text :content="$stateInfo" x="60" y="60" size="28" />
+      </Element>
       <Element :show="$up !== undefined">
         <Element src="assets/arrow.png" w="100" h="44" x="960" y="40" mount="{x: 0.5}" />
         <Text :content="$up && $up.toUpperCase()" x="960" y="100" size="76" mount="{x: 0.5}" />
@@ -48,6 +51,7 @@ const hookPageTemplate = {
       right: 'right',
       down: 'down',
       left: 'left',
+      stateInfo: "",
     }
   },
 }
@@ -121,6 +125,28 @@ const Rating = Blits.Component('RouterHookRating', {
 //movie flow page, with 2 directions left: back, right: next episode
 const Episode = Blits.Component('RouterHookEpisode', {
   ...hookPageTemplate,
+  hooks: {
+    init() {
+      const state =  this.$router?.state;
+      if (!state) return
+
+      const params =  state['params'] || {}
+      const data =  state['data'] || {}
+      const path = state.path || ''
+      this.page = data.page || (params.id ? { id: Number(params.id), title: `Episode ${params.id}` } : this.page)
+
+      const qp = ( state['queryParams'] || state['query']) || null
+      const query = qp && typeof qp.entries === 'function' 
+        ? Object.fromEntries(qp.entries()) 
+        : Object.fromEntries(new URLSearchParams(window.location.hash.split('?')[1] || ''))
+
+      this.stateInfo = JSON.stringify({ path, params, query, data })
+   
+    },
+
+    
+  },  
+  
   state() {
     return {
       title: 'Episode',

From 429a1259ea799e8880e58f6675771eadc680c628 Mon Sep 17 00:00:00 2001
From: sairamg <sairamg@ideyalabs.com>
Date: Thu, 28 Aug 2025 10:49:28 +0530
Subject: [PATCH 2/2] Updated state data in router

---
 src/components/MemoryCard.js |  2 +-
 src/pages/Focus.js           |  2 +-
 src/pages/RouterHooks.js     | 39 +++++++++++++++++-------------------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/components/MemoryCard.js b/src/components/MemoryCard.js
index 2d984f9..b20c021 100644
--- a/src/components/MemoryCard.js
+++ b/src/components/MemoryCard.js
@@ -77,7 +77,7 @@ export default Blits.Component('MemoryCard', {
         }
       })
     },
-    focus(e) {
+    focus() {
       this.scale = 1.08
       const message = 'Card ' + (this.index + 1) + (this.disabled ? ' (disabled)' : '')
       this.announcement = this.$announcer.speak(message)
diff --git a/src/pages/Focus.js b/src/pages/Focus.js
index 22a8e71..2f9bf7c 100644
--- a/src/pages/Focus.js
+++ b/src/pages/Focus.js
@@ -137,7 +137,7 @@ export default Blits.Component('Focus', {
     left() {
       this.index = Math.max(1, this.index - 1)
     },
-    right(e) {
+    right() {
       this.index = Math.min(3, this.index + 1)
       // this.parent.$focus(e)
     },
diff --git a/src/pages/RouterHooks.js b/src/pages/RouterHooks.js
index a60edfc..4e6a772 100644
--- a/src/pages/RouterHooks.js
+++ b/src/pages/RouterHooks.js
@@ -51,7 +51,7 @@ const hookPageTemplate = {
       right: 'right',
       down: 'down',
       left: 'left',
-      stateInfo: "",
+      stateInfo: '',
     }
   },
 }
@@ -127,26 +127,19 @@ const Episode = Blits.Component('RouterHookEpisode', {
   ...hookPageTemplate,
   hooks: {
     init() {
-      const state =  this.$router?.state;
+      // Get router state information
+      const state = this.$router?.state
       if (!state) return
 
-      const params =  state['params'] || {}
-      const data =  state['data'] || {}
-      const path = state.path || ''
-      this.page = data.page || (params.id ? { id: Number(params.id), title: `Episode ${params.id}` } : this.page)
-
-      const qp = ( state['queryParams'] || state['query']) || null
-      const query = qp && typeof qp.entries === 'function' 
-        ? Object.fromEntries(qp.entries()) 
-        : Object.fromEntries(new URLSearchParams(window.location.hash.split('?')[1] || ''))
-
-      this.stateInfo = JSON.stringify({ path, params, query, data })
-   
+      // Display available router state information
+      this.stateInfo = JSON.stringify({
+        path: state.path || '',
+        params: state['params'] || {},
+        data: state['data'] || {},
+      })
     },
+  },
 
-    
-  },  
-  
   state() {
     return {
       title: 'Episode',
@@ -160,10 +153,14 @@ const Episode = Blits.Component('RouterHookEpisode', {
       this.$router.back()
     },
     right() {
-      //trigger router to navigate to the next episode, and NOT save current episode page in navigation history
-      this.$router.to(`/examples/router-hooks/episode/${this.page.id + 1}`, undefined, {
-        inHistory: false,
-      })
+      //trigger router to navigate to the next episode without adding to navigation history
+      this.$router.to(
+        `/examples/router-hooks/episode/${Number(this.$router.state['params'].id) + 1}`,
+        undefined,
+        {
+          inHistory: false,
+        }
+      )
     },
   },
 })