fjord-tracks · S3ak · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023
diff --git a/.env b/.env
@@ -1,3 +1,3 @@
 VITE_CLIENT_ID=""
 VITE_CLIENT_SECRET=""
-VITE_CALLBACK_URL="http://localhost:5173/"
+VITE_CALLBACK_URL="http://localhost:5173/callback"
diff --git a/README.md b/README.md
@@ -62,6 +62,10 @@ Make sure you go through this checklist before submitting your project to Moodle
 - [Animate.css](https://animate.style/) - Just-add-water CSS animations
 - [Spotify-web-api-js](https://www.npmjs.com/package/spotify-web-api-js)
 
+## Tutorials & Reading material
+
+- [storing tokens](https://blog.ropnop.com/storing-tokens-in-browser/)
+
 ## Authors
 
 - Ali Nough (@AliNough)

diff --git a/callback.html b/callback.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bragi Mix</title>
+    <script type="module" src="/js/callback.js"></script>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <header class="l-header">
+      <section class="l-container l-content">
+        <h1>Login</h1>
+      </section>
+    </header>
+
+    <main class="l-main">
+      <article class="l-container">
+        <p>You should be automatically redirect to the home page</p>
+        <p>If not please click the button below</p>
+
+        <a class="button" href="/index.html">Go Back</a>
+      </article>
+    </main>
+
+    <footer class="l-footer">
+      <section class="l-container">Made by Alex, Ali & Mo</section>
+    </footer>
+  </body>
+</html>
diff --git a/components/Header.js b/components/Header.js
@@ -0,0 +1,41 @@
+class Header extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .is-active {
+          color: green;
+        }
+      </style>
+      <div class="u-row c-nav-controls">
+        <h1><slot></slot></h1>
+        <div class="u-row">
+          <nav>
+            <a href="/">Home</a>
+            <a href="/randomizer">Randomizer</a>
+          </nav>
+
+          <button id="js-logout-btn" data-is-protected="true">Log out</button>
+        </div>
+      </div>
+    `;
+
+    const currentUrl = window.location.pathname;
+
+    const links = this.shadowRoot.querySelectorAll("a");
+
+    links.forEach((link) => {
+      if (currentUrl.includes(link.pathname) && link.pathname !== "/") {
+        link.classList.add("is-active");
+        return;
+      }
+    });
+  }
+}
+
+customElements.define("custom-header", Header);
diff --git a/counter.js b/counter.js
diff --git a/css/ui.css b/css/ui.css
@@ -24,3 +24,17 @@
   box-shadow: var(--shadow-3);
   margin: var(--size-2) 0;
 }
+
+.c-nav-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.c-song-preview-window {
+  width: 80%;
+  height: 80%;
+  min-height: 20vh;
+  margin-top: 3em;
+}
diff --git a/css/utilities.css b/css/utilities.css
@@ -16,3 +16,8 @@
 .is-visible {
   opacity: 1;
 }
+
+.u-row {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/index.html b/index.html
@@ -4,33 +4,35 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-    <script type="module" src="/main.js"></script>
+    <title>Bragi Mix</title>
+    <script type="module" src="/components/Header.js"></script>
+    <script type="module" defer src="/main.js"></script>
+    <script type="module" defer src="/js/index.js"></script>
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <header class="l-header">
       <section class="l-container">
-        <h1>Home</h1>
+        <div class="c-nav-controls">
+          <h1>Home</h1>
 
-        <nav>
-          <a href="/">Home</a>
-          <a href="/about">About</a>
-          <!-- <a href="/randSong.html">Randomizer</a> -->
-        </nav>
+          <div class="u-row">
+            <nav>
+              <a href="/">Home</a>
+              <a href="/randomizer.html">Randomizer</a>
+            </nav>
+
+            <button id="js-login-btn">Sign In</button>
+            <button id="js-logout-btn" data-is-protected="true">Log out</button>
+          </div>
+        </div>
       </section>
     </header>
 
     <main class="l-main l-content">
       <section id="js-rand-nav-holder" class="l-container"></section>
-      <section id="js-login-holder" class="l-container">
-        <div class="">
-          <h2>Login into your Spotify</h2>
-          <button id="js-login-btn">login</button>
-        </div>
-      </section>
 
-      <section class="l-container">
+      <section class="l-container" data-is-protected="true">
         <form id="js-seach-form" class="c-form">
           <div>
             <label for="genre">genre</label>

diff --git a/js/app.js b/js/app.js
diff --git a/js/callback.js b/js/callback.js
@@ -0,0 +1,10 @@
+import { manageUserSessssion } from "./session.js";
+
+/*
+============================================
+Callback page specfic code
+============================================
+*/
+
+manageUserSessssion();
+window.location.replace("/index.html");
diff --git a/js/helpers.js b/js/helpers.js
@@ -0,0 +1,31 @@
+/*
+============================================
+Helper functions
+https://github.com/S3ak/fed-javascript1-api-calls/blob/main/examples/games.html#L154
+============================================
+*/
+
+// TODO: Create a function that renders the playlists
+export function renderPlaylist({ title = "No title" }) {
+  return `
+    <div class="c-card">
+      <h3>${title}</h3>
+    </div>
+  `;
+}
+
+export function hideProtectedContent(isLoggedIn) {
+  const protectedContent = document.querySelectorAll("[data-is-protected]");
+
+  if (isLoggedIn) {
+    protectedContent.forEach((content) => {
+      content.classList.remove("is-hidden");
+    });
+
+    return;
+  }
+
+  protectedContent.forEach((content) => {
+    content.classList.add("is-hidden");
+  });
+}
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,27 @@
+import { renderPlaylist } from "./helpers.js";
+
+import s from "../main.js";
+
+const playlistContainerEl = document.querySelector("#js-playlist-list");
+
+document.querySelector("#js-seach-form").addEventListener("submit", (event) => {
+  event.preventDefault();
+
+  const genre = event.target.querySelector("#genre").value;
+  s.searchPlaylists(genre)
+    .then((data) => {
+      const playlists = data.playlists.items;
+      console.log(playlists);
+
+      playlistContainerEl.innerHTML = "";
+
+      playlists.forEach((playlist) => {
+        playlistContainerEl.innerHTML += renderPlaylist({
+          title: playlist.name,
+        });
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});
diff --git a/js/login.js b/js/login.js
@@ -0,0 +1,11 @@
+import { loginSpotifyUser } from "./session.js";
+
+/*
+============================================
+Login page specfic code
+============================================
+*/
+
+const loginBtnEl = document.querySelector("#js-login-btn");
+
+loginBtnEl.addEventListener("click", loginSpotifyUser);
diff --git a/js/randomize.js b/js/randomize.js
@@ -1,20 +1,22 @@
-import Spotify from "spotify-web-api-js";
-// import Spotify from "../node_modules/spotify-web-api-js/src/typings/spotify-web-api";
+import s from "../main.js";
 
 const generateBtn = document.querySelector("#js-gnrt-btn");
 const resultHolder = document.querySelector("#js-res-holder");
-const yearInput = document.querySelector("#js-yr-input");
-console.log(resultHolder);
+const songPreview = document.querySelector("#js-iframe");
+// const yearInput = document.querySelector("#js-yr-input");
 
 generateBtn.addEventListener("click", () => {
-  randomizer(yearInput.value);
+  getSong();
 });
 
-const accessToken = localStorage.getItem("access_token");
-console.log(accessToken);
+function getSong() {
+  s.searchTracks("chill", { market: "NO" }).then((data) => {
+    console.log(data);
+    const song = data.tracks.items[0].preview_url;
+    songPreview.src = song;
+  });
+}
 
-const dataBase = new Spotify();
-console.log(dataBase);
 // const accessToken = new URLSearchParams(
 //   window.location.hash.replace("#", "")
 // ).get("access_token");