From fddde9424be48175f3f3891849fb4a79549ca157 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Thu, 23 Mar 2023 16:49:57 +0100
Subject: [PATCH] Better routing with conditions

---
 src/App.svelte | 36 ++++++++++++++++++++++++++++++------
 src/routes.ts  | 12 ------------
 2 files changed, 30 insertions(+), 18 deletions(-)
 delete mode 100644 src/routes.ts

diff --git a/src/App.svelte b/src/App.svelte
index ed314c9..192ac00 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,18 +1,42 @@
 <script lang="ts">
-  import Router, { location } from 'svelte-spa-router'
-  import routes from './routes'
+  import Router, { location, querystring, replace } from 'svelte-spa-router'
+  import { wrap } from 'svelte-spa-router/wrap'
 
   import Navbar from './lib/Navbar.svelte'
   import Sidebar from './lib/Sidebar.svelte'
   import Footer from './lib/Footer.svelte'
-
-  import { apiKeyStorage } from './lib/Storage.svelte'
+  import Home from './lib/Home.svelte'
+  import Chat from './lib/Chat.svelte'
+  import NewChat from './lib/NewChat.svelte'
+  import { chatsStorage, apiKeyStorage } from './lib/Storage.svelte'
 
   // Check if the API key is passed in as a "key" query parameter - if so, save it
-  const urlParams: URLSearchParams = new URLSearchParams(window.location.search)
+  // Example: https://niek.github.io/chatgpt-web/#/?key=sk-...
+  const urlParams: URLSearchParams = new URLSearchParams($querystring)
   if (urlParams.has('key')) {
     apiKeyStorage.set(urlParams.get('key') as string)
   }
+
+  // The definition of the routes with some conditions
+  const routes = {
+    '/': Home,
+
+    '/chat/new': wrap({
+      component: NewChat,
+      conditions: () => {
+        return !!$apiKeyStorage
+      }
+    }),
+
+    '/chat/:chatId': wrap({
+      component: Chat,
+      conditions: (detail) => {
+        return $chatsStorage.find((chat) => chat.id === parseInt(detail?.params?.chatId as string)) !== undefined
+      }
+    }),
+
+    '*': Home
+  }
 </script>
 
 <Navbar />
@@ -25,7 +49,7 @@
       </div>
       <div class="column is-four-fifths" id="content">
         {#key $location}
-          <Router {routes} />
+          <Router {routes} on:conditionsFailed={() => replace('/')}/>
         {/key}
       </div>
     </div>
diff --git a/src/routes.ts b/src/routes.ts
deleted file mode 100644
index 7aec907..0000000
--- a/src/routes.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import Home from './lib/Home.svelte'
-import Chat from './lib/Chat.svelte'
-import NewChat from './lib/NewChat.svelte'
-
-export default {
-  '/': Home,
-
-  '/chat/new': NewChat,
-  '/chat/:chatId': Chat,
-
-  '*': Home
-}