DEV Api a practical use case of streams
Tags: javascript, streams, api
Published: 2020-09-21 22:16:05

For fun here is a simple example using streams, no framework, vanilla JS

You can test it here [DEV API](https://flems.io/#0=N4IgtglgJlA2CmIBcAWArAOgGwGYA0IAxgPYB2AzsQskVbAIYAO58UIB5hATncgNoAGPAIC6BAGYQE5fqFL0wiJCAwALAC5hY7WqXXw9NADxQIANwAEhBuXIBeADogmjJwD4HpCxc9GA9KZmHqQ6LAiE6hBkMso4SAIgAL54cgpKKgBWMgQkegbqNOIArqQRUV7k6lzwChYAFGYAlBbAnt4I6hZgLvBc5BZ2FnwibRYdFpXE1VBm9LBF8AMWZqPFpZFkFgD6ldUKDUuT07Pz8M2tXt4WEOL1TRPqU6wnC0tmANyj3t2MjL3kGB+dTq4madjcywsADIoRZxA1Go0vhZquoilwKo9jnMFp9LolRjsqjUwICmEs4SUypsQedkT8-n0MIwiuRVLTRgTLqj0V4iXswJ4uZ5xoR0dU9KyuEsnPQuOoAJ5QeArECeTy5SoWVn-JZ8WXypUqpx4HwgKD0KRGsyRZgARicI1Inj8fgmNS4hFU2pY0vEPDA11ILM6ACNiAAPTwAdwgpCgxGjGBYcq9AElg0VOoM6mCIVdgD5LjquHUU57VCWMC8zu9vKMxVwJWjyNLBuWvVWa0L1aRXe7U96S3CA2MIJUY3GE0mO6oAKq+pZ1KV5lqjEvL1uNOtF7yN5tSpZSnvOvtu9GwCwAQQACmnPGtqV4L-US3TufA0RiLAADDTqZgkFdZUzAwR4-CYCAIPlCBrHgcgAH4S3kRQ7AAEmAEtEihRktkYegAHN4DsO0BDIn8T17R8Ni8WBx3UBddVzNcPy-LwKMubwjCKS9KgVBBHBAfQI3UABaOYIAI0gkAQcR1DrbouAIuNRNk9QkAsUjGAjBS5WU0hRMeRgkC0nT3GRbwMJLAEgSKAYIR-Iw6KsGx7CcEsnAsMhrFggBrQTZ0Y0sAHIrMSYKkRANwwv8Oi3B-RoMAyYg4zqJwnEaLkrgsfweOCbwOOFeRyAVUpKXWcoLCI9Qb2ISpyE3Xp3z3aJOmqchGGiRZBnoaNLU6cRPy9ZcuFgRquERBtWosLJNh6vqIDa+DOooeAksoUhc1GHlv1m08iuoyq4xDABlD0vXqZqUU-XlfyMY6s2uKAAvOytfU8vx8t-SjSEOzZTA6hgFVqyo6k6yorp29jkSciAXPoWxBPB9RzM4q4THMeHEacVQaigZHUey7KjHoCxVGqcRBIw5GMAvAkoupur1DAxaEESfx6C+4mAnMLn0cCLG3PNeDuAgRgaMJomuPgMBouAGnlU4LgxZo9m-BlvmuJ5oIYb8OLRkKqiqRosdKhB9R+jBpnyCuzVOjMCB4GjJYOOJvKLIsRn6rJRg6gBxggfNxLktS4KIqy9G-Hdy5Xeutjlkd6Mfr+rwr1+epkZtljvATMVFD0DBwygBUMDjUhegACQAFQAWQAGRdmGBesBGhcidQEEl4nVBwNwABEVQsR4LHN-oLFEyzgH3fIpUST35etjAEFIAj1FUOeLDlSI4P6fwe75-xAgP5vXJewdQzlLuiYxnW0aljCHvUM7B1zCOpa40Ms0eLxvLowh-KcLODMIYtpRVnD6XoFhM7+E-uob+mtI5Hw9ofXmTdMYt2xrodQlpy5cCvlxI+GE6Jm2tlbeqmUUG3yljfQWglrL4PRqoFAbggrkD3swj2BDeZEPoqw1+lCD7ay+obU8vY7YQLbA8AUW1TxViBJuCa9lvAXBahQKga1YDEAIgopElxqqjx0WBXGm006MF0YkXRngNzT0lFuXs9jRGnh0CQMAjApC9BoBfUM8BtAcB8fAJ8MQQACHiKJO0doUDxCSCkEAKF0gYEILYZxZB9CGGUBoLQ2cLDhgjKJcgEAABecYCIaXDFwZUXBRI5LxN4cQKS8mFPgBpO0WBtJ4iKgAKlNB0pA3i6nVG6UgegclIEqOyZGBpRSV4aTjLjZW8kfpFwVKaVQdoVkACYVn4DJigFZaAVlYFNIwU0VBTQ8SyYpfSGkBA1KgfQGAxTrm3LqXoUS0Z4CSQ0BpUgUxuiwHab2U52pLxjOIWJPiCBvlkHgAC08EAwAEQufQXJsYoBr2aWRAApLc3Gnz1KbyzMQWFngEkpJwaM0Y-sgYaXEAgMylxugougOiiwWA0ACDaaMS5cZ4gEseLc-CDzpnrI5fSoqLMO6LDGcJMSEkpIaUIPkXotzuUGSMhpEVnLSDiuRkipSKlwxwOIGADVaAtXitxvc3VYyXliXeXi0pVAoDEtIBgRWotxaVTGaqwyxBjIWDNWK3sj8sm4oIl8iwmqg2nmTK9C+0oxlUvoAqGldLblyoMotGW5AkCKryFwW5GRWSRHEAqUSuRUn4o6vQRV4keAlGdVyvSBriBGpNZpQNOKPnhvxVG25dFy6iTDRGvtoxBWmGmTc0YqL0VYFMiq5t0kLACD5USpt+q1V+o0jgUVP1aa+n6GMmdqgNVkS1d8Rdql4ByQxaK25MrxJ0XlXm-QBbRhlIqVem9kbtITCoNAbJDB-4uv3RSy4jZKBcA0p1OMr6F0bqqa2x47aAAc567lCpKRYHA5reygag6oYgZgwPeAvv-Ai9b4waQAMRoDQHaK8KGABCtySCaKg9GVQWbYWhH8YEmgaA4gtKSGIWJaQaAgUeJBJIQA)

```javascript
function stream(v) {
    let mappers = []
    let storedvalue = v

    function _stream(v = storedvalue) {
        if (v) storedvalue = v;
        mappers.map((f) => v && f(v))
        return storedvalue;
    }
    _stream.map = function(f) {
        mappers.push(f)
    }
    return _stream
}

let currentusr = "artydev"

const users = ["artydev", "dailydevtips1"]

// search user from input box
window.searchInput = () => {
    user(searchuser.value);
    currentusr = searchuser.value
}

// search user from list
window.searchUser = (usr) => {
    user(usr);
    currentusr = usr
}

// url API
function url(user) {
    return `https://dev.to/api/articles?username=${user}&per_page=1000`
}

function listUsers() {
    return `
    <ul style="text-align:left; margin-left: 10px; margin-top:10px;">
      ${users.map(u => `<li class="user" onclick="searchUser('${u}')">${u}</li>`).join("")}
    </ul>
  `
}

async function getPosts(user) {
    const response = await fetch(url(user))
    const json = await response.json()
    return json
}

function inputSearch() {
    return `<input id="searchuser" />
  `
}

function displayPost(post) {
    return `
    <li class="post">
      <div class="headpost">
        <a href="${post.url}">${post.title}</a>
      </div>
      <div class="description">
        <em>${post.description}</em>
      </div>
    </li>
  `
}

function listPosts(posts) {
    const view = `
    <ul>
      ${posts.map(displayPost).join('')}
    </ul>
  `
    return view
}

function App(posts) {
    document.body.innerHTML = `
    <div class="title">
      <h3>Dev to Posts  -  ${currentusr} ${posts.length}  articles </h3>
    </div>
    <div class="searchbar">
        <div>
          ${inputSearch()}
          <button onclick="searchInput()">search user posts</button>
        </div>
      </div>
    <div class="container">
      <div>${listPosts(posts)}</div>
      <div class="users">
        <h4>Users</h4>
        <div>${listUsers()}</div>
    </div>
  `
}

const user = stream()

user.map((usr) => {
    console.log(usr)
    getPosts(usr).then(App)
})

user(currentusr)
```