# 4.1 - Projects page

## Introduction

On the leftside of the dashboard a list with Spotify playlists of the user is displayed: ![Schermafbeelding 2020-06-17 om 14 54 25](https://user-images.githubusercontent.com/47485018/84900549-8f1a0f00-b0aa-11ea-9253-ce94ba0eb6d4.png)

Users can open a playlist by clicking on it ![629bfabf10628fc76f56a1163ea81f56](https://user-images.githubusercontent.com/47485018/84900352-42cecf00-b0aa-11ea-8c17-139f706f7946.gif)

## How it works

An eventlistener is attached to each project link:

```javascript
links.forEach(link => {

link.addEventListener('click', function(event){
...
   })

 })

})
```

What happens on the click events:

```javascript
    // the default behaviour of the anchor tag is caught of
    event.preventDefault()
    // href attribute if each anchor is caught, which consists of the page it is referring to and the playlist id
    const url = link.getAttribute('href')
    // then a fetch to our own server is made with the id and token passed, these are used on the server to fetch the right playlist the Spotify api
    fetch(url + '?query=' + link.id + '&async=true' + '&token=' + token + '&id=' + link.id)
    .then(res => res.text())
    .then(html => {
        // the server than renders the component, with the right data and sends this back to the client
        // the project page element is now filled with this component and set to display block
        document.querySelector('.project-page').innerHTML = html
        section.style.display = 'block'
        // if the back button is clicked the element is set back to display none
        const closeButton = document.querySelector('.close-button')
        closeButton.addEventListener('click', () => {
            section.style.display = 'none'
        })
```

What happens on the server:

```javascript
async function projectsRoute(req, res) {

  let options = {
    // url: `https://api.spotify.com/v1/search?q=${artist}&type=track%2Cartist&market=US&limit=10&offset=5`,
    method: 'GET',
    headers: { Authorization: 'Bearer ' + req.query.token },
  };
  // gets the playlist metadata from the spotify api(title)
  const playlist = await getDataFromSpotfy(
    `https://api.spotify.com/v1/playlists/${req.query.id}`,
    options
  );
  // gets the playlist tracks from the spotify api
  const playlistTrackList = await getDataFromSpotfy(
    `https://api.spotify.com/v1/playlists/${req.query.query}/tracks`,
    options
  );

  // loops over playlist items and only returns tracks
  const trackList = playlistTrackList.items.map((track) => {
    return track.track;
  });

  // renders the project component with the right data
  res.render(__dirname + '/view/components/project.ejs', {
    trackData: trackList,
    token: req.query.token,
    playlistData: playlist,
  });
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://meijer-nick1.gitbook.io/meesterproef/4-code/4.1-projects-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.