fix: reimplemented routing based on pages

csaf-poc · Oct 5, 2023 · 2c77d70 · 2c77d70
1 parent c3108c7
commit 2c77d70
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 99 deletions.
diff --git a/src/lib/feedview/Loader.svelte b/src/lib/feedview/Loader.svelte
@@ -11,15 +11,22 @@
 <script lang="ts">
   import { appStore } from "$lib/store";
   import { loadFeed, loadProviderMetaData } from "$lib/urlloader";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
   let url = "";
+  onMount(() => {
+    if (/^\?q=/.test($page.url.search)) {
+      url = $page.url.search.replace("?q=", "");
+    }
+  });
   const load = () => {
     if (/provider-metadata\.json/.test(url)) {
       loadProviderMetaData(url);
-      window.location.hash = `#/feed?q=${url}`;
     } else {
       loadFeed(url);
-      window.location.hash = `#/feed?q=${url}`;
     }
+    goto(`/feed?q=${url}`);
   };
 
   const keydown = (e: KeyboardEvent) => {

diff --git a/src/lib/feedview/entries/EntriesByYear.svelte b/src/lib/feedview/entries/EntriesByYear.svelte
@@ -11,22 +11,14 @@
 <script lang="ts">
   import Collapsible from "$lib/Collapsible.svelte";
   import Entry from "./Entry.svelte";
-  import { appStore } from "$lib/store";
-  import { loadSingleCSAF } from "$lib/urlloader";
-  import { tick } from "svelte";
+  import { goto } from "$app/navigation";
   export let entries: any = [];
   export let year: string;
   let visibility = "none";
   let icon = "bx-chevron-down";
-  async function switchSingleMode() {
-    await tick();
-    appStore.setSingleMode();
-  }
   const open = (e: Event) => {
     let url: string = (e.target as Element).getAttribute("href")!;
-    switchSingleMode();
-    loadSingleCSAF(url);
-    window.location.hash = `#/single?q=${url}`;
+    goto(`/?q=${url}`);
     e.preventDefault();
   };
   const toggle = () => {

diff --git a/src/lib/feedview/entries/Entry.svelte b/src/lib/feedview/entries/Entry.svelte
@@ -23,7 +23,6 @@
     let url: string = (e.target as Element).getAttribute("href")!;
     switchSingleMode();
     loadSingleCSAF(url);
-    window.location.hash = `#/single?q=${url}`;
     e.preventDefault();
   };
 </script>

diff --git a/src/lib/singleview/LoadFromURL.svelte b/src/lib/singleview/LoadFromURL.svelte
@@ -10,11 +10,19 @@
 
 <script lang="ts">
   import { appStore } from "$lib/store";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
   import { loadSingleCSAF } from "$lib/urlloader";
+  import { page } from "$app/stores";
   let URL = "";
+  onMount(() => {
+    if (/^\?q=/.test($page.url.search)) {
+      URL = $page.url.search.replace("?q=", "");
+    }
+  });
   const loads = () => {
-    window.location.hash = `#/single?q=${URL}`;
     loadSingleCSAF(URL);
+    goto(`/?q=${URL}`);
   };
   const keydown = (e: KeyboardEvent) => {
     if (e.key === "Enter") {

diff --git a/src/lib/urlloader.ts b/src/lib/urlloader.ts
@@ -26,6 +26,8 @@ async function loadProviderMetaData(url: string) {
   try {
     const response = await fetch(`${url}`);
     if (response.ok) {
+      appStore.setCurrentFeed(null);
+      appStore.setProviderMetadata(null);
       const providerMetadata = await response.json();
       appStore.setProviderMetadata(providerMetadata);
     }
@@ -42,7 +44,7 @@ async function loadProviderMetaData(url: string) {
 }
 
 async function loadFeed(feedURL: string, e?: Event) {
-  appStore.setSingleErrorMsg("");
+  appStore.setFeedErrorMsg("");
   try {
     const response = await fetch(`${feedURL}`);
     if (response.ok) {
@@ -57,11 +59,11 @@ async function loadFeed(feedURL: string, e?: Event) {
       }, 100);
     }
     if (response.status === 404) {
-      appStore.setSingleErrorMsg("The resource you requested was not found on the server.");
+      appStore.setFeedErrorMsg("The resource you requested was not found on the server.");
       appStore.setCurrentFeed(null);
     }
   } catch (error) {
-    appStore.setSingleErrorMsg(
+    appStore.setFeedErrorMsg(
       "Failed to load from URL. The server may be unreachable or the resource cannot be accessed due to CORS restrictions."
     );
     appStore.setCurrentFeed(null);

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import "chota/dist/chota.min.css";
+  import "boxicons/css/boxicons.min.css";
+  import { appStore } from "$lib/store";
+
+  /*global __APP_VERSION__*/
+  const version: string = __APP_VERSION__;
+  const MODE = {
+    SINGLE: "Switch to ROLIE-feed",
+    FEED: "Switch to single view"
+  };
+  $: mode = $appStore.ui.appMode;
+  $: switchToRoute = mode === MODE.SINGLE ? "/feed" : "/";
+  const disable = (e: Event) => {
+    e.preventDefault();
+  };
+</script>
+
+<svelte:window on:dragover={disable} on:drop={disable} />
+
+<div class="content">
+  <!-- svelte-ignore a11y-no-redundant-roles -->
+  <div class="header">
+    <h1 role="heading" class="text-center">CSAF Webview+</h1>
+    <a href={switchToRoute} class="switchbutton button">{mode}</a>
+    <h4>v. {version}</h4>
+  </div>
+  <slot />
+</div>
+
+<style>
+  .switchbutton {
+    box-shadow: 1px 3px 3px #c1c1c1;
+  }
+  .header > h1 {
+    font-weight: bold;
+  }
+  .content {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .switchbutton {
+    position: relative;
+    left: -90px;
+  }
+</style>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -5,4 +5,5 @@
 //
 // SPDX-FileCopyrightText: 2023 German Federal Office for Information Security (BSI) <https://www.bsi.bund.de>
 // Software-Engineering: 2023 Intevation GmbH <https://intevation.de>
+
 export const prerender = true;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,90 +8,26 @@
  Software-Engineering: 2023 Intevation GmbH <https://intevation.de
 -->
 <script lang="ts">
-  import "chota/dist/chota.min.css";
-  import "boxicons/css/boxicons.min.css";
-  import { browser } from "$app/environment";
-  import { appStore } from "$lib/store";
-  import { page } from "$app/stores";
   import SingleView from "$lib/singleview/SingleView.svelte";
-  import FeedView from "$lib/feedview/FeedView.svelte";
-  import { loadProviderMetaData, loadSingleCSAF } from "$lib/urlloader";
-  import { tick } from "svelte";
-
-  /*global __APP_VERSION__*/
-  const version: string = __APP_VERSION__;
-  const externalReference =
-    browser && (/#\/single\?q=/.test($page.url.hash) || /#\/feed\?q=/.test($page.url.hash));
-  const MODE = {
-    SINGLE: "Switch to ROLIE-feed",
-    FEED: "Switch to single view"
-  };
-  async function switchFeedMode() {
-    await tick();
-    appStore.setFeedMode();
-  }
-  async function switchSingleMode() {
-    await tick();
-    appStore.setSingleMode();
-  }
-  $: mode = $appStore.ui.appMode;
-  $: if (externalReference) {
-    if (/#\/single\?q=/.test($page.url.hash)) {
-      const URL = $page.url.hash.replace("#/single?q=", "");
-      loadSingleCSAF(URL);
-    }
-    if (/#\/feed\?q=/.test($page.url.hash)) {
-      const URL = $page.url.hash.replace("#/feed?q=", "");
-      loadProviderMetaData(URL);
-      switchFeedMode();
-    }
-  }
-  const switchView = () => {
-    if (mode === MODE.SINGLE) {
-      appStore.setFeedMode();
+  import { page } from "$app/stores";
+  import { onMount } from "svelte";
+  import { loadSingleCSAF } from "$lib/urlloader";
+  import { appStore } from "$lib/store";
+  $: if (/^\?q=/.test($page.url.search)) {
+    const url = $page.url.search.replace("?q=", "");
+    loadSingleCSAF(url);
+  } else {
+    appStore.setDocument(null);
+  }
+  onMount(() => {
+    if (/^\?q=/.test($page.url.search)) {
+      const url = $page.url.search.replace("?q=", "");
+      loadSingleCSAF(url);
     } else {
-      appStore.setSingleMode();
+      appStore.setDocument(null);
     }
-  };
-  const disable = (e: Event) => {
-    e.preventDefault();
-  };
+    appStore.setSingleMode();
+  });
 </script>
 
-<svelte:window on:dragover={disable} on:drop={disable} />
-
-<div class="content">
-  <!-- svelte-ignore a11y-no-redundant-roles -->
-  <div class="header">
-    <h1 role="heading" class="text-center">CSAF Webview+</h1>
-    <button class="switchbutton button" on:click={switchView}>{mode}</button>
-    <h4>v. {version}</h4>
-  </div>
-  {#if mode === MODE.SINGLE}
-    <SingleView />
-  {:else}
-    <FeedView />
-  {/if}
-</div>
-
-<style>
-  .switchbutton {
-    box-shadow: 1px 3px 3px #c1c1c1;
-  }
-  .header > h1 {
-    font-weight: bold;
-  }
-  .content {
-    margin-left: 3rem;
-    margin-right: 3rem;
-  }
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .switchbutton {
-    position: relative;
-    left: -90px;
-  }
-</style>
+<SingleView />
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import FeedView from "$lib/feedview/FeedView.svelte";
+  import { onMount } from "svelte";
+  import { appStore } from "$lib/store";
+  import { page } from "$app/stores";
+  import { loadFeed, loadProviderMetaData } from "$lib/urlloader";
+  $: if (/^\?q=/.test($page.url.search)) {
+    const url = $page.url.search.replace("?q=", "");
+    if (/provider-metadata\.json/.test(url)) {
+      loadProviderMetaData(url);
+    } else {
+      loadFeed(url);
+    }
+  } else {
+    appStore.setCurrentFeed(null);
+    appStore.setProviderMetadata(null);
+  }
+  appStore.setFeedMode();
+  onMount(() => {
+    if (/^\?q=/.test($page.url.search)) {
+      const url = $page.url.search.replace("?q=", "");
+      if (/provider-metadata\.json/.test(url)) {
+        loadProviderMetaData(url);
+      } else {
+        loadFeed(url);
+      }
+    } else {
+      appStore.setCurrentFeed(null);
+      appStore.setProviderMetadata(null);
+    }
+    appStore.setFeedMode();
+  });
+</script>
+
+<FeedView />