From ffad087907bd52a83b376c8e9f45f7cfd4c037d8 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Mon, 22 Jan 2024 17:15:30 +0100
Subject: [PATCH] feat: adding router state persistence (#104)

* feat: adding router state persistence

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: tests

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: linter

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: prettier

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: revert + using state management

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: moving model file to frontend package

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

---------

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 packages/frontend/src/App.svelte             | 15 ++++++++++++--
 packages/frontend/src/Route.svelte           |  7 +++++++
 packages/frontend/src/models/IRouterState.ts | 21 ++++++++++++++++++++
 packages/frontend/src/utils/client.ts        | 15 ++++++++++++++
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/models/IRouterState.ts

diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index 58ef74a43..33d0d0435 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -11,13 +11,24 @@ import Preferences from '/@/pages/Preferences.svelte';
 import Registries from '/@/pages/Registries.svelte';
 import Models from '/@/pages/Models.svelte';
 import Recipe from '/@/pages/Recipe.svelte';
-  import Model from './pages/Model.svelte';
+import Model from './pages/Model.svelte';
+import { onMount } from 'svelte';
+import { getRouterState } from '/@/utils/client';
 
 router.mode.hash();
+
+let isMounted = false;
+
+onMount(() => {
+  // Load router state on application startup
+  const state = getRouterState();
+  router.goto(state.url);
+  isMounted = true;
+});
 </script>
 
 
-<Route path="/*" breadcrumb="Home" let:meta>
+<Route path="/*" breadcrumb="Home" isAppMounted="{isMounted}" let:meta>
   <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Navigation meta="{meta}"/>
diff --git a/packages/frontend/src/Route.svelte b/packages/frontend/src/Route.svelte
index 09f5dcbc9..c45d45c14 100644
--- a/packages/frontend/src/Route.svelte
+++ b/packages/frontend/src/Route.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { createRouteObject } from 'tinro/dist/tinro_lib';
 import type { TinroRouteMeta } from 'tinro';
+import { saveRouterState, studioClient } from '/@/utils/client';
 
 export let path = '/*';
 export let fallback = false;
@@ -8,6 +9,8 @@ export let redirect = false;
 export let firstmatch = false;
 export let breadcrumb: string | undefined = undefined;
 
+export let isAppMounted: boolean = false;
+
 let showContent = false;
 let params: Record<string, string> = {};
 let meta: TinroRouteMeta = {} as TinroRouteMeta;
@@ -23,6 +26,10 @@ const route = createRouteObject({
   onMeta(newMeta: TinroRouteMeta) {
     meta = newMeta;
     params = meta.params;
+
+    if(isAppMounted) {
+      saveRouterState({url: newMeta.url});
+    }
   },
 });
 
diff --git a/packages/frontend/src/models/IRouterState.ts b/packages/frontend/src/models/IRouterState.ts
new file mode 100644
index 000000000..ce9339224
--- /dev/null
+++ b/packages/frontend/src/models/IRouterState.ts
@@ -0,0 +1,21 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+export interface RouterState {
+  url: string;
+}
diff --git a/packages/frontend/src/utils/client.ts b/packages/frontend/src/utils/client.ts
index 93efd1cea..ace1b10b2 100644
--- a/packages/frontend/src/utils/client.ts
+++ b/packages/frontend/src/utils/client.ts
@@ -1,8 +1,23 @@
 import type { StudioAPI } from '@shared/src/StudioAPI';
 import { RpcBrowser } from '@shared/src/messages/MessageProxy';
+import type { RouterState } from '/@/models/IRouterState';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 const podmanDesktopApi = acquirePodmanDesktopApi();
 export const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
 
 export const studioClient: StudioAPI = rpcBrowser.getProxy<StudioAPI>();
+
+export const saveRouterState = (state: RouterState) => {
+  podmanDesktopApi.setState(state);
+};
+
+const isRouterState = (value: unknown): value is RouterState => {
+  return typeof value === 'object' && !!value && 'url' in value;
+};
+
+export const getRouterState = (): RouterState => {
+  const state = podmanDesktopApi.getState();
+  if (isRouterState(state)) return state;
+  return { url: '/' };
+};