Issue 4, Button to random episode (#12)

* Issue 4, Button to random episode

* Changed to button

* Removed ?randomEpisode query param

* Changed getRandomEpisode to use randomElement

Co-authored-by: David Quezada <davidquezada@David-Quezadas-MacBook-Pro.local>
Co-authored-by: Kalle Jillheden <kalle.jillheden@gmail.com>

src/libs/episodes-repo.ts

@@ -1,4 +1,5 @@
 import type { LinkOrHref } from "./link";
+import { randomElement } from "./util";
 
 export interface EpisodeRawData {
   readonly id: string;
@@ -42,6 +43,10 @@ export function getEpisodeByNumber(episodeNumber: string): EpisodeData {
   return episodeMapByNumber.get(episodeNumber);
 }
 
+export function getRandomEpisode(): EpisodeData {
+  return randomElement(episodeDatas);
+}
+
 export function getAllEpisodeData(): EpisodeData[] {
   return episodeDatas;
 }

src/sections/EpisodeListSection.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import Section from "./base/Section.svelte";
-  import { getAllEpisodeData } from "../libs/episodes-repo";
+  import { getAllEpisodeData, getRandomEpisode } from "../libs/episodes-repo";
   import Link from "../Link.svelte";
+  import { navigate } from "../libs/util";
 
   export let currentEpisodeId: string = null;
+
+  function onClickRandomEpisode() {
+    const epi = getRandomEpisode();
+    navigate(`?episode=${epi.number}`);
+  }
 </script>
 
 <Section title="Episodes">
@@ -17,6 +23,11 @@
         {/if}
       </li>
     {/each}
+    <li>
+      <button class="link" on:click={onClickRandomEpisode}
+        >??: Random episode</button
+      >
+    </li>
   </ol>
 </Section>