test route

onzer.riot

@@ -1,18 +1,4 @@
 <onzer>
-
-    <router initial-route={state.initialRoute} base={state.base}>
-        <nav>
-            <a each={ page in state.pages } href="/#{ page.id }">
-                { page.title }
-            </a>
-        </nav>
-
-        <route path=":id?">
-            <h1>{getPageById(route).title}</h1>
-            <p>{getPageById(route).body}</p>
-        </route>
-    </router>
-
     <div class="px-12">
         <div class="flex-row mb-2">
             <input id="album" type="button" onclick={click} value="Albums"
@@ -40,27 +26,13 @@
     </div>
 
     <script>
-        const pages = [
-            { id: "home", title: "Home", body: "Onzer" },
-            { id: "playlist", title: "Playlist", body: "Onzer" },
-        ]
-
-        const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`
-
         export default {
-            components: {
-                router: route.Router;
-                route: route.Route;
-            },
             state: {
                 placeholder: "Rechercher dans les albums",
                 items: [],
                 search: "albums",
                 filter: undefined,
-                id: undefined,
-                pages,
-                initialRoute,
-                base: '/#'
+                id: undefined
             },
             onBeforeMount(props) {
                 this.loadData(props.items);
@@ -125,9 +97,8 @@
                 }
                 return fetch(computeHttpRequest).then(response => response.json());
             },
-            getPageById(route) {
-                const {id} = route.params
-                return pages.find(page => page.id === id) || pages[0]
+            navigateToPlaylists() {
+                route('/playlists');
             }
         }
     </script>
@@ -145,26 +116,5 @@
             border-color: #6EE7B7;
             width: 32%;
         }
-
-        :host {
-            display: block;
-            font-family: sans-serif;
-            margin: 0;
-            padding: 1em;
-            text-align: center;
-            color: #666;
-        }
-        nav {
-            display: block;
-            border-bottom: 1px solid #666;
-            padding: 0 0 1em;
-        }
-        nav > a {
-            display: inline-block;
-            padding: 0 .8em;
-        }
-        nav > a:not(:first-child) {
-            border-left: 1px solid #eee;
-        }
     </style>
 </onzer>