feat: added router, api and data

1 files changed, 61 insertions, 0 deletions

diff --git a/services/Router.js b/services/Router.js
new file mode 100644
index 0000000..13ef58e
--- /dev/null
+++ b/services/Router.js
@@ -0,0 +1,61 @@
+const Router = {
+  init: () => {
+    document.querySelectorAll("a.navlink").forEach((a) => {
+      a.addEventListener("click", (event) => {
+        event.preventDefault();
+        const url = event.target.getAttribute("href");
+        Router.go(url);
+      });
+    });
+    // Event Handler for URL changes
+    window.addEventListener("popstate", (event) => {
+      Router.go(event.state.route, false);
+    });
+
+    // Check inital URL
+    Router.go(location.pathname);
+  },
+
+  go: (route, addToHistory = true) => {
+    console.log("Going to route" + route);
+
+    if (addToHistory) {
+      history.pushState({ route }, "", route);
+    }
+
+    let pageElement = null;
+
+    switch (route) {
+      case "/":
+        pageElement = document.createElement("h1");
+        pageElement.textContent = "Menu";
+        break;
+      case "/order":
+        pageElement = document.createElement("h1");
+        pageElement.textContent = "Your Order";
+        break;
+      default:
+        if (route.startsWith("/product-")) {
+          pageElement = document.createElement("h1");
+          pageElement.textContent = "Your Order";
+          const paramId = route.substring(route.lastIndexOf("-") + 1);
+          // Dataset is great for storing costum data because it doesnt get
+          // parsed by the browser
+          pageElement.dataset.id = paramId;
+        }
+    }
+
+    if (pageElement) {
+      // document.querySelector("main").children[0].remove();
+
+      // For little Performance Improvement
+      const cache = document.querySelector("main");
+      cache.innerHTML = "";
+      cache.appendChild(pageElement);
+      window.screenX = 0;
+      window.screenY = 0;
+    }
+  },
+};
+
+export default Router;