feat(archive): use date in url #22

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "compression": "^1.7.4",
+    "date-fns": "^1.30.1",
     "encoding": "^0.1.12",
     "howler": "^2.1.2",
     "polka": "^0.5.2",

src/routes/archive/[slug].svelte

@@ -0,0 +1,64 @@
+<script context="module">
+  import { isValid, startOfDay, endOfDay, getTime } from 'date-fns';
+
+  export async function preload(page, session) {
+    const { slug } = page.params;
+    let date = new Date(slug);
+    date = isValid(date) ? date : new Date();
+    const dayStart  = getTime(startOfDay(date));
+    const dayEnd = getTime(endOfDay(date));
+    let episodes = [];
+     try {
+      const res = await this.fetch(`https://tilos.hu/api/v1/episode?start=${dayStart}&end=${dayEnd}`, {
+			  credentials: 'include'
+      });
+    episodes = await res.json();
+    } catch(e) {
+      console.log('error in Fetch', e);
+    }
+		return { episodes, slug };
+  }
+</script>
+
+<script>
+  import Episode from '../../components/Episode.svelte';
+  import { format } from '../../helpers';
+  export let episodes;
+  export let slug;
+  let newEpisodes = [];
+
+  episodes.forEach(episode => {
+    newEpisodes.push({
+      name: episode.show.name,
+      showId: episode.show.id,
+      text: episode.text ? episode.text.title : '------',
+      mp3: episode.m3uUrl ? episode.m3uUrl.slice(0, -3) + 'mp3' : '',
+      duration: (episode.realTo - episode.realFrom) / 1000
+    })
+  });
+</script>
+
+<style>
+  .archive {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: 0 -1rem;
+    list-style-type: none;
+    padding: 0;
+  }
+</style>
+
+
+
+<svelte:head>
+  <title>Archívum</title>
+</svelte:head>
+
+<h1>Archívum { slug }</h1>
+
+<div class="archive">
+  {#each newEpisodes as episode}
+    <Episode {...episode}></Episode>
+	{/each}
+</div>

src/routes/archive.svelte → src/routes/archive/index.svelte

@@ -1,6 +1,7 @@
 <script context="module">
 	export async function preload(page, session) {
     const { query } =  page;
+
     const start = query.start || 1525903200000;
     const end = query.end || 1525989600000;
     let episodes = [];
@@ -18,8 +19,8 @@
 </script>
 
 <script>
-  import Episode from '../components/Episode.svelte';
-  import { format } from '../helpers';
+  import Episode from '../../components/Episode.svelte';
+  import { format } from '../../helpers';
   export let episodes;
   let newEpisodes = [];